/*
=======================================
    Reset CSS
=======================================
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,main,menu,nav,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
}
/* h1{
    position: relative;
    line-height: 2.5em;
    width: 96%;
    padding: 2% 0 2% 0;
    margin: 2% auto 2% auto;
    font-size: 1.5em;
    border-bottom-style:solid; 
    border-bottom-width:1px;
    border-bottom-color:#666;
}
h1 p{
    line-height: 1em;
    margin: 1% 12% 1% 0px;
    padding-left: 3%;
    border-left-style:solid; 
    border-left-width:10px;
    border-left-color:#74cdeb;
}
h5{color: #000;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section {
    display: block;
}

html {
    -webkit-text-size-adjust: 100%;
    height: 100%;
} */

.mainContainer {
    margin-top: 17%;
    width: 96%;
    padding-right: 2%;
    padding-left: 2%;
    margin-right: auto;
    margin-left: auto;
}
.gray_light{
    color: #a5a5a5;
}
.carset1{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0px solid rgba(0,0,0,.125);
    border-radius: 0rem;
    margin: 2% 0px 2% 0px; 
    padding: 2%;
}
.gamer_set{
    padding: 5px;
}

.navbg{
    background-color: #fff;
    border-bottom:1px #98999b solid;
}
/* .logArea{} */
.login img{width: 100%}
.login{
    width: 37%;
    position: fixed;
    color: #ec9000;
    line-height: 2em;
    top: 24px;
    right: 13%;
    z-index: 999;
}
.loginIcon{width: 12%;float: left;}
.loginId{width: 80%;float: left;overflow : hidden;/*text-overflow : ellipsis;*/white-space : nowrap;}
.logout-txt{width: 24%;float: left;}
.logout-txt a{color: #ec9000;}
.logout{
    font-size: 16px;
    position: fixed;
    top: 28px;
    right: 17%;
    display: block;
    z-index: 9999;
    color: #ec9000 !important;
}

.logout a{color: #ec9000 !important;}
.smallPic{display: block;}
.largePic{display: none;}
.card-body-set{padding: 1%;}
.card-text-set{
  display: -webkit-box;/* 設定 display 為 -webkit-box 元素。 */
  -webkit-box-orient: vertical;/* 設定 box 的子元素，是由上往下垂直排列。 */
  -webkit-line-clamp: 2;/* 設定欲顯示的行數，超出則顯示省略符號(...)。 */
  overflow: hidden;/* 設定超過上述指定之行數時隱藏。 */
  max-height:48px; /* 其它瀏覽器降級方式：給定最大高度 */
}
.card-text-green{color:#228848;margin-right: 2%;line-height: 2em; }
.card-text-red{color:#ff2222; margin-right: 2%;line-height: 2em;}
.gray{color: #666;}
.navbar{z-index: 9;}
/* .ml-2, .mx-2{margin: 10px 0px .25rem 0px !important;} */
.navbar{padding:.5rem .5rem .5rem 1rem;}/*調整選單按鈕*/
/*.navstyle{background-color: rgba(86, 164, 236, 0.9);}*/
.intro img{
    width: 100%;
}

/* 會員ID資訊 */
#loginId-pc{
    display: block;
}
#loginId-mobile{
    display: none;
}
#loginId-mobile_s{
    display: none;
}
#loginId-mobile_s{
    display: none;
}


/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 36%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 8.5rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}

/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 21%;
    left: 42%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 4rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}

/* .img-fluid-pc {
    width: 1102px;
    display: block;
} */


/*--各單元 PC Start--*/
@media screen and (min-width: 640px) {
    /* h1{
    position: relative;
    line-height: 2.5em;
    width: 96%;
    padding: .5% 0 .5% 0;
    margin: 2% auto 2% auto;
    font-size: 1.5em;
    border-bottom-style:solid; 
    border-bottom-width:1px;
    border-bottom-color:#666;
} */
/* h1 p{
    line-height: 1em;
    margin: 1% 12% 1% 0px;
    padding-left: 1%;
    border-left-style:solid; 
    border-left-width:10px;
    border-left-color:#74cdeb;
} */
    .navbar-nav{padding-left: 10%;width:80%;}/*解決電腦版選單偏左問題*/
    .mainContainer {margin-top: 4%;width: 70%;padding: 0px;}
    .smallPic{display: none;}
    .largePic{display: block;}

    .login img{width: 100%}
    .login{
        width: 20%;
        position: fixed;
        color: #ec9000;
        display: block;
        line-height: 2em;
        top: 18px;
        right: 0px;
        text-align: right;
        }
    .loginIcon{width: 30px;float: left;}
    .loginId{width: 80%;
        float: left;
        line-height: 1.2rem;
        margin-right: 10px;}
    .logout-txt{width: 5%;
            min-width: 40px;
            float: left;}
    .logout-txt a{color: #ec9000;}
    .logout{
        font-size: 20px;
        position: fixed;
        top: 23px;
        right: 2%;
        display: block;
        z-index: 9999;
        color: #ec9000 !important;
    }
        /* 會員ID資訊 */
    #loginId-pc{
        display: block;
    }
    #loginId-mobile{
        display: none;
    }
    #loginId-mobile_s{
        display: none;
    }
    #loginId-mobile_ss{
        display: none;
    }
}

