body {
    overflow-x     : hidden;
    overflow-y     : scroll;
    scroll-behavior: smooth;
}

.viewport {
    overflow: hidden;
    height  : auto;
    width   : 100%;
}

#scroll-container {
    transform: translate3d(0px, 0px, 0px) rotate(0.01deg);
}

#scroll-container>section {
    position: relative;
}


.small {
    font-size: 14px !important;
    color    : #999 !important;
}

#popup_menu {
    position        : fixed;
    top             : 0;
    left            : 100%;
    width           : 50%;
    height          : 100vh;
    background-color: #333;
    padding-top     : 4%;
    z-index         : 100;
    transition      : all 0.3s ease;
}

#popup_menu>a {
    width       : 50px;
    height       : 50px;
    float       : right;
    margin-right: 5%;
}
#popup_menu>a>img {
    width: 100%;
}

#popup_menu>.menu>ul {
    width     : 100%;
    text-align : center;
    padding-top     : 55px;
}

#popup_menu>.menu>ul>li {
    font-size     : 20px;
    padding-bottom: 20px;
    padding-top   : 20px;
    color         : #F5EAEC;
    letter-spacing: 0.5px;
}

#popup_menu>.sns>ul {
    width     : 100%;
    text-align: center;
    margin-top     : 40px;
}

#popup_menu>.sns>ul>li {
    display       : inline;
    padding-left  : 10px;
    padding-right : 10px;
    font-size     : 12px;
    color         : #F5EAEC;
    letter-spacing: 0.5px;
}

.color {
    color: #F5EAEC;
}
.color:hover {
    border-bottom: 1px solid #EBBBC4;
    display      : inline-block;
    color        : #EBBBC4
}

.s_web {
    font-size  : 0.7em;
    padding-top: 2%;
}

.s_web>span {
    transition: width 3;
}

.s_web>span:hover {
    height       : 35px;
    border-bottom: 10px solid #ffd248;
    display      : inline-block;
}

#popup_menu>ul>li:nth-child(3) {
    font-size     : 1.3em;
    padding-bottom: 6%;
}

/*-----------------------work-edit-wrap------------------------*/

.work-edit-wrap {
    position        : fixed;
    left            : 0;
    top             : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display         : none;
    z-index         : 999;
    margin          : 0 auto;
    padding         : 2% 20%;

}

.work-edit-box {
    width           : 100%;
    height          : 100%;
    border-radius   : 5px;
    background-color: #fff;
    padding         : 15px 20px;
    box-shadow      : 0 3px 20px 0 rgba(0, 0, 0, 0.2);
    z-index         : 999;
    overflow        : auto;
}

.editBox-top {
    margin-top    : 10px;
    width         : 100%;
    padding-bottom: 10px;
    border-bottom : 1px solid #67676A
}

.editBox-top>p.box-title {
    font-size    : 19px;
    line-height  : 26px;
    color        : #2A0550;
    font-family  : 'NotoSansKR-Medium';
    font-weight  : normal;
    margin-bottom: 8px;
}

.box-write {
    font-size  : 16px;
    line-height: 26px;
}

.box-sub-title {
    margin-top    : 15px;
    color         : #525e63;
    font-size     : 16px;
    line-height   : 24px;
    letter-spacing: -0.24px
}

.editBox-bottom {
    width     : 100%;
    margin-top: 10px
}

.edit-box-btn {
    width          : 100%;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    margin-top     : 44px
}

.edit-box-btn>a {
    width  : 48%;
    display: block;
}

.shop-btn {
    height          : 50px;
    background-color: #22b6cc;
    border-radius   : 5px;
    color           : #fff;
    line-height     : 50px;
    text-align      : center;
}

.close-btn {
    background-color: #bbb;
}

.goods_info {
    width           : 100%;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    background-color: #eee;
    padding         : 0 3% 3% 3%;
}

.goods_01 {
    margin-top: 15px;
    width     : 30%;
    text-align: center;
}

