@import url("reset.css");

/*******-----------------1280px------------------*******/
@media screen and (max-width: 1280px) {

    /*******-----------------1235px------------------*******/
    @media screen and (max-width: 1235px) {
        .foodbox {
            width: 50%;
            float: left;
        }

        .intro_r {
            width: 47%;
        }

        .intro_l {
            width: 47%;
        }

        .intro_r img,
        .intro_l img {
            width: 46%;
        }

    }

    /*******-----------------1024px------------------*******/
    @media screen and (max-width: 1024px) {
        .pop1400Box {
            max-width: 900px;
        }

        .food {
            max-width: 800px;
            margin: 0 auto;
        }

        .foodbox {
            width: 100%;
            height: auto;
        }

        .intro_r {
            width: 50%;
        }

        .intro_l {
            width: 50%;
        }

        .intro_r img,
        .intro_l img {
            width: 50%;
        }

        /*節慶活動*/
        .intro3_r h4,
        .intro3_l h4 {
            padding-top: 0px;
        }

        .intro3_r p,
        .intro3_l p {
            line-height: 1.2em;
            padding: 0px 20px;
        }
    }

    /*******-----------------830px------------------*******/
    @media screen and (max-width: 830px) {

        .wrapper {
            width: 100%;
            height: auto;
            padding: 0px 40px 30px 40px;
        }




        /*景點介紹*/

        .intro3_r h4,
        .intro3_l h4 {
            font-size: 24px;
            padding-top: 10px;
        }

        .intro3_r p,
        .intro3_l p {
            font-size: 14px;
            padding: 5px 20px;
        }

        .item,
        .item1 {
            padding-bottom: 20px;
        }
    }


    /*******-----------------720px------------------*******/
    @media screen and (max-width:720px) {
        .wrapper {
            margin: 0 auto;
            height: auto;
            padding: 0px 30px 0px 30px;
            overflow: hidden;
        }
    }

    /*******-----------------640px------------------*******/
    @media screen and (max-width:640px) {

        /*山東/美食介紹*/
        .intro_r p,
        .intro_l p,
        .intro2_r p,
        .intro2_l p {
            padding: 0px 20px 0px 20px;
        }

        /*節慶活動*/
        .intro3_r {
            width: 100%;
            float: none;
        }

        .intro3_l {
            width: 100%;
            float: none;
        }

        .item1 img {
            width: 100%;
        }

        .intro3_l h4 {
            text-align: left;
        }
    }

    /*******-----------------480px------------------*******/
    @media screen and (max-width:480px) {
        body {
            background-image: none;
        }

        .wrapper {
            margin: 0 auto;
            height: auto;
            padding: 0px 20px 0px 20px;
            overflow: hidden;
        }

        .cms26 {
            margin-bottom: 50px;
        }

        /* c26 c23模組title */
        .cms23title1,
        .cms23title2,
        .cms23title3,
        .cms23title4,
        .cms23title5 {
            width: 100%;
            background-position: center;
        }

        /*山東/美食介紹*/
        .foodbox {
            width: 100%;
            float: none;
            padding-bottom: 20px;
        }

        .intro_r,
        .intro2_r {
            width: 100%;
            float: none;
        }

        .intro_l,
        .intro2_l {
            width: 100%;
            float: none;
        }

        .item img {
            width: 100%;
        }

        .intro_r p,
        .intro_l p,
        .intro2_r p,
        .intro2_l p {
            padding: 0px 20px 20px 20px;
        }

        /*下方btn*/
        .morebtn {
            padding-top: 20px;
            padding-bottom: 10px;
        }

        .morebtn a {
            margin: 0 auto;
            display: block;
            width: 100%;
            height: auto;
            background-image: none;
            font-size: 24px;
            line-height: 48px;
            background-color: #b73c20;
            color: #fff;
            text-decoration: none;
            text-align: center;
            border-radius: 20px;

        }

        .morebtn a:hover {
            background-image: none;
            background-color: #d93813;
        }
    }

    /*******-----------------320px------------------*******/
    @media screen and (max-width:320px) {
        .btn {
            width: 100%;
            float: none;
            padding-left: 20px;
            margin-bottom: 30px;
        }




    }