/*--各單元END--*/


/*
=========================================
    Utilities
=========================================
*/

/* 水平對齊
---------------------------------*/
/* .ta-l {
    text-align: left;
}

.ta-r {
    text-align: right;
}

.ta-c {
    text-align: center;
} */


/* 浮動／清除浮動
---------------------------------*/
/* .fl {
    float: left;
}

.fr {
    float: right;
}

.fl-img {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.fr-img {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
}

.clear {
    clear: both;
} */

/* clearfix */
/* .clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
} */




@media (max-width: 1024px) {

.navbar {
    padding: .8rem .5rem .5rem 1rem;
}
        
/* 會員ID資訊 */
#loginId-pc{
    display: block;
}
#loginId-mobile{
    display: none;
}
#loginId-mobile_s{
    display: none;
 }
#loginId-mobile_ss{
    display: none;
}
        
.logout {
    font-size: 16px;
    position: fixed;
    top: 28px;
    right: 6%;
    display: block;
    z-index: 9999;
    color: #ec9000 !important;
 }
        
.loginIcon{
    width: 3%;
    float: left;
    position: fixed;
    top: 24px;
    right: 6%;
}
        
.loginId{
    font-size: .8rem;
    width: 100%;
    float: left;
    line-height: 1.2rem;
    margin-right: 10px;
    position: fixed;
    top: 21px;
    left: -10%;
    text-align: right;
}
        
/* 選單版位居中&靠左 */
/* .menu_pc{
    text-align: left;
    display: none;
} */
.menu_m{
    text-align: left;
    display: block; 
}

/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 36%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 8rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}

/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 20%;
    left: 42%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 4rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}
}

@media (max-width: 800px) {

/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 35%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 7rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}
    
/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 17%;
    left: 42%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 3rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}
    
}


@media (max-width: 768px) {
.navbar {
    padding: .8rem .5rem .5rem 1rem;
}
        
/* 會員ID資訊 */
#loginId-pc{
    display: block;
}
#loginId-mobile{
    display: none;
}
#loginId-mobile_s{
    display: none;
}
#loginId-mobile_ss{
    display: none;
}
        
.logout {
    font-size: 16px;
    position: fixed;
    top: 28px;
    right: 8%;
    display: block;
    z-index: 9999;
    color: #ec9000 !important;
}
        
.loginIcon{
    width: 4%;
    float: left;
    position: fixed;
    top: 23px;
    right: 8%;
}
        
.loginId{
    font-size: .8rem;
    width: 100%;
    float: left;
    /* line-height: 1.2rem; */
    margin-right: 10px;
    position: fixed;
    top: 20px;
    left: -13%;
    text-align: right;
}
        
/* 選單版位居中&靠左 */
/* .menu_pc{
    text-align: left;
    display: none;
} */
.menu_m{
    text-align: left;
    display: block;
}

/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 34%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 7rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}

/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 17%;
    left: 42%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 3rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}

}


@media (max-width: 640px) {

/* 會員ID資訊 */
#loginId-pc{
    display: block;
}
#loginId-mobile{
    display: none;
}
#loginId-mobile_s{
    display: none;
}
#loginId-mobile_ss{
    display: none;
}

.logout {
    font-size: 16px;
    position: fixed;
    top: 23px;
    right: 9%;
    display: block;
    z-index: 9999;
    color: #ec9000 !important;
}

.loginIcon{
    width: 4%;
    float: left;
    position: fixed;
    top: 18px;
    right: 9%;
}

.loginId{
    font-size: .8rem;
    width: 100%;
    float: left;
    line-height: 1.2rem;
    margin-right: 10px;
    position: fixed;
    top: 15px;
    left: -14%;
    text-align: right;
}

