/* 清單畫面 */
div.list {
   width:100%;background-size: contain; background-position:center top;
}


div.list div {
    border-radius:0px; 
}

div.list div ul {
    text-align:center;
}

div.list li {
    display:inline-block; padding:6px; padding-bottom:30px; vertical-align:top;
}

div.lishadow{
    box-shadow: 0 0 15px 2px #000;height: 0px;width: 150px;margin: 0 auto;
}

div.appName{
    font-size:1.5em; padding:5px 0 10px 5px; color:#006d53; font-weight:bold; text-align:center;
}

div.liContent div.date{
    position:absolute; top:-10px; right:20px; width:80px; height:20px; background-color:#ECECEC; 
    border:1px solid #cacaca; text-align:center; z-index:1; color:#8f5207;border-radius:2px;
    line-height:20px; 
}

div.liContent:hover>div.date{
    right:10px; 
}

/*M0_1*/
div.M0_1 {
    width:980px; margin:0 auto; padding:0 0 0 0; position:relative;
}

div.M0_1 img.bg2{
    display:block; background-size:cover; background-position:center top; width:100%;
}

div.M0_1 ul{
    position:absolute; padding:0; padding-left:0; overflow:auto;
}

div.M0_1 ul li{
    float:left; padding:0; position:relative; /*cursor:pointer;*/
}

div.M0_1 ul li div.text{
    display:none;
}

div.M0_1 ul li img{
    display:block;
}


@media screen and (min-width: 901px) {
    div.M0_1 li div.bgHover {
    position:absolute; left:0; top:0; bottom:0; right:0; width:100%; height:100%; opacity:0;
    }

    div.M0_1 li:hover>div div.bgHover {
        opacity:0.6;transition: opacity .3s; 
    }
}



/*M0_0*/

div.M0_0 {
    width:980px; margin:0 auto; padding:0 0 0 0; position:relative; overflow:hidden;
}

div.M0_0 img.bg2{
    display:block; background-size:cover; background-position:center top; width:100%;
}

div.M0_0 div.appName{
    color:#fff; letter-spacing:4px; padding-bottom:10px;
}

div.M0_0 div.content{
    position:absolute; left:0; right:0; top:0; bottom:0; margin:0 auto; width:95%; height:100%; padding:70px 0 0 0;
}

div.M0_0 div.text{
    display:inline-block; vertical-align:top; color:#fff; font-size:13px; line-height:25px; width:500px;
    padding-right:20px;
}

div.M0_0 div.pic{
    display:inline-block; vertical-align:top; width:400px; position:relative; 
}

div.M0_0 div.pic div.image_full{
    width:100%; margin:0 auto; border:solid 3px #fff; 
}

div.M0_0 div.pic div.image_full div:after {
    content:""; padding-top:75%; display:block;
}

div.M0_0 div.pic div.image_full div.image div.img{
    display:block; width:100%; background-repeat: no-repeat; transition: opacity .5s ease-in-out; background-size:cover;
    background-position:center top; position:absolute;
}

div.M0_0 div.small_image{
    position:absolute; bottom:8px; right:5px; width:100%; padding-top:0px; padding-bottom:0px; background-color:initial;
    z-index:1; transition: all .5s ease-in-out; opacity:1; z-index:5;
}

div.M0_0 div.pic div.small_image.bg{
    display:none;
}

div.M0_0 div.pic div.small_image div.content,div.images div.small_image.bg div.content{
    margin:0 auto;  overflow:hidden; padding:0; text-align:right;
}

div.M0_0 div.pic div.small_image ul{
    margin:0 auto; width:100%; text-align:right;
}

div.M0_0 div.pic div.small_image li{
  padding:0;  padding-left:10px; 
}

div.M0_0 div.pic div.small_image ul img{
    width:50px; height:50px; background-repeat: no-repeat; cursor:pointer; opacity:1; border:1px solid #777;
    position:relative; top:0;  z-index:5; display:none;
}

div.M0_0 div.pic div.small_image ul img:hover {
    opacity:0.7; top:0; border:1px solid #fff;
}

div.M0_0 div.pic div.small_image ul div.page {
    width:15px; height:15px; border-radius:15px; border:solid 2px #666; background-color:#fff; cursor:pointer; 
}

div.M0_0 div.pic div.small_image ul div.page_select {
    width:15px; height:15px; border-radius:15px; border:solid 2px #fff; background-color:#666;
}