.goods_01 img {
    width     : 100%;
    height    : 234px;
    object-fit: cover
}

.goods_02 {
    margin-bottom: 15px;
    width     : 18%;
    text-align: center;
}

.goods_02 img {
    width     : 100%;
    height    : 150px;
    object-fit: contain
}

.goods_03 {
    margin-bottom: 15px;
    width     : 18%;
    text-align: center;
}

.goods_03 img {
    width     : 100%;
    height    : 234px;
    object-fit: contain
}

.book_info {
    width           : 100%;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    background-color: #eee;
    padding         : 0 3% 3% 3%;
}

.book_01 {
    margin-top: 25px;
    width     : 49%;
    text-align: center;
}

.book_01 img {
    width     : 100%;
    height    : 234px;
    object-fit: cover
}

.info-title {
    margin: 15px 0
}

#header .logo a {
    width : 90px;
    height: 90px;
}

#header .logo img {
    width : 90px;
    height: 90px;
}


#header {
    position: fixed;
    left    : 0;
    top     : 0;
    width   : 100vw;
    z-index : 998998;
}

#header .logo {
    position: fixed;
    left    : 46px;
    top     : 51px;
}

#header .ham {
    position       : fixed;
    right          : 46px !important;
    top            : 51px;
    width          : 38px;
    height         : 22px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    cursor         : pointer;
}

#header .ham>div {
    width     : 100%;
    height    : 2px;
    background: #000;
    transition: all .5s;
}

#header .ham.on>div:first-child {
    transform: rotate(135deg) translate(0.438vw, -0.375vw);
}

#header .ham.on>div:nth-child(2) {
    opacity: 0;
}

#header .ham.on>div:last-child {
    transform-origin: right bottom;
    transform       : rotate(45deg) translate(-0.375vw, -0.375vw)
}

#header .ham {
    position       : fixed;
    right          : 36px;
    top            : 40px;
    width          : 30px;
    height         : 18px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

#header .ham>div {
    width     : 100%;
    height    : 2px;
    background: #000;
    transition: all 1s;
}

.inner-x {
    position  : absolute;
    left      : 50%;
    top       : 50%;
    transform : translate(-50%, -50%);
    display   : flex;
    overflow-x: auto
}

.inner {
    position : absolute;
    left     : 50%;
    top      : 50%;
    transform: translate(-50%, -50%);
    display  : flex;
}

.inner .title_container>div {
    margin-bottom   : 14px;
    transform       : translateY(66.542px)rotate(5deg);
    transform-origin: 0 0;
    opacity         : 0;
}

.inner .title_container>div:nth-child(1) {
    margin-bottom: 144px;
}

.inner .title_container>div:nth-child(2) {
    margin-bottom: 41px;
}


#section01 {
    width : 100%;
    height: 1400px;
    margin: 0 auto
}

#section01 .text_container {
    position  : absolute;
    left      : 50%;
    top       : 156px;
    transform : translateX(-50%);
    z-index   : 100;
    text-align: center;
}

#section01 .thumb {
    width     : '100%';
    text-align: center;
}

#section01 .thumb>img {
    width     : 1430px;
    height    : 962px;
    margin-top: 340px;
    object-fit: cover
}

.title-box {
    margin-top: 60px;
}

.title-box>.mo-title {
    display: none;
}

#section02 {
    overflow        : hidden;
    overflow-x      : scroll;
    height          : 710px;
    background-color: #eee;
}

.scroll-test::-webkit-scrollbar {
    width           : 10px;
    height          : 15px;
    background-color: #f2f2f2;
}

.scroll-test::-webkit-scrollbar-thumb {
    width             : 10px;
    background        : #999;
    -ms-overflow-style: none;
    border-radius     : 4px;
}

.scroll-test::-webkit-scrollbar-track {
    background-color: transparent;
}

.scroll-test::-webkit-scrollbar-button {
    width : 0;
    height: 0;
}

