@media only screen and (max-width: 1599px) {
    /* -- Universal Setting
    --------------------------------------------------*/
    body {
        font-size: 15px;
    }
    
    /* -- Color & Font
    --------------------------------------------------*/
    .site-font-48px { font-size: 44px; }
    .site-font-40px { font-size: 36px; }
    .site-font-36px { font-size: 32px; }
    .site-font-32px { font-size: 30px; }
    .site-font-28px { font-size: 28px; }
    .site-font-24px { font-size: 24px; }
    .site-font-20px { font-size: 20px; }
    .site-font-18px { font-size: 18px; }
    .site-font-16px { font-size: 16px; }
    .site-font-14px { font-size: 14px; }
    .site-font-13px { font-size: 13px; }
    .site-font-12px { font-size: 12px; }
    
    /* -- Customized Style
    --------------------------------------------------*/
    .site-fixed-width {
        width: 1108px !important;
    }
    
    /* -- Roaster / Product -- */
    #containerRoasterSpec {
        width: 1108px;
    }
    
    /* -- NEWS -- */
    #containerBlog {
        width: 1108px;
    }
    
    /* -- USER -- */
    #sectionMyFavorite .section-container {
        width: 900px;
    }
    
    #containerFavorites .styled-card-container > .styled-card {
        width: -webkit-calc((100% - 30px * 2) / 3);
        width: -moz-calc((100% - 30px * 2) / 3);
        width: calc((100% - 30px * 2) / 3);
    }

    #containerFavorites .styled-card-container > .styled-card ~ .styled-card {
        margin-left: 30px;
    }

    #containerFavorites .styled-card-container > .styled-card:nth-child(n+4) {
        margin-top: 28px;
    }
    
    #containerFavorites .styled-card-container > .styled-card:nth-child(3n+1) {
        margin-left: auto;
    }
    
    /* -- Section
    --------------------------------------------------*/
    .content-section .section-container.fixed-width,
    .content-section .section-container.fixed-width-pc,
    .content-section .section-container.fixed-width-tablet {
        width: 1108px;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Modal -- */
    .styled-modal .modal-video-container {
        width: 1040px;
        height: 585px;
    }
}

@media only screen and (max-width: 1199px) {
    /* -- Universal Setting
    --------------------------------------------------*/
    body {
        font-size: 14px;
    }
    
    /* -- Customized Style
    --------------------------------------------------*/
    .site-fixed-width {
        width: 960px !important;
    }
    
    .banner-fp .banner-cover .banner-slogan {
        right: 0;
        bottom: 0;
    }

    /* --- Home Banner -- */
    
    /* -- Roaster / Product -- */
    #containerRoasterSpec {
        width: 960px;
    }
    
    /* -- NEWS -- */
    #containerBlog {
        width: 960px;
    }

    /*  APP  */
    #sectionAppStore.plus {
        background-size: auto 100%;
    }
    
    /* -- USER -- */
    #sectionMyFavorite .section-container {
        width: 630px;
    }
    
    #containerFavorites .styled-card-container > .styled-card {
        width: -webkit-calc((100% - 30px * 1) / 2);
        width: -moz-calc((100% - 30px * 1) / 2);
        width: calc((100% - 30px * 1) / 2);
    }

    #containerFavorites .styled-card-container > .styled-card ~ .styled-card {
        margin-left: 30px;
    }

    #containerFavorites .styled-card-container > .styled-card:nth-child(n+3) {
        margin-top: 28px;
    }

    #containerFavorites .styled-card-container > .styled-card:nth-child(3n+1) {
        margin-left: 30px;
        clear: none;
    }
    
    #containerFavorites .styled-card-container > .styled-card:nth-child(2n+1) {
        margin-left: auto;
        clear: both;
    }
    
    #containerWarranties {
        width: 30em;
    }

    #containerWarranties .styled-card-container > .styled-card {
        width: 100%;
    }

    #containerWarranties .styled-card-container > .styled-card ~ .styled-card {
        margin-left: auto;
    }

    #containerWarranties .styled-card-container > .styled-card:nth-child(n+2) {
        margin-top: 1.5em;
    }

    #containerWarranties .styled-card-container > .styled-card:nth-child(2n+1) {
        clear: none;
    }
    
    /* -- Header
    --------------------------------------------------*/
    #siteHeader #siteHeaderCart {
        margin-right: 1.5em;
    }
    
    #siteHeader #siteHeaderMember {
        margin-right: 1em;
    }
    
    #siteHeader #siteHeaderLang {
        margin-right: 1em;
    }
    
    /* -- Nav
    --------------------------------------------------*/
    ul.nav-main > li {
        margin-left: 1em;
    }
    ul.nav-product-dropdown > li{
        margin-left: 0;
    }
    
    /* -- Section
    --------------------------------------------------*/
    .content-section .section-container.fixed-width,
    .content-section .section-container.fixed-width-pc,
    .content-section .section-container.fixed-width-tablet {
        width: 960px;
    }
    
    /* -- Footer
    --------------------------------------------------*/
    #siteFooter ul.footer-list > li ~ li {
        /* margin-left: 2.75em; */
        margin-left: 0;
        /* margin-left: 2.75em; */
        margin-left: 0;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Modal -- */
    .styled-modal .modal-video-container {
        width: 880px;
        height: 495px;
    }
    
    /* -- Styled Block -- */
    .styled-block-about .block-about-content {
        padding-left: 5%;
        padding-right: 5%;
    }

    .styled-block-about .block-about-content .block-content-container {
        margin-top: 3em;
        margin-bottom: 2em;
    }

    .styled-block-about .block-header {
        margin-bottom: 3em;
    }

    .styled-block-about .block-body {
        margin-bottom: 2em;
    }

    .styled-block-about ul.block-list > li ~ li {
        margin-top: 1.5em;
    }
    
    /* -- Styled Card -- */
    .styled-card-warranty .card-inner {
        padding: 0.5em;
    }

    .styled-card-warranty .card-inner .card-content-container {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        padding: 0.5em;
    }
    
    .styled-card-warranty ul.card-main-detail > li ~ li {
        margin-top: 1.5em;
    }
    
    .styled-card-warranty .card-title {
        font-size: 1.25em;
    }
    
    @media only screen and (orientation: portrait) {
        
    }

    @media only screen and (orientation: landscape) {
        
    }
}

