/* Minification failed. Returning unminified contents. (897,2): run-time error CSS1031: Expected selector, found '/' (897,2): run-time error CSS1025: Expected comma or open brace, found '/' (2479,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2480,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2481,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2485,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (2511,26): run-time error CSS1039: Token not allowed after unary operator: '-yellow' (2527,22): run-time error CSS1039: Token not allowed after unary operator: '-dark-blue' (3466,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '!important' (3518,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '!important' (5398,2): run-time error CSS1030: Expected identifier, found ' ' (5398,2): run-time error CSS1019: Unexpected token, found ' ' (7656,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7657,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7684,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7685,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7720,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7721,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7730,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7731,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7747,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7748,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7764,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7765,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7786,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7787,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7823,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7824,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7865,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7866,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7882,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7883,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7904,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7905,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (7931,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7932,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (7966,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (7967,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (7993,1): run-time error CSS1019: Unexpected token, found '@keyframes' (7994,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8027,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8028,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8064,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8065,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8106,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8107,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8146,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8147,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8193,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8194,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8227,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8228,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8266,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8267,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8300,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8301,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8339,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8340,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8373,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8374,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8412,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8413,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8446,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8447,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8485,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8486,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8504,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8505,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8530,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8531,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8549,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8550,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8573,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8574,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8587,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8588,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8606,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8607,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8620,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8621,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8639,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8640,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8658,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8659,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (8682,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8683,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8687,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8688,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8697,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8698,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8711,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8712,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8730,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8731,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8744,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8745,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8763,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8764,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8777,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8778,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8796,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8797,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8810,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8811,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8829,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8830,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8843,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8844,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8862,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8863,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8876,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8877,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8895,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8896,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8909,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8910,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8928,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8929,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8942,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8943,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8961,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8962,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8966,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8967,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8976,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (8977,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (8988,1): run-time error CSS1019: Unexpected token, found '@keyframes' (8989,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9005,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9006,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9017,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9018,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9034,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9035,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9046,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9047,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9063,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9064,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9075,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9076,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9092,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9093,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9104,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9105,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9121,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9122,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9133,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9134,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9150,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9151,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9162,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9163,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9179,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9180,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9191,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9192,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9208,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9209,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9245,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9246,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9289,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9290,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9322,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9323,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9362,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9363,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9395,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9396,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9435,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9436,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9454,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9455,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9482,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9483,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9501,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9502,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9529,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9530,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9555,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9556,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9588,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9589,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9600,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9601,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9619,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9620,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9637,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9638,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9660,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9661,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9678,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9679,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9701,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9702,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9719,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9720,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9742,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9743,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9760,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9761,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9783,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9784,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9801,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9802,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9824,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9825,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9840,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9841,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9861,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9862,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9877,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9878,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9898,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9899,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9914,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9915,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9935,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9936,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9951,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9952,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9972,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (9973,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (9988,1): run-time error CSS1019: Unexpected token, found '@keyframes' (9989,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10009,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10010,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10043,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10044,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10084,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10085,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10098,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10099,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10119,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10120,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10131,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10132,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10148,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10149,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10160,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10161,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10177,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10178,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10195,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10196,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10218,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10219,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10236,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10237,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10259,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10260,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10277,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10278,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10300,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10301,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10318,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10319,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10341,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10342,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10357,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10358,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10378,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10379,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10398,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10399,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10423,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10424,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10439,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10440,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10460,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10461,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10476,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10477,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10497,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10498,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10517,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10518,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (10542,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10543,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10555,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10556,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10573,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10574,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10586,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10587,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10604,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10605,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10617,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10618,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10635,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10636,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10648,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10649,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10666,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10667,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10679,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10680,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10697,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10698,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10710,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10711,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10728,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10729,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10741,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10742,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10759,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10760,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10772,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10773,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (11170,1): run-time error CSS1019: Unexpected token, found '}' (11313,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11314,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (11323,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11324,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' */ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} /* 跨平台平用的css 指娛樂、桌機版 (目前不包含手機版) 所有頁面 user control 共用的css */ /* 新聞頁面 */ /*上一則、下一則*/ .TabPanel .item img, .news-area .news-sr img { aspect-ratio: attr(width) / attr(height); height: auto; } .prevNext { height: 51px; margin-top: 6px; margin-bottom: 10px; } .prevNext a { display: inline-block; max-width: 600px; min-width: 400px; height: 51px; font-size: 18px; font-weight: bold; color: #585858; line-height: 51px; text-decoration: none; background-color: #E3E3E3; border-radius: 5px; vertical-align: middle; } .prevNext a:hover { color: #FFF; background-color: #585858; } #prev { } #prev a { background-image: url(../images/prev.png); background-repeat: no-repeat; background-position: 10px center; padding-left: 50px; padding-right: 10px; } #prev a::before { content: '上一則:　'; color: #F04800; font-size: 12px; font-weight: normal; } #prev a:hover { animation-duration: 0.3s; animation-name: preSlidein; } @keyframes preSlidein { from { background-position: 10px center; } to { background-position: -10px center; } } #next.prevNext { text-align: right; margin-right: 15px; } #next.prevNext a { background-image: url(../images/next.png); background-repeat: no-repeat; background-position: 98% center; padding-right: 45px; } #next.prevNext a:hover { animation-duration: 0.3s; animation-name: nextSlidein; } #next.prevNext a::before { content: '下一則:　'; color: #F04800; font-size: 12px; font-weight: normal; } @keyframes nextSlidein { from { background-position: 400px center; } to { background-position: 420px center; } } /* 霸刊頭廣告 */ .meta_ad { border-width: 0; padding: 5px 0; margin: 0px auto; } .meta_ad > div { position: relative; /*background: #fff;*/ margin: auto; border: 0px solid #f00; min-width: 970px; max-width: 980px; /*min-height: 90px;*/ max-height: 405px; } .btnHeadAd { position: absolute; top: -0.5em; right: -0.5em; width: 80px; height: 24px; bottom: 0; padding: 2px; z-index: 400; cursor: pointer; font-size: 14px; line-height: 24px; font-weight: bold; cursor: pointer; color: white; font-size: 1.25em; padding-right: 0.25em; text-align: right; } .btnE:hover, .btnC:hover { } .meta_ad_inCover { width: 100%; height: 100%; display: block; position: fixed; top: 0; left: 0; /*background-color:;*/ z-index: 99999; } .meta_ad_inCover > div { position: absolute; top: 20%; left: 50%; margin-left: -485px; opacity: 1; } .incoverClose { display: block; height: 24px; cursor: pointer; font-size: 14px; line-height: 24px; font-weight: bold; font-size: 1.25em; color: #fff; text-align: right; position: absolute; top: 0; right: 0; } /*頁尾*/ #footerA { width: 1000px; margin-right: auto; margin-left: auto; padding-top: 20px; padding-bottom: 18px; text-align: center; font-size: 13px; line-height: 1.9em; letter-spacing: 1px; color: #333; font-family: Verdana, Geneva, sans-serif; } #footerA a { font-size: 12px; color: #333333; text-decoration: none; display: inline; } #footerA a:hover { color: #F63; text-decoration: none; } #footerB { max-width: 900px; min-width: 800px; margin: 10px auto; font-size: 0; font-family: Verdana, Geneva, sans-serif; overflow: hidden; text-align: center; margin: auto; } #footerB .footerList { display: table-cell; padding: 0 6px; vertical-align: top; border-left: 1px dotted #666; text-align: left; } #footerB .footerList:first-child { border-left: none; } #footerB span.channel { font-size: 18px; font-weight: 600; color: #ddd; line-height: 2em; background-color: #444; display: block; width: 98%; padding-left: 2%; } #footerB span.channel::before { content: '◆ '; } #footerB .footerList ul { list-style: none; margin-top: 10px; padding: 0 3%; } #footerB .footerList ul li { display: inline-block; *display: block; zoom: 1; } #footerB .footerList ul li a { font-size: 12px; } #footerB .footerList ul li a:hover { color: #F90; } #footerB .footerList ul li::before { font-size: 14px; content: '♦'; padding-right: 5px; } #footerB .footerList ul li a, #footerB .footerList ul li::before { color: #C3C3C3; display: inline-block; height: 26px; line-height: 26px; vertical-align: top; text-decoration: none; overflow: hidden; } #footerB .footerList.footerCol1 { width: 130px; } #footerB .footerList.footerCol1 ul li { margin: auto; width: 97%; } #footerB .footerList.footerCol2 { width: 250px; } #footerB .footerList.footerCol2 ul li { margin: auto; width: 48.5%; } #footerbg { clear: both; background-image: url(../images/footerbg.jpg); background-repeat: repeat-x; background-color: #333; margin-top: 6px; /* [disabled]max-height: 339px; */ overflow: hidden; /*padding-bottom: 10px;*/ } /*看更多button*/ a.moreNews { text-align: center; background-color: #8A0000; display: block; font-size: 19px; font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; line-height: 1.5em; color: #FFF; width: 80%; margin: auto; border-radius: 5px; padding: 5px 0; } a.moreNews:hover { background-color: #BD1604; color: #FFF; } a.moreNewsXS { display: inline-block; text-align: center; background-color: #B60000; color: #FFF; font-size: 14px; font-size: 0.875rem; font-weight: 600; font-family: "微軟正黑體", Arial; letter-spacing: 1px; padding: 5px 10px; border-radius: 5px; } a.moreNewsXS:hover { background: #D62331; color: #FFF; } .moreNewsXXS { text-align: right; padding: 10px; } .moreNewsXXS a { display: inline-block; color: #fff; padding: 3px 5px; background: #8e040a; color: #fff; font-size: 12px; font-weight: bold; } .moreNewsXXS a:hover { text-decoration: underline; } /*sidebar 業配文*/ .news_list_a { width: 300px; background-image: url(/images/hb300.jpg); background-repeat: no-repeat; margin-top: 10px; border: 0px solid #BFC7D9; } .news_list_a > .title { font-size: 16px; color: #FFF; padding: 8px 0 8px 11px; letter-spacing: 1px; background-image: url(/images/hb300.jpg); background-repeat: no-repeat; } .news_list_a > .datas { width: 292px; border: 1px solid #CCC; margin: 0; padding: 0; padding: 3px; } .news_list_a > .datas > .dd { padding: 8px 5px 5px 5px; min-height: 70px; } .news_list_a > .datas > .dd:not(:last-child) { border-bottom: 1px dashed #999; } .news_list_a > .datas > .dd > .ddimg { display: inline-block; width: 120px; min-height: 70px; vertical-align: top; } .news_list_a > .datas > .dd > .ddimg > img { border: 0; width: 100%; height: 68px; } .news_list_a > .datas > .dd > .dda { display: inline-block; width: 155px; height: 70px; overflow: hidden; line-height: 22px; } .news_list_a > .datas > .dd > .dda > a { font-size: 15px; letter-spacing: 1px; vertical-align: top; } /*精彩圖輯 輪播*/ .OnlineVOD { margin-bottom: 10px; font-family: Arial, Verdana, 'Microsoft JhengHei', sans-serif; border: 1px solid #CCCCCC; height: auto; overflow: hidden; } .live-panel .live-title-area { overflow: hidden; border-bottom: 3px solid #cf0000; padding: 0 10px; /*margin-bottom: 10px;*/ color: #500013; position: relative; } .live-panel .live-title-area .title { height: 38px; line-height: 38px; letter-spacing: 1px; overflow: hidden; font-size: 1.375em; font-weight: 600; } .live-panel .TabPanel { margin: 8px; } .live-panel .TabPanel a { color: #2b2b2b; } #owl-photo, #owl-VODPanel { position: relative; } #owl-photo .hotPhotosNav > div, #owl-VODPanel .hotPhotosNav > div { width: 30px; height: 42px; position: absolute; top: 50%; margin-top: -35px; } #owl-photo .hotPhotosNav_prev, #owl-VODPanel .hotPhotosNav_prev { background: url(/images/icon/arrow-left.gif) no-repeat 0 0; left: 0px; } #owl-photo .hotPhotosNav_next, #owl-VODPanel .hotPhotosNav_next { right: 0; background: url(/images/icon/arrow-right.gif) no-repeat right 0; } .owl-carousel button:focus { outline: 0; } .vod-iframe { overflow: hidden; border-width: 0; width: 665px; height: 315px; margin-bottom: 0.5em; } /*新聞10則*/ .package1 .newsli { overflow: hidden; } .package1 .newsli > div { clear: both; overflow: hidden; padding: 10px 0; border-bottom: 1px dashed #DDDDDD; position: relative; } .package1 .newsli > div:first-child { padding-top: 0; } .package1 .newsli div img { float: left; margin-right: 8px; margin-top: 3px; height: 96px; width: 170px; } .package1 .newsli div p { max-height: 80px; overflow: hidden; text-overflow: ellipsis; font-size: 0.938rem; line-height: 1.6rem; color: #555555; } .package1 .newsli div .playerIcon { position: absolute; top: 10px; left: 0; z-index: 5; height: 96px; width: 170px; vertical-align: middle; text-align: center; } .package1 .newsli div .playerIcon span { display: inline-block; margin: auto; width: 30%; height: 100%; background: url(/images/icon/mvplay.svg) no-repeat center center; } .package1 .newsli .plist > div { border-bottom: none; } .package1 .newsli.plist h2 { border-bottom: 2px solid #9A2069; font-size: 16px; font-size: 1rem; line-height: 1.625rem; margin-bottom: 10px; } .package1 .newsli.plist h2 a { color: #9A2069; } /*sidebar news list Start*/ #conRt > div { margin-bottom: 12px; margin-top: 0; } .f_14 { font-size: 14px; } .f_16 { font-size: 16px; } /*.sbTitle { padding: 6px 0 0 45px; border-bottom: 1px solid #d94748; font-size: 21px; line-height: 1.8em; letter-spacing: 1px; font-weight: bold; color: #3c3b3b; } .sbTitle a { color: #3c3b3b; } .sbTitle a:hover { color: #FC3; } .sbNewsList, #conRt .hotPhotos { width: 300px; overflow: hidden; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-bottom: 10px; font-family: "微軟正黑體"; font-weight: normal; color: #3c3b3b; box-shadow: 0px 0px 3px 1px #ddd; } .sbNewsList a { text-decoration: none; } .sbNewsList .sbNewsItem { font-size: 15px; color: #666; line-height: 2em; margin:0 5px; } .sbNewsList .sbNewsItem > div { min-height: 34px; overflow: hidden; border-top: 1px dashed #CCCCCC; vertical-align: middle; } .sbNewsList .sbNewsItem > div > a > span { line-height: 2.125em; } .sbNewsList .sbNewsItem > div:first-child { border-top: none; } .sbNewsList .sbNewsItem .sbNewsItemPoint { padding-bottom: 2px; } .sbNewsList .sbNewsItem .sbNewsItemPoint img { width: 100%; margin: auto; margin-top:5px; } .sbNewsList .sbNewsItem p, .sbNewsList .sbNewsItem a p { line-height: 1.5em; font-size: 0.875em; color: #666; max-height:63px; overflow:hidden; } .sbNewsList .VoteTitle { padding: 5px; border-bottom: 1px solid #CCCCCC; } .sbNewsList .more { font-size: 13px; text-align: right; margin: 0 4px; padding: 5px 0; border-top: 1px dotted #CCCCCC; } .sbNewsList .more a { color: #B60000; } .sbNewsList .more a:hover { text-decoration: underline; } .sbNewsList .sbNewsItem > div img { float:left; margin: 8px 3px; } .sbNewsList.MostView .sbTitle { background: url(/images/icon/hothr300.png) no-repeat 2%; } .sbNewsList.OnlineNews .sbTitle { padding-left: 10px; } .sbNewsList.HeadNews .sbTitle { background: url(/images/icon/onehr_03.png) no-repeat 2%; } .sbNewsList.LivePrg .sbTitle, .sbNewsList.TVPrg .sbTitle{ background: url(/images/icon/livehr300.png) no-repeat 2%; } .sbNewsList.FBAnchor .sbTitle { background: url(/images/icon/fbhr_03.png) no-repeat 5px; } .sbNewsList.MarketingNews .sbTitle { background: url(/images/icon/MarketingNewsIcon.png) no-repeat 2%; } .sbNewsList.Vote .sbTitle { background: url(/images/icon/icon-vote.png) no-repeat 2%; } .sbNewsList.QASidebar .sbTitle { background: url(/images/icon/hothr300.png) no-repeat 2%; } /*直播節目表*/ .sbNewsList.LivePrg .sbNewsItem { margin: 0; text-align: center; } .sbNewsList.LivePrg .sbNewsItemPoint { border: none; height: 51px; -webkit-transition: height 0.5s ease-out; -moz-transition: height 0.5s ease-out; -ms-transition: height 0.5s ease-out; transition: height 0.5s ease-out; } .sbNewsList.LivePrg .sbNewsItemPoint.active { height: 242px; } .sbNewsList.LivePrg .sbNewsItemPoint.active > div { background: #fed134 url(/images/movieicon.png) no-repeat 6px 8px; } .sbNewsList.LivePrg .sbNewsItemPoint img { clear: both; float: initial; width: 96%; margin: 10px auto; } .sbNewsList.LivePrg .sbNewsItemPoint > div { padding: 2px 0 0 30px; background: #fff2c2 url(/images/open.png) no-repeat 6px 8px; text-align: left; } .sbNewsList.TVPrg .sbNewsItem div { border: none; padding: 5px; margin: 4px 0; text-align: center; border-radius: 3px; box-shadow: 0 0 3px rgba(0,0,0,0.4); font-size: 1.063em; } .sbNewsList.TVPrg .sbNewsItem div span, .sbNewsList.TVPrg .sbNewsItem div p { display: block; text-align: left; margin: 0 5px; } .sbNewsList.TVPrg .sbNewsItem div img { clear: both; float: initial; width: 96%; margin: auto; } .sbNewsList.QASidebar .sbNewsItem { margin: 0; cursor: pointer; } .sbNewsList .sbNewsItemPoint .AContent { height: 0; background-color: #fff0e0; padding: 0px 28px; color: #333; font-size: 0.938em; line-height: 1.7em; cursor: auto; -webkit-transition: height 0.5s ease-out; -moz-transition: height 0.5s ease-out; -ms-transition: height 0.5s ease-out; transition: height 0.5s ease-out; } .sbNewsList.QASidebar .sbNewsItemPoint { background-color: #fbd9c1; color: #2f0009; border-top: 1px solid #FFF; } .sbNewsList.QASidebar .sbNewsItemPoint p { color: #2f0009; padding: 0px 5px 5px 0; } .sbNewsList.QASidebar .sbNewsItemPoint .QContent { display: inline-block; width: calc(100% - 26px); margin-left: 28px; } .sbNewsList.QASidebar .sbNewsItemPoint::before { display: inline-block; content: " "; width: 16px; height: 16px; margin: 7px 3px; background-image: url(/images/icon/bookstatus.png); background-repeat: no-repeat; background-position: 0 0; vertical-align: top; } .sbNewsList.QASidebar .sbNewsItemPoint.active::before { background-position: -16px 0; } .sbNewsList.QASidebar .sbNewsItemPoint.active .AContent { height: auto; } .sbNewsList.Vote ul { list-style: inside square; font-size: 0.875em; width: 90%; margin: auto; overflow: hidden; } .sbNewsList.Vote ul li { line-height: 1.5em; height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 5px 0; } .ListCircle { display: inline-block; border-radius: 50%; margin-right: 3px; height: 17px; line-height: 16px; width: 17px; text-align: center; vertical-align: text-bottom; font-size: 8px; font-weight: 600; font-family: Arial; background-color: #c0c6c9; color: #f3f3f2; } .ListCircle_one { display: inline-block; border-radius: 50%; height: 6px; width: 6px; line-height: 28px; text-align: center; font-size: 8px; font-weight: 600; font-family: Arial; background-color: #000391; color: #f3f3f2; } .sbNewsList.FBAnchor { box-shadow: 0px 0px 3px 1px #ddd; border-radius: 0; } .sbNewsList.FBAnchor .sbTitle { border-bottom: solid 1px #CCC; margin: 5px; } .sbNewsList.FBAnchor .sbNewsItem p { height: 3em; } */ /* projcetBlock public 20151029*/ .projectBlock.HotNewsBlock, .projectBlock.StockMarket { overflow: hidden; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; } .projectBlock { margin: auto; margin-bottom: 15px; overflow: hidden; font-size: 16px; font-size: 1em; font-family: "微軟正黑體"; font-weight: normal; text-align: justify; } .projectBlock:after { content: ''; display: inline-block; width: 100%; } .projectBlock * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .projectBlock .projectBlockItemCol2 { width: 49%; display: inline-block; margin-bottom: 15px; border: 1px solid #e4e4e4; border-top-right-radius: 3px; border-top-left-radius: 3px; text-align: left; vertical-align: top; } .projectBlock > div:not(.hr650title):not(.stockTop):not(.historytitle):not(.list-more) { display: inline-block; zoom: 1; vertical-align: bottom; overflow: hidden; padding: 0 1%; width: 49%; margin-bottom: 10px; vertical-align: top; } .projectBlock .hr650title { overflow: hidden; border-bottom: 3px solid #cf0000; padding: 0 10px; margin-bottom: 10px; color: #500013; position: relative; } .projectBlock .hr650title * { display: inline-block; } .projectBlock .hr650title a.more { color: #500013; font-weight: bold; font-size: 12px; letter-spacing: 1px; line-height: 32px; overflow: hidden; margin-left: 100px; } .projectBlock .hr650title h2 { height: 38px; line-height: 38px; font-size: 1.375em; letter-spacing: 1px; overflow: hidden; } .projectBlock > div h3 { display: inline-block; font-size: 0.938em; line-height: 1.75em; font-weight: 500; overflow: hidden; min-height: 2em; vertical-align: middle; margin-left: 5px; } .projectBlock .projectNewsItem { clear: both; border-bottom: 1px dashed #a4a4a4; position: relative; padding: 3px 5px; } .projectBlock .projectNewsImgItem { height: 105px; } .projectBlock .projectNewsImgItem > span { display: none; } .projectBlock .projectNewsImgItem h3 { display: block; font-weight: 600; font-size: 17px; letter-spacing: initial; } .projectBlock .projectNewsImgItem img { float: left; height: 96px; width: 170px; margin-right: 5px; } .projectBlock .projectNewsImgItem .playerIcon { position: absolute; top: 0; left: 0; z-index: 5; height: 96px; width: 170px; vertical-align: middle; text-align: center; } .projectBlock .projectNewsImgItem .playerIcon span { display: inline-block; margin: auto; width: 30%; height: 100%; background: url(/images/icon/mvplay.svg) no-repeat center center; } .projectBlock .moreNews { text-align: right; padding: 10px; } .projectBlock .list-more { text-align: right; padding: 10px; } .list-more a { display: inline-block; color: #fff; padding: 3px 5px; background: #8e040a; color: #fff; font-size: 12px; font-weight: bold; } .list-more a:hover { text-decoration: underline; } .projectBlock.HotNewsBlock .hr650title { background: url(/images/icon/hotNew01.png) no-repeat left center; padding-left: 30px; } /*18 禁*/ .cover18 { width: 100%; height: 100%; background-color: rgba(0,0,0,0.95); background-image: url(/images/icon/null_bg.png) \9; position: fixed; z-index: 76000; top: 0px; left: 0px; } .area18 { position: fixed; width: 900px; padding: 40px; top: 50%; left: 50%; margin: -300px 0px 0px -450px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .area18-btarea { margin-top: 30px; text-align: center; } .area18-bt { display: inline-block; margin: 0 20px; border-radius: 8px; text-align: center; font-family: '微軟正黑體'; font-weight: bold; color: #FFF; font-size: 32px; padding: 20px 30px; cursor: pointer; } .area18-bt.bt-left { background-color: #B00000; } .area18-bt.bt-right { background-color: #258D02; } /* 新聞內頁文字廣告 Start*/ #newsTextAD { width: 96%; margin: 1% 2%; font-size: 1em; font-family: Arial, Verdana, 'Microsoft JhengHei', sans-serif; } #newsTextAD > li { display: flex; flex-wrap: nowrap; justify-content: flex-start; line-height: 25px; margin-bottom: 15px; } #newsTextAD > li > a { display: block; -webkit-flex: 1; flex: 1; color: #000; } #newsTextAD > li:before { content: "*"; color: #000; font-size: 15px; width: 15px; display: block; } #newsTextAD > li .sponsored { font-size: 10px; color: #999; text-align: right; } #newsTextAD > li > div { width: 100%; } #newsTextAD > li div#article_bottom_ad > ul { width: calc(100% - 150px); } #newsTextAD > li div#article_bottom_ad > div:last-child { line-height: 1.25em; right: 20px !important; width: 120px; text-align: right; } #newsTextAD > li div#article_bottom_ad > div:last-child > * { display: block; } #newsTextAD ~ div { margin: 1% 2%; } #newsTextAD ~ div::before { content: "*"; width: 0.75em; display: inline-block; vertical-align: top; line-height: 1.875em; } #newsTextAD ~ div > iframe { display: inline-block; width: calc(100% - 0.875em); } /* 新聞內頁文字廣告 End*/ @media (min-width: 1200px) { } @media (min-width: 980px) and (max-width: 1199px) { } @media (min-width: 768px) and (max-width: 979px) { } @media (max-width: 767px) { .area18 { position: static; width: 90%; height: auto; background-color: #01CBCB; padding-top: 20px; margin: 2% auto; border-radius: 15px; } .adult-image { width: 100%; height: auto; } .area18-btarea { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .area18-bt { width: 43%; border-radius: 8px; font-family: '微軟正黑體'; font-weight: bold; color: #FFF; font-size: 1.375rem; text-align: center; padding: 2% 0; margin: 3% 1%; cursor: pointer; } } @media (max-width: 480px) { } .clean_both { clear: both; } /* 右側浮水印新的 */ #owl-Float { height: 290px; } #owl-Float .item { height: 290px; } .FloatBanner .edm_controls { position: absolute; bottom: 0; right: 0; } #owl-Float2 { height: 155px; } #owl-Float2 .item { height: 155px; } #owl-Float.FloatBanner .edm_controls span, #owl-Float2.FloatBanner .edm_controls span { background: #fff; width: 10px; height: 10px; margin: 5px; } #owl-Float.FloatBanner .edm_controls .active span, #owl-Float2.FloatBanner .edm_controls .active span { background: #d0576b; } .arrowBlock > .arrow { display: inline-block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #8ad2de; } .arrowBlock > .arrowR { border-left: none; border-right: 10px solid #8ad2de; } /* 右側浮水印新的 - 結束 */ /*social icon Start*/ .sharebottom { width: 100%; padding-top: 5px; margin-bottom: 10px; box-sizing: border-box; } .sharebottom ul li { display: inline-block; *display: inline; *zoom: 1; list-style-type: none; width: 108px; height: 35px; margin-bottom: 10px; margin-left: 5px; line-height: 35px; letter-spacing: 1px; } @media only screen and (min-width: 1025px) { .sharebottom { display: none; } } @media only screen and (max-width: 1024px) { #roll_link { display: none; } } #roll_link { display: block; width: 60px; background-color: #fff; border: 1px solid #eee; position: absolute; left: 50%; top: 190px; margin-left: -561px; padding: 5px; box-sizing: border-box; } #roll_link > div { margin-bottom: 5px; } .shareIcon i { background-image: url(/images/shareIcon/social-icon2.png); background-repeat: no-repeat; display: block; width: 40px !important; height: 40px !important; margin: 4px auto !important; border-radius: 3px !important; background-position-x: 0; -webkit-transition: none; transform: none; background-size: auto 100% !important; } .shareIcon i:hover { background-position-x: -40px; } .sprite-01-line { background-position: -80px 0 !important; } .sprite-02-fb { background-position: 0px 0px !important; } .sprite-03-g { background-position: 0 -80px; } .sprite-04-sina { background-position: 0 -120px; } .sprite-05-weibo { background-position: 0 -160px; } .sprite-06-plurk { background-position: 0 -200px; } .sprite-07-speak { background-position: 0 -240px; } .sprite-08-email { background-position: 0 -280px; } .sprite-09-youtube { background-position: 0 -320px; } .shareIcon.sprite32 i { width: 32px; height: 32px; background-size: 64px 415px; } .shareIcon.sprite32 i:hover { background-position-x: 0px; } .sprite32 .sprite-01-line { background-position: 0 0; } .sprite32 .sprite-02-fb { background-position: 0 -32px; } .sprite32 .sprite-03-g { background-position: 0 -64px; } .sprite32 .sprite-04-sina { background-position: 0 -96px; } .sprite32 .sprite-05-weibo { background-position: 0 -128px; } .sprite32 .sprite-06-plurk { background-position: 0 -160px; } .sprite32 .sprite-07-speak { background-position: 0 -192px; } .sprite32 .sprite-08-email { background-position: 0 -224px; } .sprite32 .sprite-09-youtube { background-position: 0 -256px; } .sprite25 i { width: 25px; height: 25px; background-size: 50px; } .shareIcon.sprite25 i:hover { background-position-x: -25px; } .sprite25 .sprite-01-line { background-position: 0 0; } .sprite25 .sprite-02-fb { background-position: 0 -25px; } .sprite25 .sprite-03-g { background-position: 0 -50px; } .sprite25 .sprite-04-sina { background-position: 0 -75px; } .sprite25 .sprite-05-weibo { background-position: 0 -100px; } .sprite25 .sprite-06-plurk { background-position: 0 -125px; } .sprite25 .sprite-07-speak { background-position: 0 -150px; } .sprite25 .sprite-08-email { background-position: 0 -175px; } .sprite25 .sprite-09-youtube { background-position: 0 -200px; } /*social icon End*/ /*彈幕 css*/ .danmuDiv { background-color: transparent; color: #FFF; font-size: 25px; font-weight: bold; position: relative; top: 0; height: 1.5em; color: white; display: none; } .danmuArea { display: inline-block; opacity: 1; pointer-events: all; position: absolute; margin: auto; opacity: 0; display: none; transition: opacity 0.25s, background 0.25s, visibility 0.25s; -webkit-transition: opacity 0.25s, background 0.25s, visibility 0.25s; padding: 0px; border: 0px; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; color: rgb(0, 0, 0); font: inherit inherit inherit inherit inherit/20px inherit; vertical-align: baseline; background-color: transparent; text-align: left; direction: ltr; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); box-sizing: content-box; margin: 0px; padding: 0px; } /*彈幕 css end*/ /*300*600 旅遊廣告*/ .sidebarTravelAD { position: relative; z-index: 400; } .travel-frame { width: 100%; height: 600px; border: 0; /*padding: 80px 0 0 0; margin: -80px 0 0 0;*/ } /*文未下一頁導覽*/ .pageNextIndex { font-weight: bold; padding-left: 1em; } .pageNextIndex > a { color: red; text-decoration: none; } .pageNextIndex > a::before { content: '※'; } .pageNextIndex > a:hover { text-decoration: underline; } .vod-panel { display: none; } .title-more { display: none; } .imgcaption { height: 100%; width: 100%; position: absolute; top: 0; background: rgba(0%,0%,0%,0.6) url(/images/icon/play-button.svg) no-repeat center center; background-size: 100px; display: none; } .pointNews { color: #F04800; } /*浮動影音*/ .floatVideo { max-width: 420px; max-height: 239px; position: fixed; bottom: 80px; left: 5px; background-color: #FFFFFF; z-index: 999; } .floatVideo iframe { border-radius: 2px; border: none; } .floatVideo > * { width: 100%; height: auto; } .floatVideo > .movefloatVideo { display: none; position: absolute; width: 45%; min-width: 30px; height: 30px; bottom: 0; left: 26%; /*background: url("/images/icon/move_01.gif") bottom right no-repeat; background-size: 30px 30px;*/ z-index: 99999; cursor: move; } .floatVideo > .closefloatVideo { /*display: none;*/ position: absolute; width: 13px; height: 13px; top: 1px; right: 1px; background: url("/images/icon/close_x.png") center no-repeat; background-size: cover; cursor: default; z-index: 99999; } @media only screen and (min-width: 1200px) { #iframeCover > div { position: relative; width: 1200px; height: 100vh; margin: auto; } #iframeCover > div > iframe { width: 1200px; height: 640px; border: none; overflow: hidden; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { #iframeCover > div { position: relative; width: 100%; height: 100vw; margin: auto; } #iframeCover > div > iframe { width: 100%; height: 100vw; border: none; } } #HeaderAD { width: 100%; max-width: 1200px; position: relative; margin: auto; } .curtain-center { width: 100%; height: 150px; position: relative; } .curtain-center .curtainBtn { display: none; position: absolute; top: 0; right: 10px; } .curtain-center .curtainBtn::after { font-family: Arial, Verdana, "Microsoft JhengHei", sans-serif; font-weight: 600; color: #FFFFFF; content: ''; /*background: url(/images/icon/btn_open_close.png) no-repeat 0 100%;*/ background: url(/images/icon/btn_open_close.png) no-repeat 0 0; text-shadow: 1px 1px #666; display: block; width: 80px; height: 20px; } .curtain-center.active { height: 500px; } .curtain-center.active .curtainBtn { display: block; } .curtain-center.active .curtainBtn::after { background: url(/images/icon/btn_open_close.png) no-repeat 0 100%; } .curtain-center #gad_curtain_open { display: none; } .curtain-center #gad_curtain_close { display: block; } .curtain-center.active #gad_curtain_open { display: block; } .curtain-center.active #gad_curtain_close { display: none; } .curtain { width: 120px; height: 500px; position: fixed; top: 0; z-index: 72000; } .curtain-left { left: 50%; margin-left: -750px; } .curtain-right { right: 50%; margin-right: -750px; } @media only screen and (max-width: 1200px) { .curtain-center { display: none; } .curtain { top: 200px; position: fixed; } } .tagFormating { text-decoration: underline; color: #7e7e7e; font-weight: 500; } .keywordList { margin: 0; padding: 0; position: absolute; top: 0; left: 0; border: 1px solid #0094ff; border-radius: 3px; list-style: none; background-color: #ffffff; z-index: 70000; } .keywordList > li { cursor: pointer; padding: 8px; display: block; } @font-face { font-family: 'New Microsoft JhengHei'; unicode-range: U+7db0, U+78A7, U+7B75; font-style: normal; font-weight: bold; src: local(MS Gothic), local(Yu Gothic); } @font-face { font-family: 'New Microsoft JhengHei'; unicode-range: U+7db0, U+78A7, U+7B75; font-style: normal; font-weight: normal; src: local(微軟正黑體), local(Microsoft JhengHei); } * { font-family: Arial, 'New Microsoft JhengHei','Microsoft JhengHei', sans-serif; } .modal { z-index: 73000; } img { max-width: 100%; height: auto; } article img { width: 100% !important; height: auto !important; } html, body { font-size: 16px; overflow-x: hidden; } ul, ol, li { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; } a:hover, a:active, a:focus { -webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; text-decoration: none; } .bottom-buffer { margin-bottom: 0px; } .catalog-news-display { display: flex; flex-direction: column; } .mainmenu-area.affix { top: 0; width: 100%; z-index: 71000 !important; } .mainmenu-area.affix + .container-fluid { padding-top: 70px; } .contLeft { min-height: calc(100vh - 44px); } .contRight { -webkit-transition: bottom 2s; transition: bottom 2s; } .contLeft.affix, .contRight.affix { bottom: 0; z-index: 9 !important; } .contRight.affix { right: 0; } @media (min-width: 992px) { .contRight.affix { right: calc((100% - 1000px) / 2); } } @media (min-width: 1200px) { .contRight.affix { right: calc((100% - 1300px) / 2); } } @media (min-width: 1240px) { .contRight.affix { right: calc((100% - 1260px) / 2); } } .video-js .vjs-big-play-button { top: calc(50% - 0.75em) !important; left: calc(50% - 1.5em) !important; } /*header 廣告*/ .heder-area-ad { /*margin-bottom: -1px;*/ } /*header 選單區域*/ .search-area input { height: 25px; border-style: none; margin-left: 5px; border-radius: 50px; background-color: #EEEAEA; font-size: 15px; padding-left: 8px; } div.header-area { border-top: 1px solid #D6D6D6; border-bottom: 1px solid #D6D6D6; text-align: right; } /*header 關鍵字*/ .headerTopLay { display: flex; align-items: center; justify-content: space-between; } .header-left { position: relative; min-width: 65px; } .header-right { flex: 1; } .header-right ul { margin: 0; display: inline-flex; list-style: none; padding: 5px 0; flex-wrap: wrap; } .header-right ul li:before { content: "|"; color: #D6D6D6; font-size: 12px; } .header-right ul li:first-child:before { content: ""; } .header-right ul li a { padding: 5px; font-size: 15px; letter-spacing: 1px; color: #707070; text-decoration: none; white-space: nowrap; } .header-right ul li a:hover { color: #EC0606; } /*header 更換背景圖片 背景色 */ .top-branding-area { background-color: #fff; /* background-image: url("../images/test/top-banner.jpg");*/ background-repeat: repeat; background-position: center center; } /*header logo */ .logo { width: 242px; } /*header-ad01 廣告+倒數區域*/ .top-ad01 { position: relative; display: inline-flex; } /************共用廣告區***********************/ /*header-ad-480x100 banner*/ .top-ad01 .ad-480 { width: auto; } .top-ad01 .ad-480 img { width: 100%; height: auto; aspect-ratio: auto 480 / 100; } /*header-ad-320x100 banner*/ .top-ad01 .ad-320 { /*width: 320px;*/ margin-bottom: -1px; } .top-ad01 .ad-320 img{ width: 100%; height: auto; aspect-ratio: auto 320 / 100; } /*header-ad-160x100 banner*/ .top-ad01 .ad-160 { width: auto; margin-left: 5px; } .top-ad01 .ad-160 img { width: 100%; height: auto; aspect-ratio: auto 160 / 100; } .ad-300x250 img { margin-top: 6px; } .ad-300x100 { text-align: center; margin-top: 10px; } /*******header-倒數區域********/ .top-ad01 .top-reciprocal-area { width: 120px; margin-left: 10px; padding-top: 10px; font-size: 17px; letter-spacing: 2px; } /** 深色倒數**/ .top-ad01 .top-reciprocal-area .reciprocal-title { margin-bottom: -5px; color: #000; } .top-ad01 .top-reciprocal-area .top-reciprocal { font-size: 50px; font-weight: bold; font-family: 'Arial', 'sans-serif'; color: #B20000; } /** 淺色倒數**/ .top-ad01 .top-reciprocal-area .reciprocal-title-light { margin-bottom: -5px; color: #FFF; } .top-ad01 .top-reciprocal-area .top-reciprocal-light { font-size: 50px; font-weight: bold; font-family: 'Arial', 'sans-serif'; color: #FED901; } /****** header 倒數 EDN******/ /*header 右側區域*/ .header-top-right { } /***********header-live區域***************/ /*Floating-Animation*/ .floating { animation-name: floating; -webkit-animation-name: floating; animation-duration: 2s; -webkit-animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } .header-live-area { position: absolute; } .header-live-area { /* position: absolute;*/ width: 120px; right: 0; top: 10px; } .header-live-area .header-live-word { position: absolute; font-family: 'Arial', 'sans-serif'; font-weight: bold; font-size: 36px; color: #FFF; top: 20px; right: 25px; /* font-style: italic; */ z-index: 2; /*transform: rotate(-12deg) skew(-5deg, 0);*/ text-transform: uppercase /*text-shadow: 1px 2px 4px #400000;*/; } /**live 下拉選單*/ .dropdown-menu > li > a { color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown .dropdown-menu { border-radius: 8px; box-shadow: none; margin-top: 30%; font-size: 16px; width: 320px; background-color: #ca1414; letter-spacing: 1px; border: 1px solid rgb(253, 12, 12); z-index: 70500; position: absolute; top: 0; left: auto; right: 10%; } .dropdown-menu .divider { height: 2px; margin: 5px 0; overflow: hidden; background-color: #f75757; border-bottom: 1px solid #9e0000; } .dropdown .dropdown-menu:before { content: ""; border-bottom: 10px solid #ca1414; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; top: -10px; right: 16px; z-index: 10; } .dropdown .dropdown-menu:after { content: ""; border-bottom: 12px solid rgb(253, 12, 12); border-right: 12px solid transparent; border-left: 12px solid transparent; position: absolute; top: -12px; right: 14px; z-index: 9; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #fbe574; text-decoration: none; background-color: #ca1414; } /**live 下拉選單 icon*/ .glyphicon { top: 3px; left: -10px; color: #ffacac; } .fbFancyGroup { margin: auto; } /*-- social-icons --*/ .w3ls-bnr-icons.social-icon { position: relative; top: 58px; } .social-icon a { display: inline-block; font-size: 1em; color: #5888F8; margin: 0 .04em; border: 1px solid transparent; width: 30px; height: 28px; text-align: center; line-height: 2em; position: relative; z-index: 999; } .social-icon a:before { content: ''; display: block; height: 28px; width: 28px; border: 1px solid #5888F8; border-radius: 50px; position: absolute; z-index: -1; -webkit-transition: .3s all; -moz-transition: .3s all; transition: .3s all; } .social-icon a:hover { color: #2ebaef; } .social-icon a:hover:before { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border-color: #2ebaef; } /*-- //social-icons end--*/ /***********top nav***********/ .mainmenu-area { background: none repeat scroll 0 0 #0A4DE9; font-family: "Roboto Condensed", 'Microsoft JhengHei', sans-serif; width: 100%; z-index: 999; /*border-bottom: 1px solid #C8C8C8;*/ box-shadow: 1px 5px 0px rgba(0, 0, 0, 0.095); -webkit-box-shadow: 1px 5px 0px rgba(0, 0, 0, 0.095); -moz-box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.095); } .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; } .mainmenu-area .nav .top-second-nav-out { height: 37px; border-bottom: 1px solid #bdd2f7; background: #e0eafd; } .mainmenu-area .navbar-nav ul { white-space: nowrap; } .mainmenu-area .navbar-nav ul li { float: left; overflow: hidden; } .mainmenu-area .navbar-nav > ul > li > a { display: inline-block; color: #fff; letter-spacing: 3px; font-size: 20px; padding: 8px 10px; } .mainmenu-area .navbar-nav > ul > li:hover, .mainmenu-area .navbar-nav > ul > li.active { background: #0000AE; } /* top-nav right icon*/ .top-rightmenu ul.nav > li { height: 44px; display: inline-block; } .top-rightmenu ul.nav > li > a { display: inline-block; padding: 5px 8px; height: 100%; } .top-rightmenu ul.nav > li > a:hover, .top-rightmenu ul.nav > li > a:focus { text-decoration: none; background-color: transparent; } .top-rightmenu ul.nav > li > a > img { height: 100%; width: auto; image-rendering: -webkit-optimize-contrast; } /* top second nav*/ .mainmenu-area .nav > ul > li .top-second-nav { display: none; position: absolute; /*background-color: #e0eafd;*/ width: 100%; left: 0; z-index: 700; height: 97px; overflow: hidden; } .mainmenu-area .nav > ul > li.active .top-second-nav, .mainmenu-area .nav > ul > li:active .top-second-nav, .mainmenu-area .nav > ul > li:hover .top-second-nav { display: block; } .mainmenu-area .nav > ul > li .top-second-nav a { display: inline-block; letter-spacing: 1px; color: #00075f; font-size: 18px; position: relative; padding: 6px 4px; margin: auto 6px; } .mainmenu-area .nav > ul > li .top-second-nav ul li { position: relative; } .mainmenu-area .nav > ul > li .top-second-nav ul li a::after { content: ""; position: absolute; display: block; width: 0px; height: 3px; margin-top: 7px; background: transparent; transition: width .3s ease, background-color .3s ease; bottom: 0; left: 0; } .mainmenu-area .nav > ul > li.active .top-second-nav ul > li.active a { background-color: transparent; color: #dc0202; text-decoration: none; } .mainmenu-area .nav > ul > li:hover .top-second-nav ul > li:hover a::after, .mainmenu-area .nav > ul > li.active .top-second-nav ul > li.active a::after { background: #2289ff; text-decoration: none; width: 100%; } .menuH.activeSubNav { margin-top: 2.5em; } .siteNav { width: 100%; max-width: 1270px; height: auto; background-color: #0a4de9; display: flex; justify-content: space-between; align-items: center; margin: 3% auto 1% auto; padding: 13px 40px; overflow: hidden; height: 75px; } .siteNav .subBtn { display: block; width: 90px; transition: transform 0.5s ease; } .siteNav .subBtn:hover { transform: translateY(-10%); -webkit-transform: translateY(-10%); -ms-transform: translateY(-10%); } .menuH:not(.activeSubNav) + .siteNav { margin: 1% auto; } :root { --primary-color: #0a4de9; --dark-blue: #0000AE; --yellow: #fbe40e; } .hotnav-bar { background-color: var(--primary-color); max-width: 1240px; margin: 1% auto 0.1% auto; padding: 0 20px; overflow: hidden; line-height: 1; } .hotnav-content { display: flex; justify-content: space-between; align-items: center; } .hotnav-box { display: flex; align-items: center; flex-wrap: wrap; } .hotnav-box li a { display: block; padding: 10px 8px; } .hotnav-box.box-left li a { background: var(--yellow); border-radius: 25px; /*color: var(--primary-color);*/ font-size: 20px; font-weight: bold; text-shadow: 0 0 0; margin: 14px 10px; padding: 6px 12px; } .box-left li a:hover { transform: translateY(-5px); transition: all .3s; } .box-right li a:hover { background: var(--dark-blue); } .donatemenu { max-width: 124px; max-height: 40px; } .container { max-width: 1270px; margin: auto; } .channelarea .channelarea-content { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } .channelarea { /*width: 25%;*/ margin-left: auto; margin-right: 0; padding-top: 0px; } .channelarea-content li { width: 40%; padding: 15px 10px; } .channelarea-content li { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); } .channelarea-content li a img:hover { transform: translateY(-5px); transition: all .3s; } /***************header-END**************/ /****maintop area****/ .maintop-area { background-color: #FFF; /*background-color: #F0EFEC; padding-top:8px;*/ } /****main news-area****/ .main-news-area { /*border-top: 1px solid #e4e4e4;*/ } /****麵包屑****/ .breadcrumb > li + li:before { content: ">"; color: #a2a2a2; } .breadcrumb { background-color: transparent; padding: none; margin-bottom: 0px; list-style: none; letter-spacing: 1px; } /*ad banner 970x250*/ .banner-970x250 { /*background-color: #fff; padding: 10px;*/ margin-top: 5px; } /*.banner-970x250 img { width: 100%; }*/ /*新聞快訊 news flash*/ .news-flash-area { position: relative; background-color: #fbe40e; /*background-color: #f5dd01;*/ margin: 5px 0 5px 0; padding: 0; height: 50px; overflow: hidden; } .breaking_news { float: left; padding: 8px 2px 5px 10px; background-color: #aa0101; position: relative; color: #fff; font-size: 26px; letter-spacing: 8px; /* font-weight: bold; */ } .breaking_news:after { content: ''; position: absolute; right: -17%; top: 37%; border-left: 8px solid #f5dd01; border-right: 8px solid #f5dd01; border-bottom: 12px solid #aa0101; transform: rotate(90deg); } .news-flash-area .news-flash-list { display: inline-block; width: calc(100% - 82px); vertical-align: middle; line-height: 50px; } .news-flash-area div.item:before { content: "\02666"; display: inline-block; color: #ff5d02; width: 0.75em; font-size: 1.25em; line-height: 1em; margin-left: 30px; -moz-transform: scale(1, 0.8); -webkit-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); transform: scale(1, 0.8); } .news-flash-area time { font-size: 10px; margin-left: 1em; } .news-flash-area a { color: #333; text-decoration: none; letter-spacing: 1px; font-size: 20px; /*line-height: 32px;*/ } .news-flash-area a:hover { color: #B22D00; } /****新聞快訊 news flash END*****/ /**首頁上方輪播**/ .top-slider { margin-top: 35px; } /***首頁上方最新影音***/ .top-live-area { position: relative; } .top-live-area-title { width: 110px; height: 38px; border-bottom: 3px solid #8c0000; margin-bottom: 4px; } .top-live-area-title:before { position: absolute; content: " "; width: 45px; height: 38px; border-bottom: 3px solid #ffa64d; } .top-live-title { font-size: 22px; letter-spacing: 2px; } /**首頁上方熱門新聞**/ .top-hot-area-title { width: 110px; height: 38px; border-bottom: 3px solid #8c0000; margin-bottom: 10px; } .top-hot-area-title:before { position: absolute; content: " "; width: 45px; height: 38px; border-bottom: 3px solid #f00; } .top-hot-title { font-size: 22px; letter-spacing: 2px; } .top-hot-title a { color: #000; text-decoration: none; } .top-hot-area-title a:hover { color: #B22D00; } /********************************/ .arrow-left { position: absolute; right: 36px; top: 16px; width: 22px; height: 22px; } .arrow-right { position: absolute; right: 10px; top: 16px; width: 22px; height: 22px; } .top-live-area-item { position: relative; padding: 5px 0; } .live-img { position: absolute; } .top-live-area-item .imgCon { padding-bottom: 56.25%; width: 100%; height: 0; overflow: hidden; } .top-live-area-text { position: relative; background-color: #000; font-family: Arial, 'Microsoft JhengHei', sans-serif; height: 30px; padding: 5px; letter-spacing: 1px; bottom: 15px; margin-bottom: -10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .top-live-area-item a { color: #FFF; text-decoration: none; } .top-live-area-item a:hover { color: #97E9FF; text-decoration: none; } .top-live-area .top-hot-list { color: #000; list-style: none; } .top-live-area .top-hot-list ul { width: 100%; } .top-live-area .top-hot-list ul li { line-height: 2.25em; font-size: 17px; border-bottom: 1px dashed #C1C1C1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; list-style: none; } .top-live-area .top-hot-list ul li img { width: 14px; height: 17px; } .top-live-area .top-hot-list ul li:before { content: "\02666"; display: inline-block; color: #FFa64D; width: 0.75em; font-size: 1.125em; line-height: 1em; -moz-transform: scale(1, 0.8); -webkit-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); transform: scale(1, 0.8); } .top-live-area .top-hot-list ul li a { text-decoration: none; color: #000; } .top-live-area .top-hot-list ul li a:hover { color: #B22D00; } /***************首頁上方直播室 + 熱門新聞區域 END *******************/ /**** catalog - 熱門新聞區域****/ .top-hot-list2 { color: #000; list-style: none; } .top-hot-list2 ul { width: 100%; } .top-hot-list2 ul li { display: inline-flex; line-height: 40px; border-bottom: 1px dashed #C1C1C1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; list-style: none; } .top-hot-list2 ul li span { position: relative; display: inline-block; width: 20px; font-size: 9px; line-height: 20px; color: #fff; text-align: center; margin-right: 4px; background-color: #D90000; border-radius: 3px; height: 20px; } .top-hot-list2 ul li a { text-decoration: none; color: #000; width: 100%; overflow: hidden; text-overflow: ellipsis; } .top-hot-list2 ul li a:hover { color: #B22D00; } /**** catalog - 熱門新聞區域 END ****/ /*** 即時新聞 ***/ .immediate-news-area { background-color: #FFF; margin: 0px auto 0px auto; padding: 0px 10px 10px 10px; border-radius: 3px; } .immediate-news-title { position: relative; width: 920px; } /**左側下方標題*/ .news-title-area { width: 100%; font-size: 22px; letter-spacing: 2px; margin: 8px 0; color: #000; position: relative; } .news-title-area > .news-title { position: relative; line-height: 40px; padding: 0 1em 0 5px; display: inline-block; border-bottom: 3px solid #00238C; } .news-title-area > .news-title-b h1 { position: relative; line-height: 40px; padding: 0 1em 0 5px; display: inline-block; border-bottom: 3px solid #00238C; font-size: 22px; margin-bottom: 0px; margin-top: 0px; } .news-title-area::after { position: absolute; content: " "; width: 2em; left: 0; bottom: 0; border-bottom: 3px solid #73B9FF; } .news-title-area h1::after { position: absolute; content: " "; width: 2em; left: 0; bottom: -3px; border-bottom: 3px solid #73B9FF; } .news-title-area > .news-title > a { color: #000; } .news-title-area > .news-title-b > h1 a { color: #000; } .news-title-area.news-title-area_purple > .news-title h1 { border-bottom-color: #cc99ff; } .news-title-area.news-title-area_purple::after{ border-bottom-color: #5900b2; } .news-title-area.news-title-area_red > .news-title { border-bottom-color: #8c0000; } .news-title-area.news-title-area_red::after { border-bottom-color: #ff0000; } .news-title-area.news-title-area_orange > .news-title { border-bottom-color: #ffa64d; } .news-title-area.news-title-area_orange::after { border-bottom-color: #8c0000; } .news-title-area.news-title-area_full { } .news-title-area.news-title-area_full > .news-title { border-bottom-width: 2px; width: 100%; } .news-title-area.news-title-area_full::after { border-bottom-width: 2px; width: 5em; } .news-title-area.news-title-area_fullBold > .news-title { border-bottom-color: #00238C; z-index: 1; } .news-title-area.news-title-area_fullBold::after { width: 100%; border-bottom-color: #73B9FF; } /*************************************************/ .news-title-area2a { width: 100%; font-size: 22px; letter-spacing: 2px; margin: 8px 0; color: #000; position: relative; } .news-title-area2a::after { position: absolute; content: " "; width: 2em; left: 0; bottom: 0; border-bottom: 3px solid #73B9FF; } .news-title-area2a > .news-title { position: relative; line-height: 40px; padding: 0 1em 0 5px; display: inline-block; border-bottom: 3px solid #00238C; } .news-title-area2a.news-title-area_full2 > .news-title { border-bottom-width: 2px; width: 100%; } .news-title-area2a.news-title-area_full2 > .news-title h1 { font-size: 22px; } .news-title-area2a.news-title-area_full2::after { border-bottom-width: 2px; width: 5em; } .news-title-area2a.news-title-area_full2Bold::after { width: 100%; border-bottom-color: #73B9FF; } .news-title-2 { position: absolute; font-size: 22px; letter-spacing: 2px; line-height: 45px; margin: 0 0 5px 5px; } .news-title-2 a { color: #000; } .news-title-2 a:hover { color: #B22D00; } .news-title-area-2 { position: relative; width: 100%; height: 45px; border-bottom: 2px solid #00238C; margin-bottom: 15px; margin-right: 10px; margin-top: 15px; } .news-title-area-2:after { position: absolute; content: " "; width: 120px; height: 45px; border-bottom: 2px solid #73B9FF; /*margin-left: -10px;*/ } .news-page-title-3 { display: inline-block; font-size: 22px; letter-spacing: 2px; line-height: 45px; margin: 0 0 5px 5px; } /***內頁新聞標題****/ .news-title-area-3 { /*border-bottom: 1px solid #dedede;*/ margin-bottom: 10px; } .news-title-3 { font-size: 30px; letter-spacing: 2px; line-height: 52px; margin: 15px 0 10px 0px; /*padding-bottom: 10px;*/ color: #333; font-weight: bold; /*border-bottom: 1px solid #dedede;*/ } .news-title-3 img { height: 20px; width: 20px; margin-bottom: 5px; } .news-page-title-area-3 { width: 100%; height: 45px; border-bottom: 3px solid #73B9FF; margin-bottom: 10px; margin-right: 10px; margin-top: 15px; } .news-page-title-area-3:before { position: absolute; content: " "; width: 120px; height: 45px; border-bottom: 3px solid #00238C; /* margin-left: -10px; */ } /***各區域 Title***/ .news-title-area-4 { width: 110px; height: 50px; border-bottom: 3px solid #00238C; margin-bottom: 5px; margin-right: 10px; position: relative; } .news-title-4 { font-size: 22px; letter-spacing: 2px; line-height: 50px; margin: 15px 0 5px 5px; color: #000; } .news-title-4 a { color: #000; } .news-title-area-4:before { position: absolute; content: " "; width: 45px; height: 50px; border-bottom: 3px solid #73B9FF; } .news-title-area-4 img { position: absolute; right: 10px; top: 30px; width: 24px; height: 25px; } /**右側 Title**/ .news-title-5 { font-size: 22px; letter-spacing: 2px; line-height: 50px; margin: 0 0 5px 5px; color: #000; } .news-title-5 a { color: #000; } .news-title-area-5 { width: 130px; height: 50px; border-bottom: 3px solid #cc99ff; margin: 10px 0 15px 0; } .news-title-area-5:before { position: absolute; content: " "; width: 45px; height: 50px; border-bottom: 3px solid #5900b2; } /******Search Area********/ #custom-search-input { margin: 0; padding: 0; } #custom-search-input .search-query { padding-right: 3px; padding-right: 4px \9; padding-left: 10px; padding-left: 4px \9; margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 50px; margin-bottom: 10px; } #custom-search-input button { z-index: 2; border: 0; background: none; padding: 2px 5px; margin-top: 2px; position: relative; left: -28px; margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #D9230F; } .search-query:focus + button { z-index: 3; } .search-keyword { width: 100%; border-bottom: 1px solid #D4D4D4; letter-spacing: 1px; margin-bottom: 15px; margin-left: 2px; padding-bottom: 5px; } /****搜尋關鍵字區域****/ .keyword-area { line-height: 30px; } .keyword-area::before { content: "\02666"; display: inline-block; color: #00BFFF; width: 0.75em; font-size: 1.375em; line-height: 1em; -moz-transform: scale(1, 0.8); -webkit-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); transform: scale(1, 0.8); } .keyword-area .icon02 { width: 10px; height: 10px; line-height: 36px; } /**個人化標籤**/ .keyword .keywords-delete { position: absolute; display: block; border-radius: 50px; font-size: 8px; color: #FFF; background-color: #8795f5; line-height: 1.25em; width: 1.25em; top: -0.5em; text-align: center; left: -0.25em; } .keyword .keywords-delete:hover { background-color: #B168FF; } .keyword { width: 100%; display: inline-flex; flex-wrap: wrap; list-style: none; margin: 0 auto 10px auto; } .keyword li { position: relative; margin-top: 9px; margin-right: 7px; line-height: 22px; display: inline-block; background-color: #BFDFFF; color: #333; border-radius: 15px; padding: 3px 10px; cursor: pointer; } .keyword li:hover, .keyword li:active { background-color: #95CAFF; color: #000033; } /***熱門搜尋關鍵字***/ .search-hotkeyword li { background-color: #FFE084; color: #333; } .search-hotkeyword li:hover, .search-hotkeyword li:active { background-color: #FCCA87; color: #663333; display: inline-block; } /***搜尋範圍***/ .search-area li { background-color: #FFF; border: 1px solid #CFBFFF; color: #333; } .search-area li:hover, .search-area li:active, .search-area .active { background-color: #DCD0FF; color: #330033; } .search-area button { border: 0px; background:#fff; min-width: 30px; } /**關鍵字變色**/ .keyword-red { color: #FE0101; } /******************************************/ /***即時新聞類別標題***/ .news-lable-list { margin-bottom: 15px; } .news-lable-list .table > tbody > tr > td::before { display: inline-block; font-weight: 600; margin-right: 4px; } .table { font-size: 20px; letter-spacing: 5px; text-align: left; margin: auto; } .table > tbody > tr > td { border-top: none; border-bottom: 1px solid #94e0fd; line-height: 40px; padding: 4px; color: #73B9FF; } .table > tbody > tr > td a:hover { line-height: 40px; color: #f11a09; } .table > tbody > tr > td > img { height: 5px; width: 5px; } .table > tbody > tr > td > span { color: #061e77; cursor: default; } .table > tbody > tr > td > span:hover { color: #FF0000; } .table tbody tr .active a { color: #FF0000; font-weight: bold; } .table > tbody > tr > td.active { background-color: transparent; border-bottom: 4px solid #61ccff; } .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #d6eefb; !important; } .table-hover > tbody > tr > td:hover, .table-hover > tbody > tr > td:hover { background-color: #afe2fb !important; } /************************************************/ .news-lable-list .table2 > tbody > tr > td > h2::before { display: inline-block; font-weight: 600; margin-right: 4px; } .table2 { letter-spacing: 5px; text-align: left; margin: auto; width: 100%; } .table2 > tbody > tr > td h2 { border-top: none; border-bottom: 1px solid #94e0fd; line-height: 40px; padding: 4px; color: #73B9FF; font-size: 20px; } .table2 > tbody > tr > td > h2 a:hover { line-height: 40px; color: #f11a09; } .table2 > tbody > tr > td > h2 img { height: 5px; width: 5px; } .table2 > tbody > tr > td > h2 span { color: #061e77; cursor: default; } .table2 > tbody > tr > td > h2 span:hover { color: #FF0000; } .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #d6eefb; !important; } .table-hover > tbody > tr > td:hover, .table-hover > tbody > tr > td:hover { background-color: #afe2fb !important; } /****新聞總覽日期*****/ .news-lable-date { color: #006CD8; } .news-review-img img { right: 15px; top: 10px; width: 24px; height: 25px; position: absolute; } /*****************************************/ /*** 圖+文新聞**/ .newsimg-area-item { position: relative; /*margin-top:10px;*/ } .newsimg-title-area { position: relative; display: inline-flex; width: 100%; } .newsimg-area-item-title { width: 100%; position: relative; display: inline-flex; font-size: 20px; font-weight: bold; margin-bottom: 8px; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 8px; } /** title 前方icon**/ .newsimg-area-item-title:before { content: "\02666"; display: inline-block; color: #00BFFF; height: 0.8em; width: 0.8em; line-height: 0.8em; font-size: 1.5em; -moz-transform: scale(1, 0.8); -webkit-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); transform: scale(1, 0.8); text-align: center; } .newsimg-area-item .newsimg-area-item-title, .newsimg-area-item .newsimg-area-item-title a, .newsimg-title-area .newsimg-area-item-title a { color: #1A2EB7; } .newsimg-area-item .newsimg-area-item-title a:hover { color: #B22D00; } .newsimg-area-item-title .icon01 { height: 12px; width: 12px; vertical-align: middle; } .title-more { width: 24px; margin-top: 15px; margin-left: 5px; } .newsimg-area-text { position: relative; top: -2px; background-color: #000; padding: 8px; letter-spacing: 1px; bottom: 15px; /*margin-bottom: -10px;*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; font-size: 17px; } .newsimg-area-item a { color: #FFF; text-decoration: none; } .newsimg-area-item a:hover { color: #97E9FF; text-decoration: none; } .newsimg-area-text-date { position: absolute; top: -5px; font-family: 'Arial'; padding: 4px 8px 4px 8px; letter-spacing: 1px; bottom: -5px; width: 100%; font-size: 11px; z-index: 3; background-color: #000; } .newsimg-area-item-date a { color: #FFF; text-decoration: none; } .newsimg-area-item-date a:hover { color: #97E9FF; text-decoration: none; } .img-ratio-16x9 img { width: 100%; height: auto; aspect-ratio: auto 640 / 360; } .img-ratio-510x287 img { width: 100%; height: auto; aspect-ratio: auto 510 / 287; } .img-ratio-1200x676 img { width: 100%; height: auto; aspect-ratio: auto 1200 / 676; } .img-ratio-140x270 img { width: 100%; height: auto; aspect-ratio: auto 140 / 270; } .img-ratio-140x135 img { width: 100%; height: auto; aspect-ratio: auto 140 / 135; } .img-ratio-120x83 img { width: 100%; height: auto; aspect-ratio: auto 120 / 83; } .img-ratio-270x146 img { width: 100%; height: auto; aspect-ratio: auto 270 / 146; } /** plist-新聞列表**/ .newsimg-imgLay { position: relative; } .newsimg-area-text-2 { position: relative; padding: 5px 2px; letter-spacing: 1px; line-height: 30px; bottom: 0px; width: 100%; height: 65px; font-size: 18px; } .newsimg-area-item-2 { position: relative; } .newsimg-area-item-2 a { color: #0d67b5; text-decoration: none; } .newsimg-area-item-2 a:hover { color: #0d5390; text-decoration: none; } .newsimg-area-item-2.projectList { margin-bottom: 30px; border-bottom: 1px solid #cccccc; } .newsimg-area-info { padding: 8px 5px; line-height: 25px; font-size: 17px; height: 60px; letter-spacing: 1px; overflow: hidden; border-top: 1px solid #dedede; } .newsimg-area-info a { color: #333; } .label-area { position: relative; display: inline-flex; width: 100%; height: 40px; border-bottom: 1px solid #dedede; margin-bottom: 20px; } .newsimg-date { position: absolute; padding: 10px 5px 0px 5px; font-size: 13px; color: #827f7f; letter-spacing: 1px; margin-top: 2px; } .label-area .newslabel-tab { position: absolute; padding: 3px 8px; border-radius: 30px; color: #FFF; letter-spacing: 1px; bottom: 7px; font-size: 16px; right: 5px; left: auto; } /************************************************/ /**專題標題**/ .newspro-area-item { position: relative; margin-right: 5px; margin-left: 5px; } .newspro-area-item-title { width: 100%; position: relative; display: inline-flex; font-size: 20px; font-weight: bold; margin-bottom: 8px; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 10px; } .newspro-area-item-title:before { content: "\02666"; display: inline-block; color: #00BFFF; height: 0.8em; width: 0.8em; line-height: 0.8em; font-size: 1.5em; -moz-transform: scale(1, 0.8); -webkit-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); transform: scale(1, 0.8); text-align: center; } .newspro-area-item .newspro-area-item-title img { height:auto; width: 100%; } .newspro-area-item .newspro-area-item-title a { color: #1A2EB7; } .newspro-area-item .newspro-area-item-title a:hover { color: #B22D00; } .newspro-area-item-title .icon01 { height: 12px; width: 12px; vertical-align: middle; } /** 圖片下方新聞list*/ .news-boxlist ul { width: 100%; justify-content: space-between; display: inline-flex; flex-wrap: wrap; } .news-boxlist ul li { position: relative; width: 32.5%; } .news-boxlist ul li .player-icon { top: -10%; } .news-boxlist h3 { background-color: #010846; font-size: 17px; margin-top: -1px; padding: 0 6px; color: #FFF; font-weight: 100; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; line-height: 2.4em; } .news-list { color: #000; list-style: none; } .news-list ul, .news-list-2 ul { width: 100%; } .news-list ul li { line-height: 40px; border-bottom: 1px dashed #d4d4d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; letter-spacing: 1px; } .news-list ul li:before { content: "\02666"; display: inline-block; color: #00BFFF; height: 1em; width: 1em; line-height: 1em; -moz-transform: scale(1, 0.8); -webkit-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); transform: scale(1, 0.8); text-align: center; } .news-list ul li a, .news-list-2 ul li a { text-decoration: none; color: #000; } .news-list ul li a:hover, .news-list-2 ul li a:hover { color: #B22D00; } /*閒置廣告 - 文字列表*/ .news-list .cover_right_ul li:first-child { line-height: 28px; } .news-list .cover_right_ul li .first_bold { white-space: normal; } .news-list-2 { color: #000; list-style: none; /* border-bottom: 1px dashed #4DA6FF;*/ } .news-list-2 ul > li { line-height: 35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; list-style: none; font-size: 17px; letter-spacing: 1px; position: relative; border-bottom: 1px dashed #d4d4d4; } .news-list-2 ul > li::before { content: ''; display: inline-block; height: 10px; width: 12px; margin: 0 5px 0 0; background-image: url(../images/icon/title-icon-03.gif); background-repeat: no-repeat; background-position: left center; background-size: 6px; } .news-list-2 ul > li.aditem { text-overflow: unset; } .news-list-2 ul > li.aditem > *:not(script) { width: 90%; display: inline-block; vertical-align: middle; } .extend.news-list ul { display: inline-flex; flex-wrap: wrap; justify-content: space-between; } .extend.news-list ul li { width: 49%; } /***閒置廣告list 新聞 ***/ .cover_right_ul { width: 100%; float: left; clear: both; margin: 5px 0px 10px 0px; list-style-type: none; } .cover_right_ul li:first-child:before { color: #FFF; content: ""; width: 0; } .cover_right_ul li:first-child { padding-left: 5px; } .cover_right_ul li img { width: 150px; float: left; margin: 0 10px 10px 0; } .banner_cover_left { padding-top: 1%; } /*圖片標題新聞list*/ .img-newslist-area { border-bottom: 1px dashed rgb(193, 193, 193); margin: 10px 0 5px 0; display: inline-flex; width: 100%; } .img-newslist-img { width: 160px; margin: 0 6px 5px 6px; } .img-newslist-img img { width: 160px; } .img-newslist-info { width: 100%; letter-spacing: 1px; margin-bottom: 8px; } .img-newslist-info .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .img-newslist-info .title a { font-size: 17px; font-weight: bold; color: #333; } .img-newslist-info .title a:hover { color: #B22D00; } .img-newslist-info .info { width: 100%; } .img-newslist-info .info a { font-size: 15px; color: #666; } .img-newslist-info .info a:hover { color: #B22D00; } /***圖片上方player icon***/ .player-icon { position: absolute; width: 100%; height: 100%; z-index: 3; background: url(/images/icon/video-player.png) no-repeat center; background-size: 17%; opacity: 0.95; } /***圖片上方 album icon***/ .album-icon { position: absolute; left: 10px; top: 48px; width: 28px; height: 28px; z-index: 3; } .album-icon-2 { position: absolute; left: 10px; top: 10px; width: 28px; height: 28px; z-index: 3; } .album-icon-page-area { position: relative; text-align: center; } .album-icon-page { position: absolute; width: 36px; height: 36px; background: url(/images/icon/album-icon.png) right bottom no-repeat; background-size: 28px 28px; } .album-icon-page img { width: 28px; height: 28px; z-index: 3; margin-left: 8px; margin-top: 8px; } /****更多新聞*****/ .more-news-area { width: 100%; background-color: #6db1f7; border-radius: 50px; line-height: 40px; margin-bottom: 20px; font-size: 18px; color: #FFF; letter-spacing: 2px; text-align: center; font-weight: bold; margin-bottom: 30px; } .more-news-area a { color: #FFF; } /**Title More*/ .more-r { position: absolute; right: 4px; top: 50%; font-size: 16px; color: #8f00d6; font-weight: bold; letter-spacing: 2px; margin-top: -0.5em; } /**************************************/ /*Live 影音區域*/ .live-title { margin: 10px 0 10px 10px; font-weight: bold; font-size: 19px; letter-spacing: 2px; color: #333; } .live-title img { width: 60px; height: 21px; } .live-left-img { position: relative; margin-bottom: 10px; } .live-left-img img { width: 100%; } .live-right-banner { margin: 2px 10px 5px 0px; } .live-right-banner iframe { border: none; } /** 最新影音 **/ .news-video { /*margin:10px 0;*/ } .news-video-title { margin: 0px 0 15px 0; } .st-video { position: relative; } .st-video > div { padding-bottom: 56.25%; height: 0; overflow: hidden; } .st-video h2:hover { background-color: #000; } .st-video h2 { background-color: #010846; font-size: 17px; margin-top: -1px; padding: 0 6px; color: #FFF; font-weight: 100; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; line-height: 2.5em; } .st-video h2 a { color: #FFF; font-weight: initial; } /*下方右側 banner 區域*/ .right-banner { max-width: 300px; margin: auto; } .right-banner img { margin: 2px 0 10px 3px; } .right-banner.ad-300x250 { height: 260px; } /* 下方右側 旅遊區*/ .travel-ad-area { width: 100%; max-width: 300px; margin: 10px auto; } .travel-ad-area img { margin: 2px 0 10px 3px; } /*右側標題*/ .right-news-title { position: relative; display: inline-flex; width: 100%; } /*右側投票區*/ .right-news-title img { position: absolute; right: 5px; top: 25px; width: 23px; height: 5px; } .right-vote-area img { margin: 2px 0 10px 3px; } .right-writer-list { width: 100%; position: relative; margin-bottom: 10px; } /*右側今日頭條*/ .right-nownews-area { border-bottom: 1px solid #DEDEDE; margin: 5px 0 18px 0; width: 100%; } .right-nownews-img { width: auto; margin-bottom: 8px; } .nownews-number { position: absolute; display: inline-block; font-size: 13px; color: #fff; width: 26px; height: 26px; line-height: 26px; text-align: center; margin-right: 4px; background-color: #D90000; } /*右側圖輯*/ .right-slider-area { margin: 10px; } /*右側名家專欄區*/ .right-writer-area { border-bottom: 1px dashed rgb(193, 193, 193); margin: 5px 0 10px 0; display: inline-flex; width: 100%; } .right-writer-img { width: 80px; margin-bottom: 8px; } .right-writer-img img { height: 55px; width: 55px; border-radius: 50%; overflow: hidden; } .right-writer-info { width: 100%; letter-spacing: 1px; margin-bottom: 8px; } .right-writer-info .title a { font-size: 17px; font-weight: bold; color: #333; word-break: break-all; } .right-writer-info .title a:hover { color: #B22D00; } .right-writer-info .info { height: 2.875em; overflow: hidden; text-overflow: ellipsis; } .right-writer-info .info a { font-size: 15px; color: #666; } .right-writer-info .info a:hover { color: #B22D00; } /*右側本周夯新聞區*/ .right-news-list { color: #000; list-style: none; margin-bottom: 10px; } .right-news-list ul { width: 100%; } .right-news-list ul li { line-height: 40px; border-bottom: 1px dashed #C1C1C1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; list-style: none; font-size: 17px; } .right-news-list ul li:before { content: ''; display: inline-block; height: 8px; width: 8px; margin: 0 5px 0 0; background-image: url(../images/icon/title-icon-02.gif); background-repeat: no-repeat; background-position: left center; background-size: 8px; } .right-news-list ul li a { text-decoration: none; color: #000; } .right-news-list ul li a:hover { color: #B22D00; } /*右側下方HOT 焦點*/ .right-hot-area { border-bottom: 1px dashed rgb(193, 193, 193); margin: 5px 0 10px 0; display: inline-flex; width: 100%; } .right-hot-img { width: 120px; height: 65px; margin-right: 6px; } .right-hot-img img { width: 120px; } .right-hot-info { width: 100%; letter-spacing: 1px; margin-bottom: 8px; } .right-hot-info .title a:hover { color: #B22D00; } .right-hot-info .info a { font-size: 17px; color: #666; } .right-hot-info .info a:hover { color: #B22D00; } /*--footer-copy-right --*/ .copy-right { background: #002DB2; padding: 1em 0; text-align: center; font-size: 10px; line-height: 24px; color: #fff; text-align: center; letter-spacing: 2px } .copy-right a { color: #fff; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; transition: 0.5s all; } .copy-right a:hover { color: #2ebaef; } /*--footer-copyright-end--*/ .footer-area { background-color: #00007B; margin-top: 25px; } .footer-area-box { margin: 10px auto; } .footer-area-box > li { display: inline-block; width: 32.5%; border-right: 1px solid #002DB2; padding: 0 1% 0 3%; } .footer-area-box > li a { color: #5eb9f9; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; transition: 0.5s all; } .footer-area-box > li a:hover { color: #FFFFFF; } .footer-area-box > li:last-child { border-right: none; } .footer-area-box ul li { line-height: 30px; } .icon-footer { display: flex; flex-wrap: wrap; } .icon-footer li { margin: 8px 4px; } .icon-footer.social-icon-footer li > a { width: 32px; height: 32px; display: inline-block; background: url('../images/shareIcon/socialMedia.png') no-repeat 0 center; background-size: cover; } .icon-footer.social-icon-footer li > a.footerFb { background-position-x: 0; } .icon-footer.social-icon-footer li > a.footerIns { background-position-x: 25%; } .icon-footer.social-icon-footer li > a.footerYoutube { background-position-x: 50%; } .icon-footer.social-icon-footer li > a.footerLine { background-position-x: 75%; } .icon-footer.social-icon-footer li > a.footerTwtter { background-position-x: 100%; } .icon-footer.app-icon-footer li > a { width: 48px; height: 48px; display: inline-block; background: url('../images/icon/app.png') no-repeat 0 center; background-size: cover; } .icon-footer.app-icon-footer li > a.footerAppSETN { background-position-x: 0; } .icon-footer.app-icon-footer li > a.footerAppSETNStar { background-position-x: 100%; } .icon-footer.appStore-icon-footer li > a { height: 36px; display: inline-block; background: url('../images/icon/download.png') no-repeat 0 center; background-size: cover; } .icon-footer.appStore-icon-footer li > a.footerAppStore { width: 108px; background-position-x: 0; } .icon-footer.appStore-icon-footer li > a.footerGPlay { width: 121px; background-position-x: 100%; } /**footer***/ /* SCROLL TO TOP */ .scroll-up { position: fixed; display: none; z-index: 999; bottom: 1.8em; right: 1.8em; } .scroll-up ul { margin: 0; padding: 0; } .scroll-up li { list-style: none; margin: 0; padding: 0; } .scroll-up i { border-radius: 50%; background-color: #fff; display: block; width: 40px; height: 40px; text-align: center; color: #000; font-size: 24px; line-height: 40px; box-shadow: 0px 0px 6px #ccc; } .scroll-up i:hover, .scroll-up i:active { background-color: #f5f5f5; color: #000; } /*************RWD圖片裁切*********************/ .image-container { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; background: #d4d4d4; } .image-container img, .image-container picture { width: 100%; } /***********************************************/ /********************頁碼********************/ .pagination-area { text-align: center; } .pagination > li > a, .pagination > li > span { border-radius: 50% !important; margin: 0 5px; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 2; color: #fff; cursor: default; background-color: #2487fd; border-color: #2487fd; } /******************************************/ /***專題icon****/ .project-area { margin: 5px 0 15px 0; } .project-icon { background: #387ff5; color: #FFF; padding: 3px 12px 0 12px; position: absolute; top: 0px; letter-spacing: 3px; font-size: 18px; line-height: 33px; left: -10px; } .project-icon > *, .project-icon > *:hover { color: #FFF !important; } .project-icon::before { position: absolute; right: 0; top: 0; bottom: 0; content: ""; right: -12px; border-top: 18px solid transparent; border-left: 12px solid #EA4335; border-bottom: 18px solid transparent; width: 0; border-left-color: inherit; } .project-icon::after { position: absolute; content: " "; height: 36px; width: 10px; top: 0; left: 0; background-color: #757575; transform-origin: top left; transform: skewY(45deg); z-index: -1; box-shadow: inset 0 0 10px black; } .project-icon.project-icon-0 { background-color: #387ff5; border-left-color: #387ff5; } /***專頁icon****/ .project-icon.project-icon-1 { background-color: #08acad; border-left-color: #08acad; } /***懶人包icon****/ .project-icon.project-icon-2 { background-color: #804d03; border-left-color: #804d03; } /***大事件icon****/ .project-icon.project-icon-3 { background-color: #bf30dc; border-left-color: #bf30dc; } .newsimg-date-02 { position: absolute; right: 3px; padding: 5px 5px 0px 5px; font-size: 13px; color: #ABA9A9; letter-spacing: 1px; margin-top: 8px; } .newslabel-w-01 a, .newslabel-w-01 a:hover { position: absolute; padding: 3px 8px; margin-top: 3px; background-color: #cc99fe; border-radius: 15px; color: #FFF; letter-spacing: 1px; } .store { display: inline-block; margin-bottom: 8px; } .store img { object-fit: cover; border-radius: 50%; width: 35px; height: 35px; vertical-align: middle; margin-right: 4px; } .store a { color: #6c6e6f; font-size: 16px; font-weight: bold; letter-spacing: 1px; } .store a:hover { color: #dc0202; font-weight: bold; } /* bologer */ #owlFamous:not(.owl-carousel) > div { width: 19.5%; display: inline-block; } /*.st-bologer { margin: 15px 5px 0 15px; }*/ .st-bologer h2:hover { color: #001040; } .st-bologer h2 { font-size: 18px; text-align: center; margin: 8px auto 0 auto; line-height: 26px; color: #001040; font-weight: 100; letter-spacing: 1px; } .st-bologer h2 a { color: #001040; } .st-bologer img { border-radius: 10px; width: 100%; margin-bottom: 1px; } /**名家文章列表內文***/ .newsimg-w-info { padding: 10px 5px; line-height: 25px; height: 100px; letter-spacing: 1px; overflow: hidden; border-bottom: 1px solid #dedede; margin-bottom: 20px; } .newsimg-w-info a { color: #666; } .newsimg-w-info a:hover { color: #B22D00; } /**名家日期標籤區域**/ .label-area-02 { position: relative; display: inline-flex; width: 100%; height: 40px; border-bottom: 1px solid #dedede; } .news-more-icon { right: 15px; } /***名家介紹***/ .media .media-left img { width: 140px; height: 140px; border-radius: 50%; } .fnt-smaller > * { padding: 6px 5px 3px 5px; } .fnt-smaller p { font-size: 15px; border-top: 1px dashed #c5c5c5; } /* 右側浮水印新的 */ .rides-cs { font-size: 16px; background-color: rgba(250,250,250,1); position: fixed; top: 230px; right: 0px; z-index: 71000; border-radius: 6px 0px 0 6px; padding: 10px 0; box-shadow: 0px 1px 19px #d0d0d0; -webkit-box-shadow: 0px 1px 19px #d0d0d0; -moz-box-shadow: 0px 1px 19px #d0d0d0; } .rides-cs a { color: #00A0E9; } .rides-cs .floatL { width: 30px; vertical-align: top; display: inline-block; *display: inline; zoom: 1; cursor: default; float: left; } .rides-cs .floatL .onlineA { -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; writing-mode: vertical-lr; padding: 5px; font-weight: 600; letter-spacing: 2px; color: #000; } .rides-cs .floatR { padding: 0 1px; overflow: hidden; vertical-align: top; display: inline-block; *display: inline; zoom: 1; } .rides-cs .floatR #on_air { width: 130px; border: 0 solid #9a2069; background-color: #EA222C; border-radius: 10px; margin-top: 3px; padding: 5px; font-size: 1.063em; margin-bottom: 10px; } .rides-cs .floatR #on_air .on_air_content { padding: 15px 3px; font-weight: bolder; border-radius: 10px; background-color: #ffffff; border: 0px solid #1F5780; font-family: Arial, 'Microsoft JhengHei', sans-serif; } .rides-cs .floatR #on_air .on_air_bottom { color: #ffffff; text-align: left; font-weight: bolder; padding: 5px 0 3px 8px; position: relative; } .imageRotation { margin-bottom: 5px; width: 140px; overflow: hidden; background: rgba(255,255,255,.5); background: linear-gradient(toprgba(255,255,255,0), rgba(255,255,255,.5)); background: -moz-linear-gradient(top,rgba(255,255,255,0), rgba(255,255,255,.5)); background: -webkit-linear-gradient(top,rgba(255,255,255,0), rgba(255,255,255,.5)); } /*-------------?片容器---------------*/ .imageBox { overflow: hidden; width: 100%; } .imageBox img { width: 100%; } /***名家們***/ .writer-img-area { margin: 8px 0; } .writer-img-area img { border-radius: 10px; } .writer-w-area { font-size: 18px; letter-spacing: 1px; text-align: center; padding: 6px; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 15px 0; } .writer-w-area a { color: #000; } .writer-w-area a:hover { color: #dc0202; } .writer-w-info { font-size: 17px; color: #A619E5FF; border-top: 1px dashed #e7cefd; border-bottom: 1px dashed #e7cefd; line-height: 28px; margin: 15px 0 25px 0; padding: 10px; } /**** video view****/ .video_view .modal-dialog { max-width: 1336px; width: 100%; } .pre-cost { text-decoration: line-through; color: #a5a5a5; } .space-ten { padding: 10px 0; } /**** video Youtube****/ .videoSection { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; } .videoLay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-view-w { font-size: 22px; letter-spacing: 2px; height: 215px; border-bottom: 1px solid #d4d4d4; margin-bottom: 15px; } /*.product_view .modal-dialog { width: 1100px; }*/ .newsimg-area-text-3 { padding: 8px 2px; letter-spacing: 1px; line-height: 28px; width: 100%; font-size: 18px; height: 75px; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; margin: 12px 0 12px 0; } .newsimg-area-item-3 a { color: #333; text-decoration: none; } .newsimg-area-item-3 a:hover { color: #B22D00; text-decoration: none; } /***載入更多按鈕***/ .page-more-bt { position: relative; text-align: center; font-weight: bold; letter-spacing: 2px; font-size: 20px; margin: 8px 0px 15px 0; } .page-more-bt a { width: 100%; line-height: 34px; display: inline-block; color: #FFF; background-color: #6AB5FF; border-radius: 50px; } .page-more-bt a:hover { width: 100%; display: inline-block; color: #FFF; background-color: #3C9DFF; } /**************即時新聞列表*********************/ .NewsList > div:nth-child(even) { background-color: #fafdff; } .NewsList > div > div { /* margin-bottom: 20px; */ border-bottom: 1px solid #e3e3e3; display: flex; padding: 10px 0 3px 0; } .NewsList > div > div > * { margin: auto; } .NewsList > div > div h3.view-li-title { font-size: 18px; letter-spacing: 2px; color: #00559e; margin: 0; line-height: 2em; flex: 1; justify-content: space-between; } .NewsList > div > div .newslabel-tab { margin: auto 1em; width: 3.25em; color: #FFF; border-radius: 30px; letter-spacing: 1px; font-size: 16px; height: 1.75em; line-height: 1.75em; display: inline-block; text-align: center; } .NewsList > div > div > .newslabel-tab.AreaSet { width: 4.25em; } .NewsList > div > div .newslabel-tab a { color: #FFF; } .newslabel-vi { display: block; background-color: #09F; color: #fff; text-align: center; font-size: 18px; padding: 0; width: 32px; border-radius: 30px; height: 24px; } .newslabel-vi > i { line-height: 24px !important; } /***** 快訊 *****/ .breaking_news { float: left; padding: 8px 2px 5px 10px; background-color: #aa0101; position: relative; color: #fff; font-size: 26px; letter-spacing: 8px; /* font-weight: bold; */ } .breaking_news::after { content: ''; position: absolute; right: -17%; top: 37%; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid #aa0101; transform: rotate(90deg); } /******************************************************************/ .about-logo { width: 160px; padding: 15px 8px; border-radius: 5px; margin-bottom: 10px; } /******************************************************************/ /* layout.css Style */ .upload-drop-zone { height: 200px; border-width: 2px; margin-bottom: 20px; } /* skin.css Style*/ .upload-drop-zone { color: #ccc; border-style: dashed; border-color: #ccc; line-height: 200px; text-align: center } .upload-drop-zone.drop { color: #222; border-color: #222; } .image-preview-input { position: relative; overflow: hidden; margin: 0px; color: #333; background-color: #fff; border-color: #ccc; } .image-preview-input input[type=file] { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .image-preview-input-title { margin-left: 2px; } /***作者介紹***/ .page-writer-area { position: relative; display: inline-flex; margin-bottom: 18px; width: 100%; } .page-writer-img { width: 170px; margin: 20px 10px 20px 0px; } .page-writer-img img { width: 100%; border-radius: 50%; } .page-writer-right { margin-top: 10px; width: 100%; } .page-writer-right ul li { list-style: none; } .page-writer-title { font-size: 20px; font-weight: bold; letter-spacing: 2px; line-height: 40px; border-bottom: 1px dashed #d4d4d4; margin-bottom: 10px; } .page-writer-title a { color: #333; } .page-writer-title a:hover { color: #a20606; } .page-writer-info { font-size: 16px; letter-spacing: 1px; color: #333; line-height: 26px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #d4d4d4; } .page-writer-info a { color: #333; } .page-writer-info a:hover { color: #a20606; } /***作者關鍵字***/ .page-writer-keyword ul { display: inline-flex; } .page-writer-keyword ul li a { display: inline-block; background-color: #E2C7FF; border-radius: 50px; padding: 5px 8px; margin-left: 7px; color: #333; } .page-writer-keyword ul li a:hover { display: inline-block; background-color: #DBA0FD; color: #333; } .page-tip { background: #FDED72; box-shadow: 0px 0px 8px 0px #00000040; margin: 20px 10px; font-size: 20px; font-weight: 400; line-height: 30px; text-underline-position: from-font; text-decoration-skip-ink: none; padding: 16px 12px 18px 12px; border-radius: 8px; } .page-tip p { margin: 0; } .page-tip ul { display: inline-flex; list-style: none; line-height: 1.75em; } .page-tip a { color: inherit; } .page-submi a { margin-left: 8px; color: #F50303; padding: 5px 8px; border: 1px solid #F50303; border-radius: 2em; } .page-submi a:hover { color: #6902bb; border: 1px solid #6902bb; } . modal-header .ad-title-area { text-align: center; } /**專題menu**/ .plist-menu { background-color: #afe4f7; margin: 0 0 15px 0; letter-spacing: 2px; font-size: 18px; } .plist-menu ul { position: relative; display: inline-flex; } .plist-menu ul li a { display: inline-block; color: #0c0a50; padding: 12px; box-shadow: 0 0 black; } .plist-menu ul li.active a { background-color: #7ec3f1; } .plist-menu ul li a:hover { background-color: #9bd2f7; } /******************************************************/ /* The ribbons */ .rib { height: 40px; width: 80px; position: absolute; color: white; line-height: 40px; text-align: center; font-size: 20px; letter-spacing: 2px; right: -10px; background-color: #fb2049; } .rib.rib_gray { background-color: #797979; } .rib::before { content: ""; position: absolute; width: 0; height: 0; border-top: 20px solid transparent; border-right: 20px solid #fb2049; border-bottom: 20px solid transparent; left: -20px; } .rib.rib_red::before { border-right-color: #fb2049; } .rib.rib_gray::before { border-right-color: #797979; } .rib::after { content: ""; position: absolute; height: 40px; width: 20px; top: 20px; right: 0; transform-origin: top left; transform: skewY(-45deg); z-index: -1; box-shadow: inset 0 0 10px black; background: #980404; } .rib.rib_red::after { background: #980404; } .rib.rib_gray::after { background: #333; } /**************************************************/ /******************Tabs********************/ .tab_area .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #0557af; font-size: 18px; letter-spacing: 2px; background-color: #fff; border-top: 5px solid #67d2fb; border-left: 1px solid #8cdfff; border-right: 1px solid #8cdfff; border-bottom-color: transparent; cursor: default; } .tab_area .nav-tabs { border-bottom: 1px solid #8cdfff; margin: 20px 0 15px 0; } .tab_area .nav-tabs > li > a { margin-right: 5px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 8px 8px 0 0; font-size: 18px; letter-spacing: 2px; border-top: 4px solid #bfdff7; background-color: #e0edf7; color: #333; } .tab_area .nav-tabs > li > a:hover { border-top: 4px solid #abd4f3; background-color: #c9e7fd; } /******** 2019 privacy CSS *********************************************/ .privacy-area { display: none; text-align: center; letter-spacing: 1px; line-height: 24px; padding: 1em; font-size: 13px; border-bottom: 1px solid #E0E0E0; position: fixed; bottom: 0; width: 100%; z-index: 10; background: rgba(225,225,225, 0.7); backdrop-filter: blur(20px); } .privacy-link { margin-right: 15px; } .privacy-link a { color: #555; font-weight: 700; border-bottom: 1px solid #555; } .privacy-link a:hover { color: #7c50ce; border-bottom: 1px solid #7c50ce; } .privacy-area img { width: 47px; margin-right: 4px; vertical-align: middle; } .privacy-bt i { margin-right: 2px; } .privacy-bt button { border: 0px; margin-top: 5px; color: #FFF; border-radius: 50px; font-weight: 700; background-color: #0a4de9; padding: 5px 8px; letter-spacing: 2px; } .privacy-bt a:hover { background-color: #d993da; } .privacyCont ul li { list-style-type: initial; } /*** view all list ************************************************/ .viewall-list ul { list-style: none; padding: 0; margin-top: 12px; margin-bottom: 15px; } .viewall-list ul li { width: 15.3%; background-color: #dcf2f9; margin-right: 0.3%; margin-bottom: 0.8%; margin-left: 0.3%; display: inline-block; padding: 5px 10px 3px 10px; line-height: 30px; font-size: 17px; letter-spacing: 2px; text-align: center; border-radius: 2px; border: 1px solid #abdbec; } .viewall-list ul li:hover { background-color: #c5e8f5; } .viewall-list ul li.active { background-color: #c5e8f5; } .viewall-list ul li a { color: #333; } .viewall-list ul li a:hover { color: #001461; } .viewall-list ul li a i { color: #89cde4; margin-right: 3px; } .viewall-name-area { position: relative; height: 32px; } .viewall-name { color: #ab50a7; border: 1px solid #e2afd1; display: inline-block; padding: 0 10px; border-radius: 50px; position: absolute; font-size: 15px; } .viewall-name a { color: #ab50a7; } .viewall-name a:hover { color: #B22D00; } /******** 2020 熱門人物 CSS **********/ .categoryBox { margin-bottom: 4%; } .loginBox, .loginBox * { padding: 0; color: #0a4de9 !important; line-height: normal !important; } .loginBox i { font-size: 1.4em; vertical-align: middle; } .loginBox { line-height: normal !important; vertical-align: middle; } .loginBox > label > * { margin: auto 0.125em; } .loginBox::before { display: none !important; } .loginBox i.fa-sign-out-alt:before, .loginBox ul li span { color: #727272 !important; } .loginBox ~ .tooltip { cursor: default; max-width: none; font-size: 13px; font-weight: 600; white-space: nowrap; top: calc(50% + 0.7em) !important; left: 0 !important; transform: translateX(calc(-50% + 1.125em)); } .loginBox ~ .tooltip .tooltip-inner { max-width: none; background: #FBE40E; color: #0A4DE9; box-shadow: 3px 2px 0px #0a4de9; border-radius: 2px; } .loginBox ~ .tooltip.bottom .tooltip-arrow { border-bottom-color: #FBE40E; left: 50% !important; } .loginBox ~ .tooltip.bottom::after { content: ''; display: block; border: 5px solid transparent; border-bottom-color: #0a4de9; position: absolute; left: 50%; top: 0; transform: translate(-20%, -45%); z-index: -1; } .loginBox.memberTip i.fa-user-circle { position: relative; margin-right: 3px; } .loginBox.memberTip i.fa-user-circle::after { content: ""; position: absolute; display: block; width: 5px; height: 5px; border-radius: 50%; background: #FF0000; top: 0; left: 100%; transform: translateX(-50%); } #livevodlist .owl-dots { margin-top: 0px; } .grecaptcha-badge { z-index: 1000; } /*AI問答評論*/ .ai_area { max-width: 100%; padding: 0 10px 10px 0px; box-sizing: border-box; margin: 0 auto; color: #00396F; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .ai_logo { width: 48px; } .ai_area_content { display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - 48px); position: relative; } .ai_comment, .ai_qa { display: flex; flex-direction: row; } .ai_comment .title, .ai_qa .title { font-size: 16px; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 66px; height: 26px; background: linear-gradient(180deg, #20F0FC 0%, #01B9FF 100%); box-shadow: 0px 2px 0px #00417D; border-radius: 24px; margin-right: 2px; text-align: center; } .ai_comment .title img, .ai_qa .title img { width: 34%; } .ai_comment .content, .ai_qa .content { display: flex; width: calc(100% - 70px); height: 26px; flex-direction: row; align-items: center; padding: 0px 4px; box-sizing: border-box; border-bottom: 2px solid #01B7FF; border-radius: 20px; cursor: pointer; } .ai_comment .content p, .ai_qa .content p { font-size: 16px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; } /*下拉選中時添加樣式*/ .ai_content_focus { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 100%); color: rgba(33, 34, 59, 0.4); } /*下拉按鈕 -- start*/ .triangle { fill: #fff; stroke: #fff; stroke-width: 10; } circle { fill: #0090CC; transition: 0.3s; } .ai_comment .content:hover circle, .ai_qa .content:hover circle { fill: #006A97; } .arrow-up { display: none; } /*下拉按鈕 -- end*/ .content_more { width: calc(100% + 48px); height: 200px; background: #FFFFFF; border: 2px solid #01B7FF; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); border-radius: 8px; padding: 4px 8px; box-sizing: border-box; scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ overflow-x: hidden; overflow-y: auto; position: absolute; display: none; } .content_more p { font-size: 16px; line-height: 24px; text-align: justify; padding-bottom: 12px; white-space: break-spaces; } .content_more p:nth-child(3) { padding-bottom: 0px; } .comment_content_more { left: -48px; top: 30px; z-index: 1; } .qa_content_more { left: -48px; top: 64px; z-index: 1; } /*AI問答評論 END*/ @media screen and (max-width:1200px) { .hotnav-bar { padding: 10px 0; } .hotnav-box.box-right { display: none } } @media screen and (max-width:992px) { .channelarea-content li { padding: 15px 8px; } } @media screen and (max-width:767px) { .hotnav-box.box-left li a { margin: 8px 10px; } .channelarea { margin: 0 auto; width: 100%; } .channelarea li { width: 18%; margin: 0 auto; padding: 10px 0; } } @media screen and (max-width:600px) { .hotnav-box.box-left li a { font-size: 17px; } } /*AI問答評論*/ @media(min-width: 768px) { .ai_comment .content, .ai_qa .content { padding: 0px 8px; } .ai_comment .title, .ai_qa .title { margin-right: 4px; } .content_more { width: calc(100% - 70px); } .comment_content_more { left: 70px; } .qa_content_more { left: 70px; } } /*social media*/ .social_title { font-size: 1.375em; letter-spacing: 0px; text-align: left; margin-left: 10px; line-height: 1em; color: #0173b5 !important; font-weight: 800; display: inline-block; } .social-media-icon i { background-image: url(/m/images/icon/social-media.png); background-repeat: no-repeat; background-size: cover; width: 40px; height: 40px; display: inline-block; overflow: hidden; font-size: 0; } .social-media-icon li { display: inline; } .social-media-icon .fb { } .social-media-icon .setn { background-position: -40px; } .social-media-icon .line { background-position: -80px; } .social-media-icon .ig { background-position: -120px; } .social-media-icon .youtube { background-position: -160px; } .social-media-icon .twitter { background-position: -321px; } .social-media-icon .flipboard { background-position: -361px; } .waterfall_wrap { width: 100%; margin: auto } .waterfall_wrap .waterfall_area { list-style-type: none; box-sizing: border-box; box-sizing: border-box } .waterfall_wrap .waterfall_area .item { width: 100%; color: #595757; background-color: #eee; padding: 10px; border-top: solid 1px #eee; box-sizing: border-box; background-color: #fff } .waterfall_wrap .item_block img{ width: 100%; height: auto; } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item { margin-bottom: 15px; width: calc((100% - 16px)/2); background-color: #eee; border-radius: 8px; border-top: unset } } .waterfall_wrap .waterfall_area .item:nth-child(2n+1) { margin-right: 10px } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item:nth-child(2n+1) { margin-right: 15px } } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item:hover .item_block .info_box { color: #f04800 } } .waterfall_wrap .waterfall_area .item .item_block { display: flex; flex-direction: row; text-decoration: none } .waterfall_wrap .waterfall_area .item .item_block .img_box { width: 150px; position: relative; height: 0; padding-top: 84.375px; border-radius: 4px; overflow: hidden } .waterfall_wrap .waterfall_area .item .item_block .img_box.waterfall_video::before { content: ""; width: 100%; height: 100%; display: block; position: absolute; opacity: .95; z-index: 1; background-image: url(../images/icon/video-player.png); background-repeat: no-repeat; background-position: center; background-size: 30%; top: 0; left: 0 } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item .item_block .img_box { border-radius: 8px } } .waterfall_wrap .waterfall_area .item .item_block .img_box img { width: 100%; position: absolute; top: 0 } .waterfall_wrap .waterfall_area .item .item_block .info_box { width: calc(100% - 150px - 10px); margin-left: 10px; color: #333; padding-top: 5px } .waterfall_wrap .waterfall_area .item .item_block .info_box .item_desc { color: #000; font-size: 17px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 44px } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item .item_block .info_box .item_desc:hover { color: #B22D00 } } .waterfall_wrap .waterfall_area .item .item_block .info_box .item_info { display: flex; align-items: center; justify-content: space-between; margin-top: 4px } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item .item_block .info_box .item_info { margin-top: 8px } } .waterfall_wrap .waterfall_area .item .item_block .info_box .item_info .item_tag { padding: 2px 8px; color: #fff; border-radius: 20px; font-size: 15px; pointer-events: auto; text-decoration: none } .waterfall_wrap .waterfall_area .item .item_block .info_box .item_info .item_date { color: #666666; font-size: 14px } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item.big_item { padding: 0 } } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item.big_item .item_block { flex-direction: column; padding: 0px } } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item.big_item .img_box { width: 100%; padding-top: 56.25%; border-radius: 8px 8px 4px 4px } .waterfall_wrap .waterfall_area .item.big_item .img_box.waterfall_video::before { background-size: 17% } } .waterfall_wrap .waterfall_area .item.big_item .img_box img { width: 100% } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item.big_item .info_box { width: 100%; margin-left: 0; padding: 10px; box-sizing: border-box } } @media screen and (min-width: 1024px) { .waterfall_wrap .waterfall_area .item.big_item .info_box .item_desc { -webkit-line-clamp: 1; min-height: unset } } /*名家專欄-首頁 start*/ .homepage-famousexp-block .all-area-block { padding: 12px 8px; gap: 8px; border-radius: 16px; background: #F8F8F9; margin-bottom: 8px; } .homepage-famousexp-block .block-title { height: 26px; margin-bottom: 8px; } .homepage-famousexp-block .block-title a { display: flex; align-items: center; color: #000000; } .homepage-famousexp-block .block-title-name { font-size: 18px; font-weight: 600; line-height: 23.4px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; margin-left: 8px; } .homepage-famousexp-block .block-title img { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; } .homepage-famousexp-block .block_content .content_img img { border-radius: 8px; width: 100%; } .homepage-famousexp-block .block_content .content_title { padding: 4px 0px 6px 0px; width: 100%; font-size: 18px; font-weight: 600; line-height: 23.4px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #000000; } /*名家專欄-首頁 end*/ /*名家專欄-新聞內頁 start*/ .famousexp-area .area-title { display: flex; align-items: center; margin-bottom: 8px; } .famousexp-area .area-title span { font-size: 20px; font-weight: 700; line-height: 26px; text-align: center; text-underline-position: from-font; text-decoration-skip-ink: none; margin-left: 6px; } .famousexp-area .area-content { padding: 12px 8px; border-radius: 8px; background: #FFFFFF; } .famousexp-area .area-content .famousexp-title a { display: flex; align-items: center; } .famousexp-area .area-content .famousexp-title img { width: 80px; height: 80px; border-radius: 100px; outline: 1px solid #E5E5E5; } .famousexp-area .area-content .famousexp-title span { font-size: 18px; font-weight: 600; line-height: 23.4px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; margin-left: 18px; color: #454545; } .famousexp-area .area-content .famousexp-desc { font-size: 16px; font-weight: 400; line-height: 24px; text-align: justify; text-underline-position: from-font; text-decoration-skip-ink: none; margin: 8px auto; } .famousexp-area .area-content .famousexp-btn { text-align: right; } .famousexp-area .area-content .famousexp-btn a { font-size: 16px; font-weight: 400; line-height: 24px; text-align: center; text-underline-position: from-font; text-decoration-skip-ink: none; padding: 4px 0px; color: #454545; display: flex; justify-content: flex-end; align-items: baseline; } .famousexp-area .area-content .famousexp-btn a img { margin: 0 8px; } /*名家專欄-新聞內頁 end*/ /* IPAD Pro Layout: 992px. */ .photo-s-area, .photo-s2-area { position: relative; height:100%; } .modal-dialog:not(.modal-sm) { top: 10%; } .modal.in .modal-dialog.modal-sm { top: 50%; transform: translateY(-50%); } .page_title_area { border-bottom: 1px solid #dedede; width: 100%; display: flex; margin-bottom: 0.5em; padding-bottom: 12px; align-items: center; } /*日期 -- start*/ .page_title_text { flex: 1; } .page_date { font-size: 10px; color: #999; letter-spacing: 1px; display: inline-block; } /*日期 -- end*/ .page_title_itemBox { height: 36px; margin-right: 5px; } .page_title_btns { display: inline-flex; } .page_title_btns li { margin-right: 5px !important; border-radius: 10px !important; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3) !important; cursor: pointer !important; border: 0 !important; } .page_title_Icon_all { background-image: url(../images/icon/page-title-btn-all@2x.png); width: 36px; height: 36px; background-size: 288px 324px; display: block; } /*分享按鈕 -- start*/ .share_fb { background-position: 0px -36px; } .share_line { background-position: -36px -36px; } .share_twitter { background-position: -72px -36px; } /*分享按鈕 -- end*/ /*功能按鈕 -- start*/ .function_itemBox { position: relative; } .function_copylink { background-position: 0px -72px; } .function_fontSize { background-position: -36px -72px; } .function_print { background-position: -72px -72px; } .function_copylink:hover { background-position: 0px -108px; } .function_fontSize:hover { background-position: -36px -108px; } .function_print:hover { background-position: -72px -108px; } .function_fontSize_focus { background-position: -36px -108px; } /*功能按鈕 -- end*/ /*字號按鈕popup -- start*/ .fontSize_btns_popup { position: absolute !important; top: 46px; left: 0px; display: none; } .page_title_btns .circle { border-radius: 50% !important; z-index: 1; } .function_AS { background-position: 0px -216px; } .function_AN { background-position: -36px -216px; } .function_AB { background-position: -72px -216px; } .hover_AS { background-position: 0px -252px; } .hover_AN { background-position: -36px -252px; } .hover_AB { background-position: -72px -252px; } .function_AS.active { background-position: 0px -288px; } .function_AN.active { background-position: -36px -288px; } .function_AB.active { background-position: -72px -288px; } /*字號按鈕popup -- end*/ /*追蹤三立＆打賞星星按鈕 -- start*/ .otherBtn_box { height: 36px; display: inline-flex; } .otherBtn { width: 114px; margin-right: 10px; border-radius: 5px; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); cursor: pointer; } .followBtn { background-position: 0px -144px; } .donateBtnIcon { background-position: -114px -144px; margin-right: 0px; } .followBtn:hover { background-position: 0px -180px; } .followBtn_focus { background-position: 0px -180px; } .donateBtnIcon:hover { background-position: -114px -180px; } /*追蹤三立＆打賞星星按鈕 -- end*/ /*追蹤三立按鈕popup -- start*/ .otherBtn_box { position: relative; } .follow_btns_popup { position: absolute; top: 46px; right: 10px; display: none; } .follow_SETN { background-position: 0px 0px; } .follow_star { background-position: -36px 0px; } .follow_youtube { background-position: -72px 0px; } .follow_fb { background-position: -108px 0px; } .follow_IG { background-position: -144px 0px; } .follow_LINE { background-position: -180px 0px; } .follow_twitter { background-position: -216px 0px; } .follow_flipboard { background-position: -252px 0px; } /*追蹤三立按鈕popup -- end*/ @media only screen and (min-width: 1600px) { .rides-cs .floatR { display: block; } } @media only screen and (min-width: 1200px) { #idleAD .modal-dialog { width: 800px; top: 220px; } /**News social top icon**/ /**********************/ .modal-dialog:not(.modal-sm) { width: 1000px; } .ad-300x100 { margin-top: 5px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { /**Klist-project-title*/ .news-title-3 { font-size: 23px; letter-spacing: 1px; } #idleAD .modal-dialog { width: 800px; top: 220px; } /******************/ /*SETN LOGO*/ .logo img { width: 185px; } /*header*/ .top-ad01 .top-reciprocal-area { width: 100px; margin-left: 5px; padding-top: 8px; font-size: 15px; } .top-ad01 .top-reciprocal-area .reciprocal-title { margin-bottom: -1px; } .top-ad01 .top-reciprocal-area .top-reciprocal { font-size: 36px; font-weight: bold; font-family: 'Arial', 'sans-serif'; color: #B20000; } .top-ad01 .top-reciprocal-area .reciprocal-title-light { margin-bottom: -1px; } .top-ad01 .top-reciprocal-area .top-reciprocal-light { font-size: 36px; font-weight: bold; font-family: 'Arial', 'sans-serif'; color: #FED901; } /*header-live*/ .header-live-area { position: absolute; width: 100px; right: 0; top: 4px; } .header-live-area .header-live-word { position: absolute; font-family: 'Arial', 'sans-serif'; font-weight: bold; font-size: 34px; color: #FFF; top: 13px; right: 20px; z-index: 2; /* text-shadow: 1px 2px 4px #400000; */ } .immediate-news-title { width: 730px; } /*--title more**/ .title-more { width: 24px; margin-top: 15px; margin-left: 5px; } .newsimg-area-item-title { /*width: 342px;*/ font-size: 18px; } .news-list ul li { font-size: 16px; } .newsimg-area-text { font-size: 16px; height: 35px; padding: 8px; } .newsimg-area-text-2, .newsimg-area-text-3 { font-size: 20px; } .newsimg-area-info { font-size: 16px; height: 85px; overflow: hidden; } /**live */ .top-hot-list2 ul li span { font-size: 11px; color: #fff; padding: 3px 6px; text-align: center; margin-right: 8px; background-color: #D90000; border-radius: 3px; } .catalogHotNews .top-hot-list ul { display: flex; flex-direction: column; flex-wrap: wrap; max-height: 200px; } .catalogHotNews .top-hot-list ul li { width: 32%; } .nownews-number { font-size: 14px; } .table { font-size: 18px; letter-spacing: 2px; margin-left: 10px; margin-bottom: 10px; } /**************************************/ .right-writer-info .info { height: 6em; overflow: hidden; text-overflow: ellipsis; } .right-writer-info .info a { font-size: 16px; line-height: 26px; } .right-writer-info .title a { font-size: 20px; } .page-date { margin-top: 8px; font-size: 15px; } .reporter { font-size: 18px; margin-top: 8px; } .page-text { font-size: 19px; letter-spacing: 2px; line-height: 36px; } figure.sniparea blockquote { font-size: 18px; } .store { display: inline-block; margin-bottom: 8px; } .store img { border-radius: 50%; width: 45px; vertical-align: middle; margin-right: 4px; } .store a { color: #6c6e6f; font-weight: bold; font-size: 17px; letter-spacing: 1px; } .store a:hover { color: #dc0202; font-weight: bold; } .newsimg-w-info { font-size: 17px; height: auto; line-height: 27px; } .page-writer-keyword ul li a { font-size: 15px; } .video-view-w { height: 200px; border-bottom: 1px solid #d4d4d4; margin-bottom: 10px; } .modal-dialog:not(.modal-sm) { width: 800px; } #sync1 .item .photo-s2-area > div { width: auto; height: 0; padding-bottom: 60%; } } /*******************************************************************/ /* IPAD Layout: 768px. */ @media only screen and (min-width: 768px) and (max-width: 991px) { /**Klist-project-title*/ .news-title-3 { font-size: 26px; letter-spacing: 1px; } /* News Left social icon*/ .social_side_links { display: none; } /*News Top scoial icon*/ .social_top_links { display: inline-flex; } .social_top_links li { list-style: none; margin: 0px 6px 10px 0; text-align: center; } .social_top_links li a { display: block; border-radius: 50px; } .social_top_links li a img { display: block; width: 38px; height: 38px; padding: 0px; border-radius: 100px; -webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; -o-transition: background .2s ease-in-out; transition: background .2s ease-in-out; } .social_top_links li a:hover img { background: rgba(0, 0, 0, .2); } #idleAD .modal-dialog { width: 700px; top: 200px; } /******************/ .banner-970x250 { display: none; } .rides-cs .floatR { display: none; } /*header logo */ .logo img { width: 180px; } .header-right ul li a { padding: 5px; font-size: 15px; color: #707070; } .header-right ul li:before { font-size: 16px; } /*header menu*/ .mainmenu-area .navbar-nav > ul > li > a { padding: 8px 4px; } .top-ad01 .top-reciprocal-area .reciprocal-title { margin-bottom: -1px; } .top-ad01 .top-reciprocal-area { width: 100px; margin-left: 5px; padding-top: 8px; font-size: 13px; } .top-ad01 .top-reciprocal-area .top-reciprocal { font-size: 24px; font-weight: bold; font-family: 'Arial', 'sans-serif'; color: #B20000; } .top-ad01 .top-reciprocal-area-light { width: 100px; margin-left: 5px; padding-top: 8px; font-size: 13px; } .top-ad01 .top-reciprocal-area .top-reciprocal-light { font-size: 24px; font-weight: bold; font-family: 'Arial', 'sans-serif'; color: #FED901; } .header-live-area { position: absolute; width: 80px; right: 0; top: 10px; } .header-live-area .header-live-word { position: absolute; font-family: 'Arial', 'sans-serif'; font-weight: bold; font-size: 25px; color: #FFF; top: 12px; right: 15px; z-index: 2; } .top-second-nav { display: block; overflow-y: hidden; width: 100%; height: auto; overflow-x: auto; } /*-- Header social-icons --*/ .w3ls-bnr-icons.social-icon { position: relative; top: 32px; } .social-icon a { font-size: 12px; color: #5888F8; margin: 0 .06em; width: 22px; height: 22px; border: 1px solid transparent; display: inline-block; text-align: center; position: relative; z-index: 999; } .social-icon a:before { content: ''; display: block; height: 22px; width: 22px; line-height: 22px; border: 1px solid #5888F8; position: absolute; } .social-icon a:hover { color: #2ebaef; } .social-icon a:hover:before { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border-color: #2ebaef; } /*-- //Header social-icons --*/ .immediate-news-title { width: 700px; } /** live**/ .top-live-area .top-hot-list ul li { font-size: 17px; line-height: 42px; letter-spacing: 1px } /** catalog list**/ .top-hot-list2 { font-size: 17px; } .top-live-area-text { font-size: 17px; } /***player icon***/ /*** album icon***/ .album-icon { position: absolute; left: 15px; top: 65px; width: 32px; height: 32px; z-index: 3; } .album-icon-2 { position: absolute; left: 15px; top: 15px; width: 32px; height: 32px; z-index: 3; } .page-writer-keyword ul li a { font-size: 14px; } /*******************************************************/ .top-live-area-text { position: relative; background-color: #000; font-family: Arial, 'Microsoft JhengHei', sans-serif; height: 40px; padding: 8px; letter-spacing: 1px; bottom: 15px; margin-bottom: -10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .newsimg-area-item { position: relative; margin-right: 5px; margin-left: 5px; padding: 8px 5px 3px 0; } .title-more { width: 28px; margin-top: 15px; margin-left: 5px; } .newsimg-area-item-title { /*width: 335px;*/ font-size: 20px; font-weight: bold; } .newsimg-area-text { background-color: #000; font-family: Arial, 'Microsoft JhengHei', sans-serif; height: 30px; padding: 5px; bottom: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .newsimg-area-item a { color: #FFF; text-decoration: none; } .newsimg-area-item a:hover { color: #97E9FF; text-decoration: none; } .newsimg-area-text { position: relative; background-color: #000; font-family: Arial, 'Microsoft JhengHei', sans-serif; font-size: 17px; height: 40px; padding: 8px; letter-spacing: 1px; bottom: 15px; margin-bottom: -10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .newsimg-area-text-2, .newsimg-area-text-3 { font-size: 20px; } .newsimg-area-info { font-size: 17px; height: 85px; overflow: hidden; } .news-list ul li, .news-list-2 ul li { font-size: 17px; } .right-list { display: none; } /****************************************/ .table { font-size: 18px; letter-spacing: 2px; margin-left: 10px; margin-bottom: 10px; } /**************************************/ .ad-300x250 img { width: 95%; margin-left: 6px; } /*--title more**/ .immediate-news-title img { position: absolute; right: 30px; top: 40px; width: 23px; height: 5px; } /*Live*/ .live-title { margin: 10px 0 10px 10px; font-weight: bold; font-size: 19px; letter-spacing: 2px; color: #333; } .live-title img { width: 60px; height: 21px; } .live-left-img img { width: 100%; } .live-right-banner img { width: 100%; margin: 10px 5px; padding-right: 10px; } /* banner */ .right-banner img { width: 100%; margin: 10px 5px; margin: 10px 0 10px 3px; } .travel-ad-area img { width: 100%; margin: 10px 0 5px 3px; } .right-news-list ul li { font-size: 17px; line-height: 45px; } /* HOT*/ .right-hot-img { width: 200px; margin-bottom: 20px; } .right-hot-img img { width: 200px; } .right-hot-info { width: 100%; letter-spacing: 1px; margin-bottom: 8px; } .right-hot-info .title a:hover { color: #B22D00; } .right-hot-info .info a { font-size: 17px; color: #666; } /*300x100*/ .ad-300x100 img { width: 92%; margin-left: 19px; } .top-hot-list2 ul li span { font-size: 12px; color: #fff; text-align: center; margin-right: 8px; background-color: #D90000; border-radius: 3px; } .nownews-number { position: absolute; font-size: 14px; color: #fff; padding: 3px 8px; text-align: center; margin-right: 4px; background-color: #D90000; } .page-date { font-size: 16px; margin: 8px 0 0 0; } .reporter { font-size: 18px; margin-top: 8px; } .page-text { font-size: 19px; letter-spacing: 3px; line-height: 36px; } .page-text p img { text-align: center; } figure.sniparea blockquote { font-size: 19px; } .page-tip ul { margin-top: 15px; } .store img { border-radius: 50%; width: 45px; vertical-align: middle; margin-right: 4px; } .store a { color: #6c6e6f; font-weight: bold; font-size: 18px; letter-spacing: 1px; } .store a:hover { color: #dc0202; font-weight: bold; } .newsimg-w-info { font-size: 17px; height: auto; line-height: 27px; } /***Youtube **/ .video-view-w { margin-top: 15px; font-size: 26px; letter-spacing: 2px; height: auto; border-bottom: none; } .modal-dialog:not(.modal-sm) { width: 700px; } #sync2 .item { margin-bottom: 12px; } #sync1 .item .photo-s2-area > div { width: auto; height: 0; padding-bottom: 100%; } } /************************************************************/ /* Mobile Layout: 320px. */ @media only screen and (max-width: 767px) { /**Klist-project-title*/ .news-title-3 { font-size: 21px; letter-spacing: 1px; line-height: 30px; } .banner-970x250 { display: none; } .rides-cs .floatR { display: none; } /*.container { width: 700px; }*/ .user-menu, .header-right ul.list-inline { text-align: center; } .logo h1 { font-size: 30px; margin: 20px 0; text-align: center; } .shopping-item { float: none; margin-bottom: 20px; margin-top: 5px; text-align: center; } .navbar-header { text-align: center; } .navbar-toggle { border-color: #fff; float: none; margin: 10px auto; } .navbar-toggle .icon-bar { background: none repeat scroll 0 0 #fff } .navbar-collapse.collapse.in { background: none repeat scroll 0 0 #0a4de9; position: relative; z-index: 99; } .mainmenu-area ul.navbar-nav li a { padding: 15px; } .mainmenu-area { position: relative !important } .slide-text { font-size: 16px; } .slide-text h2 { font-size: 30px; } .readmore { font-size: 16px; padding: 8px 20px; } .single-promo { margin-bottom: 30px; } .section-title { font-size: 35px; } .product-widget-area .zigzag-bottom { bottom: -50px; height: 100px; } .product-widget-area { padding-bottom: 90px; } .footer-top-area .zigzag-bottom { bottom: -153px; height: 200px; } .footer-top-area { padding: 35px 0 125px; } .single-product-widget, .footer-about-us, .footer-menu { margin-bottom: 60px; } .product-wid-title { font-size: 25px; } .related-products-wrapper .owl-nav { left: -15px; position: relative; right: inherit; top: 15px; } div.cart-collaterals ul.products { margin: 0; } div.cart-collaterals ul.products li.product { margin-bottom: 30px; margin-left: 0; width: 100%; } div.cart-collaterals ul.products li.product img { width: 100% } .product-bit-title h2 { font-size: 35px; padding: 40px 0; } .col2-set { margin-left: 0; } .col-1, .col-2 { float: none; margin-left: 0; width: inherit; } /* Special */ table.shop_table th, table.shop_table td { font-size: 12px; padding: 5px; } td.product-thumbnail img { width: 30px; } div.quantity input.plus, div.quantity input.minus { display: none; } table.shop_table th { font-size: 12px; } div.coupon input[type="text"] { width: 100px; } .coupon { margin-bottom: 10px } .cross-sells { float: none; margin-bottom: 30px; margin-right: 0; width: 100%; } .cart_totals, .cart-collaterals .shipping_calculator { float: none; margin-bottom: 40px; width: 100%; } } /* Wide Mobile Layout: 480px. */ @media only screen and (min-width: 480px) and (max-width: 767px) { .viewall-list ul li { width: 23.5%; margin-left: 0.22%; margin-right: 0.25%; margin-bottom: 1.5%; line-height: 24px; font-size: 17px; } } @media only screen and (max-width: 1199px) { #iframeCover { position: relative; padding-bottom: calc(56.25% + 60px); padding-top: 0px; height: 0; overflow: hidden; } #iframeCover iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mobile-none { display: none; } .social-top-word { display: none; } } /* News Left social icon*/ .social_side_links { display: block; } @media only screen and (min-width: 1341px) { .social_side_links { display: block; } .social-top-area { display: block; } } @media only screen and (min-width: 1090px) and (max-width: 1199px) { .social_side_links { display: block; } .mobile-none { display: none; } .social-top-area { display: block; } } @media(max-width: 600px) { .followBtn, .donateBtnIcon { display: none; } .function_itemBox { margin-right: 0px; } .page_title_btns li:nth-child(3) { margin-right: 0px; } } @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2014 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /*首頁輪播-slider*/ .focus_news { position: relative; } #edm_block { width: 100%; position: relative; margin-bottom: 10px; overflow: hidden; width: 100%; height: 0; padding-bottom: calc( 56.25% + 67px); overflow: hidden; } #edm_block .owl-dots { position: absolute; bottom: 80px; right: 0; } #edm_block .edm_controls .active span { background: #7decff; } #edm_block .hotPhotosNav > div { width: 30px; height: 42px; position: absolute; top: 50%; margin-top: -42px; } #edm_block .hotPhotosNav_prev { background: url(/images/icon/arrow-left.gif) no-repeat 0 0; left: 0; } #edm_block .hotPhotosNav_next { right: 0; background: url(/images/icon/arrow-right.gif) no-repeat right 0; } #edm_block .item { position: relative; } #edm_block .item.captionImg { padding-bottom: calc(56.25% + 80px); height: 0; overflow: hidden; } #edm_block .item img { position: absolute; top: 0; left: 0; width: 100%; /*height: 100%;*/ } #edm_block .item .captionTextbg, #edm_block .item .captionText { line-height: 80px; height: 80px; } #edm_block .item .captionText { z-index: 9; color: white; vertical-align: bottom; letter-spacing: 1px; background-color: rgba(0, 0, 0, 0.9); } #edm_block .item .captionText a, #edm_block .item .captionText span { display: inline-block; color: #FFFFFF; height: 45px; line-height: 45px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: calc(100% - 20px); position: absolute; top: 50%; transform: translateY(-60%) } #edm_block .item .captionText span { font-family: Meiryo, "Meiryo UI", "Microsoft YaHei UI", "Microsoft YaHei", Aria, sans-serif; background: url(/images/icon/edm_title_note_bg.png) no-repeat; width: 100px; padding-left: 0.5em; font-size: 21px; font-size: 1.313rem; vertical-align: middle; } #edm_block .item .captionText a { /* font-size: 30px;*/ font-size: 1.875rem; vertical-align: middle; text-decoration: none; } #edm_block .item .captionTextbg { background-color: #000; filter: alpha(opacity=80); opacity: 1; position: absolute; } .owl-carousel .fadeOut .captionText { display: none; } #edm_block .moreNews { z-index: 10; position: absolute; bottom: 3px; right: 10px; display: none; } #edm_block .moreNews a { display: inline-block; color: #fff; padding: 4px 10px; background: #8e040a; color: #fff; font-size: 12px; font-weight: bold; border-radius: 50px; letter-spacing: 1px; } .owl-carousel { position: relative; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #7decff; } .carousel-nav { position: absolute; top: 50%; margin-top: -30px; width: 100%; } .carousel-nav .carousel-prev, .carousel-nav .carousel-next { position: absolute; color: #000; font-size: 26px; margin: 0px; padding: 4px 10px 8px 10px; background: rgba(255, 255, 255, 0.7); display: inline-block; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: none; } .carousel-nav .carousel-prev:hover, .carousel-nav .carousel-next:hover { background: rgba(255, 255, 255, 1); } .carousel-nav .carousel-prev { left: 0; } .carousel-nav .carousel-next { right: 0; } #slider { position: relative; width: 100%; overflow: hidden; background-color: #FFFFFF; } #slider.slider .owl-item { filter: alpha(opacity=10); opacity: 0.35; } #slider.slider .owl-item.active.center { filter: initial; opacity: 1; } .slider .slider_album { position: relative; top: 0; margin-left: calc(-90% * 3 / 2); width: calc(90% * 3); max-width: calc(970px * 3); left: 50%; background-color: #000; } #owl-photos .hotPhotosNav > div, #owl-videos .hotPhotosNav > div { width: 40px; height: 40px; position: absolute; top: 50%; margin-top: -20px; } #owl-photos .hotPhotosNav_prev, #owl-videos .hotPhotosNav_prev { background: url(/images/icon/arrow-left.png) no-repeat center center; left: 32%; } #owl-photos .hotPhotosNav_next, #owl-videos .hotPhotosNav_next { background: url(/images/icon/arrow-right.png) no-repeat center center; right: 32%; } #owl-photos .owl-dots, #owl-videos .owl-dots { position: absolute; right: 34%; bottom: 2%; } #owl-videos .hotPhotosNav { width: 68%; height: 40px; right: 0%; position: absolute; top: 45%; } #owl-videos .hotPhotosNav_prev { border: 0px #fff dashed; background: url(/images/icon/arrow-left.png) no-repeat center center; left: 0%; position: absolute; width: 30px; height: 40px; } #owl-videos .hotPhotosNav_next { border: 0px #fff dashed; background: url(/images/icon/arrow-right.png) no-repeat center center; left: 51.5%; position: absolute; width: 30px; height: 40px; } .captionText { font-size: 1.75em; font-weight: 200; letter-spacing: 2px; color: #FFF; width: 100%; height: 60px; line-height: 60px; padding: 0 10px; box-sizing: border-box; position: absolute; bottom: 0; left: 0; background-color: rgba(13, 3, 107, 0.8); } .photoViewer { width:74vw; position:relative; } #syncview .photo-s-area img { margin: auto; width: auto; height: 100%; min-height: 60vh; max-height: 80vh !important; } .adTitleDots { position: absolute; top: 0; left: 100%; width: 22vw; overflow: auto; height: 100%; background-color: rgba(162, 162, 162, 0.2); padding: 8px 4px 8px 8px; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: space-between; align-content:flex-start; } .adTitleDots::after { display: block; content: ""; flex: 1; } .adTitleDots .adTitleDot { width: 19%; margin: 0.5%; overflow: hidden; height: calc(25vw * 0.19); } .adTitleDots .adTitleDot img { width: 100%; height: auto; } #divFloatToolsView .owl-dots { position: absolute; bottom: 0; right: 0; } #divFloatToolsView .owl-dots { position: absolute; bottom: 0; right: 0; } #divFloatToolsView .owl-dots span { margin: 5px; } @media only screen and (min-width: 1025px) { .slider .slider_album { margin-left: calc(-970px * 3 / 2); } .slider { height: calc(970px * 9 / 16); } #banner .carousel-nav { display: none; } #banner:hover .carousel-nav { display: block; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .captionText { font-size: 1.5em; } #banner .carousel-nav { display: none; } #banner:hover .carousel-nav { display: block; } } } @media only screen and (min-width: 481px) and (max-width: 767px) { #owl-photos .hotPhotosNav_prev, #owl-videos .hotPhotosNav_prev { background-size: 15px auto; } #owl-photos .hotPhotosNav_next, #owl-videos .hotPhotosNav_next { background-size: 15px auto; } .captionText { font-size: 1.25em; height: auto; padding: 2px 10px; } } @media only screen and (max-width: 480px) { .slider .slider_album { margin-left: auto; left: 0; width: auto; background-color: #FFFFFF; } #owl-photos .hotPhotosNav > div { width: 35px; height: 35px; top: 30%; } #owl-photos .hotPhotosNav_prev, #owl-videos .hotPhotosNav_prev { left: 0; background-size: 13px auto; } #owl-photos .hotPhotosNav_next, #owl-videos .hotPhotosNav_next { right: 0; background-size: 13px auto; } #owl-photos .owl-dots, #owl-videos .owl-dots { position: static; } #owl-photos .owl-dots .owl-dot span, #owl-videos .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 5px; } .captionText { font-size: 1.08em; height: auto; padding: 2px 0 0 10px; line-height: 30px; letter-spacing: 1px; margin-left: 0; } } #home-carousel { width: 100%; max-height: 500px; overflow: hidden; position: relative; } #home-carousel .imgcaption-box { background-position: center center; background-repeat: no-repeat; background-size: cover; } #home-carousel .imgcaption-box .imgcaption { background: rgba(0,0,0,0.4); width: 100%; height: 500px; color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; align-items: center; } #home-carousel .imgcaption-box h2 { font-size: 36px; font-weight: 100; letter-spacing: 2px; margin-top: -70px; line-height: 45px; padding: 0 20px 0 20px; } #home-carousel .imgcaption-box span { font-weight: 100; line-height: 30px; border: #FFF 2px solid; padding: 8px; font-size: 20px; letter-spacing: 2px; } #home-carousel .owl-controls .owl-dots { position: absolute; bottom: 5%; width: 100%; } #home-carousel .owl-nav { display: none; } #home-carousel:hover .owl-nav { display: block; } /*#region ¤å¦r¯S®Ä */ #home-carousel .owl-carousel .animated { -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #home-carousel .owl-carousel .owl-animated-in { z-index: 0; } #home-carousel .owl-carousel .owl-animated-out { z-index: 1; } #home-carousel .active .imgcaption-box .imgcaption > * { -webkit-animation: zoomin 0.8s; animation: zoomin 0.8s; } @-webkit-keyframes zoomin { 0% { transform: scale(0.5); } 100% { transform: scale(1); } } @keyframes zoomin { 0% { transform: scale(0.5); } 100% { transform: scale(1); } } /*#endregion */ /** videos Slider*/ #home-carousel .item { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 500px; } #home-carousel .item:before { background-color: #000; content: ""; height: 100%; top: 0; left: 0; opacity: 0.4; position: absolute; width: 100%; } .carousel-caption { left: 15px; right: 15px; top: 50%; font-size: 15px; text-align: left; color: #fff; text-shadow: none; margin-top: -90px; } .carousel-caption h1 { font-size: 46px; margin-bottom: 0; line-height: 27px; letter-spacing: 2px; font-weight: 100; } .carousel-caption h2 { font-size: 36px; font-weight: 100; margin-top: 0px; text-transform: lowercase; letter-spacing: 2px; margin-bottom: 20px; } .carousel-caption h2 a { color: #FFF; font-size: 36px; font-weight: 100; line-height: 45px; } .carousel-caption p a { color: #FFF; font-weight: 100; line-height: 30px; border: #FFF 2px solid; padding: 8px; font-size: 20px; letter-spacing: 2px; } .home-carousel-left, .home-carousel-right { background-color: #f0f0f0; color: #000; font-size: 32px; height: 40px; line-height: 37px; margin-top: -20px; position: absolute; text-align: center; top: 50%; width: 32px; z-index: 999; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; -ms-transition: 300ms; transition: 300ms; } .home-carousel-left { left: -32px; } .home-carousel-right { right: -32px; } #home-carousel:hover .home-carousel-left { left: 0; } #home-carousel:hover .home-carousel-right { right: 0; } /* Carousel animation */ #home-carousel .item h1, #home-carousel .item h2, #home-carousel .item p { opacity: 0; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } #home-carousel .item h1 { -webkit-transition: all 0.5s ease-in-out 0.15s; -moz-transition: all 0.5s ease-in-out 0.15s; -ms-transition: all 0.5s ease-in-out 0.15s; -o-transition: all 0.5s ease-in-out 0.15s; transition: all 0.5s ease-in-out 0.15s; } #home-carousel .item.active h1, #home-carousel .item.active h2, #home-carousel .item.active p { opacity: 1; -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #home-carousel .item h2 { -webkit-transition: all 0.5s ease-in-out 0.30s; -moz-transition: all 0.5s ease-in-out 0.30s; -ms-transition: all 0.5s ease-in-out 0.30s; -o-transition: all 0.5s ease-in-out 0.30s; transition: all 0.5s ease-in-out 0.30s; } #home-carousel .item p { -webkit-transition: all 0.5s ease-in-out 0.45s; -moz-transition: all 0.5s ease-in-out 0.45s; -ms-transition: all 0.5s ease-in-out 0.45s; -o-transition: all 0.5s ease-in-out 0.45s; transition: all 0.5s ease-in-out 0.45s; } /**** 圖輯 slider ****/ #sync1.owl-theme { position: relative; background-color: rgba(241, 241, 241, 0.8); } #sync1.owl-theme .owl-next, #sync1.owl-theme .owl-prev { width: 22px; height: 40px; margin-top: -45px; position: absolute; top: 50%; z-index: 50; } #sync1.owl-theme .owl-prev { left: 10px; } #sync1.owl-theme .owl-next { right: 10px; } #sync1.owl-theme .owl-item { white-space: nowrap; } #sync1 .item .photo-s-area > div { height: 50vh; text-align: center; } #sync1 .item .photo-s-area img { width: auto; display: inline; height: 100%; } #sync2 { margin-bottom: 10px; height: 120px; overflow: hidden; } #sync2 .item { opacity: 0.7; } #sync2 .item img { height: 120px; width: auto; } #sync2 .owl-item.show .item { opacity: 1; } .owl-theme .owl-nav [class*='owl-'] { -webkit-transition: all .3s ease; transition: all .3s ease; } .owl-theme .owl-nav [class*='owl-'].disabled:hover { background-color: #D6D6D6; }