.external {
    width  : 100%;
    height : 650px;
    padding: 0 3%;
}

.horizontal-scroll-wrapper {
    display    : flex;
    width      : 100%;
    align-items: center;
    padding    : 0;
    flex-wrap  : nowrap;
}

.img-wrapper {
    transform       : rotate(90deg);
    display         : flex;
    align-items     : center;
    justify-content : center;
    min-height      : 60vh;
    transform-origin: 60% 50%;
    transform       : translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
    transition      : 1s;
}

.img-wrapper-a1 {
    overflow  : hidden;
    display   : block;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.2);
    height    : 600px;
    width     : 400px;
}

.img-wrapper-a2 {
    overflow  : hidden;
    display   : block;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.2);
    height    : 600px;
    width     : 800px;
}

.img-wrapper img {
    transition    : .6s;
    vertical-align: top;
    height        : 600px;
    object-fit    : cover;
}

.img-wrapper a:hover {
    transition: .6s;
    transform : translateZ(.1px) scale(1) translateX(0px) translateY(-3vh);
}

#section03 {
    width : 100%;
    height: 1235px;
}

#section03 .inner {
    width          : 100%;
    display        : flex;
    justify-content: center;
    padding        : 0 5%;
}

#section03 .inner .title_container {
    text-align  : right;
    padding-top : 135px;
    opacity     : 0;
    margin-top  : 300px;
    transition  : 0.8s;
    margin-right: 5%;
}

.inquiry-menu {
    border-radius   : 3px;
    padding         : 10px 20px;
    border          : none;
    background-color: #22b6cc;
    color           : #fff;
    font-size       : 16px;
    float           : right;
}

.book-title {
    font-family: 'Arita-buriM';
    color      : #492A6A;
    font-size  : 31px;
}

.profile-img {
    opacity   : 1 !important;
    transform : scale(1.00001, 1.00001) !important;
    width     : 100%;
    margin-top: 190px !important;
}

.link-book {
    float   : right;
    position: relative;
    z-index : 99;
}

.cover {
    opacity   : 0;
    margin-top: 200px;
    transition: 0.8s
}

#section04 {
    width : 100%;
    height: 980px;
}

#section04 .inner {
    width           : 100%;
    height          : 980px;
    background-color: #F5EAEC;
    display         : flex;
    align-items     : center;
    justify-content : left;
}

.cover2 img {
    height    : 980px;
    object-fit: cover;
}

.cover2_title {
    display: none;
}

.cover3 {
    width       : 50%;
    height      : 590px;
    opacity     : 0;
    margin-top  : 180px;
    margin-right: 180px;
    transition  : 0.8s;
}

.book_sub {
    margin-left: 4%;
}

.book_sub p {
    margin-top : 70px;
    margin-left: 70px
}

.book_02 {
    margin-top: 140px;
}

.book_02 img {
    width     : 369px;
    height    : 254px;
    object-fit: cover
}

#footer {
    background     : #444;
    position       : relative;
    justify-content: center;
    align-items    : center;
    padding        : 25px 10%;
    display        : flex;
}

.foot-logo img {
    height    : 100px;
    object-fit: contain;
    opacity   : 0.7;
}

.foot-sns {
    width: 200px;
}

.foot-sns img {
    height      : 50px;
    width       : 50px;
    object-fit  : contain;
    opacity     : 0.7;
    padding-left: 15px;
}

.copyright {
    font-size     : 14px;
    color         : #959595;
    font-weight   : 300;
    line-height   : 24px;
    letter-spacing: 0.2px;
    margin-left   : 5%;
}

.canva {
    width         : 1080px;
    margin        : 0 auto;
    overflow-y    : auto;
    overflow-x    : hidden;
    position      : relative;
    padding-bottom: 5%;
}

.intro-inner {
    width          : 100%;
    padding        : 10% 24px;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
}

.intro-title {
    font-size  : 18px;
    font-weight: 600;
    margin-top : 80px;
    color      : #2A0550;
}

