/**********************************************/
/* INDEX.CSS 為 INDEX.html <main> 內用 CSS */
/**********************************************/

/* ________________________________________________________________________________ */
/* XS 超小屏幕（手机，大於 0px） 及共用 ___________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 0px) {
    /*__ BOX ___________________________________*/
    .box:hover {
        color:#FFF;
        text-decoration:none;
    }
    .all_box {
        padding:0 10px;
    }
    .all_box .box {
        display:block;
        position: relative;
        height: 140px;
        margin: 8px -8px 7px -7px;
        padding: 20px 20px 20px 30%;
        color:#FFF;
        background: #FFF;
        /*border-radius: 20px;*/
        background-position: center center;
        background-repeat: no-repeat;
        background-size:contain;
        line-height:16px;
        word-wrap: break-word;
        word-break: break-all;
        /*box-shadow:0px 0px 1px rgba(20%,20%,20%,0.8);*/

    }
    .box:first-child:before {
        position: absolute;
        width: 28px;
        height: 20px;
        background:rgba(255,255,255,0);
    }
    .box:after {
        position: absolute;
        width: 8px;
        height: 20px;
        background: #fff;
    }
    /* TL */
    .box.tl:first-child:before {
        content: "";
        top: 0;
        left: -8px;
        box-shadow:0px -5px 10px -5px rgba(20%,20%,20%,0.6);
    }
    .box.tl:after {
        content: "";
        top: 0;
        left: -8px;
        border-top-right-radius: 8px;
        box-shadow:-5px 0px 10px -5px rgba(20%,20%,20%,0.7) inset;
    }
    /* TR */
    .box.tr:first-child:before {
        content: "";
        top: 0;
        right: -8px;
        box-shadow:0px -5px 10px -5px rgba(20%,20%,20%,0.6);
    }
    .box.tr:after {
        content: "";
        top: 0;
        right: -8px;
        border-top-left-radius: 8px;
        box-shadow:5px 0px 10px -5px rgba(20%,20%,20%,0.7) inset;
    }
    /* BL */
    .box.bl:first-child:before {
        content: "";
        bottom: 0;
        left: -8px;
        box-shadow:0px 5px 10px -5px rgba(20%,20%,20%,0.6);
    }
    .box.bl:after {
        content: "";
        bottom: 0;
        left: -8px;
        border-bottom-right-radius: 8px;
        box-shadow:-5px 0px 10px -5px rgba(20%,20%,20%,0.7) inset;
    }
    /* BR */
    .box.br:first-child:before {
        content: "";
        bottom: 0;
        right: -8px;
        box-shadow:0px 5px 10px -5px rgba(20%,20%,20%,0.6);
    }
    .box.br:after {
        content: "";
        bottom: 0;
        right: -8px;
        border-bottom-left-radius: 8px;
        box-shadow:5px 0px 10px -5px rgba(20%,20%,20%,0.7) inset;
    }

    /*__ BOX 1~18 Color ________________________*/
    /*
    main>div:nth-child(1)>div,main>div:nth-child(1)>div:first-child:before {background:#CCAF51;}
    main>div:nth-child(2)>div,main>div:nth-child(2)>div:first-child:before {background:#ED6917;}
    main>div:nth-child(3)>div,main>div:nth-child(3)>div:first-child:before {background:#069AD8;}
    main>div:nth-child(4)>div,main>div:nth-child(4)>div:first-child:before {background:#8C8B89;}
    main>div:nth-child(5)>div,main>div:nth-child(5)>div:first-child:before {background:#8C8B89;}
    main>div:nth-child(6)>div,main>div:nth-child(6)>div:first-child:before {background:#407BA7;}
    main>div:nth-child(7)>div,main>div:nth-child(7)>div:first-child:before {background:#E72F63;}
    main>div:nth-child(8)>div,main>div:nth-child(8)>div:first-child:before {background:#45BCB6;}
    main>div:nth-child(9)>div,main>div:nth-child(9)>div:first-child:before {background:#8C8B89;}
    main>div:nth-child(10)>div,main>div:nth-child(10)>div:first-child:before {background:#8C8B89;}
    main>div:nth-child(11)>div,main>div:nth-child(11)>div:first-child:before {background:#8C8B89;}
    main>div:nth-child(12)>div,main>div:nth-child(12)>div:first-child:before {background:#8C8B89;}
    main>div:nth-child(13)>div,main>div:nth-child(13)>div:first-child:before {background:#FABF03;}
    main>div:nth-child(14)>div,main>div:nth-child(14)>div:first-child:before {background:#8C8B89;}
    main>div:nth-child(15)>div,main>div:nth-child(15)>div:first-child:before {background:#99C436;}
    main>div:nth-child(16)>div,main>div:nth-child(16)>div:first-child:before {background:#02A0E9;}
    main>div:nth-child(17)>div,main>div:nth-child(17)>div:first-child:before {background:#8C8B89;}
    main>div:nth-child(18)>div,main>div:nth-child(18)>div:first-child:before {background:#0CA85E;}
    */
    /* BOX .end ________________________________*/


    /* BANNER carousel slide */
    .fill {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;  
        display: flex;

        display: -webkit-flex; 
        -webkit-align-items: center;
        align-items: center;
        justify-content: center;
        -webkit-justify-content: center; /* Safari 6.1+ */
    }

    .carousel-control.left {
        background-image:none;
    }
    .carousel-control.right {
        background-image:none;        
    }


    .mark:after {
        content:"";
        top:0;
        right:0;
        background:rgba(0,0,0,0);        
        border-style:solid;        
        border-top: 0px solid rgba(0,0,0,0);
        border-right: 20px solid rgba(0,0,0,0);
        border-bottom: 20px solid rgba(0,0,0,0);
    }

    .mark-orange:after      {border-color:#686868 #686868 rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-red:after         {border-color:#ED6917 #ED6917 rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-blue:after        {border-color:#2C72B8 #2C72B8 rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-skyblue:after     {border-color:#02A0E9 #02A0E9 rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-purple:after      {border-color:#88529E #88529E rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-lightgray:after   {border-color:#E4E4E4 #E4E4E4 rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-deeppink:after    {border-color:#E72F62 #E72F62 rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-green:after       {border-color:#0CA85E #0CA85E rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-seagreen:after    {border-color:#45BCB6 #45BCB6 rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-yellowgreen:after {border-color:#8EC43B #8EC43B rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-yellow:after      {border-color:#FABF02 #FABF02 rgba(0,0,0,0) rgba(0,0,0,0);}
    .mark-white:after       {border-color:#FFFFFF #FFFFFF rgba(0,0,0,0) rgba(0,0,0,0);}

    .mark-brown:after       {border-color:#beaf9c #beaf9c rgba(0,0,0,0) rgba(0,0,0,0);}

    .mark:hover:after       {border-color:#E72F62 #E72F62 rgba(0,0,0,0) rgba(0,0,0,0);}

    /*news*/
    .news .mark { padding: 0; height: 20px; background:#FFF; overflow:hidden;   }    
    .news .mark:after {   
        position:absolute;     
        top:0;
        left:-20px;        
        right:auto;
    }
    .news a {margin:10px auto;    }
    .news a:hover .tc-black {        color:#E72F62;    }
}

/* ________________________________________________________________________________ */
/* SM 小屏幕（平板，大於等於 768px） ______________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 768px) {  

}

/* ________________________________________________________________________________ */
/* MD 中等屏幕（桌面显示器，大於等於 992px） ______________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 992px) {

}

/* ________________________________________________________________________________ */
/* LG 大屏幕（大桌面显示器，大於等於 1200px） _____________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 1200px) {

}