.d-flex {
    display: flex
}

.btn-outline-primary {
    border: 1px solid #ff7a00;
    color: #ff7a00
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.open>.dropdown-toggle.btn-outline-primary {
    background-color: #ff7a00;
    color: #fff
}

.btn-blue {
    background-color: #2a9fd6;
    color: #fff
}

.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-blue.active,
.open>.dropdown-toggle.btn-blue {
    background-color: #248ebf;
    color: #fff
}

.game_list .game-word {
    margin-top: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between
}

.vendor-title {
    display: flex
}

.vendor-title small {
    color: #d9001b
}

.game-icon {
    padding-left: 0;
    order: 4;
    font-size: 16px;
    padding: 5px
}

.game-icon .left-icon {
    color: #ababab
}

.game-icon .right-icon a {
    color: #000
}

.game-icon .fa-gamepad {
    font-size: 1.2em
}

.hot_game_mobile .well,
.game-block .game-img {
    float: left;
    padding: 0
}

.hot_game .main {
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden
}

.hot_game a {
    align-items: normal
}

.hot_game .hot_img {
    padding: 0;
    overflow: hidden
}

.hot_game .no {
    position: absolute;
    top: 0;

    left: 7px;
}

.hot_game ul {
    display: flex
}

.hot_word_main {
    display: flex;
    padding: 2px;
    padding-left: 6px;
    justify-content: space-between;
    padding-right: 6px;
    flex-direction: column
}

.hot_word_main span {
    color: #777;
    font-size: 8px;
    line-height: normal
}

.hot_word_main .title {
    font-size: 8px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    height: 4em
}

.reco_main span {
    display: block;
    padding: .5em
}

.m-t-2 {
    margin-top: 9px
}

.hot_game h4 {
    border-bottom: none;
    padding-bottom: 0
}

.pagination>li>a,
.pagination>li>span,
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    color: #fff;
    background-color: #232323;
    border: none;
    margin-left: 1px
}

.footer {
    background-color: #323232
}

.padding_4 {
    padding: 0 5px
}

.btn_big {
    padding: 8px 2.5em
}

.gamelib_block a {
    color: #777
}

.gamelib_block .title {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    height: 3em;
    font-size: 14px;
    color: #333
}

.gamelib_block .gamelib_img {
    width: 100%;
    height: 155px;
    object-fit: cover;
    object-position: top center
}

.gamelib_name_main {
    align-items: center
}

.gamelib_name_main .gamelib_name_block {
    display: flex;
    flex-direction: column
}

.gamelib_name_main .gamelib_a {
    color: #2a9fd6
}

.gamelib_btn_main {
    margin-left: auto
}

.gamelib_btn_main .btn {
    padding: 2px 5px;
    font-size: 10px
}

.gamelib_name_main .blog_a {
    color: #ff7a00
}

.gamelib_btn_main .btn-play {
    display: inline-block;
    color: #2a9fd6;
    border: 1px solid #2a9fd6;
    padding: 2px 5px;
    font-size: 10px;
    -webkit-border-radius: 4px;
    text-decoration: none
}

.btn_game_start {
    display: inline-block;
    color: #fff;
    background-color: #2a9fd6;
    padding: 2px 5px;
    font-size: 10px;
    -webkit-border-radius: 4px;
    border: 1px solid #2a9fd6
}

.btn_blog_start {
    display: inline-block;
    color: #fff;
    background-color: #ff7a00;
    padding: 2px 5px;
    font-size: 10px;
    -webkit-border-radius: 4px
}

.lib-avatar {
    width: 35px;
    height: 35px;
    -webkit-border-radius: 50px;
    vertical-align: middle;
    margin-right: 8px
}

.reco_read ul {
    padding: 0 5px
}

.reco_read li {
    display: flex;
    padding-right: 5px;
    padding-left: 5px;
    list-style-type: none;
}

.selected img {
    opacity: .5
}

.carousel-control {
    opacity: 100
}

.carousel-control.left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.0001) 100%)
}

.carousel-control.left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.0001) 100%)
}

.carousel-control .carousel_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em
}

.list-inline {
    margin-left: 0
}