.author-txt {
    margin-top      : 30px;
    font-size       : 17px;
    line-height     : 38px;
    background-color: #f5f5f5;
    padding         : 20px;
}

.contents-1 {
    width: 1080px;
}

.contents-1 img {
    width: 100%;
}

.reader-txt {
    width          : 100%;
    font-size      : 17px;
    line-height    : 30px;
    padding        : 10px 16px;
    display        : flex;
    justify-content: center;
    flex-wrap      : wrap;
}

.reader-txt div {
    width        : 31%;
    height       : 300px;
    border       : 1px solid #ddd;
    padding      : 16px;
    border-radius: 6px;
    margin       : 10px;
}

.reader-txt span {
    font-size : 15px;
    color     : #555;
    margin-top: 60px;
}

.bottom-btn {
    width  : 300px;
    display: block;
    height : 50px;
    z-index: 99;
    margin : 50px auto;
}

.bottom-btn:hover {
    opacity: 0.9;
}

.middle-btn {
    width           : 240px;
    height          : 45px;
    text-align      : center;
    border-radius   : 3px;
    padding         : 0;
    background-color: #22b6cc;
    color           : #fff;
    font-size       : 16px;
    display         : block;
    float           : right;
    line-height     : 45px;
}

.middle-goods-btn { 
    width           : 90%;
    height          : 45px;
    text-align      : center;
    position        : fixed;
    bottom          : 20px;
    left            : 5%;
    border-radius   : 3px;
    background-color: #22b6cc;
    color           : #fff;
    font-size       : 16px;
    z-index         : 999;
}

/*/////////////////////////////////////*/

