/**********************************************/
/* INDEX.CSS 為 INDEX.html <main> 內用 CSS */
/**********************************************/

/* ________________________________________________________________________________ */
/* XS 超小屏幕（手机，大於 0px） 及共用 ___________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 0px) {

    /*game*/
    #game {

        background: url(../img/gameBg.png) repeat;
    }
        #game .mainText {            
            height: 500px;            
            background: url(../img/mainText.png) top center no-repeat;
            background-size:contain;
            z-index: 1;
        }
        #game .gameSpBtn {
            position:relative;
            display: block;
            top: 80%;            
            width:100%;
            height: 49px;
            background: url(../img/gameSpBtn.png) center center no-repeat;
            cursor: pointer;
        }
        #game .gameFace {
            margin-top:50px;
            height: 400px;    
            background: url(../img/gameFaceMobile.png) center center no-repeat;
            background-size:contain;
            z-index: 1;
        }

    /*special*/
    #special {
        background: url(../img/specialBg.png) repeat;
    }
        #special .container {
            overflow:hidden;
        }
        #special .carousel-inner {
            overflow:visible;
        }
        #special .title {
            padding-bottom:20px;
        }
        #special .leftFood .foodImg {
            background:url(../img/specialFork.png) right center no-repeat;
            background-size:contain;
            padding:50px;
        }
        #special .rightFood .foodImg {
            background:url(../img/specialKnife.png) left center no-repeat;
            background-size:contain;
            padding:50px;
        }
        #special .foodImg {
            height:410px;
        }
        #special .leftFood .foodImg img ,
        #special .rightFood .foodImg img {
           position:relative;
           top:50%;
           transform:translateY(-50%);
        }
        #special .item .proposer {
            display:block;
            width:80px;
            height:80px;
            line-height:80px;
            margin:0 0 0 15px;;
            padding:0;
            font-size:30px;
            text-align:center;
            color:#FFF;
            background:#9dc0de;
            border-radius:50px;
        }
        #special .item .foodPropose {
            font-size:18px;
            font-weight:bold;
            margin-top:10px;
        }
        #special .item .foodName {
            font-size:25px;
            font-weight:bold;
        }
        #special .item .foodInfo {
             margin-top:10px;
            font-size:14px;
            padding:0 35px;
        }
        #special .item .foodContents {
            font-size:14px;
            padding:0 35px;
            margin-bottom:10px;
        }
        #special .item .foodBtn {
            font-size:14px;
            padding:0 35px;
            margin-bottom:10px;
        }
        #special .item .btn {
            font-size:18.08px;
            color:#FFF;
            background-color:#804e21;
            border:none;
        }

        #special .carousel-inner > .next, 
        #special .carousel-inner > .prev {
            position:absolute;      
            top:74px;                            
        }

        #special .foodExp {
            border:5px solid #915016;
            background:url(../img/newsModalBg.png) repeat;
            border-radius:10px;
            /*width:100%;*/
            padding:0px;
            margin-bottom:15px;
            z-index:1000;
        }
        .Chevron{
            position:absolute;
            display:block;
            width:28px;
            height:20px;
            left:25px;
            background:url(../img/Chevron.png) no-repeat;                
        }
        #special .foodExp .modal-header {
            position:absolute;
            right:0;
            top:0;
        }
        #special .foodExp .foodName {
            color:#FFF;
            padding-left:5px;
        }
        #special .foodExp .foodContents {
            color:#ffc412;
            padding-left:5px;
        }
        #special .foodExp .foodInfo {
            color:#FFF;
            padding:5px;
        }
            #special .foodExp .closeBtn,
            #special .foodExp .fbBtn {
                cursor:pointer;
            }

    /*product*/
    #product {
        background: url(../img/productBg.png) repeat;
        overflow:hidden;
    }
    #product .productMenu {
        width:100%;
        height:115px;
        padding:0;
        margin:0;
        background:url(../img/productMenuMobile.png) top center no-repeat;
        background-size:cover;
    }
    .productMenu li {
        display:inline-block;
        list-style:none;
        height:120px;        
        width:90px;        
    }

    .productMenu .productMenuPoint {
        background:url(../img/productMenuPoint.png) center center no-repeat;
        background-size:contain;
        width:20px;  
    }
    .productMenu .productMenuLunch {
        background:url(../img/productMenuLunch.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuBreakfast {
        background:url(../img/productMenuBreakfast.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuDessert {
        background:url(../img/productMenuDessert.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuDrink {
        background:url(../img/productMenuDrink.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuGift {
        background:url(../img/productMenuGift.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuOther {
        background:url(../img/productMenuOther.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuLunch:hover {
        background:url(../img/productMenuLunchOver.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuBreakfast:hover {
        background:url(../img/productMenuBreakfastOver.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuDessert:hover {
        background:url(../img/productMenuDessertOver.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuDrink:hover {
        background:url(../img/productMenuDrinkOver.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuGift:hover {
        background:url(../img/productMenuGiftOver.png) center center no-repeat;
        background-size:contain;
    }
    .productMenu .productMenuOther:hover {
        background:url(../img/productMenuOtherOver.png) center center no-repeat;
        background-size:contain;
    }

    #product .carousel-control {
        width:5%;
    }

    #carousel-product-generic {
        overflow:hidden;
    }
    #product .item>div {        
        margin:20px 0 0 0;
    }

    #product .productProposer {
        font-size:12px;
        font-weight:bold;
        color:#c81508;
        margin:5px 0 0 0;
    }

    #product .productName {
        font-size:18px;
        font-weight:bold;
        color:#000000;
        margin:5px 0 0 0;
    }


    /*news*/
    #news {
        background: url(../img/newsBg.png) repeat;
    }
        #news .newsTitleMeet {
            width: 121px;
            height: 24px;
            background: url(../img/newsTitleMeet.png) center center no-repeat;
        }
        #news .newsTitleStory {
            width: 121px;
            height: 24px;
            background: url(../img/newsTitleStory.png) center center no-repeat;
        }
        #news .newsTitleNews {
            width: 120px;
            height: 24px;
            background: url(../img/newsTitlenews.png) center center no-repeat;
        }
        #news .newsMore {
            width: 78px;
            height: 24px;
            background: url(../img/newsMore.png) center center no-repeat;
        }
    .newsMain ul {
        padding: 0;
        margin:5px 0;
    }
    .newsMain li {
        position:relative;
        list-style:none;
        margin:0;
        border-bottom:solid 1px rgba(128, 78, 33, 0.3);
        margin:25px 0 0 0;
    }
    .newsMain .title {
        color:#a93e1e;
        line-height:36px;
        font-size:18px;
        font-weight:bold;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width:230px;
    }
    .newsMain .date {
        position:absolute;
        top:0;
        right:0;
        color:#a93e1e;
        font-size:18px;
        font-weight:bold;
    }
    #news .meet h3 {
        font-size:18px;
        margin:0;
    }
    #news .meet p,
    #news .story p {
        color:#572e0a;
        font-size:16px;
    }
    .newsMain .content {
        color:#572e0a;
        font-size:18px;
    }
    .newsMain .newsMore {
        position:absolute;
        bottom:8px;
        right:0;
    }
    .pagination > li > a, .pagination > li > span {
        background:none;
        border:none;
        color:#572e0a;
    }
    .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
        background:none;
        border:none;
        color:#572e0a;
    }
    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
        background:none;
        border:none;
    }
    .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
        color:#c81508;
        background:none;
        border:none;
    }
    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
       color:#c81508;
    }

    /*newsModal Popup*/
    .modal-content {
        border:10px solid #915016;
        background:url(../img/newsModalBg.png) repeat;
    }
    .modal-header {
        border:none;
        height:25px;
        margin:10px 12px 0 0 ;
        padding:0;
    }
    .modal .close span {
        font-size: 30px;
        padding: 0;
        margin: 0;
        color:#fff;
    }
    .modal-backdrop {
        background:#ffffff;
    }
    #newsModal img {
        margin:20px 0;
    }
    #newsModal .date {
        color:#FFF;
    }
    #newsModal .title {
        color:#ffb400;
    }
    #newsModal .content {
        color:#FFF;
        height:200px;
        overflow-y:scroll;
    }
    .fbBtn {
        display:block;
        background:url(../img/fbBtn.png) center center no-repeat;
        background-size:contain;
        height: 24px;
        width: 24px;
        margin:0 10px 0 0;
    }
    .closeBtn {
        display:block;
        background:url(../img/closeBtn.png) center center no-repeat;
        background-size:contain;
        height: 25px;
        width: 25px;
        margin:0;
    }

    /*info*/
    #info {
        background: url(../img/infoBg.png) repeat;
    }
        #info img {
            margin-top:20px;
            margin-bottom:20px;
        }
   #info .content a {
        margin:10px 0;
        color:#fff;
        font-size:16px;
        text-decoration:underline;
    }
    #info .content {
        margin:10px 0;
        color:#fff;
        font-size:16px;
    }
        #info .data {
            width:62%;
            margin:0 auto;
        }

    /*footer*/
    footer {
        font-size:15px;
    }
    footer a {
        color:#000;
    }
    footer img {
        vertical-align:middle;
        margin-left:5px;
        margin-right:5px;
    }
        footer .corp>div {
            height:50px;
            margin-top:10px;
        }
        footer .corp {
            height:50px;
            margin-top:10px;
            margin-bottom:20px;
        }
        footer .info {
            margin-top:20px;
            margin-bottom:20px;
        }
}