@media only screen and (max-width: 991px) {
    /* -- Customized Style
    --------------------------------------------------*/
    .site-fixed-width {
        width: 630px !important;
    }
    
    .banner-fp .banner-cover .banner-content{
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }


    .banner-fp .banner-cover .banner-subLogo {
        width: 100%;
        /* top: 72%; */
        bottom: 10%;
        /* top: 72%; */
        bottom: 10%;
        left: 50%;
        text-align: center;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .banner-fp .banner-cover ul.banner-list-img {
        padding: 0;
        column-gap: 4px;
        justify-content: center;
    }

    .banner-fp .banner-cover ul.banner-list-img > li > img {
        height: 44px;
    }

    .banner-fp .banner-cover .banner-list-text {
        width: 100%;
        max-width: 100%;
        text-align: center;
        font-size: 2.75rem;
        letter-spacing: 0.4px;
    }
    
    .banner-fp .banner-intro .banner-heading .heading-title {
        font-size: 2.5em;
    }

    .banner-fp .banner-content .banner-title {
        transform: scale(1.7);
    }
    .banner-fp .banner-subtitle {
        margin-top: 1em;
    }

    .banner-fp .banner-intro .banner-text {
        font-size: 1.5em;
    }
    
    .banner-fp .banner-slogan .slogan-title {
        font-size: 3em;
    }

    .banner-fp .banner-slogan .slogan-subtitle {
        font-size: 2.5em;
    }
    
    /* -- Home -- */
    #pageHome #homeBody .section-heading {
        text-align: center;
    }
    
    /* #homeFeatures {
        padding-top: 60px;
    } */
    
    #homeOurAdvantages .section-heading {
        float: none;
        width: auto;
    }

    #homeOurAdvantages .section-heading > .imgBox {
        display: none;
    }

    #homeOurAdvantages .section-body {
        float: none;
        width: auto;
        margin-left: auto;
    }
    
    #homeOurAdvantages #containerHomeAdvantages {
        width: 500px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #homeAppConnection .section-heading {
        width: auto;
    }
    
    #homeAppConnection .app-content .app-intro {
        width: 47.5%;
    }
    
    #homeAppConnection .app-content .app-intro .links-container {
        flex-direction: column;
        row-gap: 3rem;
        align-items: flex-end;
        text-align: right;
    }

    #homeAppConnection .app-content .app-intro ul.app-list {
        margin: 1.5em auto 0;
    }

    #homeAppConnection .app-content .app-figure {
        width: 47.5%;
        margin-top: 15%;
        /* margin-top: 0 */
        margin-left: 5%;
    }
    
    #homeMasterRecommend .section-heading {
        float: none;
        width: auto;
    }

    /* #homeMasterRecommend .section-body {
        float: none;
        width: auto;
        margin-left: auto;
    } */
    
    #homeMasterRecommend .master-content .master-text {
        /* width: 47.5%; */
        margin-top: 10em;
        margin-right: 0;
    }

    /* #homeMasterRecommend .master-content .master-championship .owl-carousel:not(.owl-loaded) > .item {
        float: left !important;
        width: 30% !important;
        margin: 0 auto 0 5% !important;
        clear: none !important;
    }
    
    #homeMasterRecommend .master-content .master-championship .owl-carousel:not(.owl-loaded) > .item:first-child {
        margin-left: auto !important;
    } */

    /* #homeMasterRecommend .master-content img.master-img {
        left: 0;
        width: 47.5%;
        max-width: none;
        height: auto;
        max-height: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    } */

    /* #homeMasterRecommend .master-content .master-signature {
        width: 12em;
        max-width: 47.5%;
        margin-top: 3em;
        margin-left: auto;
        margin-right: 0;
    } */

    /* #homeMasterRecommend .master-content .master-signature > img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
    } */

    /* #homeMasterRecommend .master-content .master-signature > img ~ img {
        margin-top: 2em;
        margin-left: auto;
    } */
    
    /* -- Roaster / Product -- */
    #containerRoasterInfo,
    #containerProductInfo {
        width: 480px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #containerRoasterTutorialVideo .styled-card-container > .styled-card {
        float: none;
    }
    
    #containerRoasterTutorialVideo .styled-card-container.col-videos-2 > .styled-card {
        width: auto;
    }
    
    #containerRoasterTutorialVideo .styled-card-container.col-videos-2 > .styled-card ~ .styled-card {
        margin-top: 3em;
        margin-left: auto;
    }

    #containerRoasterTutorialVideo .styled-card-container.col-videos-2 > .styled-card:nth-child(2n+1) {
        clear: none;
    }
    
    #containerRoasterTutorialVideo .styled-card-container.col-videos-3 > .styled-card {
        width: auto;
    }

    #containerRoasterTutorialVideo .styled-card-container.col-videos-3 > .styled-card ~ .styled-card {
        margin-top: 3em;
        margin-left: auto;
    }

    #containerRoasterTutorialVideo .styled-card-container.col-videos-3 > .styled-card:nth-child(3n+1) {
        clear: none;
    }
    
    #containerRoasterTutorialVideo .styled-card-container > .styled-card .card-content {
        width: 630px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    html:lang(en) #containerRoasterFeature #imgRoasterFeature {
        width: 630px;
    }
    
    html:lang(en) #containerRoasterFeature #imgRoasterFeature #imgRoasterPC {
        display: none;
    }

    html:lang(en) #containerRoasterFeature #imgRoasterFeature #imgRoasterM {
        display: block;
        width: 20em;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    html:lang(en) #containerRoasterFeature #imgRoasterFeature #listRoasterFeature {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: 2em;
        counter-reset: item;
    }

    html:lang(en) #containerRoasterFeature #imgRoasterFeature #listRoasterFeature > li {
        display: block;
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto;
        margin-left: 1.5em;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    
    html:lang(en) #containerRoasterFeature #imgRoasterFeature #listRoasterFeature > li::before {
        display: inline-block;
        width: 1.5em;
        margin-left: -1.5em;
        text-align: left;
        vertical-align: bottom;
    }

    html:lang(en) #containerRoasterFeature #imgRoasterFeature #listRoasterFeature > li::before {
        content: counter(item)".";
        counter-increment: item;
    }
    
    html:lang(en) #containerRoasterFeature #imgRoasterFeature #listRoasterFeature > li ~ li {
        margin-top: 1em;
    }
    
    #sectionRoasterSpec .section-body {
        background-image: url(../images/m-bg-roaster-spec.svg);
    }
    #sectionRoasterSpec.bg-1 .section-body {
        background-image: url(../images/m-bg-roaster-spec-01.jpg);
    }
    
    #containerRoasterSpec {
        width: 480px;
    }

    #containerRoasterSpec #listRoasterSpec > li {
        float: none;
        width: auto;
    }
    
    #containerRoasterSpec #listRoasterSpec > li ~ li {
        margin-left: auto;
    }

    #containerRoasterSpec #listRoasterSpec > li:first-child {
        border-bottom: none;
    }

    #containerRoasterGuarantee .styled-card-container > .styled-card {
        width: -webkit-calc((100% - 2em * 3) / 4 - 0.01px);
        width: -moz-calc((100% - 2em * 3) / 4 - 0.01px);
        width: calc((100% - 2em * 3) / 4 - 0.01px);
    }
    
    html:lang(en) #containerRoasterGuarantee .styled-card-container > .styled-card {
        width: -webkit-calc((100% - 4em * 2) / 3 - 0.01px);
        width: -moz-calc((100% - 4em * 2) / 3 - 0.01px);
        width: calc((100% - 4em * 2) / 3 - 0.01px);
    }

    #containerRoasterGuarantee .styled-card-container > .styled-card ~ .styled-card {
        margin-left: 2em;
    }
    
    html:lang(en) #containerRoasterGuarantee .styled-card-container > .styled-card ~ .styled-card {
        margin-left: 4em;
    }
    
    /* -- APP -- */
    #containerAppDetail {
        padding-top: 0;
        padding-bottom: 0;
    }
    /* -- SHOP -- */
    #containerProducts .styled-card-container > .styled-card,
    #containerCollections .styled-card-container > .styled-card {
        width: -webkit-calc((100% - 30px * 1) / 2);
        width: -moz-calc((100% - 30px * 1) / 2);
        width: calc((100% - 30px * 1) / 2);
    }

    #containerProducts .styled-card-container > .styled-card ~ .styled-card,
    #containerCollections .styled-card-container > .styled-card ~ .styled-card {
        margin-left: 30px;
    }

    #containerProducts .styled-card-container > .styled-card:nth-child(n+3),
    #containerCollections .styled-card-container > .styled-card:nth-child(n+3) {
        margin-top: 28px;
    }

    #containerProducts .styled-card-container > .styled-card:nth-child(3n+1),
    #containerCollections .styled-card-container > .styled-card:nth-child(3n+1) {
        margin-left: 30px;
        clear: none;
    }
    
    #containerProducts .styled-card-container > .styled-card:nth-child(2n+1),
    #containerCollections .styled-card-container > .styled-card:nth-child(2n+1) {
        margin-left: auto;
        clear: both;
    }

    /* -- NEWS -- */
    #containerNews .styled-card-container.news-type-1 > .styled-card {
        float: left !important;
        width: -webkit-calc((100% - 30px * 1) / 2) !important;
        width: -moz-calc((100% - 30px * 1) / 2) !important;
        width: calc((100% - 30px * 1) / 2) !important;
        clear: none !important;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card ~ .styled-card {
        margin-left: 30px !important;
    }
    
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(n+3) {
        margin-top: 36px !important;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2n+1) {
        margin-left: auto !important;
        clear: both !important;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2) .card-main-img,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(3) .card-main-img,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2) .card-content,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(3) .card-content {
        float: none;
        width: auto;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2) .card-main-img,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(3) .card-main-img {
        padding-top: 52.5%;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2) .card-content,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(3) .card-content {
        padding: 10px;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2) .card-content .card-content-container,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(3) .card-content .card-content-container {
        padding: 20px;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(1) .card-text,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2) .card-text,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(3) .card-text {
        height: 4.5em;
    }
    
    #containerNews .styled-card-container.news-type-2 > .styled-card {
        float: left !important;
        width: -webkit-calc((100% - 30px * 1) / 2) !important;
        width: -moz-calc((100% - 30px * 1) / 2) !important;
        width: calc((100% - 30px * 1) / 2) !important;
        clear: none !important;
    }

    #containerNews .styled-card-container.news-type-2 > .styled-card ~ .styled-card {
        margin-left: 30px !important;
    }
    
    #containerNews .styled-card-container.news-type-2 > .styled-card:nth-child(n+3) {
        margin-top: 36px !important;
    }

    #containerNews .styled-card-container.news-type-2 > .styled-card:nth-child(2n+1) {
        margin-left: auto !important;
        clear: both !important;
    }
    
    /* -- EVENTS -- */
    #containerEventsRecent .styled-card-container > .styled-card {
        float: left !important;
        width: -webkit-calc((100% - 30px * 1) / 2) !important;
        width: -moz-calc((100% - 30px * 1) / 2) !important;
        width: calc((100% - 30px * 1) / 2) !important;
        clear: none !important;
    }

    #containerEventsRecent .styled-card-container > .styled-card ~ .styled-card {
        margin-left: 30px !important;
    }
    
    #containerEventsRecent .styled-card-container > .styled-card:nth-child(n+3) {
        margin-top: 36px !important;
    }

    #containerEventsRecent .styled-card-container > .styled-card:nth-child(2n+1) {
        margin-left: auto !important;
        clear: both !important;
    }
    
    #containerEventsOld .styled-card-container > .styled-card {
        width: -webkit-calc((100% - 30px * 1) / 2);
        width: -moz-calc((100% - 30px * 1) / 2);
        width: calc((100% - 30px * 1) / 2);
    }

    #containerEventsOld .styled-card-container > .styled-card ~ .styled-card {
        margin-left: 30px;
    }

    #containerEventsOld .styled-card-container > .styled-card:nth-child(n+3) {
        margin-top: 36px;
    }

    #containerEventsOld .styled-card-container > .styled-card:nth-child(3n+1) {
        clear: none;
    }
    
    #containerEventsOld .styled-card-container > .styled-card:nth-child(2n+1) {
        margin-left: auto;
        clear: both;
    }
    
    /* -- ABOUT -- */
    #containerReports .styled-card-container > .styled-card {
        width: -webkit-calc((100% - 30px * 1) / 2);
        width: -moz-calc((100% - 30px * 1) / 2);
        width: calc((100% - 30px * 1) / 2);
    }

    #containerReports .styled-card-container > .styled-card ~ .styled-card {
        margin-left: 30px;
    }

    #containerReports .styled-card-container > .styled-card:nth-child(n+3) {
        margin-top: 36px;
    }

    #containerReports .styled-card-container > .styled-card:nth-child(3n+1) {
        clear: none;
    }
    
    #containerReports .styled-card-container > .styled-card:nth-child(2n+1) {
        margin-left: auto;
        clear: both;
    }
    
    /* -- FAQS -- */
    #containerFAQsNav_PC ul.nav > li {
        width: 32%;
    }
    
    html:lang(en) #containerFAQsNav_PC ul.nav > li {
        width: 47.5%;
    }

    #containerFAQsNav_PC ul.nav > li ~ li {
        margin-left: 2%;
    }
    
    html:lang(en) #containerFAQsNav_PC ul.nav > li ~ li {
        margin-left: 5%;
    }

    #containerFAQsNav_PC ul.nav > li:nth-child(n+4) {
        margin-top: 1.75em;
    }
    
    html:lang(en) #containerFAQsNav_PC ul.nav > li:nth-child(n+3) {
        margin-top: 1.75em;
    }

    #containerFAQsNav_PC ul.nav > li:nth-child(4n+1) {
        margin-left: 2%;
        clear: none;
    }
    
    #containerFAQsNav_PC ul.nav > li:nth-child(3n+1) {
        margin-left: auto;
        clear: both;
    }
    
    html:lang(en) #containerFAQsNav_PC ul.nav > li:nth-child(4n+1),
    html:lang(en) #containerFAQsNav_PC ul.nav > li:nth-child(3n+1) {
        margin-left: 5%;
        clear: none;
    }
    
    html:lang(en) #containerFAQsNav_PC ul.nav > li:nth-child(2n+1) {
        margin-left: auto;
        clear: both;
    }
    
    #containerFAQsTabContent {
        padding-top: 3em;
    }
    
    #containerFAQsTabContent .styled-card-container {
        display: block;
        width: 25em;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-spacing: 0;
    }

    #containerFAQsTabContent .styled-card-container ~ .styled-card-container {
        margin-top: 1.5em;
    }

    #containerFAQsTabContent .styled-card-container > .styled-card {
        display: block;
        width: 100%;
    }

    #containerFAQsTabContent .styled-card-container > .styled-card ~ .styled-card {
        margin-top: 1.5em;
        margin-left: auto;
    }
    
    /* -- CART -- */
    #shoppingCheckout,
    #shoppingPayment {
        margin-top: 1.25em;
    }
    
    .cart-summary-container table.cart-summary {
        margin-top: 1.25em;
    }
    
    /* -- WARRANTY -- */
    #sectionProductRegistration .section-body {
        margin-left: 20%;
        margin-right: auto;
        padding: 7.5em 5% 7.5em 25%;
    }
    
    #sectionProductRegistration .section-body #imgMainProduct {
        width: 50%;
    }
    
    /* -- USER -- */
    #sectionMyAccount,
    #sectionMyOrder,
    #sectionMyFavorite,
    #sectionWarrantyRecord {
        margin-left: auto;
        margin-right: auto;
    }

    #sectionMyAccount .section-body form {
        width: 25em;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #sideNavUser {
        display: none;
    }
    
    /* -- Header
    --------------------------------------------------*/
    #siteHeader,
    #pseudoHeader {
        height: 60px;
    }
    
    #siteHeader {
        padding: 0 30px;
        font-size: 20px;
        text-align: center;
        -webkit-transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        -moz-transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        -ms-transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        -o-transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
    }
    
    #siteHeader._open {
        height: 100%;
        overflow: hidden;
    }
    
    #siteHeader #siteAlert {
        padding: 1.5em 30px;
    }
    
    #siteHeader #siteBrand {
        position: absolute;
        top: 0;
        left: 50%;
        float: none;
        height: 60px;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    
    #siteHeader #siteNav {
        position: absolute;
        float: none;
        top: 60px;
        left: 0;
        right: 0;
        height: 0;
        margin: auto;
        background-color: #fff;
        -webkit-transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        -moz-transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        -ms-transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        -o-transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        transition: height 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        overflow-x: hidden;
    }

    #siteHeader #siteNav ul.nav-dropdown,
    #siteHeader #siteNav ul.nav-product-dropdown > li > a{
        position: relative;
        box-shadow: none;
        z-index: auto;
    }
    
    #siteHeader #siteNav ul.nav-dropdown > li > a,
    #siteHeader #siteNav ul.nav-product-dropdown > li > a {
        display: inline-block;
        min-width: 0;
        padding: 0.5em 0;
        font-family: "Jost", Arial, "TaipeiSansTCBeta", "Noto Sans TC", "PingFang TC", "黑體-繁", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "msjh", sans-serif;
        font-weight: 700;
        font-size: 1em;
        vertical-align: bottom;
    }
    
    #siteHeader._open #siteNav {
        height: -webkit-calc(100% - 60px);
        height: -moz-calc(100% - 60px);
        height: calc(100% - 60px);
    }
    
    #siteHeader #navToggle {
        float: left;
        margin-top: -webkit-calc((60px - 22px) * 0.5);
        margin-top: -moz-calc((60px - 22px) * 0.5);
        margin-top: calc((60px - 22px) * 0.5);
    }
    
    #siteHeader #siteHeaderCart {
        width: 30px;
        height: 60px;
        margin-right: 1em;
    }
    
    #siteHeader #siteHeaderMember {
        display: none;
    }
    
    #siteHeader #siteHeaderLang {
        margin-right: auto;
    }
    
    #siteHeader #siteHeaderLang > button {
        padding: 0 1em 0 0.5em;
        line-height: 60px;
    }
    
    #siteHeader #siteHeaderLang > button._open::before {
        -webkit-transform: rotateZ(180deg);
        -moz-transform: rotateZ(180deg);
        -ms-transform: rotateZ(180deg);
        -o-transform: rotateZ(180deg);
        transform: rotateZ(180deg);
    }
    
    #siteHeader #siteHeaderLang > button::before {
        top: -webkit-calc((60px - 1em) * 0.5);
        top: -moz-calc((60px - 1em) * 0.5);
        top: calc((60px - 1em) * 0.5);
        right: 0;
    }
    
    #siteHeader #siteHeaderLang > ul.nav-dropdown{
        left: 100%;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: 1;
    }
    
    #siteHeader #siteHeaderBtnBuy {
        display: none;
    }
    
    /* -- Nav
    --------------------------------------------------*/
    ul.nav-main {
        display: block;
        width: 100%;
    }

    ul.nav-dropdown {
        max-width: 100%;
    }
    /* products sub list (各主力產品) */
    .js-nav-product-list.with-dropdown > a._open + ul.nav-product-dropdown,
    .js-nav-product-list.with-dropdown ul.nav-product-dropdown{
        position: relative;
        box-shadow: none;
        left: 0;
        border-top: 1px solid #C2A48C;
        padding: 0;
        margin: 0;
        max-width: 100%;
    }
    
    ul.nav-main > li{
        float: none;
        margin: 0 auto;
        /* padding: 0.5em 15px; */
        padding: 0.5em 0;
        border-top: 1px solid #b1c2c9;
    }
    
    ul.nav-main > li > a {
        display: inline-block;
        padding: 0.5em 0;
        line-height: 1.5;
        vertical-align: bottom;
    }
    ul.nav-main > li > a::before {
        display: none;
    }
    
    ul.nav-main > li.with-dropdown > a{
        padding-right: 1.5em;
        position: relative;
    }

    ul.nav-main > li.with-dropdown > a._open,
    ul.nav-dropdown li.with-dropdown > a._open{
        color: #C2A48C;
    }
    ul.nav-main > li.with-dropdown > a::before {
        display: none;
    }
    ul.nav-main > li.with-dropdown > a::after,
    .js-nav-product-list.with-dropdown > a::after{
        content: '';
        position: absolute;
        top: 0.75em;
        right: -0.5rem;
        width: 1em;
        height: 1em;
        margin: auto;
        background-image: url(../images/icon-caret-down-dark.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        -webkit-transition: transform 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        -moz-transition: transform 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        -ms-transition: transform 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        -o-transition: transform 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
        transition: transform 0.4s cubic-bezier(0.445,0.05,0.55,0.95);
    }

    .js-nav-product-list.with-dropdown > a::after {
        right: unset;
    }

    ul.nav-main > li.with-dropdown > a._open::after,
    .js-nav-product-list.with-dropdown > a._open::after{
        background-image: url(../images/icon-caret-down-brown.svg);
        -webkit-transform: rotateZ(180deg);
        -moz-transform: rotateZ(180deg);
        -ms-transform: rotateZ(180deg);
        -o-transform: rotateZ(180deg);
        transform: rotateZ(180deg);
    }
    
    /* -- Section
    --------------------------------------------------*/
    .content-section .section-container.fixed-width,
    .content-section .section-container.fixed-width-tablet {
        width: 630px;
    }
    
    .content-section .section-container.fixed-width-pc {
        width: auto;
    }
    
    /* -- Footer
    --------------------------------------------------*/
    #siteFooter .footer-row {
        display: block;
    }
    
    #siteFooter .footer-col {
        display: block;
        vertical-align: baseline;
    }

    #siteFooter .footer-col:nth-child(1) {
        float: left;
        width: 7.5em;
        text-align: center;
    }

    #siteFooter .footer-col:nth-child(2) {
        float: left;
        width: -webkit-calc(100% - 7.5em - 3em);
        width: -moz-calc(100% - 7.5em - 3em);
        width: calc(100% - 7.5em - 3em);
        margin-left: 3em;
        text-align: right;
    }

    #siteFooter .footer-col:nth-child(3) {
        width: 100%;
        padding-top: 4em;
        clear: both;
    }

    #siteFooter ul.footer-list {
        justify-content: flex-end;
    }

    /* #siteFooter ul.footer-list > li ~ li { */
        /* margin-left: 2.25em; */
    /* } */
    
    #siteFooter ul.footer-info {
        margin-top: 5em;
    }
    
    #siteFooter ul.footer-info > li {
        display: block;
        padding: 0;
        vertical-align: baseline;
    }
    
    #siteFooter ul.footer-info > li ~ li {
        padding-left: 0;
    }

    #siteFooter ul.footer-info > li ~ li::before {
        display: none;
    }
    
    /* #siteFooter .footer-copyright {
        margin-top: 5em;
    } */
    
    #siteFooter #footerNewsletter {
        float: left;
    }
    
    #siteFooter #footerMedia {
        float: right;
        margin-top: 0;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Modal -- */
    .styled-modal .modal-container {
        padding: 24px 24px 24px 200px;
    }

    .styled-modal .modal-container::after {
        width: 200px;
    }
    
    .styled-modal .modal-video-container {
        width: 640px;
        height: 360px;
    }
    
    /* -- Table -- */
    table.styled-table-cart {
        border-spacing: 0;
    }
    
    table.styled-table-cart colgroup {
        display: none;
    }
    
    table.styled-table-cart > thead {
        display: none;
    }
    
    table.styled-table-cart > tbody > tr {
        display: block;
        position: relative;
        width: 100%;
    }
    
    table.styled-table-cart > tbody > tr ~ tr {
        margin-top: 20px;
    }
    
    table.styled-table-cart > tbody > tr > td {
        display: block;
        width: 100%;
        padding: 1em 2em;
    }
    
    table.styled-table-cart > tbody > tr > td:first-child {
        padding-top: 4em;
        padding-left: 2em;
        padding-right: 2em;
    }
    
    table.styled-table-cart > tbody > tr > td:last-child {
        padding-bottom: 2em;
        padding-left: 2em;
        padding-right: 2em;
    }
    
    table.styled-table-cart > tbody > tr > td:not(:first-child) {
        display: table;
    }
    
	table.styled-table-cart > tbody > tr > td:not(:first-child)::before {
        content: attr(data-th);
        display: table-cell;
        width: 40%;
        font-weight: 500;
        vertical-align: middle;
    }
    
    table.styled-table-cart > tbody > tr > td > * {
        display: table-cell;
        width: 60%;
        vertical-align: middle;
    }
    
    table.styled-table-cart > tbody > tr > td.item-delete {
        padding: 0 0 1em;
    }
    
    table.styled-table-cart > tbody > tr > td.item-delete::before {
        display: none;
    }
    
    table.styled-table-cart > tbody > tr > td.item-delete .item-btn {
        position: absolute;
        top: 1em;
        right: 1em;
    }
    
    .table-item .item-product .item-main-img {
        width: 40%;
    }
    
    .table-item .item-product .item-info {
        width: 60%;
    }
    
    /* -- Form -- */
    /* -- Form | Input -- */
    .input-thumb-upload {
        display: table;
        width: 100%;
    }
    
    .input-thumb-upload .input-thumb {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

    .input-thumb-upload .input-upload {
        display: table-cell;
        width: 50%;
        margin: 0 auto;
        vertical-align: middle;
    }
    
    /* -- Styled Block -- */
    .styled-block-figure-detail {
        height: auto;
    }

    .styled-block-figure-detail .block-figure {
        float: none;
        width: auto;
        height: auto;
        padding: 4em 3em 3em;
    }

    .styled-block-figure-detail .block-figure .block-content {
        position: relative;
        left: auto;
        top: auto;
        width: 66.666667%;
        max-width: 15em;
        margin-left: auto;
        margin-right: auto;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    .styled-block-figure-detail .block-detail {
        float: none;
        width: auto;
        height: auto;
        padding: 1em 3em 2em;
    }

    .styled-block-figure-detail .block-detail::before,
    .styled-block-figure-detail .block-detail::after {
        display: none;
    }

    .styled-block-figure-detail .block-detail .block-content {
        position: relative;
        top: auto;
        left: auto;
        width: 630px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    .styled-block-figure-detail .block-detail-container {
        width: auto;
    }
    
    .styled-block-app-figure {
        display: block;
        width: auto;
    }

    .styled-block-app-figure .block-app {
        display: block;
        width: auto;
        vertical-align: baseline;
    }

    .styled-block-app-figure .block-app .block-text {
        width: auto;
    }

    .styled-block-app-figure .block-figure {
        display: block;
        width: 30em;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 4.5em;
        text-align: center;
        vertical-align: baseline;
    }

    .styled-block-app-figure .block-figure ul.block-list-figure {
        display: block;
        vertical-align: baseline;
    }

    .styled-block-app-figure .block-figure ul.block-list-app {
        position: relative;
        left: auto;
        bottom: auto;
        margin-top: 3em;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    
    .styled-block-app-figure .block-figure ul.block-list-app > li {
        width: 30%;
    }

    .styled-block-app-figure .block-figure ul.block-list-app > li ~ li {
        margin-left: 25%;
    }
    
    .styled-block-product-detail .block-gallery {
        float: none;
        width: auto;
    }

    .styled-block-product-detail .block-detail {
        float: none;
        width: auto;
        padding-top: 3em;
        padding-left: 0;
    }
    
    .styled-block-product-detail .block-content {
        display: block;
    }

    .styled-block-product-detail .block-content .block-content-left {
        display: block;
        width: auto;
        vertical-align: baseline;
    }

    .styled-block-product-detail .block-content .block-content-right {
        display: block;
        width: auto;
        padding-top: 3em;
        padding-left: 0;
        vertical-align: baseline;
    }
    
    .styled-block-product-detail .block-content-title {
        text-align: center;
    }
    
    .styled-block-product-detail .block-title-list-container .block-title-list {
        float: none;
        width: auto;
    }

    .styled-block-product-detail .block-title-list-container .block-title-list ~ .block-title-list {
        margin-top: 1.5em;
        margin-left: auto;
    }
    
    .styled-block-product-detail .block-title-list .block-title {
        text-align: center;
    }
    
    .styled-block-product-spec {
        padding-left: -webkit-calc((100% - 630px) * 0.5);
        padding-left: -moz-calc((100% - 630px) * 0.5);
        padding-left: calc((100% - 630px) * 0.5);
    }
    
    .styled-block-product-spec .block-spec {
        padding: 0 3.5em 0 0;
    }

    .styled-block-account .block-account-info {
        float: none;
        width: auto;
        margin-top: 3em;
    }

    .styled-block-account .block-account-thumb {
        float: none;
        width: auto;
    }
    
    .styled-block-cart {
        padding: 2.5em 30px;
    }
    
    /* -- Styled Card -- */
    .styled-card-blog .card-title {
        width: auto;
        padding-left: 30px;
        padding-right: 30px;
        text-align: left;
    }
    
    .styled-card-blog .card-content {
        width: auto;
        padding-left: 30px;
        padding-right: 30px;
    }

    .styled-card-normal .card-content {
        padding: 2.5em;
    }
    
    @media only screen and (orientation: portrait) {
        /* -- Universal Setting
        --------------------------------------------------*/
        body {
            font-size: 16px;
        }
        
        /* -- Customized Style
        --------------------------------------------------*/
        
        .banner-normal .owl-dots {
            bottom: 2.5vh;
        }
        
        /* -- FAQS -- */
        #bannerFAQs .banner-tablet {
            display: block;
        }

        #bannerFAQs .banner-pc,
        #bannerFAQs .banner-mobile {
            display: none;
        }
        
        #bannerFAQs .banner-heading .heading-title {
            margin-bottom: 15%;
        }
        
        /* -- Components
        --------------------------------------------------*/
        /* -- Modal -- */
        .styled-modal .modal-container::after {
            background-image: url(../images/bg-modal.png), url(../images/t-bg-triangle-dark.svg);
        }
        
        /* -- Styled Block -- */
        .styled-block-about::before {
            top: 0;
            width: 100%;
            padding-top: 0;
        }

        .styled-block-about .block-about-img {
            float: none;
            width: auto;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .styled-block-about .block-about-img .block-bg-img {
            position: relative;
            top: auto;
            bottom: auto;
            left: auto;
            width: 100%;
            padding-top: 52.5%;
        }

        .styled-block-about .block-about-content {
            float: none;
            width: auto;
            margin-bottom: 0;
            padding: 2em 30px 2.5em;
        }

        .styled-block-about .block-about-content .block-content-container {
            margin: 0 auto;
        }

        .styled-block-about .block-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 52.5% auto 0;
            padding-left: 30px;
            padding-right: 30px;
            -webkit-transform: translateY(-100%);
            -moz-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            -o-transform: translateY(-100%);
            transform: translateY(-100%);
        }

        .styled-block-about .block-body {
            margin-bottom: 2em;
        }
        
        .styled-block-about .block-subtitle {
            color: #fff;
        }
        
        /* -- Styled Card -- */
        .styled-card-error {
            background-size: contain;
        }
    }

    @media only screen and (orientation: landscape) {
        /* -- Universal Setting
        --------------------------------------------------*/
        body {
            font-size: 13px;
        }
        
        /* -- Customized Style
        --------------------------------------------------*/
        .banner-fp .banner-cover .banner-intro {
            top: 50%;
            left: 0;
            right: auto;
            max-width: 50%;
            padding-right: 0;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        
        .banner-fp .banner-intro .banner-heading {
            text-align: left;
        }
        
        .banner-fp .banner-cover .banner-slogan {
            max-width: 50%;
            padding-left: 0;
        }
        
        .banner-normal .owl-dots {
            bottom: 2.5vw;
        }
        
        /* -- Components
        --------------------------------------------------*/
        /* -- Styled Card -- */
        .styled-card-error .card-inner {
            top: 10%;
            width: 36em;
        }
        
        .styled-card-error .card-main-img {
            width: 26em;
        }
        
        .styled-card-error .card-content {
            width: 15em;
        }
        
        .styled-card-error .card-btn-container {
            margin-top: 2em;
        }
    }
}

@media only screen and (max-width: 767px) {
    /* -- Universal Setting
    --------------------------------------------------*/
    body {
        font-size: 14px;
    }
    
    /* -- Color & Font
    --------------------------------------------------*/
    .site-font-48px { font-size: 28px; }
    .site-font-40px { font-size: 24px; }
    .site-font-36px { font-size: 22px; }
    .site-font-32px { font-size: 22px; }
    .site-font-28px { font-size: 20px; }
    .site-font-24px { font-size: 20px; }
    .site-font-20px { font-size: 18px; }
    .site-font-18px { font-size: 16px; }
    .site-font-16px { font-size: 14px; }
    .site-font-14px { font-size: 13px; }
    .site-font-13px { font-size: 12px; }
    .site-font-12px { font-size: 12px; }
    
    /* -- Customized Style
    --------------------------------------------------*/
    .banner-fp .banner-cover .banner-intro {
        top: 50%;
        left: 0;
        right: auto;
        max-width: 50%;
        padding-right: 0;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .banner-fp .banner-intro .banner-heading .heading-title {
        font-size: 1.5em;
    }

    .banner-fp .banner-intro .banner-text {
        font-size: 1em;
    }
    
    .banner-fp .banner-cover .banner-slogan {
        max-width: 50%;
        padding-left: 0;
    }
    
    .banner-fp .banner-slogan .slogan-title {
        font-size: 1.75em;
    }

    .banner-fp .banner-slogan .slogan-subtitle {
        font-size: 1.5em;
    }
    
    /* -- Home -- */
    /* #homeFeatures {
        padding-top: 40px;
    } */

    /* #homeMasterRecommend .bg-img {
        background-size: cover;
        background-position: center 70%;
        background-image: url(../images/bg-home-m-master-recommend.jpg);
        min-height: 750px;
    }
     */
    
    /* #homeMasterRecommend .master-content .master-championship .owl-carousel img {
        width: 15em;
        max-width: 100%;
    } */
    
    /* -- Roaster / Product -- */
    #containerRoasterMode > img {
        width: 32.5em;
    }
    
    /* -- WARRANTY -- */
    #sectionProductRegistration .section-body {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /* ------ ABOUT US ----- */
    .aboutus-wrapper .block-about-content .block-title img.imgPC {
        display: none;
    }

    .aboutus-wrapper .block-about-content .block-title img.imgM {
        display: block;
    }
    
    /* -- Header
    --------------------------------------------------*/
    #siteHeader,
    #pseudoHeader {
        height: 40px;
    }
    
    #siteHeader {
        padding: 0 20px;
        font-size: 16px;
    }
    
    #siteHeader #siteAlert {
        padding: 10px 20px;
    }
    
    #siteHeader #siteBrand {
        height: 40px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    
    #siteHeader #siteNav {
        top: 40px;
    }
    
    #siteHeader._open #siteNav {
        height: -webkit-calc(100% - 40px);
        height: -moz-calc(100% - 40px);
        height: calc(100% - 40px);
        z-index: 30;
    }
    
    #siteHeader #navToggle {
        margin-top: -webkit-calc((40px - 22px) * 0.5);
        margin-top: -moz-calc((40px - 22px) * 0.5);
        margin-top: calc((40px - 22px) * 0.5);
    }
    
    #siteHeader #siteHeaderCart {
        width: 20px;
        height: 40px;
    }
    
    #siteHeader #siteHeaderCart #cartCount {
        margin-right: -0.25em;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    
    #siteHeader #siteHeaderLang > button {
        line-height: 40px;
    }
    
    #siteHeader #siteHeaderLang > button::before {
        top: -webkit-calc((40px - 1em) * 0.5);
        top: -moz-calc((40px - 1em) * 0.5);
        top: calc((40px - 1em) * 0.5);
    }
    
    /* -- Footer
    --------------------------------------------------*/
  
    /* #siteFooter ul.footer-list > li ~ li {
        margin-left: 1.5em;
    } */
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Table -- */
    table.styled-table-modal-info colgroup {
        display: none;
    }
    
    table.styled-table-modal-info > thead {
        display: none;
    }
    
    table.styled-table-modal-info > tbody > tr,
    table.styled-table-modal-info > tbody > tr > td {
        display: block;
        position: relative;
        width: 100%;
    }
    
    table.styled-table-modal-info > tbody > tr > td::before {
        content: attr(data-th);
        display: block;
        width: 100%;
        margin-bottom: 1em;
        font-size: 1.125em;
        font-weight: 600;
        text-align: center;
    }
    
    table.styled-table-modal-info th,
    table.styled-table-modal-info td {
        padding: 1.5em 1em;
        border: none;
    }
    
    table.styled-table-modal-info td ~ td {
        border-top: 1px solid #c2a48c;
    }
    
    table.styled-table-cart > tbody > tr ~ tr {
        margin-top: 10px;
    }
    
    table.styled-table-cart > tbody > tr > td {
        padding: 0.5em 1em;
    }
    
    table.styled-table-cart > tbody > tr > td:first-child {
        padding-top: 3em;
        padding-left: 1em;
        padding-right: 1em;
    }
    
    table.styled-table-cart > tbody > tr > td:last-child {
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
    }
    
    table.styled-table-cart > tbody > tr > td.item-delete {
        padding: 0 0 0.5em;
    }
    
    table.styled-table-cart > tbody > tr > td.item-delete .item-btn {
        top: 0.5em;
        right: 0.5em;
    }
    
    .table-item .item-product .item-info {
        padding-left: 1em;
    }
    
    /* -- Styled Block -- */
    .styled-block-app-figure .block-figure {
        padding-top: 2.5em;
    }

    .styled-block-app-figure .block-figure ul.block-list-app {
        margin-top: 2em;
    }
    
    .styled-card-blog hr {
        margin-top: 2em;
        margin-bottom: 2em;
    }
    
    .styled-card-blog .card-btns {
        margin: 1em auto 2em;
    }
    
    @media only screen and (orientation: portrait) {
        /* -- Customized Style
        --------------------------------------------------*/
        /* -- FAQS -- */
        #bannerFAQs .banner-mobile {
            display: block;
        }

        #bannerFAQs .banner-pc,
        #bannerFAQs .banner-tablet {
            display: none;
        }
        
        /* -- Components
        --------------------------------------------------*/
        /* -- Modal -- */
        .styled-modal .modal-video-container {
            width: 100vw;
            max-width: 100%;
            height: 56.25vw;
            max-height: -webkit-calc(100% - 45px * 2);
            max-height: -moz-calc(100% - 45px * 2);
            max-height: calc(100% - 45px * 2);
        }

        .styled-modal .modal-video-container .modal-close-btn {
            top: -45px;
            right: 15px;
            width: 30px;
            height: 30px;
        }
        
        /* -- Styled Block -- */
        .styled-card-error {
            background-size: contain;
        }

        .styled-card-error .card-inner {
            top: 50%;
            width: auto;
            max-width: none;
            padding-left: 20px;
            padding-right: 20px;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .styled-card-error .card-main-img {
            width: 100%;
            margin: 0 auto;
        }

        .styled-card-error .card-content {
            position: relative;
            top: auto;
            left: auto;
            width: auto;
            max-width: none;
            margin: 3.5em auto 0;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }

        .styled-card-error .card-btn-container {
            margin-top: 3.5em;
            text-align: center;
        }
    }

    @media only screen and (orientation: landscape) {
        /* -- Customized Style
        --------------------------------------------------*/
        /* -- FAQS -- */
        #bannerFAQs .banner-tablet {
            display: block;
        }

        #bannerFAQs .banner-pc,
        #bannerFAQs .banner-mobile {
            display: none;
        }
        
        /* -- Components
        --------------------------------------------------*/
        /* -- Modal -- */
        .styled-modal .modal-video-container {
            width: 112vh;
            max-width: 100%;
            height: 63vh;
            max-height: -webkit-calc(100% - 35px * 2);
            max-height: -moz-calc(100% - 35px * 2);
            max-height: calc(100% - 35px * 2);
        }

        .styled-modal .modal-video-container .modal-close-btn {
            top: -35px;
            right: 0;
            width: 25px;
            height: 25px;
        }
    }
}