/* 스마트폰 가로 / 태블릿  */
@media all and (min-width:651px) and (max-width:1200px) {

    ::-webkit-scrollbar {
        display: none !important;
    }

    #header .ham {
        position       : fixed;
        right          : 46px;
        top            : 51px;
        width          : 38px;
        height         : 22px;
        display        : flex;
        flex-direction : column;
        justify-content: space-between;
        cursor         : pointer;
    }

    #header .ham>div {
        width     : 100%;
        height    : 2px;
        background: #000;
        transition: all .5s;
    }

    #header .ham.on>div:first-child {
        transform: rotate(135deg) translate(0.438vw, -0.375vw);
    }

    #header .ham.on>div:nth-child(2) {
        opacity: 0;
    }

    #header .ham.on>div:last-child {
        transform-origin: right bottom;
        transform       : rotate(45deg) translate(-0.375vw, -0.375vw)
    }


    #header .ham {
        position       : fixed;
        right          : 36px;
        top            : 40px;
        width          : 30px;
        height         : 18px;
        display        : flex;
        flex-direction : column;
        justify-content: space-between;
    }


    #header .ham>div {
        width     : 100%;
        height    : 2px;
        background: #000;
        transition: all 1s;
    }

    #popup_menu {
        position        : fixed;
        top             : 0;
        left            : 100%;
        width           : 50%;
        height          : 100vh;
        background-color: #333;
        padding-top     : 4%;
        z-index         : 100;
        transition      : all 0.3s ease;
    }

    #popup_menu>a>img {
        width       : 50px;
        float       : right;
        margin-right: 5%;
    }


    #popup_menu>.menu>ul {
        text-align: center;
        margin-top: 50px;
    }

    .work-edit-wrap {
        width           : 100%;
        height          : 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display         : none;
        z-index         : 9999;
        margin          : 0 auto;
        padding         : 5% 10%;
    }

    .work-edit-box {
        width           : 100%;
        height          : 100%;
        border-radius   : 5px;
        background-color: #fff;
        padding         : 15px 20px;
        box-shadow      : 0 3px 20px 0 rgba(0, 0, 0, 0.2);
        z-index         : 999;
        overflow        : auto;
    }

    .goods_info {
        width           : 100%;
        display         : flex;
        flex-wrap       : wrap;
        justify-content : space-between;
        background-color: #eee;
        padding         : 0 3% 3% 3%;
    }

    .goods_01 {
        margin-top: 15px;
        width     : 30%;
        text-align: center;
    }

    .goods_01 img {
        width     : 100%;
        height    : 234px;
        object-fit: cover
    }

    .goods_02 {
        margin-bottom: 15px;
        width     : 30%;
        text-align: center;
    }
    
    .goods_02 img {
        width     : 100%;
        height    : 150px;
        object-fit: contain
    }

    .goods_03 {
        margin-bottom: 15px;
        width     : 28%;
        text-align: center;
    }
    
    .goods_03 img {
        width     : 100%;
        height    : 234px;
        object-fit: contain
    }

    .book_info {
        width           : 100%;
        display         : flex;
        flex-wrap       : wrap;
        justify-content : space-between;
        background-color: #eee;
        padding         : 0 3% 3% 3%;
    }

    .book_01 {
        margin-top: 25px;
        width     : 49%;
        text-align: center;
    }

    .book_01 img {
        width     : 100%;
        height    : 234px;
        object-fit: cover
    }

    #header {
        width   : 100vw;
        position: fixed;
        left    : 0;
        top     : 0;
        z-index : 999;
    }

    #header .logo {
        position: absolute;
        left    : 24px;
        top     : 20px;
    }

    #header .logo img {
        width     : 70px;
        object-fit: contain
    }

    #section01 {
        width : 100%;
        height: 1000px;
        margin: 0 auto
    }

    #section01 .text_container {
        position  : absolute;
        left      : 50%;
        top       : 156px;
        transform : translateX(-50%);
        z-index   : 100;
        text-align: center;

    }

    .title-box>img {
        width     : 640px;
        object-fit: cover
    }

    #section01 .thumb {
        width     : '100%';
        text-align: center;
    }

    #section01 .thumb>img {
        width     : 100%;
        height    : 830px;
        margin-top: 230px;
        object-fit: cover
    }

    .title-box {
        margin-top: -20px;
    }

    .external {
        overflow        : hidden;
        width           : 100%;
        height          : 650px;
        overflow-x      : scroll;
        background-color: #eee;
        padding         : 0 3%;
        touch-action    : manipulation;
    }

    .horizontal-scroll-wrapper {
        display    : flex;
        align-items: center;
        width      : 100vw;
        padding    : 0;
        height     : 100vh;
        flex-wrap  : nowrap;
    }

    .img-wrapper {
        transform       : rotate(90deg);
        display         : flex;
        align-items     : center;
        justify-content : center;
        min-height      : 60vh;
        transform-origin: 60% 50%;
        transform       : translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
        transition      : 1s;
    }

    .img-wrapper-a1 {
        overflow  : hidden;
        display   : block;
        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.2);
        height    : 600px;
        width     : 400px;
    }

    .img-wrapper-a2 {
        overflow  : hidden;
        display   : block;
        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.2);
        height    : 600px;
        width     : 800px;
    }

    .img-wrapper img {
        transition    : .6s;
        vertical-align: top;
        height        : 600px;
        object-fit    : cover;
    }

    #section03 {
        width      : 100%;
        height     : 1005px;
        align-items: center;
    }

    #section03 .inner {
        width          : 100%;
        display        : flex;
        justify-content: center;
        padding        : 0 6%;
    }

    #section03 .inner .title_container {
        padding-top : 30px;
        opacity     : 0;
        margin-top  : 400px;
        transition  : 0.8s;
        text-align  : left;
        margin-right: 5%;
    }

    .cover {
        opacity   : 0;
        margin-top: 240px;
        transition: 0.8s;
    }

    .cover img {
        width: 100%;
    }

    .section03-txt {
        margin-top: -80px
    }

    .middle_txt {
        font-size: 14px;
    }

    .last_txt {
        font-size  : 16px;
        font-family: 'Arita-buriM';
    }

    .book-title {
        font-family: 'Arita-buriM';
        color      : #492A6A;
        font-size  : 28px;

    }

    #section04 {
        width : 100%;
        height: 1700px;
    }

    #section04 .inner {
        width           : 100%;
        height          : 100%;
        background-color: #F5EAEC;
        flex-direction  : column;
        align-items     : center;
        justify-content : center;
        padding-top     : 24px;
    }

    .cover2 {
        padding: 0 10%;
    }

    .cover2 img {
        width     : 100%;
        object-fit: contain;
        margin-top: 100px;
    }

    .cover2_title {
        display: none;
    }

    .cover3 {
        width     : 100%;
        height    : 890px;
        opacity   : 0;
        margin-top: 80px;
        transition: 0.8s;
        display   : block;
    }

    .cover3>div>img {
        margin-top: 60px
    }

    .book_sub {
        margin-left: 150px;
    }

    .book_sub p {
        margin-top : 70px;
        margin-left: 70px
    }

    .book_02 {
        margin-top: 50px;
    }

    .book_02 img {
        width     : 339px;
        height    : 244px;
        object-fit: cover
    }

    #footer {
        background     : #444;
        position       : relative;
        justify-content: center;
        align-items    : center;
        padding        : 25px 10%;
        display        : flex;
    }

    .foot-logo img {
        height    : 50px;
        object-fit: contain;
        opacity   : 0.7;
    }

    .foot-sns {
        width: 150px;
    }

    .foot-sns img {
        height      : 40px;
        width       : 40px;
        object-fit  : contain;
        opacity     : 0.7;
        padding-left: 10px;
    }

    .copyright {
        font-size     : 14px;
        color         : #959595;
        font-weight   : 300;
        line-height   : 24px;
        letter-spacing: 0.2px;
        margin-left   : 5%;
    }

    .canva {
        width  : 100%;
        margin : 100px auto;
        padding: 32px;
    }

    .editBox-top {
        width  : 100%;
        border : 0;
        padding: 0;
    }

    .author-txt {
        width: 100%;
    }

    .contents-1 {
        width: 100%;
    }

    .reader-txt div {
        width        : 46%;
        height       : 300px;
        border       : 1px solid #ddd;
        padding      : 16px;
        border-radius: 6px;
        margin       : 10px;
    }

    .reader-txt span {
        font-size : 15px;
        color     : #555;
        margin-top: 60px;
    }

    .middle-btn {
        width           : 240px;
        height          : 45px;
        text-align      : center;
        border-radius   : 3px;
        padding         : 0;
        background-color: #22b6cc;
        color           : #fff;
        font-size       : 16px;
        display         : block;
        float           : right;
        line-height     : 45px;
    }

    .intro-inner {
        width: 100%;
    }


}