div.M0_0 div.more {
    color:#fff; padding-top:20px; font-size:20px; text-align:center; cursor:pointer; display:none;
}


/*M9_1*/

div.images_mobile {
    display:none;
}

div.M9_1 li {
    padding-bottom:0;
}


div.images div.img_pre,div.images div.img_next{
    position:absolute; width:980px; height:inherit;  background-size: cover; background-position: top right;
}

div.images div.img_pre div, div.images div.img_next div{
    background:rgba(0,0,0,0.3); width:inherit; height:inherit; display:none;
}

div.images div.image_full div.image{
    height:inherit;
}

    div.images div.image_full div.image div.img {
        width: 100%;
        height: inherit;
        transition: opacity .5s ease-in-out;
        position: absolute;
        left: 0;
        top: 0;
        background-size: cover;
        /*background-size: contain;*/
        background-position: center;
        /*background: center no-repeat;*/
    }

div.images {
    padding-top:0px; padding-bottom:0px; 
}

div.images div.image_full{
    position:relative; width:980px; margin:0 auto; 
}

/*div.images div.image_full div.image div.img:after,div.images div.img_pre div:after, div.images div.img_next div:after{
    content:""; display:block; padding-top:50%;
}*/

div.images div.image_full div.image img{
    display:block; width:100%; background-repeat: no-repeat; transition: opacity .5s ease-in-out;
    position: absolute; left: 0; top: 0; max-width:950px;
}

div.images div.image_full:hover > div.arrow{
    opacity:0.8; 
}

div.images div.arrow {
    position:absolute; display:none; top:50px; width:45px; height:45px; background-color:#f2ecdb; border-radius:4px; 
    color:#222222; font-size:3.5em; font-weight:bold; line-height:35px;cursor:pointer; 
    transition: opacity .5s ease-in-out; opacity:0; text-align:center;z-index:3;
}

div.images div.arrow.left {
    left:15px;
}

div.images div.arrow.right {
    right:15px; 
}

div.images div.small_image{
    position:absolute; bottom:5px; right:5px; width:100%; padding-top:0px; padding-bottom:0px; background-color:initial;
    z-index:1; transition: all .5s ease-in-out; opacity:1; z-index:5;
}

div.images div.small_image.bg{
    display:none;
}

div.images div.small_image div.content,div.images div.small_image.bg div.content{
    margin:0 auto;  overflow:hidden; padding:0; text-align:right;
}

div.images div.small_image ul{
    margin:0 auto; width:20%; text-align:right;
}

div.images div.small_image li{
    padding-left:0px; padding-right:10px;
}

div.images div.small_image ul img{
    width:50px; height:50px; background-repeat: no-repeat; cursor:pointer; opacity:1; border:1px solid #e5b33d;
    position:relative; top:0;  z-index:5; display:none;
}

div.images div.small_image ul img:hover {
    opacity:0.7; top:0; border:1px solid #1dd91b;
}

div.images div.small_image ul div.page {
    width:15px; height:15px; border-radius:15px; border:solid 2px #666; background-color:#fff; cursor:pointer; 
}

div.images div.small_image ul div.page_select {
    width:15px; height:15px; border-radius:15px; border:solid 2px #fff; background-color:#666;
}

/*M1_1*/

div.M1_1 {
    width:980px; margin:0 auto; padding:0 0px 0px 0px; position:relative;
}

div.M1_1 img.bg2 {
    width:100%;
}

div.list div.M1_1 div.content {
    
}

div.M1_1 li {
    
}

div.M1_1 div.liContent div.date {
    display:none;
}

div.M1_1 div.liContent div.ctr {
    display:none;
}

div.M1_1 div.liContent {
    position:relative;border-radius:2px;width:auto;height:auto; cursor:pointer; padding:0px; 
}

div.M1_1 div.liContent:hover {
    padding:0px;
}

div.M1_1 div.liContent div.img_bg {
    background-color:#000; height:inherit; opacity:0; transition: opacity .2s ease-in-out;
}
@media screen and (min-width: 901px) {
    div.M1_1 div.liContent:hover>div div.img_bg{
        opacity:0.5;  position:absolute; top:0; bottom:0; left:0; right:0;
    }
}

div.M1_1 div.liContent div.img{
    width:auto;  overflow:hidden; position:relative;
    background-size:cover; background-position:center;
}

div.M1_1 div.liContent div.img:before{
    content: "";display: block; padding-top: 100%;  /* initial ratio of 1:1*/
}