@media only screen and (max-width: 575px) {
    /* -- Customized Style
    --------------------------------------------------*/
    .site-fixed-width {
        width: 480px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .styled-btn-blue {
        font-size: 12px;
        font-weight: 400;
        padding: 0.5em 1em;
    }
    
    .banner-arrow {
        display: none;
    }

    .banner-fp .banner-cover .banner-content {
        top: 25%;
        /* top: 40% */
    }

    .banner-fp .banner-content .banner-title {
        transform: scale(1.4);
    }
    .banner-fp .banner-subtitle {
        font-size: 2.25em;
        margin-top: 0.5em;
    }

    .banner-fp .banner-cover .banner-subLogo {
        /* top: 71%; */
        bottom: 10.3%;
    }
    
    .banner-fp .banner-cover ul.banner-list-img > li > img  {
        height: 32px;
        height: 32px;
    }

    .banner-fp .banner-cover .banner-list-text {
        font-size: 2rem;
        font-size: 2rem;
    }

    #pageHome #homeIndicatorContainer {
        bottom: 0%;
    }

    #pageHome #homeIndicator {
        padding-bottom: 0;
    }

    #pageHome #homeIndicatorContainer .banner-watch-video {
        display: block;
        margin-bottom: 8px;
    }
    
    .banner-fp .banner-content .banner-watch-video {
        display: none;
        /* position: absolute;

    #pageHome #homeIndicatorContainer {
        bottom: 0%;
    }

    #pageHome #homeIndicator {
        padding-bottom: 0;
    }

    #pageHome #homeIndicatorContainer .banner-watch-video {
        display: block;
        margin-bottom: 8px;
    }
    
    .banner-fp .banner-content .banner-watch-video {
        display: none;
        /* position: absolute;
        left: 50%;
        top: calc(62.5vh);
        top: -webkit-calc(62.5vh);  */
        /* top: -webkit-calc(60vh - 3.75vh - 6vh -6em);  */
        /* top: -moz-calc(62.5vh);
        margin: auto;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); */
    }
    
    .banner-fp .banner-cover .banner-intro,
    .banner-fp .banner-cover .banner-slogan {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .banner-fp .banner-cover .banner-intro {
        top: 25%;
        left: 0;
        right: 0;
        max-width: 100%;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    
    .banner-fp .banner-intro .banner-heading {
        text-align: center;
    }
    
    .banner-fp .banner-cover .banner-slogan {
        max-width: 100%;
    }
    
    /* -- Home -- */
    #pageHome #homeBody .content-section-container .content-section ~ .content-section {
        padding-top: 3.5em;
    }
    
    #homeNews {
        padding-top: 4.5em;
        padding-bottom: 4.5em;
    }
    
    #homeNews .section-heading {
        float: none;
        width: auto;
        max-width: none;
    }

    #homeNews .section-body {
        float: none;
        width: auto;
        max-width: none;
    }
    
    #homeNews .styled-btn {
        position: relative;
        left: auto;
        bottom: auto;
    }
    
    #containerHomeNews .styled-card {
        width: auto;
    }
    
    #containerHomeNews .styled-card .card-main-img {
        display: none;
    }
    
    #containerHomeNews .styled-card .card-content {
        float: none;
        width: auto;
    }
    
    #containerHomeNews .owl-dots {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        white-space: nowrap;
    }
    
    #containerHomeNews .owl-dots .owl-dot {
        width: 3.5em;
    }
    
    /* #homeOurAdvantages #containerHomeAdvantages {
        width: 17.5em;
    } */
    #homeOurAdvantages #containerHomeAdvantages .styled-card-container {
        margin-top: 1rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .styled-card-our-advantages {
        max-width: 50%;
    }

    #homeAppConnection .section-container {
        position: relative;
    }

    #homeAppConnection .app-content {
        font-size: 13px;
    }

    #homeAppConnection .app-content .app-intro {
        float: none;
        width: auto;
        /* font-size: 20px; */
    }

    #homeAppConnection .app-content .app-intro .links-container {
        position: absolute;
        left: 0;
        align-items: flex-start;
        text-align: left;
    }

    #homeAppConnection .app-content .app-intro .roaster-link p.roaster-model {
        font-size: 14px;
    }

    #homeAppConnection .app-content .app-intro .roaster-link button {
        margin-left: 0.25em;
    }

    #homeAppConnection .app-content .app-intro ul.app-list {
        margin-top: 1em;
    }
    
    #homeAppConnection .app-content .app-intro ul.app-list > li {
        width: 4.2em;
        height: auto;
        vertical-align: baseline;
    }

    #homeAppConnection .app-content .app-intro ul.app-list > li ~ li {
        margin-left: 0.5em;
    } 

    #homeAppConnection .app-content .app-figure {
        float: none;
        width: auto;
        max-width: 50%;
        margin: 2em 0 0 auto;
    }
    
    #homeAppConnection .app-content .app-figure > img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 15em;
        margin: 0 0 0 auto;
    }

    /* #homeMasterRecommend .bg-img {
        background-image: url(../images/bg-home-m-master-recommend.jpg);
        min-height: 700px;
    }

    #homeMasterRecommend .section-body {
        float: none;
        width: auto;
        margin: 0 auto;
        width: 65%;
    } */
    
    /* #homeMasterRecommend .master-content .master-championship .owl-carousel:not(.owl-loaded) {
        white-space: nowrap;
        overflow-x: visible;
    }

    #homeMasterRecommend .master-content .master-championship .owl-carousel:not(.owl-loaded) > .item {
        display: inline-block !important;
        float: none !important;
        width: 50% !important;
        margin: 0 auto !important;
        vertical-align: bottom !important;
    }
    
    #homeMasterRecommend .master-content .master-championship .owl-carousel:not(.owl-loaded) > .item ~ .item {
        margin-left: 2em !important;
    } */

    #homeMasterRecommend .master-content .master-text {
        margin-top: 8em;
        font-size: 16px;
    }
    
    #homeMasterRecommend .master-content img.master-img {
        position: relative;
        float: left;
        bottom: -4.5em;
        margin: -4.5em auto 0;
    }
    
    #homeMasterRecommend .master-content .master-signature {
        float: right;
        margin: 0 auto;
    }
    
    #homeMasterRecommend #containerHomeChampionship {
        margin-left: -20px;
        margin-right: -20px;
    }
    
    /* -- Roaster / Product -- */
    #pageRoaster .site-main-container,
    #pageProduct .site-main-container {
        padding-top: 0;
        padding-bottom: 3.5em;
    }

    #pageRoaster .content-section-container .content-section ~ .content-section,
    #pageProduct .content-section-container .content-section ~ .content-section {
        margin-top: 3.5em;
    }
    
    #containerRoasterInfo._fixed-btn .block-buy,
    #containerProductInfo._fixed-btn .block-buy,
    #containerProductInfo._fixed-btn .block-btns {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding: 10px 15px;
        background-color: #dedede;
        opacity: 0;
        z-index: -1;
        -webkit-transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
        -moz-transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
        -ms-transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
        -o-transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
        transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    }
    
    #containerRoasterInfo._fixed-btn._active-btn .block-buy,
    #containerProductInfo._fixed-btn._active-btn .block-buy,
    #containerProductInfo._fixed-btn._active-btn .block-btns {
        opacity: 1;
        z-index: 99999;
    }
    
    #containerRoasterInfo._fixed-btn .block-buy > .styled-btn,
    #containerProductInfo._fixed-btn .block-buy > .styled-btn {
        font-size: 1em;
    }
    
    #containerProductInfo .block-btns .block-btn ~ .block-btn {
        margin-left: 3em;
    }
    
    #containerRoasterTutorialVideo .styled-card-container > .styled-card .card-content {
        width: 480px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #containerRoasterFeature #imgRoasterFeature {
        width: 19em;
        /* width: 16em; */
        font-size: 14px;
    }

    /* ============ 產品頁圖片 (比較圖 和 功能圖) ============= */
    #containerRoasterFeature #imgRoasterFeature #imgRoasterPC.imgPC,
    #sectionRoasterCompareImg .section-container .section-body .imgPC {
        display: none;
    }
    #containerRoasterFeature #imgRoasterFeature #imgRoasterM.imgM,
    #sectionRoasterCompareImg .section-container .section-body .imgM {
        display: block;
    }
    
    #containerRoasterFeature #imgRoasterFeature #listRoasterFeature {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: 2em;
        counter-reset: item;
    }

    #containerRoasterFeature #imgRoasterFeature #listRoasterFeature > li {
        display: block;
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto;
        margin-left: 1.5em;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    
    #containerRoasterFeature #imgRoasterFeature #listRoasterFeature > li::before {
        display: inline-block;
        width: 1.5em;
        margin-left: -1.5em;
        text-align: left;
        vertical-align: bottom;
    }

    #containerRoasterFeature #imgRoasterFeature #listRoasterFeature > li::before {
        content: counter(item)".";
        counter-increment: item;
    }
    
    #containerRoasterFeature #imgRoasterFeature #listRoasterFeature > li ~ li {
        margin-top: 0.75em;
    }
    
    html:lang(en) #containerRoasterFeature #imgRoasterFeature {
        width: 480px;
        padding-left: 20px;
        padding-right: 20px;
    }

    html:lang(en) #containerRoasterFeature #imgRoasterFeature #imgRoasterM {
        width: 19em;
    }

    html:lang(en) #containerRoasterFeature #imgRoasterFeature #listRoasterFeature > li ~ li {
        margin-top: 0.75em;
    }
    
    #sectionRoasterSpec .section-body {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #containerRoasterSpec {
        padding-top: 3em;
        padding-bottom: 3em;
    }
    
    #containerRoasterSpec #listRoasterSpec {
        font-size: 14px;
    }
    #containerRoasterSpec li.bb100-plus-en-spec-list {
        grid-template-columns: 100px 60px 1rem 60px 1rem 60px;
    }
    
    #containerRoasterGuarantee {
        width: 17.5em;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    html:lang(en) #containerRoasterGuarantee {
        width: 20em;
    }
    
    #containerRoasterGuarantee .styled-card-container > .styled-card,
    html:lang(en) #containerRoasterGuarantee .styled-card-container > .styled-card {
        float: none;
        width: auto;
    }

    #containerRoasterGuarantee .styled-card-container > .styled-card ~ .styled-card,
    html:lang(en) #containerRoasterGuarantee .styled-card-container > .styled-card ~ .styled-card {
        margin-top: 4em;
        margin-left: auto;
    }

    /* -- APP -- */
    #pageApp .content-section-container .content-section ~ .content-section {
        margin-top: 3.5em;
    }
    
    #sectionAppStore {
        padding-bottom: 3.5em;
    }

    #sectionAppStore.plus {
        padding-bottom: 3.5em;
        background-image:
            linear-gradient(rgba(251, 251, 251, 0.71), rgba(251, 251, 251, 0.71)),
            url(../images/m-bg-app-plus-store.jpg);
        background-size: 100% auto;
        background-position: center center;
    }

    /* Beanbon plus App page banner bg (mobile) */
    #appSection.plus > #appBanner > .banner-bg-img {
        background-image: 
            /* linear-gradient(rgba(251,251,251,0.71),rgba(251,251,251,0.71)), */
            url(../images/demo/m-banner-app-plus.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }

    #sectionAppIntro > #appIntro .block-figure #containerAppGif .owl-carousel .item > .imgPC {
        display: none;
    }
    #sectionAppIntro > #appIntro .block-figure #containerAppGif .owl-carousel .item > .imgM {
        display: block;
    }
    
    /* -- EVENTS -- */
    #pageEvents .content-section-container .content-section ~ .content-section {
        margin-top: 3.5em;
    }
    
    /* -- SHOP -- */
    #containerProducts .styled-card-container > .styled-card,
    #containerCollections .styled-card-container > .styled-card {
        float: none;
        width: auto;
    }

    #containerProducts .styled-card-container > .styled-card ~ .styled-card,
    #containerCollections .styled-card-container > .styled-card ~ .styled-card {
        margin-left: auto;
    }

    #containerProducts .styled-card-container > .styled-card:nth-child(n+2),
    #containerCollections .styled-card-container > .styled-card:nth-child(n+2) {
        margin-top: 20px;
    }

    #containerProducts .styled-card-container > .styled-card:nth-child(2n+1),
    #containerCollections .styled-card-container > .styled-card:nth-child(2n+1) {
        clear: none;
    }
    
    /* -- NEWS -- */
    #containerNews .styled-card-container.news-type-1 > .styled-card {
        float: none !important;
        width: auto !important;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card ~ .styled-card {
        margin-left: auto !important;
    }
    
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(n+2) {
        margin-top: 20px !important;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2n+1) {
        clear: none !important;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2) .card-content .card-content-container,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(3) .card-content .card-content-container {
        padding: 15px;
    }

    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(1) .card-text,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(2) .card-text,
    #containerNews .styled-card-container.news-type-1 > .styled-card:nth-child(3) .card-text {
        height: auto;
    }
    
    #containerNews .styled-card-container.news-type-2 > .styled-card {
        float: none !important;
        width: auto !important;
    }

    #containerNews .styled-card-container.news-type-2 > .styled-card ~ .styled-card {
        margin-left: auto !important;
    }
    
    #containerNews .styled-card-container.news-type-2 > .styled-card:nth-child(n+2) {
        margin-top: 20px !important;
    }

    #containerNews .styled-card-container.news-type-2 > .styled-card:nth-child(2n+1) {
        clear: none !important;
    }
    
    #containerBlog {
        width: 480px;
    }
    
    /* -- EVENTS -- */
    #containerEventsRecent .styled-card-container > .styled-card {
        float: none !important;
        width: auto !important;
    }

    #containerEventsRecent .styled-card-container > .styled-card ~ .styled-card {
        margin-left: auto !important;
    }
    
    #containerEventsRecent .styled-card-container > .styled-card:nth-child(n+2) {
        margin-top: 20px !important;
    }

    #containerEventsRecent .styled-card-container > .styled-card:nth-child(2n+1) {
        clear: none !important;
    }
    
    #containerEventsOld .styled-card-container > .styled-card {
        float: none;
        width: auto;
    }

    #containerEventsOld .styled-card-container > .styled-card ~ .styled-card {
        margin-left: auto;
    }

    #containerEventsOld .styled-card-container > .styled-card:nth-child(n+2) {
        margin-top: 20px;
    }

    #containerEventsOld .styled-card-container > .styled-card:nth-child(2n+1) {
        clear: both;
    }
    
    /* -- ABOUT -- */
    #containerReports .styled-card-container > .styled-card {
        float: none;
        width: auto;
    }

    #containerReports .styled-card-container > .styled-card ~ .styled-card {
        margin-left: auto;
    }

    #containerReports .styled-card-container > .styled-card:nth-child(n+2) {
        margin-top: 20px;
    }

    #containerReports .styled-card-container > .styled-card:nth-child(2n+1) {
        clear: none;
    }
    
    /* -- FAQS -- */
    #bannerFAQs .banner-content {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #containerFAQsNav,
    #containerFAQsTabContent {
        padding-top: 2em;
    }
    
    #containerFAQsNav_PC {
        display: none;
    }
    
    #containerFAQsNav_M {
        display: block;
    }
    
    #containerFAQsTabContent .styled-card-container ~ .styled-card-container,
    #containerFAQsTabContent .styled-card-container > .styled-card ~ .styled-card {
        margin-top: 1.25em;
    }
    
    /* -- CART -- */
    #containerNoItems > img,
    #containerOrdersTabContent .container-without-items > img {
        margin-bottom: 1.5em;
    }

    #containerNoItems .styled-btn,
    #containerOrdersTabContent .container-without-items .styled-btn {
        margin-top: 3.75em;
    }
    
    #containerNewOrder .styled-btn-container {
        display: block;
        vertical-align: baseline;
    }

    #containerNewOrder .styled-btn-container > .styled-btn {
        float: none;
    }

    #containerNewOrder .styled-btn-container > .styled-btn ~ .styled-btn {
        margin-top: 2.75em;
        margin-left: auto;
    }
    
    #containerNewOrder .styled-btn-container > br {
        display: block;
    }
    
    #containerOrdersTabContent {
        padding-top: 2em;
    }
    
    #containerOrdersNav_PC {
        display: none;
    }
    
    #containerOrdersNav_M {
        display: block;
    }
    
    #containerMoreDelivery.form-group-1-1 .form-group:not(:last-child) {
        margin-bottom: 2em;
    }
    
    #containerMoreDelivery.form-group-1-1 .form-group:nth-child(2) {
        text-align: center;
    }
    
    .cart-summary-container {
        padding-left: 1em;
        padding-right: 1em;
    }
    
    .cart-summary-container table.cart-summary > tbody > tr > td:not(:first-child) {
        padding-left: 2em;
    }
    
    .cart-summary-container table.cart-summary > tbody > tr:last-child > td:last-child {
        font-size: 1.25em;
    }
    
    .cart-summary-container .cart-btns {
        text-align: center;
    }
    
    .cart-summary-container .cart-btn {
        min-width: 10em;
    }
    
    .cart-summary-container .cart-fixed-btn-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto !important;
        padding: 10px 15px;
        background-color: #dedede;
        opacity: 0;
        z-index: -1;
        -webkit-transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
        -moz-transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
        -ms-transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
        -o-transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
        transition: opacity 0.3s cubic-bezier(0.445,0.05,0.55,0.95), z-index 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
    }
    
    .cart-summary-container .cart-fixed-btn-wrapper._active-btn {
        opacity: 1;
        z-index: 99999;
    }

    .cart-summary-container .cart-btn ~ .cart-btn {
        margin-left: 1em;
    }
    
    /* -- WARRANTY -- */
    #sectionProductRegistration .section-body {
        margin-left: auto;
        padding: 60px 20px;
    }

    #sectionProductRegistration .section-body #imgMainProduct {
        display: none;
    }
    
    /* -- USER -- */
    #pageMyAccount .site-main-container {
        padding-bottom: 0;
    }
    
    #sectionMyFavorite .section-container {
        width: 480px;
    }
    
    #sectionMyAccount .section-body {
        padding: 0 20px 60px;
    }
    
    #sectionMyOrder .section-body {
        padding: 0 20px 60px;
    }
    
    #sectionMyFavorite .section-body {
        padding: 0 20px 60px;
    }
    
    #sectionWarrantyRecord .section-body {
        padding: 0 20px 60px;
    }
    
    #sectionMyAccount .section-body form {
        position: relative;
        top: -5.5em;
        margin-top: 5.5em;
        margin-bottom: -5.5em;
    }
    
    #containerFavorites .styled-card-container > .styled-card {
        float: none;
        width: auto;
    }

    #containerFavorites .styled-card-container > .styled-card ~ .styled-card {
        margin-left: auto;
    }

    #containerFavorites .styled-card-container > .styled-card:nth-child(n+2) {
        margin-top: 20px;
    }

    #containerFavorites .styled-card-container > .styled-card:nth-child(2n+1) {
        clear: none;
    }
    
    /* -- Section
    --------------------------------------------------*/
    .site-main-container {
        padding-bottom: 3.5em;
    }
    
    .content-section .section-container.fixed-width {
        width: 480px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .content-section .section-container.fixed-width-tablet {
        width: auto;
    }
    
    /* -- Footer
    --------------------------------------------------*/
    #siteFooter {
        padding: 30px 20px;
    }
    #siteFooter .footer-row {
        display: flex;
        flex-direction: column;
        gap: 1.85rem;
    }
    /* #siteFooter ul.footer-list ul {
        gap: 1rem;
    } */

    #siteFooter .footer-col:nth-child(1) {
        /* position: absolute;
        top: 0;
        right: 0;
        width: 3.5em; */
        width: 3.5rem;
        margin-bottom: 1.5rem;
    }

    #siteFooter .footer-col:nth-child(2) {
        float: none;
        width: auto;
        margin: 0 4em 0 0;
        text-align: left;
    }
    #siteFooter .footer-col:nth-child(3) {
        display: flex;
        /* gap: 1.5rem; */
        padding-top: 0;
        margin: 0;
        flex-direction: column-reverse;
    }

    #siteFooter ul.footer-list{
        margin-bottom: 0;
        flex-direction: column;
        gap: 1rem;
    }
    #siteFooter ul.footer-list > li {
        flex-basis: 80px;
        float: none;
    }

    #siteFooter ul.footer-list > li > p {
        margin-bottom: 0.75rem;
    }

    #siteFooter ul.footer-list > li > ul{
        display: flex;
        gap: 1.25rem;
        white-space: nowrap;
    }

    #siteFooter ul.footer-list > li > ul > li{
        margin-top: 0;
    }
    
    /* #siteFooter ul.footer-list > li ~ li {
        margin-top: 1.5em;
        margin-left: auto;
    } */

    #siteFooter #footerNewsletter h5.footer-col-title, 
    #siteFooter #footerNewsletter > form{
        margin-top: 1.5rem;
    }
    #siteFooter ul.footer-media {
        display: flex;
        justify-content: start;
    }
    
    #siteFooter ul.footer-media > li {
        /* float: none; */
        flex-grow: 0;
        width: fit-content;
        height: auto;
        aspect-ratio: 1/1;
    }

    /* #siteFooter ul.footer-media > li ~ li {
        margin-top: 2.5em;
        margin-left: auto;
        width: 100%;
    } */

    #siteFooter ul.footer-media > li > a {
        width: 2.75em;
        height: 2.75em;
        font-size: 1.5rem;
    }
    
    #siteFooter ul.footer-info {
        /* margin-top: 2em; */
        display: none;
    }
    
    #siteFooter .footer-copyright {
        margin: 2.25rem 0 2rem;
    }
    
    /* #siteFooter #footerNewsletter .footer-col-title{
        display: none;
    } */
    #siteFooter #footerNewsletter {
        float: none;
    }
    
    #siteFooter #footerNewsletter > form {
        width: 100%;
    }