/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 34%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 6rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}

/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 20%;
    left: 42%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 4rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}

}



@media (max-width:576px) {

.navbar {
    padding: .8rem .5rem .5rem 1rem;
}

/* 會員ID資訊 */    
#loginId-pc{
    display: none;
}
#loginId-mobile{
    display: block;
}
#loginId-mobile_s{
    display: none;
}
#loginId-mobile_ss{
    display: none;
}

.gs_logo{
    height:2.4rem;
}

.mainContainer {
    margin-top: 16%;
    width: 96%;
    padding-right: 2%;
    padding-left: 2%;
    margin-right: auto;
    margin-left: auto;
}
    
.login{
    width: 80%;
    position: fixed;
    color: #ec9000;
    display: block;
    line-height: 2em;
    top: 16px;
    right: 40px;
    text-align: right;
}
.loginIcon{
    width: 5%;
    float: left;
    position: fixed;
    top: 19px;
    right: 13%;
}
.loginId{
    font-size: .9rem;
    width: 150px;
    float: left;
    line-height: 1rem;
    margin-right: 10px;
    position: fixed;
    top: 19px;
    left: unset;
    right: 18%;
    text-align: right;
 }
.logout-txt{
    width: 5%;
    min-width: 40px;
    float: left;
}
.logout-txt a{
    color: #ec9000;
}
    
.logout{
    font-size: 16px;
    position: fixed;
    top: 24px;
    right: 12%;
    display: block;
    z-index: 9999;
    color: #ec9000 !important;
}
    
.navbar-brand {
    display: inline-block;
    padding-top: .2rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

/* 選單版位居中&靠左 */
/* .menu_pc{
    text-align: center;
    display: none;
} */
.menu_m{
    text-align: left;
    display: block;
}

/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 30%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 5rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}

/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 20%;
    left: 42%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 4rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}

}


@media (max-width: 420px) {

    /*.navbar {*/
        /*padding: .5rem .5rem .8rem 1rem;*/
    /*}*/
        /**/
    /*#loginId-pc{*/
        /*display: none;*/
    /*}*/
    /*#loginId-mobile{*/
        /*display: block;*/
    /*}*/
    /*#loginId-mobile_s{*/
        /*display: none;*/
    /*}*/
        /**/
    /*.gs_logo{*/
        /*height:2rem;*/
    /*}*/
        /**/
    /*.mainContainer {*/
        /*margin-top: 17%;*/
        /*width: 96%;*/
        /*padding-right: 2%;*/
        /*padding-left: 2%;*/
        /*margin-right: auto;*/
        /*margin-left: auto;*/
    /*}*/
        /**/
        /*.login{*/
            /*width: 80%;*/
            /*position: fixed;*/
            /*color: #54a4e9;*/
            /*display: block;*/
            /*line-height: 2em;*/
            /*top: 16px;*/
            /*right: 40px;*/
            /*display: none;*/
            /*text-align: right;*/
        /*}*/
        /*.loginIcon{*/
            /*width: 6%;*/
            /*float: left;*/
            /*position: fixed;*/
            /*top: 14px;*/
            /*right: 13%;*/
        /*}*/
        /*.loginId{*/
            /*font-size: .8rem;*/
            /*width: 100%;*/
            /*float: left;*/
            /*line-height: 1rem;*/
            /*margin-right: 10px;*/
            /*position: fixed;*/
            /*top: 14px;*/
            /*left: -20%;*/
            /*text-align: right;*/
        /*}*/
        /*.logout-txt{*/
            /*width: 5%;*/
            /*min-width: 40px;*/
            /*float: left;*/
        /*}*/
        /*.logout-txt a{*/
            /*color: #54a4e9;*/
        /*}*/
        /**/
        /*.logout{*/
            /*font-size: 16px;*/
            /*position: fixed;*/
            /*top: 17px;*/
            /*right: 13%;*/
            /*display: block;*/
            /*z-index: 9999;*/
            /*color: #54a4e9 !important;*/
        /*}*/
        /**/
        /*.navbar-brand {*/
            /*display: inline-block;*/
            /*padding-top: .2rem;*/
            /*padding-bottom: .3125rem;*/
            /*margin-right: 1rem;*/
            /*font-size: 1.25rem;*/
            /*line-height: inherit;*/
            /*white-space: nowrap;*/
        /*}*/


/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 30%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 4.5rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}

