@media(min-width: 1400px) {
    .container {
        max-width: 1280px;
    }
}
@media(max-width: 1800px) {
    .aa-pos2 {
        top: -15px;
        right: -103px;
    }
    .aa-pos2 img {
        max-width: 240px;
    }
    .br-pos {
        height: 460px;
    }
    .contact-wrap {
        margin-top: -260px;
        padding: 260px 0 250px;
    }
}
@media(max-width: 1600px) {
    .ch-box {
        width: 850px;
    }
    .ch-img-pos {
        max-width: 45%;
    }
}
@media(max-width: 1480px) {
    .aa-pos2 {
        top: 15px;
        right: -40px;
    }
    .aa-pos2 img {
        max-width: 200px;
    }
    .main-quote-wrap {
        margin-top: -230px;
        padding: 448px 0 50px;
    }
    .about-left > img {
        max-width: 90%;
    }
}
@media(max-width: 1400px) {
    body {
        font-size: 14px;
    }
    .rabbit1:after {
        right: 0;
    }
    .about-book-right > img {
        max-width: 90%;
    }
    .mq-box {
        height: 449px;
        max-width: 848px;
    }
    .mq-content {
        max-width: 590px;
        padding-top: 120px;
        padding-left: 80px;
    }
    .mq-content p {
        font-size: 1em;
        line-height: 1.3em;
    }
    .lg-title {
        font-size: 2.4em;
    }
    .font-4-4em {
        font-size: 3.5em !important;
    }
    .article-title {
        font-size: 1.3em;
    }
    .gallery-box {
        max-width: 90%;
        margin: 0 auto;
    }
    .social-links a {
        margin-left: 10px;
    }
    .contact-wrap {
        margin-top: -190px;
    }
    .video-box {
        margin-bottom: 30px;
    }
}
@media(max-width: 1366px) {
    .banner-cloud {
        top: -195px;
    }
    .inner-page-banner {
        height: 322px;
    }
    .selected-work-wrap {
        margin-top: -200px;
    }
    .ch-box {
        width: 750px;
    }
    .ch-img-pos {
        max-width: 45%;
    }
    .mxw-660 {
        max-width: 560px;
    }
    .ch-block {
        height: 756px;
    }
}
@media(max-width: 1200px) {
    .br-pos {
        height: 370px;
    }
    .ab-start-icon {
        width: 100px;
        left: -20px;
        bottom: -50px;
    }
    .contact-wrap {
        margin-top: -180px;
        padding: 250px 0 190px;
    }
    .contact-info-box {
        max-width: 90%;
    }
    .rabbit2:after {
        width: 110px;
        height: 136px;
    }
    .rabbit1:after {
        right: 0;
        width: 100px;
        top: -90px;
        height: 146px;
    }
    .main-quote-wrap {
        margin-top: -150px;
        padding: 338px 0 50px;
    }
    .main-menu ul li a {
        padding: 0 10px;
    }
    .video-box {
        background-size: 100%;
        padding-bottom: 65px;
        margin-bottom: 50px;
    }
    .copyright {
        max-width: 50%;
        text-align: center;
    } 
    .nice-work-block {
        background-size: 100%;
    }
    .mxw-705 {
        max-width: 615px;
    }
    .selected-work-wrap {
        margin-top: -150px;
    }
    .ch-img-pos {
        max-width: 38%;
    }
    .ch-block {
        height: 716px;
    }
    .ch-box {
        width: 650px;
        height: 460px;
    }
    .mxw-660 {
        max-width: 480px;
    }
    .ch-block {
        height: 634px;
    }
}
@media(max-width: 992px) {
    .banner-flex {
        display: block !important;
        height: auto;
        text-align: center;
    }
    .banner-flex .w-60 {
        width: 100%;
    }
    .banner-right {
        position: relative;
    }
    .banner-right {
        position: relative;
        top: inherit;
        transform: inherit;
        height: auto;
        display: block;
        text-align: center;
    }
    .banner-wrap {
        height: auto;
        padding-bottom: 30px;
    }
    .banner-flex .mxw-450 {
        margin: 0 auto;
    }
    .banner-bottom-icon {
        margin-top: 40px !important;
    }
    .about-left,
    .about-book-right {
        text-align: center;
        order: inherit !important;
        margin-bottom: 30px;
    }
    .ab-start-icon {
        width: 80px;
        left: 20px;
        bottom: 20px;
    }
    .mxw-450 {
        max-width: 100%;
    }
    .characters-wrap {
        background-size: cover;
        background-position: left bottom;
    }
    .review-box {
        margin: 0 auto;
        display: block;
    }
    .rabbit1:after {
        right: 0;
        width: 100px;
        top: -60px;
        height: 146px;
    }
    .contact-wrap {
        background-size: cover;
        background-position: center bottom;
    }
    .contact-block .col-lg-7 {
        margin-bottom: 40px;
    }
    .article-block .col-lg-4 + .col-lg-4 {
        margin-top: 30px;
    }
    .article-block {
        padding: 80px 0 70px;
    }
    .header-wrap .container,
    .footer-panel .container {
        max-width: 100%;
        padding: 0 15px;
    }
    .what-said-wrap {
        background-size: cover;
        background-position: center center;
    }
    .header-wrap {
        background-size: cover;
        background-position: left bottom;
    }
    .main-quote-wrap {
        background-size: cover;
        background-position: left bottom;
    }
    .about-book-right {
        max-width: 80%;
        margin: 0 auto;
    }
    .footer-menu {
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-menu li {
        padding: 5px 0;
    }
    
    .mobile-inner-header {
        display: block;
        margin-top: 13px;
        margin-right: 10px;
        margin-left: -10px;
        width: 40px;
        height: 24px;
        position: relative;
    }
    .mobile-inner-header-icon {
        color: var(--White);
        font-size: 25px;
        text-align: center;
        float: right;
        position: relative;
        -webkit-transition: background .5s;
        -moz-transition: background .5s;
        -o-transition: background .5s;
        transition: background .5s;
        margin-top: 6px
    }
    .mobile-inner-header-icon {
        color: var(--White);
        height: 20px;
        font-size: 25px;
        text-align: center;
        float: right;
        width: 40px;
        position: relative;
        -webkit-transition: background .5s;
        -moz-transition: background .5s;
        -o-transition: background .5s;
        transition: background .5s;
        z-index: 99;
        margin-top: 4px
    }
    .mobile-inner-header-icon:hover {
        cursor: pointer
    }
    .mobile-inner-header-icon span {
        position: absolute;
        left: calc((100% - 20px)/ 2);
        top: calc((100% - 21px)/ 2);
        width: 25px;
        height: 2px;
        background-color: var(--Black);
    }
    .white-header .mobile-inner-header-icon span {
        background-color: var(--White);
    }
    .mobile-inner-header-icon span:nth-child(1) {
        transform: translateY(4px) rotate(0)
    }
    .mobile-inner-header-icon span:nth-child(2) {
        transform: translateY(-4px) rotate(0)
    }
    .mobile-inner-header-icon span:nth-child(3) {
        display: none
    }
    .mobile-inner-header-icon-click span:nth-child(1) {
        animation-duration: .5s;
        animation-fill-mode: both;
        animation-name: clickfirst
    }
    .mobile-inner-header-icon-click span:nth-child(2) {
        animation-duration: .5s;
        animation-fill-mode: both;
        animation-name: clicksecond
    }
    @keyframes clickfirst {
        0% {
            transform: translateY(4px) rotate(0)
        }
        100% {
            transform: translateY(0) rotate(45deg)
        }
    }
    @keyframes clicksecond {
        0% {
            transform: translateY(-4px) rotate(0)
        }
        100% {
            transform: translateY(0) rotate(-45deg)
        }
    }
    .mobile-inner-header-icon-out span:nth-child(1) {
        animation-duration: .5s;
        animation-fill-mode: both;
        animation-name: outfirst
    }
    .mobile-inner-header-icon-out span:nth-child(2) {
        animation-duration: .5s;
        animation-fill-mode: both;
        animation-name: outsecond;
        margin-top: 3px;
        top: calc((100% - 19px)/ 2)
    }
    .mobile-inner-header-icon-out span:nth-child(3) {
        display: block;
        top: calc((100% - 17px)/ 2)
    }
    @keyframes outfirst {
        0% {
            transform: translateY(0) rotate(-45deg)
        }
        100% {
            transform: translateY(-4px) rotate(0)
        }
    }
    @keyframes outsecond {
        0% {
            transform: translateY(0) rotate(45deg)
        }
        100% {
            transform: translateY(4px) rotate(0)
        }
    }
    .mobile-inner-header-icon {
        left: 0;
        position: relative;
    }
    .mobile-inner-header-icon.mobile-inner-header-icon-click {
        z-index: 10;
        left: 0px;
    }
    .mobile-inner-header-icon.mobile-inner-header-icon-click span {
        background-color: var(--Black);
    }
    .main-menu {
        background: var(--Blue);
        position: fixed;
        z-index: 9;
        top: 0;
        right: -100%;
        width: 300px;
        transition: all .5s ease-in-out 0s;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: none;
        overflow-y: auto;
        height: 100%;
    }
    .main-menu.active {
        right: 0;
    }
    .main-menu ul {
        margin: 0;
        width: 100%;
        text-align: left;
        display: block;
        padding: 60px 0 0 20px;
    }
    .main-menu ul li {
        display: block;
        padding: 0;
        border-bottom: solid 1px var(--LBlue);
    }
    .main-menu ul li a {
        display: block;
        padding: 14px 0;
        font-size: 1.1em;
        font-weight: 500;
        color: var(--White);
    }
    .main-menu ul li a.active:before {
        left: 0;
        bottom: -1px;
        transform: inherit;
    }
    .overflow-active {
        overflow: hidden;
    }
    .overlay-bg {
        background: rgba(0, 0, 0, 0.2);
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        display: none;
    }
    .overlay-bg.active {
        z-index: 1;
        display: block;
    }
    .desktop-ab-star {
        display: none;
    }
    .mob-ab-star {
        display: block;
    }
    .about-wrap .aa-pos1 {
        left: -10px;
    }
    .footer-bottom > .d-flex {
        display: block !important;
        text-align: center;
    }
    .footer-bottom {
        padding: 28px 0;
    }
    .footer-bottom .fb-author {
        padding: 20px 0;
    }
    .copyright {
        margin: 0 auto;
    }
    .characters-img.order-2 {
        order: inherit !important;
    }
    .books-rabbit {
        max-width: 200px;
    }
    .inner-page-banner {
        height: 252px;
    }
    .banner-cloud {
        top: -115px;
    }
    .balloons-img {
        max-width: 250px;
    }
    .characters-img.text-end {
        text-align: left !important;
    }
    .book-about-wrap.about-wrap .aa-pos1 {
        max-width: 180px;
    }
    .book-about-wrap.about-wrap .aa-pos2 {
        max-width: 120px;
        top: 65px;
        right: 7px;
    }
    .book-about-wrap.about-wrap .aa-pos2 img {
        max-width: 100%;
    }
    .empower-logo img {
        max-width: 220px;
    }
    .nice-work-block .sm-title {
        font-size: 1.4em;
    }
    .mxw-705 {
        max-width: 455px;
    }
    .nice-work-block {
        height: 429px;
        width: 100%;
        margin: -50px auto 0;
        padding-right: 70px;
        padding-top: 80px;
    }
    .selected-work-wrap {
        margin-top: -120px;
        padding: 150px 0 0;
    }
    .sw-left {
        padding-bottom: 10px;
    }
    .selected-work-wrap .selected-work-img {
        padding-bottom: 120px;
    }
    .ch-box {
        width: 650px;
        height: 400px;
    }
    .ch-block {
        height: 534px;
    }
}
@media(max-width: 768px) {
    .aa-pos2 {
        top: 15px;
        right: 0;
    }
    .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .contact-wrap {
        margin-top: -90px;
        padding: 180px 0 150px;
    }
    .characters-wrap {
        padding: 90px 0 0;
    }
    .main-quote-wrap {
        background-size: cover;
        background-position: center bottom;
    }
    .main-quote-wrap {
        margin-top: -90px;
        padding: 188px 0 50px;
    }
    .play-button img {
        max-width: 55px;
    }
    .what-said-wrap .cloud-img {
        margin-top: -20px;
    }
    .book-sec1 {
        padding: 140px 0 20px 0;
    }
    .book-wrap {
        padding-bottom: 130px;
    }
    .banner-cloud {
        top: -75px;
    }
    .inner-page-banner {
        height: 222px;
    }
    .balloons-img {
        max-width: 210px;
    }
    .book-wrap .sm-title {
        font-size: 1.05em;
    }
    .amazon-btn.me-3 {
        margin-right: 0 !important;
    }
    .characters-img {
        bottom: 0;
    }
    .header-rabbit {
        max-width: 180px;
    }
    .h-352 {
        height: 234px !important;
    }
    .about-wrap .ps-5 {
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
    .about-book-right {
        margin-bottom: 20px;
    }
    .about-wrap {
        padding: 60px 0;
    }
    .about-wrap .sm-title {
        font-size: 1.05em;
    }
    .selected-work-wrap {
        margin-top: -90px;
    }
    .connecting-tae-text {
        font-size: 1.2em;
    }
    .ch-box {
        width: 100%;
    }
    .ch-block {
        display: block !important;
        height: auto;
        padding-top: 280px;
    }
    .ch-img-pos {
        top: 0px;
        transform: inherit;
        right: 0;
    }
    .ch-box {
        margin-top: 0;
    }
    .ch-img-pos {
        max-width: 280px;
    }
    .mxw-660 {
        max-width: 77%;
    }
    .ch-box .lg-title.mb-3 {
        margin-bottom: 0.5rem !important;
        font-size: 1.8em;
    }
    .ch-box .sm-title {
        font-size: 1.05em;
    }
    .blog-wrap {
        padding: 60px 0 0;
    }
}
@media(max-width: 575px) {
    body {
        font-size: 14px;
    }
    .review-box {
        width: 100%;
    }
    .br-pos {
        max-width: 100%;
        height: auto;
    }
    .aa-pos1 img {
        max-width: 80px;
    }
    .aa-pos2 img {
        max-width: 100px;
    }
    .font-4-4em {
        font-size: 3em !important;
    }
    .contact-info-box {
        max-width: 100%;
    }
    .social-links a {
        text-decoration: none;
        margin-right: 10px;
    }
    .social-links a img {
        max-width: 45px;
    }
    .contact-wrap {
        margin-top: -50px;
        padding: 120px 0 100px;
    }
    .mq-box {
        background: transparent;
    }
    .mq-content {
        max-width: 100%;
        background: #fbd29c;
        border: solid 4px #9a1702;
        padding: 40px 20px;
        border-radius: 10px;
    }
    .rainbow-lefttop:before {
        width: 50%;
    }
    .main-logo img {
        max-height: 80px;
    }
    .header-wrap {
        height: 130px;
    }
    .custom-breadcrumb .breadcrumb {
        margin-bottom: 0;
    }
    .inner-page-banner {
        height: 182px;
    }
    .mxw-705 {
        max-width: 295px;
    }
    .nice-work-block .mt-3.mb-3 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .nice-work-block {
        height: 319px;
        margin: -50px auto 0;
        padding-right: 0px;
        padding-top: 140px;
    }
    .lblue-btn {
        padding: 10px 18px;
        font-size: 1.1em;
    }
    .empower-logo img {
        max-width: 150px;
    }
    .characters-wrap {
        padding: 180px 0 0;
        margin-top: -63px;
    }
    .selected-work-wrap .sm-title {
        font-size: 1.05em;
    }
    .connecting-tae-text {
        font-size: 1em;
    }
}
@media(max-width: 480px) {
    .main-logo img {
        max-width: 110px;
    }
    .header-wrap {
        height: 100px;
    }
    .header-flex {
        padding-top: 10px;
    }
    .banner-block {
        padding: 65px 0 0 0;
    }
    .lg-title {
        font-size: 2.1em;
    }
    .lg-title br {
        display: none;
    }
    .review-box {
        padding: 50px 41px 0 47px;
    }
    .font-4-4em {
        font-size: 2.5em !important;
    }
    .mt-5.pt-4 {
        padding-top: 0 !important;
    }
    .main-quote-wrap {
        margin-top: -70px;
        padding: 98px 0 50px;
    }
    .contact-wrap {
        margin-top: -70px;
    }
    .contact-block p,
    .article-box p {
        font-size: 1.1em;
    }
    .article-date.my-3 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .copyright {
        max-width: 100%;
    }
    .lg-title br {
        display: none;
    }
    .inner-page-banner {
        padding: 0;
    }
    .header-rabbit {
        max-width: 160px;
    }
    .balloons-img {
        max-width: 160px;
    }
    .character-bg-wrap {
        padding: 60px 0 0;
    }
    .banner-cloud {
        top: -55px;
    }
    .mxw-660 {
        max-width: 80%;
    }
}