body{
	background: url(../images/comics/banner01.jpg) center top / cover no-repeat;
	overflow-x: hidden;
	background-attachment: fixed;
}
body,html{
       height: 100%;
    width: 100%;
    margin: 0;
}
.wrapper {
    height: 100%;
    overflow: auto;
    width: 100%;
}

.wrapper.scrollbar-dynamic {
    max-height: none;
}

.wrapper.scroll-x {
    display: none !important;
}


#footer_{
    position: relative;
}


.df-width {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    max-width: 1100px;
    /*! background: #ffffff5e; */
    /*! -webkit-filter: blur(3px); */
}


.content-blur{
        margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    max-width: 1024px;
    background: #ffffff5e;
    -webkit-filter: blur(3px);
    z-index: 9;
        height: 100%;
        /*! display: block; */
        /*! background: #555; */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
}

.bg_black_trian{
    position: fixed;
    border-bottom:800px solid #06172beb;
    display: none;
}
.bg_black{
position: fixed;
opacity: 0.1;
}

main
{
	position: relative;
	margin-top: 50px;
    width: 100%;
    /*! height: 1800px; */
	z-index: 10;
}
.bg-change{
	position: fixed;
	top: 0px;
	left: 0;
	z-index: 3;
    width: 100%;
    height: 100vh;
    background: url(../images/comics/banner04.jpg) center top / cover no-repeat ;
    animation: shift01 12s ease-out 5s infinite both;
	display: none;
}
.bg-change::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
    width: 100%;
    height: 100vh;
    background: url(../images/comics/banner01.jpg) center top / cover no-repeat ;
    animation: shift02 12s ease-out 12s infinite both;
}

.bg-change::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
    width: 100%;
    height: 100vh;
    background: url(../images/comics/banner03.jpg) center top / cover no-repeat ;
    animation: shift03 12s ease-out 12s infinite both;
}

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

    margin-top: 110px;

}
.bg_black_trian{
    border-bottom:1529px solid #06172beb;
}
}


/*-----------------------------------------------
    shift - 切換圖
-----------------------------------------------*/

@keyframes shift01 {

    0%   { opacity: 0; }
    25% { opacity: 1;  }
    50% { opacity: 1;  }
    75% { opacity: 0;  }
    100% { opacity: 0;  } }


@keyframes shift02 {

    0%   { opacity: 0; }
    25% { opacity: 0;  }
    50% { opacity: 1;  }
    75% { opacity: 1;  }
    100% { opacity: 0;  } }

@keyframes shift03 {

    0%   { opacity: 0; }
    25% { opacity: 0;  }
    50% { opacity: 0;  }
    75% { opacity: 1;  }
    100% { opacity: 1;  } }

    @keyframes shift04 {

    0%   { opacity: 1; }
    25% { opacity: 0;  }
    50% { opacity: 0;  }
    75% { opacity: 0;  }
    100% { opacity: 1;  } }
/*-----------------------------------------------
    text
-----------------------------------------------*/
.ch{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


.ch h5{
    font-size: 1rem;
    text-align: center;
    background: #f2e2c9cf;


    width: 91%;
    height: 30%;
    margin: 42% 0 0 4.3%;
    font-size: 1.2rem;
    /*! font-weight: 600; */
    letter-spacing: 0.04rem;
    line-height: 1.2;
    color: #262625;
}


.ch-num{
    font-size: 0.85rem;
    color: #6a6a6a;
}
.gamepic a{
    padding: 4%;
    border: 1px solid #433340;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    transition: all .3s ease;
        z-index: 1;pointer-events: fill;
}
.gamepic a::before{
    content: '';
    position: absolute;

background: url(../images/comics/cover.jpg) center center / 100% no-repeat;
/*! top: 0; */
/*! left: 0; */
width: 92%;
height: 89%;transition: all .3s ease;

    /*! right: 0; */
    opacity: 1;
}

.gamepic a:hover::before{
    content: '';
    opacity: 0;transition: all .3s ease;

}
.gamepic::before{
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background: #433340;
    transform: rotate(45deg);
    top: -49%;
    left: -35%;
    z-index: 2;
}
.gamepic::after{
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background: #433340;
    transform: rotate(45deg);
    bottom: -39%;
    right: -42%;
    z-index: 2;
}
.gamepic:hover::before{
    content: '';
    position: absolute;

    top: -54%;
    left: -43%;
    transition: all .3s ease;
}
.gamepic:hover::after{
    content: '';
    position: absolute;

    bottom: -47%;
    right: -47%;
    transition: all .3s ease;
}



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

    width: 92%;
    height: 31%;
    margin: 42% 0 0 4%;
    font-size: 0.95rem;
    letter-spacing: 0.09rem;
    line-height: 1.2;
}


.ch-num{
    font-size: 0.8rem;
    color: #515050;
}
}



/*-----------------------------------------------
    title
-----------------------------------------------*/

.title01{
	margin: auto;
	text-align: center;
	padding: 10% 0 0%;
}

.title02{
	margin: 5auto;
	text-align: center;
	/*! padding: 7% 0 2%; */
	height: 90px;
background: url(../images/comics/title02.png) center center / 450px no-repeat;
	animation: textCss 2s ease-out .5s 1 both;
	margin: 1% auto 5%;

}

@keyframes textCss {

    0%   { opacity: 0; width: 0   ; }
    0%   { opacity: 1; width: 0  ; }
    100% { opacity: 1; width: 100% ; } }


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

.title02{

background: url(../images/comics/title02.png) center center / 90% no-repeat;


animation: all 0s;
}
}

/*-----------------------------------------------
    comics
-----------------------------------------------*/
.gamepic-banner {
    display: flex;
    flex-wrap: wrap; /* *超過變兩行* */
    max-width: 900px;
    align-content: flex-start; /* *內容靠左對齊* */
    justify-content: space-around; /* *內容平均分配* */
    /*! width: 100%; */
    position: relative;
    margin: 0 auto 50px;
}
.gamepic {
    flex: 1 1 28%;
    margin: 0.5% 0.5% 5% 0.5%;
    max-width: 271px;
    align-content: initial;
    /*! padding: 0 0 30px 0; */
    position: relative;
    overflow: hidden;
}

.last_ {
    /* !最後一項margin-right:auto */
    /*! margin-right: auto; */
    /*! max-width: 26.5%; */
}
.gamepic a img {
    max-width: 100%;
}


@media screen and (max-width:768px)
{
.gamepic {
    flex: 1 1 45%;
    margin: 2%;

}
.last_ {
    max-width: 47%;
    margin-right: auto;
}
}