.blog_header_title .btn {
    vertical-align: text-bottom
}

.blog_header_title h4 {
    line-height: 1.5
}

.blog_content_header a {
    color: #888
}

.blog_content img {
    max-width: 100%
}

.blog_id_main {
    font-size: 8px
}

.blog_id_main .blog_name {
    flex-direction: column;
    width: 100%
}

.blog_id_main .date {
    margin-left: auto;
    align-items: flex-end
}

.blog_name .blog_name_id {
    color: #444
}

.reco_comic li {
    list-style-type: none
}

.libgame_up {
    color: #2a9fd6;
    padding-top: 9px;
    font-weight: 900
}

.read-more-state {
    display: none
}

/* 2021新增 */

.game-main{
    clear: none;
}

.game-loop-item{
    display: block;
    position: relative;
    flex-wrap:wrap;
    width: 50%;
}

.loop-bg{
    background: #666;
}

/* .loop .owl-nav button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 1.5em;
    text-align: center;
    font-size: 5rem !important;
    color: rgba(255,255,255,0.5) !important;
}
.loop.owl-theme .owl-dots .owl-dot.active span,.loop.owl-theme .owl-dots .owl-dot:hover span{
    background-color: #FFF;
}

.loop .owl-nav button span{
    vertical-align: super;
} */

.owl-prev{
    left: -5rem;
}

.owl-next{
    right: -5rem;
}

.loop .owl-nav button:hover{
    background: rgba(0,0,0,0.5) !important;
}

.loop a:hover,.loop a:hover>*{
    text-decoration: none;
    color: #FFF;
}

.loop .owl-item{
    display: flex;
    flex-direction: column;
    padding-left: 10px;
}

.loop .cover{
    display: inline-block;
    float: none;
}

.loop .intro{
    display: inline-flex;
    float: none;
    flex-direction: column;
}

.loop .intro-content{
    display: flex;
    width: 100%;
    height: 150px;
    flex-direction: column;
}

.loop .intro-content-text{
    margin-bottom: auto;
    max-height: 6.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
    margin-bottom: 0.5rem;
}

.loop .coupon_name{
    color: #ff7a00;
}

.loop .h4,.loop .com-title,.loop .icon-group{
    color: #CCC;
}

.loop .icon-group{
    display: flex;
    font-size: 2rem;
    margin-top: auto;
}

.loop .icon-group .com-title{
    font-size: 1rem;
    margin-left: auto;
}

.game-main-title{
    justify-content: space-between;
    align-items: baseline;
}

.ranking-number{
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5;
    text-align: center;
    z-index: 10;
    left: 10px;
    top: 0;
    background-color: #323232;
    color: white;
}

.ranking-number::before{
    content: '';
    width: 0;
    height: 0;
    border-color: transparent #323232;
    border-width: 0.5em 1.25em;
    border-style: solid;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(-50%);
}

.first .ranking-number{
    font-weight: bold;
    background-color: #e00068;
}

.first .ranking-number::before{
    border-color: transparent #e00068;
}

.second .ranking-number{
    font-weight: bold;
    background-color: #ff7a00;
}

.second .ranking-number::before{
    border-color: transparent #ff7a00;
}

.third .ranking-number{
    font-weight: bold;
    background-color: #00bb08;
}

.third .ranking-number::before{
    border-color: transparent #00bb08;
}

.game_list .game-title {
    height: 2.8em
}
@media (min-width: 767px) {
    /* 遊戲簡介頁 */
    .game-main {
        padding: 0 5px;
    }
    .well.game-block {
        padding: 0;
        overflow: hidden;

        flex-wrap:wrap;
    }
    .hot_game_mobile .well,
    .game-block .game-img {
        padding: 0
    }
    .hot_game ul {
        flex-direction: column
    }
    .open_game_btn {
        display: none
    }
}

@media(min-width:769px) {
    .blog_id_main .blog_name {
        padding-top: 7px
    }
    .reco_comic ul {
        padding: 0 5px
    }
    .game_text {
        width: 80%
    }
}

