﻿
#RenderBody {
    padding-top: 12%;
    color: #323232;
}

#movie_list_outer {
}

#nav_booking {
    background-color: #cccccc;
    color: red;
}

#div_cinema_sel {
    margin-bottom: 60px;
}

#div_cinema_title {
    line-height: 75px;
}

#div_info {
    font-weight: bold;
    color: #616060;
}

    #div_info .Rate {
        margin: 8px;
        padding: 3px;
        margin-left: 80px;
    }

#movie_sel {
    width: 63px;
    transform: translateX(6px) translateY(18px);
}

/**/
.movie_list {
    margin-bottom: 50px;
}

/**/
.movie_post {
    width: 20%;
}

    /**/
    .movie_post img {
        width: 100%;
    }

/**/
.movie_box {
    width: 70%;
    padding-left: 2%;
}


.Rate {
    height: 20px;
}

    .Rate div {
        float: left;
    }


.MovieCName {
    font-weight: bold;
    font-size: 17pt;
    margin-bottom: 3px;
}


.MovieEName {
    font-weight: bold;
    font-size: 12pt;
    margin-bottom: 6px;
}


.MovieDuration {
    font-weight: bold;
    font-size: 11pt;
    color: #a2a0a0;
    margin-bottom: 23px;
    margin-top: 12px;
}

.ShowTimeList {
    font-weight: bold;
}

.ShowDateList {
    margin-bottom: 15px;
}


.chk_version_box {
    background-color: black;
}

.version_box {
    color: gray;
    border: 1px solid
}

.outter {
    margin: auto;
}


.ShowTimeList .move_date {
    width: 120px;
}

.ShowTimeList a {
    padding-left: 8px;
}

.ShowTimeList .row {
    padding-top: 8px;
    padding-bottom: 8px;
}

.movie_time {
    width: 100%;
}



.movie_date {
    cursor: pointer;
}



.ShowDateList .movie_date {
    border: 1px solid red;
    padding: 5px;
    text-align: center;
    background-color: white;
    width: 60px;
    font-size: 14px;
    font-weight: bold;
}

.ShowDateList .selected {
    border: 1px solid red;
    padding: 5px;
    background-color: red;
    color: white;
    width: 60px;
    font-size: 14px;
    font-weight: bold;
    transform: scale(1.05,1.2);
    transition: transform 0.5s ease;
}

    .ShowDateList .selected div {
        transform: scale(1,0.8333);
    }

.MovieHallCht {
    width: 115px;
    white-space: nowrap;
}

.ShowTime {
    width: 80%;
}



.ShowDateList .selected .arrow {
    display: block;
    content: '';
    background: red;
    position: absolute;
    z-index: -1;
    -webkit-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    transform: rotate(45deg);
    margin-top: 17px;
    margin-left: 17px;
    width: 30px;
    height: 30px;
}

#sel_cinema {
    color: #323232;
    padding: 15px;
    font-size: 20px;
    /* font-family: 'Microsoft YaHei';*/
    font-family: 'Microsoft JhengHei';
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: ' ';
    border: 0px solid red;
    background-color: rgba(208, 206, 206, 0.22);
    margin-bottom: 15px;
    width: 530px;
    font-weight: bold;
}

    #sel_cinema option {
        font-family: 'Microsoft JhengHei';
        font-size: 18px;
        font-weight: bold;
    }


#sel_cinema_btn {
    color: red;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    /* float: right; */
    /* top: 130px; */
    margin-top: -53px;
    /* left: 100px; */
    margin-left: 550px;
    font-size: 25px;
    z-index: -10;
}


#sel_div {
    margin-top: 10px;
    margin-left: 15px;
    margin-bottom: 10px;
    position: relative;
}

.a_st {
    text-decoration: underline;
    color: #4967da;
    cursor: pointer;
}

/*==================================================================================================*/