/*     
    #siteFooter #footerMedia {
        position: absolute;
        top: 0;
        right: 0;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    } */
    
    #siteFooter #footerMedia .footer-col-title {
        display: none;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Modal -- */
    .styled-modal .modal-container {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        padding: 60px 20px 0;
    }

    .styled-modal .modal-container::before {
        display: none;
    }

    .styled-modal .modal-container::after {
        width: 100%;
        background-image: url(../images/bg-modal.png);
        background-repeat: no-repeat;
        background-position: left -50vw center;
        background-size: 100% auto;
        opacity: 0.4;
        z-index: -1;
    }

    .styled-modal .modal-container .modal-close-btn {
        top: 20px;
        right: 20px;
        width: 30px;
        height: 30px;
    }

    .styled-modal .modal-container .modal-content-container {
        padding: 2.5em 0 2em;
    }
    
    /* -- Alert -- */
    .styled-alert .alert-container {
        max-width: -webkit-calc(100% - 20px * 2);
        max-width: -moz-calc(100% - 20px * 2);
        max-width: calc(100% - 20px * 2);
        max-height: -webkit-calc(100% - 20px * 2);
        max-height: -moz-calc(100% - 20px * 2);
        max-height: calc(100% - 20px * 2);
    }
    
    .styled-alert .alert-container .alert-close-btn {
        top: -15px;
        right: -15px;
        width: 30px;
        height: 30px;
    }
    
    /* -- Table -- */
    table.styled-table-order colgroup {
        display: none;
    }
    
    table.styled-table-order > thead {
        display: none;
    }
    
    table.styled-table-order > tbody > tr {
        display: block;
        position: relative;
        width: 100%;
    }
    
    table.styled-table-order > tbody > tr:first-child {
        display: none;
    }
    
    table.styled-table-order > tbody > tr > td {
        display: table;
        width: 100%;
        padding: 0.5em 1em;
    }
    
    table.styled-table-order > tbody > tr:not(:nth-child(4n+1)) > td:first-child {
        padding-left: 1em;
        padding-right: 1em;
    }
    
    table.styled-table-order > tbody > tr:not(:nth-child(4n+1)) > td:last-child {
        padding-left: 1em;
        padding-right: 1em;
    }
    
    table.styled-table-order > tbody > tr:nth-child(4n+1) > td {
        padding: 10px 0 0 0;
    }

    table.styled-table-order > tbody > tr:nth-child(4n+2) > td {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
    
    table.styled-table-order > tbody > tr:nth-child(4n+2) > td:first-child {
        padding-top: 1em;
    }

    table.styled-table-order > tbody > tr:nth-child(4n+3) > td::before {
        left: 1em;
        right: 1em;
    }
    
    table.styled-table-order > tbody > tr > td::before {
        content: attr(data-th);
        display: table-cell;
        width: 40%;
        font-weight: 500;
        vertical-align: middle;
    }
    
    table.styled-table-order > tbody > tr:nth-child(4n+1) > td:before,
    table.styled-table-order > tbody > tr:nth-child(4n+4) > td:before {
        display: none;
    }
    
    table.styled-table-order > tbody > tr:nth-child(4n+3) > td:before {
        display: block;
        width: auto;
    }
    
    table.styled-table-order > tbody > tr > td > span {
        display: table-cell;
        vertical-align: middle;
    }
    
    table.styled-table-order .table-order-price > span {
        width: 40%;
        text-align: center;
    }

    table.styled-table-order .table-order-price > span:last-child {
        width: 60%;
        padding: 0;
        text-align: center;
    }
    
    table.styled-table-order .table-btns {
        text-align: center;
    }
    
    /* -- Form -- */
    form .form-group-1-0,
    form .form-group-1-0 .form-group:nth-child(1),
    form .form-group-1-0 .form-group:nth-child(2) {
        display: block;
        width: auto;
        vertical-align: baseline;
    }
    
    form .form-group-1-0 .form-group:nth-child(2) {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    form .form-group-1-1 .form-group:nth-child(1),
    form .form-group-1-1 .form-group:nth-child(2) {
        float: none;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    form .form-group-1-1-and-2 .form-group:nth-child(1) {
        width: 45%;
    }

    form .form-group-1-1-and-2 .form-group:nth-child(2) {
        width: 45%;
        margin-left: 10%;
    }

    form .form-group-1-1-and-2 .form-group:nth-child(3) {
        float: none;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        clear: both;
    }
    
    form .form-group-1-1-and-2 .form-group:nth-child(3) .invisible {
        display: none;
    }
    
    /* -- Form | Input -- */
    .input-thumb-upload {
        display: block;
    }
    
    .input-thumb-upload .input-thumb {
        display: block;
        width: 11em;
        vertical-align: baseline;
    }

    .input-thumb-upload .input-upload {
        display: block;
        width: auto;
        margin-top: 2em;
        vertical-align: baseline;
    }
    
    .m-input-select-option {
        position: relative;
        margin: 0 auto;
    }

    .m-input-select-option .form-control.input-select {
        display: block;
        padding-right: 2em;
        background-image: url(../images/icon-caret-down-brown.svg);
        background-repeat: no-repeat;
        background-position: right 1em center;
        background-size: 1em auto;
        cursor: pointer;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
    }

    .m-input-select-option .form-control.input-select._focus {
        background-image: url(../images/icon-caret-up-brown.svg);
    }

    .m-input-select-option .error + .input-select,
    body.hasHover .m-input-select-option .error + .input-select:hover {
        border-color: #ff5252;
    }

    body.hasHover .m-input-select-option .input-select:hover {
        border-color: #907c64;
    }

    .m-input-select-option .input-option {
        display: none;
        position: absolute;
        top: -webkit-calc(100% + 2px);
        top: -moz-calc(100% + 2px);
        top: calc(100% + 2px);
        left: 0;
        right: 0;
        max-height: 15em;
        margin: auto;
        color: #a8a8a8;
        background-color: #fff;
        border: 1px solid #907c64;
        border-top: none;
        box-shadow: 1px 1px 0.25em 0 rgba(0,0,0,0.2);
        overflow-x: hidden;
        overflow-y: visible;
        z-index: 999;
    }

    .m-input-select-option .input-select._focus ~ .input-option {
        display: block;
    }

    .m-input-select-option .input-option .form-check {
        display: block;
        float: none;
        min-width: 0;
        margin: 0 auto;
        padding: 0.5em 1.25em;
        font-size: 1em;
        font-weight: 400;
        line-height: 1.5;
        color: inherit;
        cursor: pointer;
    }

    body.hasHover .m-input-select-option .input-option .form-check:hover {
        color: #fff;
        background-color: #000;
    }
    
    .m-input-select-option .input-option .form-check:not(:last-child) {
        margin-right: auto;
    }

    .m-input-select-option .input-option .form-check input {
        display: none;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }
    
    .m-input-select-option .input-option .form-check input + .check {
        padding: 0;
        text-align: left;
        color: inherit;
        background-color: transparent;
        border: none;
        border-radius: 0;
    }
    
    .m-input-select-option .input-option .form-check input:checked + .check,
    body.hasHover .m-input-select-option .input-option .form-check:hover input + .check {
        color: inherit;
        background-color: transparent;
    }
    
    /* -- Styled Block -- */
    .styled-block-figure-detail .block-detail .block-content {
        width: 480px;
    }
    
    .styled-block-figure-detail .block-figure {
        padding-left: 20px;
        padding-right: 20px;
    }

    .styled-block-figure-detail .block-detail {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .styled-block-product-detail .block-detail,
    .styled-block-product-detail .block-content {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .styled-block-product-detail .block-heading {
        text-align: center;
    }
    
    .styled-block-product-detail .block-price-note-buy {
        text-align: center;
    }
    
    .styled-block-product-detail .block-price-note-buy .block-price-note {
        display: inline-block;
        float: none;
        left: auto;
        min-width: 60%;
        max-width: none;
        text-align: left;
        vertical-align: bottom;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    
    .styled-block-product-detail .block-price-note-buy .block-price-note .block-note {
        margin-top: 1em;
    }

    .styled-block-product-detail .block-price-note-buy .block-buy {
        float: none;
        top: auto;
        left: auto;
        max-width: none;
        margin-top: 2.5em;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    
    .styled-block-product-detail .block-quantity-btns {
        display: block;
        width: auto;
    }

    .styled-block-product-detail .block-quantity-btns .block-quantity {
        display: block;
        text-align: center;
        vertical-align: baseline;
    }
    
    .styled-block-product-detail .block-quantity-btns .block-btns {
        display: block;
        margin-top: 2.5em;
        text-align: center;
        vertical-align: baseline;
    }
    
    .styled-block-product-detail .block-content .block-content-right {
        padding-top: 2em;
    }
    
    .styled-block-product-detail .block-options-quantity .block-options {
        float: none;
        left: auto;
        max-width: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    .styled-block-product-detail .block-options-quantity .block-quantity {
        float: none;
        left: auto;
        max-width: none;
        margin-top: 2em;
        text-align: center;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    
    .styled-block-product-detail .block-options-quantity .block-quantity .block-quantity-wrapper {
        width: 14em;
        padding-left: 5em;
        padding-right: 5em;
    }
    
    .styled-block-product-detail ul.block-list-items {
        padding: 0;
    }
    
    .styled-block-product-spec .block-product-photo {
        float: none;
        width: 83.4375%;
        margin-left: auto;
        margin-right: 0;
    }

    .styled-block-product-spec .block-spec {
        float: none;
        width: auto;
        padding-top: 2em;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .styled-block-about::before {
        top: 0;
        width: 100%;
        padding-top: 0;
    }

    .styled-block-about .block-about-img {
        float: none;
        width: auto;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .styled-block-about .block-about-img .block-bg-img {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        padding-top: 100%;
    }

    .styled-block-about .block-about-content {
        float: none;
        width: auto;
        margin-bottom: 0;
        padding: 2em 20px;
    }

    .styled-block-about .block-about-content .block-content-container {
        margin: 0 auto;
    }

    .styled-block-about .block-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 100% auto 0;
        padding-left: 20px;
        padding-right: 20px;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .styled-block-about .block-body {
        margin-bottom: 1.5em;
    }
    
    .styled-block-about .block-subtitle {
        color: #fff;
    }
    
    .styled-block-about ul.block-list > li > p {
        margin-bottom: 0.25em;
    }
    
    .styled-block-about ul.block-list > li > p,
    .styled-block-about ul.block-list > li > a {
        float: none;
    }
    
    .styled-block-cart {
        padding: 2em 20px;
    }
    
    /* -- Styled Card -- */
    .styled-card-news .card-content .card-content-container {
        padding: 15px;
    }

    .styled-card-news .card-title,
    .styled-card-news .card-text {
        height: auto;
    }
    
    .styled-card-blog .card-title,
    .styled-card-blog .card-content {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .styled-card-blog .card-date-share {
        display: block;
        margin-top: 2.5em;
    }

    .styled-card-blog .card-date-share .card-date {
        display: block;
        width: auto;
        text-align: right;
        vertical-align: baseline;
    }

    .styled-card-blog .card-date-share .card-share {
        display: block;
        width: auto;
        margin-top: 2.5em;
        text-align: left;
        vertical-align: baseline;
    }
    
    .styled-card-blog .card-date-share .card-share-wrapper > ul > li {
        margin-left: 2.5em;
    }
    
    .styled-card-faqs .card-content {
        padding-top: -webkit-calc(1.25em + 1px);
        padding-top: -moz-calc(1.25em + 1px);
        padding-top: calc(1.25em + 1px);
        padding-bottom: -webkit-calc(1.25em + 1px);
        padding-bottom: -moz-calc(1.25em + 1px);
        padding-bottom: calc(1.25em + 1px);
        padding-left: -webkit-calc(1em + 1px);
        padding-left: -moz-calc(1em + 1px);
        padding-left: calc(1em + 1px);
        padding-right: -webkit-calc(1em + 1px);
        padding-right: -moz-calc(1em + 1px);
        padding-right: calc(1em + 1px);
    }
    
    .styled-card-product .card-text {
        height: auto;
    }
    
    .styled-card-warranty .card-main-img {
        width: 42.5%;
    }

    .styled-card-warranty ul.card-main-detail {
        width: 11em;
        max-width: 57.5%;
        margin-left: -webkit-calc((57.5% - 11em) / 3 * 2);
        margin-left: -moz-calc((57.5% - 11em) / 3 * 2);
        margin-left: calc((57.5% - 11em) / 3 * 2);
        margin-right: -webkit-calc((57.5% - 11em) / 3 - 0.01px);
        margin-right: -moz-calc((57.5% - 11em) / 3 - 0.01px);
        margin-right: calc((57.5% - 11em) / 3 - 0.01px);
        padding-left: 0.5em;
    }
    
    .styled-card-warranty .card-text {
        padding-left: 0;
    }
    
    .styled-card-normal {
        padding: 20px;
    }

    .styled-card-normal .card-content {
        padding: 15px;
        border: 2px solid #122360;
    }
    
    @media only screen and (orientation: portrait) {
        /* -- Customized
        --------------------------------------------------*/

        /* .banner-fp .banner-cover ul.banner-list-img > li > img  */


        /* .banner-fp .banner-cover ul.banner-list-img > li > img  */

        /* -- CART -- */
        .cart-summary-container table.cart-summary {
            width: 100%;
        }
        
        /* -- Components
        --------------------------------------------------*/
        /* -- Styled Card -- */
        .styled-card-warranty ul.card-main-detail > li ~ li {
            margin-top: 1em;
        }
    }

    @media only screen and (orientation: landscape) {
        /* -- Customized Style
        --------------------------------------------------*/
        .banner-fp .banner-cover .banner-intro {
            top: 50%;
            left: 0;
            right: auto;
            max-width: 50%;
            padding-right: 0;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        
        .banner-fp .banner-intro .banner-heading {
            text-align: left;
        }
        
        .banner-fp .banner-cover .banner-slogan {
            max-width: 50%;
            padding-left: 0;
        }
    
        /* -- Components
        --------------------------------------------------*/
        /* -- Alert -- */
        .styled-alert .alert-body {
            top: auto;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
    }
}

@media only screen and (max-width: 480px) {
    /* -- Customized Style
    --------------------------------------------------*/
    /* -- Home -- */
    #containerHomeFeedbacks .styled-card {
        width: auto;
    }
    
    /* -- SHOP -- */
    #containerHotProducts .styled-card {
        width: auto;
    }
}

@media only screen and (max-width: 320px) {
    /* -- Customized
    --------------------------------------------------*/
    .site-fixed-width {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .banner-fp .banner-cover .banner-intro,
    .banner-fp .banner-cover .banner-slogan {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* -- Home -- */
    #homeMasterRecommend #containerHomeChampionship {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    /* -- Roaster / Product -- */
    #containerRoasterTutorialVideo .styled-card-container > .styled-card .card-content {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    html:lang(en) #containerRoasterFeature #imgRoasterFeature {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    #sectionRoasterSpec .section-body {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* -- FAQS -- */
    #bannerFAQs .banner-content {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* -- CART -- */
    .cart-summary-container .cart-btns .cart-btns-wrapper > br {
        display: block;
    }

    .cart-summary-container .cart-btn ~ .cart-btn {
        margin-top: 2em;
        margin-left: auto;
    }
    
    /* -- WARRANTY -- */
    #sectionProductRegistration .section-body {
        padding: 45px 15px;
    }
    
    /* -- USER -- */
    #sectionMyAccount .section-body {
        padding: 0 15px 45px;
    }
    
    #sectionMyOrder .section-body {
        padding: 0 15px 45px;
    }
    
    #sectionMyFavorite .section-body {
        padding: 0 15px 45px;
    }
    
    #sectionWarrantyRecord .section-body {
        padding: 0 15px 45px;
    }
    
    /* -- Header
    --------------------------------------------------*/
    #siteHeader {
        padding: 0 15px;
    }
    
    #siteHeader #siteAlert {
        padding: 10px 15px;
    }
    
    /* -- Section
    --------------------------------------------------*/
    .content-section .section-container.fixed-width {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* -- Footer
    --------------------------------------------------*/
    #siteFooter {
        padding: 25px 15px;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Modal -- */
    .styled-modal .modal-container {
        padding: 50px 15px 0;
    }

    .styled-modal .modal-container .modal-close-btn {
        top: 15px;
        right: 15px;
        width: 25px;
        height: 25px;
    }

    .styled-modal .modal-container .modal-content-container {
        padding: 2em 0;
    }
    
    /* -- Alert -- */
    .styled-alert .alert-container {
        max-width: -webkit-calc(100% - 15px * 2);
        max-width: -moz-calc(100% - 15px * 2);
        max-width: calc(100% - 15px * 2);
        max-height: -webkit-calc(100% - 15px * 2);
        max-height: -moz-calc(100% - 15px * 2);
        max-height: calc(100% - 15px * 2);
    }
    
    .styled-alert .alert-container .alert-close-btn {
        top: -12.5px;
        right: -12.5px;
        width: 25px;
        height: 25px;
    }
    
    /* -- Styled Block -- */
    .styled-block-figure-detail .block-figure {
        padding-left: 15px;
        padding-right: 15px;
    }

    .styled-block-figure-detail .block-detail {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .styled-block-product-detail .block-detail,
    .styled-block-product-detail .block-content {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .styled-block-product-spec .block-spec {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .styled-block-about .block-about-content,
    .styled-block-about .block-header {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .styled-block-cart {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* -- Styled Card -- */
    .styled-card-blog .card-title,
    .styled-card-blog .card-content {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .styled-card-normal {
        padding: 15px;
    }

    .styled-card-normal .card-content {
        padding: 10px;
    }
    
    @media only screen and (orientation: portrait) {
        /* -- Components
        --------------------------------------------------*/
        /* -- Modal -- */
        .styled-modal .modal-video-container {
            max-height: -webkit-calc(100% - 40px * 2);
            max-height: -moz-calc(100% - 40px * 2);
            max-height: calc(100% - 40px * 2);
        }

        .styled-modal .modal-video-container .modal-close-btn {
            top: -40px;
            width: 25px;
            height: 25px;
        }
        
        /* -- Styled Block -- */
        .styled-card-error .card-inner {
            padding-left: 15px;
            padding-right: 15px;
        }

        .styled-card-error .card-content {
            margin: 3em auto 0;
        }

        .styled-card-error .card-btn-container {
            margin-top: 3em;
        }
    }

    @media only screen and (orientation: landscape) {
        
    }
}

@media(-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-resolution:1.5dppx),(min-resolution: 192dpi) {
    
}