@media screen and (min-width:480px) and (max-width:651px) {
    #section01 .thumb>img {
        width     : 210% !important;
        height    : 100%;
        margin-top: 20px;
        object-fit: contain;
        float     : right;
    }
}

/*--------------------------------------------------
모바일모드--------------------------------------------*/
@media screen and (max-width:650px) {

    ::-webkit-scrollbar {
        display: none !important;
    }

    #header .ham>div {
        width     : 100%;
        height    : 2px;
        background: #000;
        transition: all .5s;
    }

    #header .ham.on>div:first-child {
        transform: rotate(135deg) translate(0.438vw, -0.375vw);
    }

    #header .ham.on>div:nth-child(2) {
        opacity: 0;
    }

    #header .ham.on>div:last-child {
        transform-origin: right bottom;
        transform       : rotate(45deg) translate(-0.375vw, -0.375vw)
    }


    #header .ham {
        position       : fixed;
        right          : 16px !important;
        top            : 20px;
        width          : 24px;
        height         : 16px;
        display        : flex;
        flex-direction : column;
        justify-content: space-between;
    }


    #header .ham>div {
        width     : 100%;
        height    : 2px;
        background: #000;
        transition: all 1s;
    }

    #popup_menu {
        position        : fixed;
        top             : 0;
        left            : 100%;
        width           : 100%;
        height          : 100vh;
        background-color: #333;
        padding         : 3%;
        z-index         : 100;
        transition      : all 0.3s ease;
    }

    #popup_menu>a>img {
        width : 45px;
        float : right;
        margin: 16px 8px !important;
    }

    .menu-logo {
        width : 64px;
        margin: 8px !important;
    }

    .menu-logo img {
        width : 100%;
        height: 100%;
    }

    #popup_menu>.menu>ul {
        width     : 100%;
        text-align : center;
        padding-top     : 55px;
      }      


    #popup_menu>.sns>ul {
        width     : 100%;
        text-align: center;
    }

    #popup_menu>.sns>ul>li {
        display      : inline;
        padding-left : 10px;
        padding-right: 10px;
    }

    .goods_info {
        width           : 100%;
        display         : flex;
        flex-wrap       : wrap;
        justify-content : space-between;
        background-color: #eee;
        padding         : 0 3% 3% 3%;
    }

    .goods_01 {
        margin-top: 15px;
        width     : 100%;
        text-align: center;
    }

    .goods_01 img {
        width     : 100%;
        height    : 234px;
        object-fit: cover
    }

    .goods_02 {
        margin-bottom: 15px;
        width     : 45%;
        text-align: center;
    }

    .goods_02 img {
        width     : 100%;
        height    : 150px;
        object-fit: contain
    }

    .goods_03 {
        margin-bottom: 15px;
        width     : 30%;
        text-align: center;
    }
    
    .goods_03 img {
        width     : 100%;
        height    : 234px;
        object-fit: contain
    }
    
    .book_info {
        width           : 100%;
        display         : flex;
        flex-wrap       : wrap;
        justify-content : space-between;
        background-color: #eee;
        padding         : 0 3% 3% 3%;
    }

    .book_01 {
        margin-top: 15px;
        width     : 100%;
        text-align: center;
    }

    .book_01 img {
        width     : 100%;
        height    : 234px;
        object-fit: cover
    }

    .hugbook-email {
        color: #777
    }

    #header {
        width           : 100vw;
        position        : fixed;
        z-index         : 999;
        height          : 60px;
        background-color: #fff;
        padding         : 0 16px;
    }

    #header .logo {
        position: relative;
        top     : -15px;
        left    : 0
    }

    #header .logo img {
        width     : 54px;
        object-fit: contain;
    }

    #section01 {
        width : 100%;
        height: 800px !important;
        margin: 0 auto;
    }

    #section01 .text_container {
        position  : absolute;
        left      : 50%;
        top       : 65px;
        transform : translateX(-50%);
        z-index   : 100;
        text-align: center;

    }

    .book-title {
        font-size: 20px;
    }

    .title-box>.web-title {
        display: none;
    }

    .mo-title {
        width  : 290px;
        display: block !important;
    }

    .middle_txt {
        font-size: 14px;
    }

    #section01 .thumb {
        width     : 100%;
        height    : 100vh;
        text-align: center;
    }

    #section01 .thumb>img {
        width     : 100%;
        height    : 100%;
        margin-top: 20px;
        object-fit: cover;
        float     : right;
    }

    #section02 {
        z-index   : -1;
        overflow  : hidden;
        overflow-x: scroll;
        height    : 350px;
    }

    .external {
        overflow        : hidden;
        width           : 100%;
        overflow-x      : scroll;
        touch-action    : manipulation;
        background-color: #eee;
        height          : 350px;
    }

    .horizontal-scroll-wrapper {
        display    : flex;
        align-items: center;
        width      : 100vw;
        flex-wrap  : nowrap;
    }

    .img-wrapper {
        transform      : rotate(90deg);
        display        : flex;
        align-items    : center;
        justify-content: center;
        min-height     : 60vh;
        transform      : translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
        transition     : 1s;
    }


    .img-wrapper-a1 {
        overflow  : hidden;
        display   : block;
        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.2);
        height    : 300px;
        width     : 200px;
        transform : scale(0.9);
    }

    .img-wrapper-a2 {
        overflow  : hidden;
        display   : block;
        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.2);
        height    : 300px;
        width     : 400px;
        transform : scale(0.9);
    }

    .img-wrapper img {
        transition    : .6s;
        vertical-align: top;
        height        : 300px;
        object-fit    : cover;
    }



    #section03 {
        width      : 100%;
        height     : 700px;
        padding    : 0 24px;
        align-items: center;
    }

    #section03 .inner {
        width          : 100%;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
    }

    #section03 .inner .title_container {
        padding-top : 30px;
        opacity     : 0;
        margin-top  : 350px;
        transition  : 0.8s;
        text-align  : left;
        margin-right: 30px;
        padding-left: 30px;
    }

    .title_container img {
        width      : 80%;
        object-fit : contain;
        align-items: center;
    }

    .cover {
        display: none;
    }

    .section03-txt {
        margin-top: -95px
    }

    .profile-img {
        margin-top: 95px !important;
    }

    #section04 {
        width     : 100%;
    }

    #section04 .inner {
        width           : 100%;
        height          : 1100px;
        background-color: #F5EAEC;
        flex-direction  : column;
        align-items     : center;
        justify-content : center;
    }

    .cover2 {
        display: none;
    }

    .cover2 img {
        width     : 100%;
        height    : 100%;
        object-fit: cover;
    }

    .cover2_title {
        display: block;
        text-align     : center;
        width: 100%;
    }

    .cover2_title img {
        width     : 70%;
        object-fit: cover;
    }

    .cover3 {
        width     : 100%;
        opacity   : 0;
        margin    : 40px auto;
        transition: 0.8s;
        display   : block;
    }

    .cover3>div>img {
        margin-top: 0
    }

    .book_sub {
        padding: 0 3%;
    }

    .book_sub p {
        margin-left: 0 !important;
    }

    .book_02 {
        margin-top: 50px;
    }

    .last_txt {
        font-size  : 16px;
        font-family: 'Arita-buriM';
    }

    .book-title {
        font-family: 'Arita-buriM';
        color      : #492A6A;
        font-size  : 20px;
    }

    #footer {
        background     : #444;
        position       : relative;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        padding        : 20px 24px;
        text-align     : center;
    }

    #footer .foot-logo>img {
        height       : 50px;
        object-fit   : contain;
        opacity      : 0.7;
        margin-bottom: 8px;
    }

    .copyright {
        font-size     : 12px;
        color         : #959595;
        font-weight   : 300;
        line-height   : 20px;
        letter-spacing: 0.2px
    }

    .work-edit-wrap {
        width           : 100%;
        height          : 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display         : none;
        z-index         : 9999;
        margin          : 0 auto;
        padding         : 5%;
    }

    .canva {
        width  : 100%;
        margin : 80px auto;
        padding: 24px;
    }

    .editBox-top {
        width  : 100%;
        border : 0;
        padding: 0;
    }

    .middle-btn {
        width           : 90%;
        text-align      : center;
        position        : fixed;
        bottom          : 20px;
        border-radius   : 3px;
        background-color: #22b6cc;
        color           : #fff;
        font-size       : 16px;
        z-index         : 999;
    }

    .author-txt {
        width: 100%;
    }

    .contents-1 {
        width: 100%;
    }

    .bottom-btn {
        display: none;
    }

    .reader-txt div {
        width        : 100%;
        height       : 300px;
        border       : 1px solid #ddd;
        padding      : 16px;
        border-radius: 6px;
        margin       : 10px;
    }

    .reader-txt span {
        font-size : 15px;
        color     : #555;
        margin-top: 60px;
    }

}