/*----------------------------------------------------------------------*/
/* 共用 */
body { background-color:#eee; }
#wrap { background-color:#fff; }

/*----------------------------------------------------------------------*/
/* 上方區 */
.topName{ border-bottom: 5px solid #ddd; padding-top: 2.5rem; padding-bottom: 5px; }
.color_1 .topName{ border-bottom-color:#00b1ad; }
.color_2 .topName{ border-bottom-color:#15bff0; }
.topName .logo a{ background: url("../images/logo_index.jpg") no-repeat; 
    background-size: contain; width: 100%; max-width: 820px; height: 110px; margin: auto; 
    background-position: center center; text-indent: -9999px;display: block;
}

/* 無障礙AA使用 */
.guide_title#main_content{ color: #fff; }
.guide_title#main_content:focus{ background-color: #fff; color: #000; }

/*----------------------------------------------------------------------*/
/* 內容區 */
.index_cover .img{ max-width: 830px; width: 100%; margin: auto; }
.index_cover .img img{ width: 100%; height: auto; }
.index_cover .desc{ text-indent: -9999px; height: 0; }

/* 特殊樣式 */
.index_block .img_top a{ display: block; }
.index_block .img_top a, .index_block .img_top a img{
    -webkit-transition:all 0.3s ease; 
    -moz-transition:all 0.3s ease; 
    transition:all 0.3s ease; 
}
.index_block .img_top a img{ width:100%; height:auto; }
.index_block .img_top h2{ display: none; }

.index_block .img_bottom{ background-color: #fff; border-top:9px solid #fff; border-left:9px solid #fff; border-bottom:9px solid #fff; }
.index_block .img_bottom::after{ content:''; display:block; clear:both; }
.index_block .img_bottom .box{  float:left; width:33.3333%; box-sizing:border-box; border-right:9px solid #fff; }
.index_block .img_bottom .box a{ display:block; position:relative; width:100%; height:100%; opacity:1; box-sizing:border-box;
    -webkit-transition:opacity 0.3s ease; 
    -moz-transition:opacity 0.3s ease; 
    transition:opacity 0.3s ease; 
}
.index_block .img_bottom .box a img { width:100%; height:auto; }
.index_block .img_bottom .box a::after{ content:''; display:block; position:absolute; top:0; left:0; z-index:100; 
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 28px 0 0;
    border-color: #fff transparent transparent transparent;    
}
.index_block .img_bottom .box.small a:first-child{ margin-bottom:9px; }
.index_block .img_bottom .title{ text-align:center; font-family:Arial, Helvetica, sans-serif; 
    font-weight: bold; font-size: 1.25em;
    line-height:120%; color:#fff; position:absolute; bottom:0; left:0; padding:10px 15px; 
    background-color:rgba(51,51,51,0.75); z-index:99; width:100%; box-sizing:border-box;
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
}

/* style_1 */
.index_block.style_1 .img_bottom a .title{
    color:#595757; font-size: 1.5em;
    background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 0%, rgba(154,214,211,0.9) 100%); 
    background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 0%,rgba(154,214,211,0.9) 100%); 
    background: linear-gradient(to right, rgba(255,255,255,0.9) 0%,rgba(154,214,211,0.9) 100%); 
}


/* Footer */
#Footer.index_footer{ background-color: #e4e4e4; }


/*============================================================================*/
/*----------------------------------------------------------------------------*/
/* RWD設定 */
/*----------------------------------------------------------------------------*/
/*============================================================================*/
/* 寬1023px以下*/
@media screen and (max-width: 1023px) {
    /* 共用 */
    #Header, #Center, #Footer{ max-width: 830px; }

    /* 特殊樣式 */
    .index_block .img_bottom .title{ font-size: 1.125em; }

    /* page select */
    .indexContent .pageSelect { position: absolute; top: 50%; margin-top: -27px; }
    .indexContent .pageSelect a.previous{ left: 5px; }
    .indexContent .pageSelect a.next{ right: 5px; }  
    .indexContent .pageSelect a.previous, .indexContent .pageSelect a.next{ 
        width: 44px; height: 44px; margin-top: -22px;
        background-color: #fff; 
        border: 2px solid #333;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        box-shadow: 0 0 10px rgba(0,0,0,0.25);
    }
    .indexContent .pageSelect a::before{ content: ""; }
    .indexContent .pageSelect a.previous::before{ right:13px; }
    .indexContent .pageSelect a.next::before{ right: 17px; }
}

/*============================================================================*/
/* 手機板(寬320px~639px) */
@media screen and (min-width: 320px) and (max-width: 639px){
    .indexContent .pageSelect a.previous, .indexContent .pageSelect a.next{
       width: 38px; height: 38px; 
    }
    .indexContent .pageSelect a.next::before{ right: 15px; }

    /* 特殊樣式 */
    .index_block .img_bottom .box{ width: 50%; margin-bottom: 9px; }
    .index_block .img_bottom .box a::after{ display: none; }
    .index_block .img_bottom .box.small{ width: 100%; border-right: 0; }
    .index_block .img_bottom .box.small a{ width: 50%; float: left; border-right: 9px solid #fff; }
    .index_block .img_bottom .box.small a:first-child{ margin-bottom: 0; }  

    /* style_1 */
    .index_block.style_1 .img_bottom a .title{ font-size: 1.25em; }
}
@media screen and ( min-width: 480px ) and (max-width: 639px){
    /* Header */
    .topName .logo a{ height: 70px; }
}
@media screen and (max-width: 479px){
    /* Header */
    .topName .logo a{ height: 70px; }

    /* 特殊樣式 */
    .index_block .img_bottom{ border-left-width: 5px; border-top-width: 5px; border-bottom: 0; }
    .index_block .img_bottom .title{ font-size: 0.938em; padding: 5px; }
    .index_block .img_bottom .box{ border-right-width:5px; margin-bottom: 5px; }
    .index_block .img_bottom .box.small a{ border-right-width:5px; }
    .index_block .img_bottom .box.small a:first-child{ margin-bottom: 0; }

    /* style_1 */
    .index_block.style_1 .img_bottom a .title{ font-size: 1em; }
}

/*============================================================================*/
/* 桌機(寬1024以上) */
@media screen and (min-width: 1024px){
    /* 特殊樣式 */  
    .index_block .img_top a:hover, .index_block .img_top a:focus{ opacity:0.8; }
    .index_block .img_bottom .box a:hover, .index_block .img_bottom .box a:focus{ opacity:0.85; }
    .index_block .img_bottom a:hover .title, .index_block .img_bottom a:focus .title{ 
        padding:15px 15px; background-color:rgba(65,65,65,0.85); 
    }

    /*style_1*/
    .index_block.style_1 .img_bottom a:hover .title{
        background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(154,214,211,1) 100%);
        background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(154,214,211,1) 100%); 
        background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(154,214,211,1) 100%); 
        background-color:rgba(255,255,255,0.9);
    }
}