@media(max-width:1024px) {
    .right_text_main {
        display: flex;
        flex-direction: column
    }
    .right_text_main .text_block {
        display: flex;
        flex-direction: column
    }
    .right_text_main .order-1 {
        order: 1
    }
    .right_text_main .order-2 {
        order: 2
    }
    .right_text_main .order-3 {
        order: 3
    }
    .right_text_main .order-4 {
        order: 4
    }
    .right_text_main .order-5 {
        order: 5
    }
}

@media(max-width:991px) {
    .game_int_bottom {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        margin: 0;
        list-style: none;
        background-color: #323232;
        padding: 0;
        justify-content: center
    }
}

@media(max-width:768px) {
    .game_pag_body {
        padding-top: 40px
    }
    .right_text_main .btn_big {
        display: block;
        width: 100%;
        margin-bottom: 6px
    }
    .blog_id_main {
        display: flex!important
    }
    .blog_id_main .comment-avatar {
        width: 35px;
        height: 35px
    }
    .reco_read ul {
        display: flex;
    }
    .blog_id_main .blog_name {
        padding-left: 8px;
        width: 60%
    }
    .reco_comic ul {
        display: flex;
        overflow: scroll
    }
    .reco_comic li {
        margin: 0 5px;
        min-width: 45%
    }
    .reco_comic .now_play {
        display: none
    }
    .tag_text_title {
        display: none
    }
}

@media(max-width:767px) {
    .midde_main {
        display: flex;
        flex-direction: column
    }
    .all_gmae {
        order: 2
    }
    .well.game-block {
        display: flex;
        padding: 0;
        overflow: hidden;
        flex-wrap: wrap;
    }
    .hot_game a {
        flex-direction: column
    }
    .hot_game ul {
        display: flex;
        overflow: scroll
    }
    .hot_game li {
        min-width: 60%
    }
    .hot_word_main .title {
        margin-bottom: 1.5em
    }
    .p-md-0 {
        padding: 0
    }
    .reco_read ul {
        overflow: scroll
    }
    .reco_read li {
        min-width: 70%
    }
    .read-more-target {
        opacity: 0;
        max-height: 0;
        font-size: 0;
        transition: 0s ease
    }
    .read-more-state:checked~.read-more-wrap .read-more-target {
        opacity: 1;
        font-size: inherit;
        max-height: 999em
    }
    .read-more-state~.read-more-trigger:before {
        content: '開啟圖片'
    }
    .read-more-state:checked~.read-more-trigger {
        display: none
    }
    .read-more-trigger {
        cursor: pointer;
        display: inline-block;
        padding: 3px 10px;
        color: #2a9fd6;
        font-size: .9em;
        line-height: 2;
        border: 1px dotted #2a9fd6;
        border-radius: .25em;
        font-weight: 400
    }
    .game_text {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box
    }
    #game_content {
        transition: all .3s
    }
    #open_game_content {
        color: #ff7a00;
        text-align: center
    }
    #open_game_content i {
        transition: transform .3s;
        font-size: 1.25em
    }
    #open_game_content i.angle-up {
        transform: rotate(180deg)
    }
}

/*.tag-block .btn-primary:hover {
    border: #ff7a00 solid 1px;
    background-color: #fff;
    color: #ff7a00
}

.tag-block .btn-primary {
    border: #999 solid 1px;
    background-color: transparent;
    color: #999
}*/

.read-block a {
    margin: 0 2px
}

.owl-nav button.owl-next{
    right:0;
}

.loop .owl-nav button{
    top:100%;
    transform:translateY(-100%);
}
.loop .owl-item{

    flex-wrap:wrap
}

@media screen  and (max-width: 768px){

    .owl-nav button.owl-prev{
        left: 0;
    }
}
@media (max-width: 991px){
    .game-loop-item .intro {
        order: 1;
    }
    .game-loop-item .preview-block{
        order:2;
    }

    .owl-item .cover{
        min-height: 167px;
    }
}

@media (max-width: 767px){
    .game-loop-item .intro {
        order: 2;
    }
    .game-loop-item .preview-block{
        order:1;
    }
    .owl-item .cover{
        height: 167px;
    }
}