div.M1_1 div.liContent div.txt{
    position:static; top: 0; left: 0; right: 0; max-height:30%;   word-break: break-all;
    width:75%;padding:0; margin:0 auto; border:0px solid #fff; padding:10px;
    text-align:center;  transition: all .2s ease-in-out; opacity:1;
}
    div.M1_1 div.liContent div.txt span {
       /* overflow: hidden;
        white-space: nowrap;*/
    }
/*div.M1_1 div.liContent:hover>div.txt{
    color:#fff; opacity:1; top: 30px;
}*/

div.M1_1 div.liContent div.more{
    position:absolute; top: 0; left: 0; bottom: -160px; right: 0; height:35px; line-height:35px;
    max-width:55%; padding:0; margin:auto; border:1px solid #cacaca;
    text-align:center;  transition: all .2s ease-in-out; opacity:0;
}

div.M1_1 div.liContent:hover>div.more{
    background-color:#007526; color:#fff; opacity:1; bottom: -120px;
}

div.M1_1 div.lishadow{
    display:none;
}


/*M1_2*/

div.M1_2 {
    padding-bottom:80px; width:950px; margin:0 auto; padding:0 15px 20px 15px;
}

div.M1_2 div.liContent {
    position:relative; background: linear-gradient(#fff, #fff);border-radius:2px;width:220px;height:300px; cursor:pointer;
    padding:20px; border:1px solid #cacaca; 
}

div.M1_2 div.liContent:hover {
    padding:20px 10px 20px 10px; width:240px; 
}

div.M1_2 div.liContent div.img_bg {
    background-color:#000; height:inherit; opacity:0; transition: opacity .2s ease-in-out;
}

div.M1_2 div.liContent:hover>div div.img_bg{
    opacity:0.7;
}

div.M1_2 div.liContent div.img_bg_txt {
    position:absolute; top: 0; left: 0; right: 0; max-height:30%;
    width:75%; margin:0 auto; border:0px solid #fff; padding:10px;
    text-align:center;  transition: all .2s ease-in-out; opacity:0;
    z-index:3; font-size:14px; color:#fff;
}


div.M1_2 div.liContent:hover>div div.img_bg_txt{
    opacity:1; top:30px;
}

div.M1_2 div.liContent div.img{
    width:100%; height:220px; overflow:hidden; position:relative;
    background-size:cover; background-position:center;
}

div.M1_2 div.liContent div.txt{
    padding:5px 0 13px 0; color:#474e4c; line-height:21px; min-height:35px;height:35px; overflow:hidden; text-align:center;
    font-size:14px;  word-break: break-all;
}

div.M1_2 div.liContent div.more{
    max-width:80px; padding:8px;  background-color:#ECECEC; margin:0 auto; border:1px solid #cacaca;
    text-align:center; color:#8f5207; transition: all .2s ease-in-out;
}

div.M1_2 div.liContent:hover>div.more{
    background-color:#eea745; color:#fff;
}

div.M1_2 div.liContent div.person{
    top:1px; left:20px;
}

div.M1_2 div.liContent:hover>div.person{
    left:10px;
}

/*U1*/

div.U1 {
    width:980px; margin:0 auto; padding:0 0px 20px 0px; position:relative;
}

div.U1 img.bg2 {
    width:100%;
}

div.list div.M1_1 div.content {
    
}

div.U1 li {
    
}

div.U1 div.liContent div.date {
    display:none;
}

div.U1 div.liContent div.ctr {
    display:none;
}

div.U1 div.liContent {
    position:relative;border-radius:2px;width:auto;height:auto; cursor:pointer; padding:0px; 
}

div.U1 div.liContent:hover {
    padding:0px;
}

div.U1 div.liContent div.img_bg {
    background-color:#000; height:inherit; opacity:0; transition: opacity .2s ease-in-out;
}

div.U1 div.liContent:hover>div div.img_bg{
    opacity:0.7;
}

div.U1 div.liContent div.img{
    width:auto; height:100%; overflow:hidden; position:relative;
    background-size:cover; background-position:center;
}

div.U1 div.liContent div.txt{
    position:absolute; top: 0; left: 0; right: 0; max-height:40%;   word-break: break-all;
    width:75%;padding:0; margin:0 auto; border:0px solid #fff; padding:10px;
    text-align:center;  transition: all .2s ease-in-out; opacity:0;
}

div.U1 div.liContent:hover>div.txt{
    color:#fff; opacity:1; top: 30px;
}

div.U1 div.liContent div.more{
    position:absolute; top: 0; left: 0; bottom: -160px; right: 0; height:35px; line-height:35px;
    max-width:55%; padding:0; margin:auto; border:1px solid #cacaca;
    text-align:center;  transition: all .2s ease-in-out; opacity:0;
}

div.U1 div.liContent:hover>div.more{
    background-color:#007526; color:#fff; opacity:1; bottom: -120px;
}

div.U1 div.lishadow{
    display:none;
}

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

    div.out {
        padding-top:0px; padding-bottom:0px;
    }

    /*M0_0*/

    div.M0_1 {
        width:auto; margin:0 auto; padding:0px; position:relative;
    }

    div.M0_1 img.bg2{
        display:none; 
    }

    div.M0_1 ul{
        position:static; padding:0; padding-left:0; overflow:hidden;
    }

    div.M0_1 ul li{
        display:block; padding-bottom:5px; width:30%;
    }

    div.M0_1 ul li div.text{
        display:block;  padding:0;  position:relative; overflow: hidden; font-size:20px;
    }

    div.M0_1 ul li div.text:after {
        content:"" ;padding-top:100%; display:block;
    }

    div.M0_1 ul li div.header{
        position:absolute; margin:auto auto; bottom:0 ; top:0 ; height:50%;
    }

    div.M0_1 ul li div.text img {
        display:block; width:100%; height:auto; background-size:cover; background-position:center top;
        position:absolute; left:0; top:0;
    }

    div.M0_1 ul li img{
        display:none;
    }

    /*M0_0*/

    div.M0_0 {
        width:auto; margin:0 auto; padding:0px; position:relative; 
        
    }

    div.M0_0 img.bg2{
        display:none; 
    }

    div.M0_0 div.appName{
        color:#333; letter-spacing:4px; padding-bottom:0px;
    }

    div.M0_0 div.content{
        position:static; margin:0 auto; width:auto; height:auto;  padding:0; border-radius:2px; 
    }

    div.M0_0 div.text{
        display:block; width:auto; margin:0 auto; padding:5px; color:#333; font-size:14px;
    }

    div.M0_0 div.pic{
        display: block; vertical-align:top; width:auto; padding:0; margin:0 auto; position:relative;
    }

    div.M0_0 div.pic div.image_full{
        width:100%; margin:0 auto; border:0;
    }

    div.M0_0 div.pic div.image_full div.image div.img{
        margin:0 auto; width:auto;
    }


    div.M0_0 div.pic div.small_image{
    position:static;
    width:100%; padding-top:0; padding-bottom:0px; background-color:initial;transition: all .5s ease-in-out; opacity:1; z-index:5;
    }

    div.M0_0 div.pic div.small_image ul{
        margin:0 auto; overflow:auto; padding:8px ; text-align:center;
    }

    div.M0_0 div.pic div.small_image li{
         padding:0 10px 0 0px;
    }

    div.M0_0 div.pic div.small_image ul img{
        width:35px; height:35px; display:block;
    }

    div.M0_0 div.pic div.small_image ul img:hover {
       
    }

    div.M0_0 div.pic div.small_image ul div.page {
        width:13px; height:13px; border-radius:13px; background-color:#fff; cursor:pointer; display:none;
    }

    div.M0_0 div.pic div.small_image ul div.page_select {
        width:13px; height:13px; border-radius:13px; background-color:#02A4B2; display:none;
    }

    div.M0_0 div.more {
       
    }

    /*M1_1*/

    div.M1_1,div.M1_2 {
        width:initial;width:auto; padding:0 0 10px 0; 
    }

    div.M1_1 div.liContent div.img_bg {
        position:absolute;  top: 0; left: 0; right: 0; bottom:0; opacity:0.5;
    }

    div.M1_1 img.bg2{
        display:none;
    }
 
    div.M1_1 li {
        
    }

    div.M1_1 div.liContent {
        width:initial;width:auto; cursor:pointer;padding:0;  height:auto;
    }
    div.M1_1 div.liContent:hover {
        padding:0px; width:initial; width:auto;
    }

    div.M1_1 div.liContent div.img{
        width:100%;  position:relative; height:auto;
        background-size:cover; background-position:center;
    }

    div.M1_1 div.liContent div.img:before{
        content: "";display: block; padding-top: 100%;  /* initial ratio of 1:1*/
    }

    div.M1_1 div.liContent div.txt{
        margin:auto auto; bottom:0;
        overflow:hidden;
    }

    div.M1_1 div.lishadow{
        box-shadow: 0 0 15px 2px #000;height: 0px;width: 80%;margin: 0 auto; opacity:1;
    }

    div.M1_1 div.liContent div.more{
        position:absolute; bottom:10px; right:10px; display:none;
    }

    div.M1_1  div.liContent:hover>div.date{
        right:20px; 
    }

    div.M1_1 div.liContent div.person{
        bottom:2px; left:10px; top:auto;
    }

    /*M1_2*/
    div.M1_2 li {
        width:30%; padding:2px;
    }

    div.M1_2 div.liContent {
        width:initial;width:auto; cursor:pointer;padding:5px;  height:auto;
    }
    div.M1_2 div.liContent:hover {
        padding:5px; width:initial; width:auto;
    }

    div.M1_2 div.liContent div.img{
        width:100%;  position:relative; height:auto;
        background-size:cover; background-position:center;
    }

    div.M1_2 div.liContent div.img:before{
        content: "";display: block; padding-top: 100%;  /* initial ratio of 1:1*/
    }

    div.M1_2 div.liContent div.img_bg_txt {
        display:none;
    }

    div.M1_2 div.liContent div.txt{
        
    }

    div.M1_2 div.lishadow{
        box-shadow: 0 0 15px 2px #000;height: 0px;width: 80%;margin: 0 auto;
    }

    div.M1_2 div.liContent div.more{
        position:absolute; bottom:10px; right:10px; display:none;
    }

    div.M1_2  div.liContent:hover>div.date{
        right:20px; 
    }

    div.M1_2 div.liContent div.person{
        bottom:2px; left:10px; top:auto;
    }

/*U1*/

    div.U1{
        width:initial;width:auto; padding:0 0 10px 0; 
    }

    div.U1 img.bg2{
        display:none; 
    }
 
    div.U1 li {
        
    }

    div.U1 div.liContent {
        width:initial;width:auto; cursor:pointer;padding:0;  height:auto;
    }
    div.U1 div.liContent:hover {
        padding:0px; width:initial; width:auto;
    }

    div.U1 div.liContent div.img{
        width:100%;  position:relative; height:auto;
        background-size:cover; background-position:center;
    }

    div.U1 div.liContent div.img:before{
        content: "";display: block; padding-top: 100%;  /* initial ratio of 1:1*/
    }

    div.U1 div.liContent div.txt{
        display:none;
    }

    div.U1 div.lishadow{
        box-shadow: 0 0 15px 2px #000;height: 0px;width: 80%;margin: 0 auto; opacity:1;
    }

    div.U1 div.liContent div.more{
        position:absolute; bottom:10px; right:10px; display:none;
    }

    div.U1  div.liContent:hover>div.date{
        right:20px; 
    }

    div.U1 div.liContent div.person{
        bottom:2px; left:10px; top:auto;
    }

}