/* ________________________________________________________________________________ */
/* SM 小屏幕（平板，大於等於 768px） ______________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 768px) {

    /*game*/
    #game {
        height: 628px;
    }
        #game .mainText {
            position: absolute;
            width: 330px;
            height: 715px;
            margin-top: 0px;
            background: url(../img/mainText.png) center center no-repeat;
            z-index: 1;
        }
        #game .gameSpBtn {
            position: absolute;
            display: block;
            top:auto;
            bottom: 60px;
            left: 64px;
            width: 187px;
            height: 49px;
            background: url(../img/gameSpBtn.png) center center no-repeat;
            cursor: pointer;
        }
        #game .mainText {
            position: absolute;
            width: 330px;
            height: 715px;
            margin-top: 0px;
            background: url(../img/mainText.png) center center no-repeat;
            z-index: 1040;
        }

    /* game interactive */
    .game {
        margin-top:30px;
        height:560px;
        background:url(../img/gameStage.png) center center no-repeat;
        background-size:contain;
        position:relative;
    }
        .game > div {
            position:absolute;
            /*border:1px solid red;*/
            cursor:pointer;
            cursor: -moz-grab;
            cursor: -webkit-grab;          
            /*grabbing*/            
        }
        .game .gameHitNose {
            /*border:1px solid green;*/
            width:1px;
            height:1px;      
            left:52%;
            top:43%;
            cursor:auto;            
        }
        .game .gameHitSmaile {
            /*border:1px solid green;*/
            width:1px;
            height:1px;      
            left:52%;
            top:50%;
            cursor:auto;
        }
        .game .gameOverlap { 
            width:49.5%;
            height:32%;      
            left:22%;
            top:26%;
            cursor:auto;
        }
        .game .gameSmaile0{
            background:url(../img/gameSmaile0.png) center center no-repeat;
            background-size:contain;
            width:25%;
            height:10%;
            top:46%;
            left:34.5%;     
        }
        .game .gameSmaile1{
            background:url(../img/gameSmaile1.png) center center no-repeat;
            background-size:contain;
            width:50px;
            height:50px;
            margin-left:-25px;
            margin-top:-25px;
            top:365px;
            left:30px;  
        }
        .game .gameSmaile2{
            background:url(../img/gameSmaile2.png) center center no-repeat;
            background-size:contain;
            width:50px;
            height:50px;
            margin-left:-25px;
            margin-top:-25px;
            top:365px;
            left:105px;  
        }
        .game .gameNose0{
            background:url(../img/gameNose0.png) center center no-repeat;
            background-size:contain;
            width:50px;
            height:50px;
            margin-left:-25px;
            margin-top:-25px;
            top:365px;
            left:180px;  
        }
        .game .gameNose1{
            background:url(../img/gameNose1.png) center center no-repeat;
            background-size:contain;
            width:50px;
            height:50px;
            margin-left:-25px;
            margin-top:-25px;
            top:365px;
            left:255px;   
        }
        .game .gameNose2{
            background:url(../img/gameNose2.png) center center no-repeat;
            background-size:contain;
            width:50px;
            height:50px;
            margin-left:-25px;
            margin-top:-25px;
            top:365px;
            left:329px;            
        }


    /*special*/
    #special .foodExp {
        width:300%;
    }
    #special .foodImg {
        height:220px;
    }
        #special .item .foodName {
            font-size:13px;
            font-weight:bold;
        }
        #special .item .foodPropose {
            font-size:12px;
            font-weight:bold;
            margin-top:10px;
        }

    /*product*/
    #product {
        height:480px;
    }
    #product .productMenu {
        position:absolute;
        margin:0;
        padding:0;
        width:100%;
        height:250px;
        background:url(../img/productMenu.png) bottom center no-repeat;
        background-size:contain;
    }
    .productMenu li {
        width:93%;
        height:28px;
        margin:5px 0 0 0px;
        padding:0;
        background-size:contain;
        cursor:pointer; 
        /*border:1px solid red;*/
    }

    .carousel-control.left,
    .carousel-control.right {
        background:none;
    }

    #product .item>div {        
        margin:20px 0 0 0;
    }

    #product .productImg {
        padding:15px;
    }

    #product .productProposer {
        font-size:12px;
        color:#c81508;
        margin:5px 0 0 0;
    }

    #product .productName {
        font-size:18px;
        color:#000000;
        margin:5px 0 0 0;
    }

    /*news*/
    #news {

    }
    .newsMain .title {
        color:#a93e1e;
        font-size:18px;
        font-weight:bold;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width:340px;
    }
    .story {
        margin-bottom:20px;
    }
    /*info*/
    #info {
    }
}