/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 18%;
    left: 42%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 3.5rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}

}


@media (max-width: 375px) {

.navbar {
    padding: .8rem .5rem .5rem 1rem;
}
        
/* 會員ID資訊 */
#loginId-pc{
    display: none;
}
#loginId-mobile{
    display: block;
}
#loginId-mobile_s{
    display: none;
}
#loginId-mobile_ss{
    display: none;
}
        
.gs_logo{
    height:1.8rem;
}
        
.mainContainer {
     margin-top: 18%;
    width: 96%;
    padding-right: 2%;
    padding-left: 2%;
    margin-right: auto;
    margin-left: auto;
}
        
.login{
    width: 80%;
    position: fixed;
    color: #ec9000;
    display: block;
    line-height: 2em;
    top: 16px;
    right: 40px;
    text-align: right;
}
.loginIcon{
    width: 6.5%;
    float: left;
    position: fixed;
    top: 17px;
    right: 15%;
 }
.loginId{
    font-size: .7rem;
    width: 100%;
    float: left;
    /* line-height: 1.2rem; */
    margin-right: 10px;
    position: fixed;
    top: 18px;
    left: -22%;
    text-align: right;
}
.logout-txt{
    width: 5%;
    min-width: 40px;
    float: left;
}
.logout-txt a{
    color: #ec9000;
}
        
.logout{
    font-size: 16px;
    position: fixed;
    top: 21px;
    right: 16%;
    display: block;
    z-index: 9999;
    color: #ec9000 !important;
}
        
.navbar-brand {
    display: inline-block;
    padding-top: .1rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 30%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 4rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}

/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 17%;
    left: 40%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 3.5rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}

}


@media (max-width: 360px) {
/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 30%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 4rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}

/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 17%;
    left: 40%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 3rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}

}


@media (max-width: 320px) {

.navbar {
    padding: .8rem .5rem .5rem 1rem;
}
    
/* 會員ID資訊 */
#loginId-pc{
    display: none;
}
#loginId-mobile{
    display: none;
}
#loginId-mobile_s{
    display: none;
}
#loginId-mobile_ss{
    display: block;
}
    
.gs_logo{
    height:1.8rem;
}
    
.mainContainer {
    margin-top: 21%;
    width: 96%;
    padding-right: 2%;
    padding-left: 2%;
    margin-right: auto;
    margin-left: auto;
}
    
.login{
    width: 80%;
    position: fixed;
    color: #54a4e9;
    display: block;
    line-height: 2em;
    top: 16px;
    right: 40px;
    text-align: right;
}
.loginIcon{
    width: 7%;
    float: left;
    position: fixed;
    top: 17px;
    right: 17%;
}
.loginId{
    font-size: .5rem;
    width: 100%;
    float: left;
    line-height: .9rem;
    margin-right: 10px;
    position: fixed;
    top: 11px;
    left: -24%;
    text-align: right;
}
.logout-txt{
    width: 5%;
    min-width: 40px;
    float: left;
}
.logout-txt a{
    color: #ec9000;
}
    
.logout{
    font-size: 14px;
    position: fixed;
    top: 22px;
    right: 17%;
    display: block;
    z-index: 9999;
    color: #ec9000 !important;
}
    
.navbar-brand {
    display: inline-block;
    padding-top: .1rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

/* 影音播放箭頭 */
/* 版頭影音 */
.box_big > .icon_big { 
    position: relative;
    /* text-align: center!important; */
}
.box_big > .icon_big > .image_big { 
    position: absolute; 
    top: 28%;
    left: 46%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box_big > .icon_big:hover > .image_big { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box_big > .icon_big > .image_big > i { 
    font-size: 4rem; 
    color: #fff !important; 
}
.box_big > .icon_big:hover > .image_big > i { 
    color: #ec9000 !important; 
}

/* 最新影音 */
.box > .icon { 
    position: relative; 
}
.box > .icon > .image { 
    position: absolute; 
    top: 15%;
    left: 40%;
    z-index: 1;
    opacity: 1;
    text-shadow: 0 0 10px #000; 
    cursor: pointer;
}
.box > .icon:hover > .image { 
    position: absolute; 
    z-index: 1; 
    opacity: 1; 
    text-shadow: 0 0 10px #000; 
    cursor: pointer; 
}
.box > .icon > .image > i { 
    font-size: 3rem; 
    color: #fff !important; 
}
.box > .icon:hover > .image > i { 
    color: #ec9000 !important; 
}

}