ul { /* 取消ul預設的內縮及樣式 */
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul.drop-down-menu {
        border: #ccc 1px solid;
        display: inline-block;
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 13px;
    }

        ul.drop-down-menu li {
            position: relative;
            white-space: nowrap;
            border-right: #ccc 1px solid;
        }

        ul.drop-down-menu > li:last-child {
            border-right: none;
        }

        ul.drop-down-menu > li {
            float: left; /* 只有第一層是靠左對齊*/
        }

        ul.drop-down-menu a {
            background-color: #fff;
            color: #333;
            display: block;
            padding: 0 30px;
            text-decoration: none;
            line-height: 40px;
        }

            ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/
                background-color: #ef5c28;
                color: #fff;
            }

        ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
            background-color: #ef5c28;
            color: #fff;
        }


        ul.drop-down-menu ul {
            border: #ccc 1px solid;
            position: absolute;
            z-index: 99;
            left: -1px;
            top: 100%;
            min-width: 180px;
        }

            ul.drop-down-menu ul li {
                border-bottom: #ccc 1px solid;
            }

                ul.drop-down-menu ul li:last-child {
                    border-bottom: none;
                }

            ul.drop-down-menu ul ul { /*第三層以後的選單出現位置與第二層不同*/
                z-index: 999;
                top: 10px;
                left: 90%;
            }


        ul.drop-down-menu ul { /*隱藏次選單*/
            display: none;
        }

        ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
            display: block;
        }

.movie_post_phone {
 display:none;
}




@media only screen and (max-width: 1030px) {
    /*ipad*/
    #div_info {
        font-weight: bold;
        color: #616060;
        margin: 20px;
    }

    #div_cinema_title {
        line-height: 16px;
        margin-left: 27px;
        margin-top: 24px;
    }

    .movie_list {
        width: 92%;
        margin: auto;
    }


    #sel_cinema {
        color: #323232;
        padding: 20px;
        font-size: 16px;
        /* font-family: 'Microsoft YaHei'; */
        font-family: 'Microsoft JhengHei';
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: ' ';
        border: 0px solid red;
        background-color: rgba(208, 206, 206, 0.22);
        margin-bottom: 15px;
        width: 77%;
        font-weight: bold;
    }


    #sel_cinema_btn {
        color: red;
        cursor: pointer;
        font-size: 24px;
        position: absolute;
        /* float: right; */
        top: 87px;
        /* margin-top: -53px; */
        right: 43px;
        /* margin-left: 325px; */
        font-size: 25px;
        z-index: -10;
    }
            
}


@media only screen and (max-width: 420px) {
    /*iphone8+*/
    #div_info {
        font-weight: bold;
        color: #616060;
        margin:20px;
    }

    #div_cinema_title {
        line-height: 16px;
        margin-left: 27px;
    }

    #sel_cinema {
        color: #323232;
        padding: 20px;
        font-size: 16px;
        /* font-family: 'Microsoft YaHei'; */
        font-family: 'Microsoft JhengHei';
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: ' ';
        border: 0px solid red;
        background-color: rgba(208, 206, 206, 0.22);
        margin-bottom: 15px;
        width: 77%;
        font-weight: bold;
    }


    #sel_cinema_btn {
        color: red;
        cursor: pointer;
        font-size: 24px;
        position: absolute;
        /* float: right; */
        top: 90px;
        /* margin-top: -53px; */
        right: 31px;
        /* margin-left: 325px; */
        font-size: 25px;
        z-index: -10;
    }

    #sel_cinema option {
        font-family: 'Microsoft JhengHei';
        font-size: 14px;
        font-weight: bold;
    }

    #div_info .Rate {
        margin: 8px;
        padding: 3px;
        margin-left: 2px;
    }

    .MovieCName {
        font-weight: bold;
        font-size: 13pt;
        margin-bottom: 3px;
    }


    .movie_post_pc {
        display: none;
    }

    .movie_post_phone {
        display: inline-block;
        float: left;
        margin-right: 15px;
        width: 33%;
    }

    .movie_box {
        width: 96%;
        padding-left: 4%;
    }

    .ShowDateList {
        margin-bottom: 15px;
        margin-top: 110px;
    }

    .ShowTime {
        width: 100%;
    }
}