/* ________________________________________________________________________________ */
/* MD 中等屏幕（桌面显示器，大於等於 992px） ______________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 992px) {
    /*game*/
    .game {
        margin-top:30px;
        height:560px;
        background:url(../img/gameStage.png) center center no-repeat;
        background-size:contain;
        position:relative;
    }
        .game > div {
            position:absolute;
            /*border:1px solid red;*/
            cursor:pointer;
            cursor: -moz-grab;
            cursor: -webkit-grab;          
            /*grabbing*/            
        }
        .game .gameHitNose {
            /*border:1px solid green;*/
            width:1px;
            height:1px;      
            left:49%;
            top:38%;
            cursor:auto;            
        }
        .game .gameHitSmaile {
            /*border:1px solid green;*/
            width:1px;
            height:1px;      
            left:49%;
            top:52%;
            cursor:auto;
        }
        .game .gameOverlap { 
            width:49.5%;
            height:55%;      
            top:8.5%;
            left:22%;
            cursor:auto;
        }
        .game .gameSmaile0{
            background:url(../img/gameSmaile0.png) center center no-repeat;
            background-size:contain;
            width:25%;
            height:10%;
            top:250px;
            left:213px;     
        }
        .game .gameSmaile1{
            background:url(../img/gameSmaile1.png) center center no-repeat;
            background-size:contain;
            width:80px;
            height:80px;
            margin-left:-40px;
            margin-top:-40px;
            top:430px;
            left:52px;      
        }
        .game .gameSmaile2{
            background:url(../img/gameSmaile2.png) center center no-repeat;
            background-size:contain;
            width:80px;
            height:80px;
            margin-left:-40px;
            margin-top:-40px;
            top:430px;
            left:180px;       
        }
        .game .gameNose0{
            background:url(../img/gameNose0.png) center center no-repeat;
            background-size:contain;
            width:80px;
            height:80px;
            margin-left:-40px;
            margin-top:-40px;
            top:430px;
            left:315px;      
        }
        .game .gameNose1{
            background:url(../img/gameNose1.png) center center no-repeat;
            background-size:contain;
            width:80px;
            height:80px;
            margin-left:-40px;
            margin-top:-40px;
            top:430px;
            left:445px;     
        }
        .game .gameNose2{
            background:url(../img/gameNose2.png) center center no-repeat;
            background-size:contain;
            width:80px;
            height:80px;
            margin-left:-40px;
            margin-top:-40px;
            top:430px;
            left:573px;            
        }

    /*special*/
    #special .foodExp {
        width:200%;
    }
    #special .foodImg {
        height:293px;
    }
        #special .item .foodName {
            font-size:19px;
            font-weight:bold;
        }
        #special .item .foodPropose {
            font-size:16px;
            font-weight:bold;
            margin-top:10px;
        }

    /*product*/
    #product {
        height:600px;
    }
    #product .productMenu {
        height:334px;
        background:url(../img/productMenu.png) bottom center no-repeat;
        background-size:contain;
    }
    .productMenu li {
        width:94%;
        height:30px;
        margin:8px 0 0 0px;
        padding:0;
        background-size:contain;
        cursor:pointer; 
        /*border:1px red solid;*/
    }
    .productMenu .productMenuGift {
        height: 72px;
    }

    #product .item>div {        
        margin:20px 0 0 0;
    }

    #product .productProposer {
        font-size:12px;
        color:#c81508;
        margin:5px 0 0 0;
    }

    #product .productName {
        font-size:18px;
        color:#000000;
        margin:5px 0 0 0;
    }
    /*game*/
    #game {
        background: url(../img/gameBg.png) repeat;
    }
        #game .mainText {
            position: absolute;
            width: 330px;
            height: 715px;
            margin-top: -32px;
            background: url(../img/mainText.png) center center no-repeat;
            z-index: 1040;
        }

     /*news*/
    .newsMain .title {
        color:#a93e1e;
        font-size:18px;
        font-weight:bold;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width:340px;
    }
}