/* Image */
@media screen and (max-width: 900px) {
    div.images {
        display:none;
    }

    div.images div.img_pre, div.images div.img_nex {
        display:none;
    }

    div.images_mobile {
        display:block;
    }

    div.images_mobile div.image_full {
        position:relative; width:100%; height:auto; overflow:initial;
    }

    div.images_mobile div.image_full div.image div.img {
        height:auto; width:100%; background-repeat: no-repeat; transition: opacity .5s ease-in-out;
        position: absolute; left: 0; top: 0; background-size:cover; background-position:center;
    }

    div.images_mobile div.image_full div.image div.img:before{
        content: "";display: block; padding-top: 65%;  
    }

    div.images_mobile div.image_full div.image img{
        min-width:initial;min-width:0;
    }

    div.images_mobile div.small_image ul img:hover {
        top:0px;
    }

    div.images_mobile div.small_image.bg{
        display:none;
    }

    div.images_mobile div.small_image{
        position:relative; text-align:center;opacity:1;bottom:0
    }

    div.images_mobile div.small_image div.content,div.images div.small_image.bg div.content{
        margin:0 auto; width:initial;width:auto; overflow:hidden; padding:10px 5px 10px 5px;
}

    div.images_mobile div.small_image ul img{
        display:block; width:40px; height:40px; opacity:1;
    }

    div.images_mobile div.small_image ul{
        position:initial; width:initial;width:auto; text-align:center; overflow:hidden;
    }

    div.images_mobile div.small_image li{
        float:none; display:inline-block; padding:2px;
    }

}