/* ________________________________________________________________________________ */
/* LG 大屏幕（大桌面显示器，大於等於 1200px） _____________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 1200px) {

    /* game interactive */
    .game {
        margin-top:30px;
        height:560px;
        background:url(../img/gameStage.png) center center no-repeat;
        background-size:contain;
        position:relative;
    }
        .game > div {
            position:absolute;
            /*border:1px solid red;*/
            cursor:pointer;
            cursor: -moz-grab;
            cursor: -webkit-grab;          
            /*grabbing*/            
        }
        .game .gameHitNose {
            /*border:1px solid green;*/
            width:1px;
            height:1px;      
            left:49%;
            top:35%;
            cursor:auto;            
        }
        .game .gameHitSmaile {
            /*border:1px solid green;*/
            width:1px;
            height:1px;      
            left:49%;
            top:52%;
            cursor:auto;
        }
        .game .gameOverlap { 
            width:49.5%;
            height:66%;      
            left:22%;
            cursor:auto;
        }
        .game .gameSmaile0{
            background:url(../img/gameSmaile0.png) center center no-repeat;
            background-size:contain;
            width:25%;
            height:10%;
            top:46%;
            left:34.5%;     
        }
        .game .gameSmaile1{
            background:url(../img/gameSmaile1.png) center center no-repeat;
            background-size:contain;
            width:100px;
            height:100px;
            margin-left:-50px;
            margin-top:-50px;
            top:460px;
            left:65px;       
        }
        .game .gameSmaile2{
            background:url(../img/gameSmaile2.png) center center no-repeat;
            background-size:contain;
            width:100px;
            height:100px;
            margin-left:-50px;
            margin-top:-50px;
            top:460px;
            left:220px;    
        }
        .game .gameNose0{
            background:url(../img/gameNose0.png) center center no-repeat;
            background-size:contain;
            width:100px;
            height:100px;
            margin-left:-50px;
            margin-top:-50px;
            top:460px;
            left:380px;      
        }
        .game .gameNose1{
            background:url(../img/gameNose1.png) center center no-repeat;
            background-size:contain;
            width:100px;
            height:100px;
            margin-left:-50px;
            margin-top:-50px;
            top:460px;
            left:538px;   
        }
        .game .gameNose2{
            background:url(../img/gameNose2.png) center center no-repeat;
            background-size:contain;
            width:100px;
            height:100px;
            margin-left:-50px;
            margin-top:-50px;
            top:460px;
            left:695px;            
        }

    /*special*/
    #special .foodExp {
        width:150%;
    }
        #special .foodImg {
            height:360px;
        }
        #special .item .foodName {
            font-size:25px;
            font-weight:bold;
        }
    /*product*/
    #product {
        height:730px;
    }
    #product .productMenu {
        height:400px;
        background:url(../img/productMenu.png) bottom center no-repeat;
        background-size:contain;
    }
    .productMenu li {
        width:93%;
        height:36px;
        margin:10px 0 0 0px;
        padding:0;
        background-size:contain;
        cursor:pointer; 
    }
    #product .item>div {        
        margin:20px 0 0 0;
    }
    #product .productProposer {
        font-size:12px;
        color:#c81508;
        margin:5px 0 0 0;
    }
    #product .productName {
        font-size:24px;
        color:#000000;
        margin:5px 0 0 0;
    }

     /*news*/
    .newsMain .title {
        color:#a93e1e;
        font-size:18px;
        font-weight:bold;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width:420px;
    }
}