/* Minification failed. Returning unminified contents. (33,47): run-time error CSS1038: Expected hex color, found '#f0d366e' (925,41): run-time error CSS1046: Expect comma, found '0' (925,45): run-time error CSS1046: Expect comma, found '/' (990,41): run-time error CSS1046: Expect comma, found '0' (990,45): run-time error CSS1046: Expect comma, found '/' (991,36): run-time error CSS1046: Expect comma, found '0' (991,40): run-time error CSS1046: Expect comma, found '/' (1147,41): run-time error CSS1046: Expect comma, found '0' (1147,45): run-time error CSS1046: Expect comma, found '/' (1289,40): run-time error CSS1046: Expect comma, found '0' (1289,44): run-time error CSS1046: Expect comma, found '/' (1397,40): run-time error CSS1046: Expect comma, found '0' (1397,44): run-time error CSS1046: Expect comma, found '/' (1437,40): run-time error CSS1046: Expect comma, found '0' (1437,44): run-time error CSS1046: Expect comma, found '/' (2071,41): run-time error CSS1046: Expect comma, found '0' (2071,45): run-time error CSS1046: Expect comma, found '/' (4818,1): run-time error CSS1019: Unexpected token, found '@import' (4818,9): run-time error CSS1019: Unexpected token, found 'url('Home_img_btn_tit.css')' (5634,1): run-time error CSS1019: Unexpected token, found '}' (6547,59): run-time error CSS1046: Expect comma, found '0' (6547,63): run-time error CSS1046: Expect comma, found '/' (6918,40): run-time error CSS1046: Expect comma, found '0' (10317,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10318,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10329,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10330,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10647,2): run-time error CSS1019: Unexpected token, found '@keyframes' (10648,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10718,1): run-time error CSS1019: Unexpected token, found '}' (10729,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10730,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10741,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10742,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10860,2): run-time error CSS1019: Unexpected token, found '@keyframes' (10861,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (10895,1): run-time error CSS1019: Unexpected token, found '}' (10903,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10904,7): run-time error CSS1035: Expected colon, found '{' (10921,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10922,7): run-time error CSS1035: Expected colon, found '{' (10948,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (10949,7): run-time error CSS1035: Expected colon, found '{' (10966,1): run-time error CSS1019: Unexpected token, found '@keyframes' (10967,7): run-time error CSS1035: Expected colon, found '{' (11008,2): run-time error CSS1019: Unexpected token, found '@keyframes' (11009,8): run-time error CSS1035: Expected colon, found '{' (11122,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11123,7): run-time error CSS1035: Expected colon, found ',' (11150,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11151,7): run-time error CSS1035: Expected colon, found ',' (11185,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11186,7): run-time error CSS1035: Expected colon, found ',' (11195,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11196,7): run-time error CSS1035: Expected colon, found ',' (11212,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11213,8): run-time error CSS1035: Expected colon, found '{' (11229,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11230,8): run-time error CSS1035: Expected colon, found '{' (11251,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11252,8): run-time error CSS1035: Expected colon, found '{' (11288,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11289,8): run-time error CSS1035: Expected colon, found '{' (11330,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11331,7): run-time error CSS1035: Expected colon, found ',' (11347,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11348,7): run-time error CSS1035: Expected colon, found ',' (11369,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11370,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (11396,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11397,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (11430,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11431,8): run-time error CSS1035: Expected colon, found '{' (11457,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11458,8): run-time error CSS1035: Expected colon, found '{' (11491,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11492,8): run-time error CSS1035: Expected colon, found '{' (11528,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11529,8): run-time error CSS1035: Expected colon, found '{' (11570,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11571,7): run-time error CSS1035: Expected colon, found ',' (11612,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11613,7): run-time error CSS1035: Expected colon, found ',' (11661,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11662,7): run-time error CSS1035: Expected colon, found ',' (11701,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11702,7): run-time error CSS1035: Expected colon, found ',' (11746,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11747,7): run-time error CSS1035: Expected colon, found ',' (11780,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11781,7): run-time error CSS1035: Expected colon, found ',' (11819,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11820,7): run-time error CSS1035: Expected colon, found ',' (11853,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11854,7): run-time error CSS1035: Expected colon, found ',' (11892,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11893,7): run-time error CSS1035: Expected colon, found ',' (11926,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11927,7): run-time error CSS1035: Expected colon, found ',' (11965,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (11966,7): run-time error CSS1035: Expected colon, found ',' (11999,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12000,7): run-time error CSS1035: Expected colon, found ',' (12038,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12039,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12057,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12058,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12081,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12082,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12100,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12101,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12124,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12125,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12138,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12139,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12157,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12158,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12171,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12172,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12190,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12191,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12209,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12210,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (12233,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12234,8): run-time error CSS1035: Expected colon, found '{' (12251,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12252,8): run-time error CSS1035: Expected colon, found '{' (12274,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12275,8): run-time error CSS1035: Expected colon, found '{' (12292,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12293,8): run-time error CSS1035: Expected colon, found '{' (12315,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12316,8): run-time error CSS1035: Expected colon, found '{' (12329,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12330,8): run-time error CSS1035: Expected colon, found '{' (12348,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12349,8): run-time error CSS1035: Expected colon, found '{' (12366,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12367,8): run-time error CSS1035: Expected colon, found '{' (12389,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12390,8): run-time error CSS1035: Expected colon, found '{' (12403,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12404,8): run-time error CSS1035: Expected colon, found '{' (12422,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12423,8): run-time error CSS1035: Expected colon, found '{' (12440,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12441,8): run-time error CSS1035: Expected colon, found '{' (12463,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12464,8): run-time error CSS1035: Expected colon, found '{' (12477,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12478,8): run-time error CSS1035: Expected colon, found '{' (12496,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12497,8): run-time error CSS1035: Expected colon, found '{' (12514,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12515,8): run-time error CSS1035: Expected colon, found '{' (12537,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12538,8): run-time error CSS1035: Expected colon, found '{' (12555,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12556,8): run-time error CSS1035: Expected colon, found '{' (12578,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12579,8): run-time error CSS1035: Expected colon, found '{' (12592,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12593,8): run-time error CSS1035: Expected colon, found '{' (12611,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12612,8): run-time error CSS1035: Expected colon, found '{' (12621,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12622,8): run-time error CSS1035: Expected colon, found '{' (12636,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12637,8): run-time error CSS1035: Expected colon, found '{' (12650,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12651,8): run-time error CSS1035: Expected colon, found '{' (12669,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12670,8): run-time error CSS1035: Expected colon, found '{' (12681,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12682,8): run-time error CSS1035: Expected colon, found '{' (12698,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12699,8): run-time error CSS1035: Expected colon, found '{' (12710,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12711,8): run-time error CSS1035: Expected colon, found '{' (12727,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12728,8): run-time error CSS1035: Expected colon, found '{' (12739,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12740,8): run-time error CSS1035: Expected colon, found '{' (12756,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12757,8): run-time error CSS1035: Expected colon, found '{' (12768,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12769,8): run-time error CSS1035: Expected colon, found '{' (12785,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12786,8): run-time error CSS1035: Expected colon, found '{' (12797,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12798,8): run-time error CSS1035: Expected colon, found '{' (12814,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12815,8): run-time error CSS1035: Expected colon, found '{' (12826,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12827,8): run-time error CSS1035: Expected colon, found '{' (12843,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12844,8): run-time error CSS1035: Expected colon, found '{' (12855,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12856,8): run-time error CSS1035: Expected colon, found '{' (12872,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12873,8): run-time error CSS1035: Expected colon, found '{' (12909,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12910,8): run-time error CSS1035: Expected colon, found '{' (12953,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (12954,8): run-time error CSS1035: Expected colon, found '{' (12986,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12987,8): run-time error CSS1035: Expected colon, found '{' (13026,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13027,8): run-time error CSS1035: Expected colon, found '{' (13059,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13060,8): run-time error CSS1035: Expected colon, found '{' (13099,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13100,8): run-time error CSS1035: Expected colon, found '{' (13118,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13119,8): run-time error CSS1035: Expected colon, found '{' (13144,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13145,8): run-time error CSS1035: Expected colon, found '{' (13163,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13164,8): run-time error CSS1035: Expected colon, found '{' (13189,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13190,8): run-time error CSS1035: Expected colon, found '{' (13215,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13216,8): run-time error CSS1035: Expected colon, found '{' (13248,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13249,8): run-time error CSS1035: Expected colon, found '{' (13260,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13261,8): run-time error CSS1035: Expected colon, found '{' (13279,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13280,8): run-time error CSS1035: Expected colon, found '{' (13297,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13298,8): run-time error CSS1035: Expected colon, found '{' (13320,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13321,8): run-time error CSS1035: Expected colon, found '{' (13338,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13339,8): run-time error CSS1035: Expected colon, found '{' (13361,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13362,8): run-time error CSS1035: Expected colon, found '{' (13379,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13380,8): run-time error CSS1035: Expected colon, found '{' (13402,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13403,8): run-time error CSS1035: Expected colon, found '{' (13420,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13421,8): run-time error CSS1035: Expected colon, found '{' (13443,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13444,8): run-time error CSS1035: Expected colon, found '{' (13461,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13462,8): run-time error CSS1035: Expected colon, found '{' (13484,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13485,8): run-time error CSS1035: Expected colon, found '{' (13500,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13501,8): run-time error CSS1035: Expected colon, found '{' (13521,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13522,8): run-time error CSS1035: Expected colon, found '{' (13537,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13538,8): run-time error CSS1035: Expected colon, found '{' (13558,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13559,8): run-time error CSS1035: Expected colon, found '{' (13574,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13575,8): run-time error CSS1035: Expected colon, found '{' (13595,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13596,8): run-time error CSS1035: Expected colon, found '{' (13611,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13612,8): run-time error CSS1035: Expected colon, found '{' (13632,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13633,8): run-time error CSS1035: Expected colon, found '{' (13648,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13649,8): run-time error CSS1035: Expected colon, found '{' (13669,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13670,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (13703,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13704,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (13744,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13745,8): run-time error CSS1035: Expected colon, found '{' (13758,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13759,8): run-time error CSS1035: Expected colon, found '{' (13779,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13780,8): run-time error CSS1035: Expected colon, found '{' (13791,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13792,8): run-time error CSS1035: Expected colon, found '{' (13808,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13809,8): run-time error CSS1035: Expected colon, found '{' (13820,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13821,8): run-time error CSS1035: Expected colon, found '{' (13837,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13838,8): run-time error CSS1035: Expected colon, found '{' (13855,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13856,8): run-time error CSS1035: Expected colon, found '{' (13878,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13879,8): run-time error CSS1035: Expected colon, found '{' (13896,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13897,8): run-time error CSS1035: Expected colon, found '{' (13919,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13920,8): run-time error CSS1035: Expected colon, found '{' (13937,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13938,8): run-time error CSS1035: Expected colon, found '{' (13960,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13961,8): run-time error CSS1035: Expected colon, found '{' (13978,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13979,8): run-time error CSS1035: Expected colon, found '{' (14001,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14002,8): run-time error CSS1035: Expected colon, found '{' (14017,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14018,8): run-time error CSS1035: Expected colon, found '{' (14038,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14039,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (14058,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14059,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (14083,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14084,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (14099,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14100,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (14120,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14121,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (14136,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14137,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (14157,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14158,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (14177,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14178,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (14202,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14203,8): run-time error CSS1035: Expected colon, found '{' (14215,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14216,8): run-time error CSS1035: Expected colon, found '{' (14233,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14234,8): run-time error CSS1035: Expected colon, found '{' (14246,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14247,8): run-time error CSS1035: Expected colon, found '{' (14264,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14265,8): run-time error CSS1035: Expected colon, found '{' (14277,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14278,8): run-time error CSS1035: Expected colon, found '{' (14295,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14296,8): run-time error CSS1035: Expected colon, found '{' (14308,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14309,8): run-time error CSS1035: Expected colon, found '{' (14326,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14327,8): run-time error CSS1035: Expected colon, found '{' (14339,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14340,8): run-time error CSS1035: Expected colon, found '{' (14357,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14358,8): run-time error CSS1035: Expected colon, found '{' (14370,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14371,8): run-time error CSS1035: Expected colon, found '{' (14388,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14389,8): run-time error CSS1035: Expected colon, found '{' (14401,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14402,8): run-time error CSS1035: Expected colon, found '{' (14419,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14420,8): run-time error CSS1035: Expected colon, found '{' (14432,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14433,8): run-time error CSS1035: Expected colon, found '{' */ @charset 'utf-8'; /* CSS Document */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ banner ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .breadcrumb { position: relative; z-index: 1; text-align: center; top: 0px; display: block } .breadcrumb:after { position: absolute; right: 0; top: 0; content: ""; width: 100%; height: 100%; z-index: -1; } .breadcrumb:after { background: -webkit-linear-gradient(5deg, #0d366e 0%, rgba(18, 1, 248, 0.2) 100%); background: -webkit-linear-gradient(5deg, #f0d366e 0%, rgba(18, 1, 248, 0.2) 100%); background: -ms-linear-gradient(5deg, #0d366e 0%, rgba(18, 1, 248, 0.2) 100%); } .breadcrumb_inner{ height: 270px; line-height: 270px; width: 100%; display: block; margin-top: 90px; } .breadcrumb_inner .breadcrumb_inner_item { display:inline-block; vertical-align: middle; } .breadcrumb_inner_item h2 { color: #fff; letter-spacing: .08em; font-size:52px; font-weight: 700; top: 85px; text-transform: capitalize; font-family: 'tex', Meiryo, Osaka, "Hiragino Kaku Gothic Pro", "MS PGothic","Source Sans Pro","微軟正黑體", sans-serif; } @media (max-width: 576px) { .breadcrumb .breadcrumb_inner .breadcrumb_inner_item h2 { font-size: 30px; margin-bottom: 10px; line-height: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb .breadcrumb_inner .breadcrumb_inner_item h2 { font-size: 35px; margin-bottom: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumb .breadcrumb_inner .breadcrumb_inner_item h2 { font-size: 40px; margin-bottom: 10px; } } .breadcrumb .breadcrumb_inner .breadcrumb_inner_item p { font-size: 15px; color: #fff; } .breadcrumb .breadcrumb_inner .breadcrumb_inner_item span { margin: 0px 5px; font-size: 12px; } @charset 'utf-8'; /* CSS Document */ /*========================================== 內頁 ===========================================*/ .Wrap { padding-top: 0; padding-bottom: 0; padding-left: 10%; padding-right: 10%; } .Wrap::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } article { float: left; width: calc(100% - 350px); } .Content { word-wrap: break-word; word-break: break-all; margin: 60px auto 30px auto; position: relative; display: block; padding-bottom: 5%; } .Content::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .Main_body { font-family: "微軟正黑體",sans-serif; line-height: 1.8; word-wrap: break-word; word-break: break-all; display: block; min-height: 30rem; padding: 15px; margin-bottom: 30px; } .Main_body_head { line-height: 1.6; display: block; border-bottom: 1px solid #3d4c63 } .Main_body_head span { color: #666; font-size: 0.875rem; } .Main_body_head h4 { color: #10366a; font-size: 1.65rem; margin: 10px 0px; font-weight: bold } @media screen and (max-width:853px) { .Wrap { padding-top: 0; padding-bottom: 0; padding-left:5%; padding-right:5%; } article { float: left; width: 100%; margin-top:15px; clear: both; display: block; overflow: hidden } } /*========================================== 選單 ===========================================*/ aside { float: right; width: 280px; padding: 5px; margin:85px auto 30px auto; font-family: "Work Sans",Arial,Verdana,"Microsoft JhengHei",PMingLiU,sans-serif; display:block } .storageBtn { display: block; background-color:#0089e7; padding: 15px; box-sizing: border-box; border-bottom: #FFFFFF solid 1px; } aside .storageMenu { margin-bottom: 1px; } .storageBtn>span { display: block; color: #fff; position: relative; min-height: 1.4rem; padding-right: 40px; } .storageBtn >span a{ display: block; color: #fff; position: relative; padding: 10px 0; } .storageBtn.cut>span::after { content: ''; width: 12px; height: 12px; border-top: 1px solid #fff; border-left: 1px solid #fff; transform: rotate(225.00deg); position: absolute; right: 0; top: calc((100% - 15px)/2); -webkit-transition: all 0.5s; transition: all 0.5s; } .storageBtn.cut.selt>span::after { -webkit-transform: rotate(75deg); transform: rotate(135deg); } /*--tit----*/ .storageBox { padding: 15px 20px; background-color: #f9f7f3; display: none; letter-spacing: 0.1px } .storageBox li a { padding: 10px 0; display: block; position: relative; font-family: "Work Sans",Arial,Verdana,"Microsoft JhengHei",PMingLiU,sans-serif; letter-spacing: 0.1px } .storageBox li a>span { font-size: 17px; color: #222; font-weight: 600; letter-spacing: 0.1px } .storageBox li a.current>span, .storageBox li a:hover>span, .storageBox li a:focus>span { color:#10366a;font-weight: 600; } .storageBox li a:hover>span:before{ content: "▸"; color:#0089e7; display: inline-block; width: 1.2em; height: 1em; margin-left: -1.2em; } @media screen and (max-width:853px) { aside { float: left; width: 98%; max-width: 98%; margin: 0px auto 60px auto; position:relative; left:1%; right:1% } } /* ----------------------------------------------------- 註大標字 ------------------------------------------------------ */ .psbox { position: relative; margin:45px auto 0px auto; max-width: 100%; width: 100%; overflow: hidden; padding:15px; } .psboxblue{background-color: #e5f5ff;} .psbox h3 { color: #04405e; font-size:24px; line-height: 1.5; font-weight: 700; text-align: center; padding: 10px; } .psbox p { color: #04405e; font-size:22px; line-height: 1.5; font-weight: 700; text-align: center; padding: 10px; } /* ----------------------------------------------------- Social ------------------------------------------------------ */ .socialbox { padding-top: 15px; background: #fff; position: relative; z-index: 2; float:right } .socialbox a { width: 32px; height: 32px; display: inline-block; border-radius: 50%; background: #cbd3df; color: #fff; padding-top: 5px; margin: 0 3px; font-family: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif; } .socialbox a:hover { text-decoration: none; outline: none; } .socialbox .fa { display: inline-block; font-style: normal; font-family: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-facebook:before { content: "f"; color: #fff; text-align: center; display: block; font-size:22px; position: absolute; margin-left: 13px; top: 12px; } .fa-fbBg:hover { background-color:#1877f2 } .fa-line:before { content: "LINE"; color: #fff; text-align: center; display: block; font-size:12px; position: absolute; margin-left:3px; top:22px; } .fa-lineBg:hover { background-color:#00b900 } .fa-link:before { content: ""; text-align: center; display: block; width:21px; height:21px; background-image: url("../images/icon/falink.png"); background-repeat:no-repeat; background-position: center; position: absolute; margin-left:6px; top:20px; } .fa-linkBg:hover { background-color: #73bcff } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ service ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .service-area { display: block; padding-bottom: 40px; } @media screen and (max-width: 767px) { .service-area h3 { font-size: 18px; width: 93%; margin: 20px auto; line-height: 1.8em; } } .service-box { position: relative; text-align: center; margin:40px auto 15px auto; display: block; width: 100%; max-width: 100%; } .service-area ul { width: 100%; list-style: none; list-style-type: none; padding: 0; margin: 0 auto; left: 0; } .service-area ul li { display: inline-block; width: 30%; margin: 0 1% 0 1%; position: relative; margin-bottom: 30px; background-color: #FFF; border-top: #3b5ca9 3px solid; border-right: #ccc 1px solid; border-left: #ccc 1px solid; border-bottom: #ccc 1px solid; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding:15px 10px } .service-area ul li:last-child { margin-right: 0; } .service-area ul li:hover { -moz-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); box-shadow: 0px 6px 16px 3px #ddd; -moz-box-shadow: 0px 6px 16px 3px #ddd; -webkit-box-shadow: 0px 6px 16px 3px #ddd; } .service-area ul li a { color: #363636; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .service-area ul li a h4, .service-area ul li a img, .service-area ul li a p { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .service-area ul li a:hover { text-decoration: none; } .service-area ul li h4 { color: #3b5ca9; font-size: 21px; letter-spacing: 2.1px; line-height: 29.79px; text-align: center; margin: 30px auto 23px; font-weight: bold; } .service-area ul li p { margin-top: 20px; font-size: 16px; line-height: 29px; /* margin-bottom: 20px; */ letter-spacing: 1px; max-height:90px; min-height:90px; /*white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .TextShow { position: relative; cursor: pointer; } .TextShow::before { background-color: rgba(0,0,0,.2); } .TextShow::before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #00a0e9; pointer-events: none; opacity: 0; } .service-box ul li:hover .TextShow::before { opacity: 1; background-color: #00a0e9 } .TextShow::before { content: ''; } .TextShow::after { content: attr(data-text); top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); color: #FFF; font-size: 15px; font-weight: 800; cursor: pointer; opacity: 0; } .TextShow::after { position: absolute; left: 50%; } .service-box ul li:hover .TextShow::after { opacity: 1; transition-delay: .3s; z-index: 1; } .service-area ul li img { line-height: 0; vertical-align: bottom; display: block; margin: 0 auto; transition-property: transform; -webkit-transition-duration: .6s; transition-duration: .6s; box-sizing: border-box; border: 0; line-height: 0; vertical-align: top; height: 100%; width: auto; position: absolute; left: 50%; transform: translateX(-50%); opacity: 1; cursor: pointer; } .service-area ul li img a { display: block; cursor: pointer; } .service-box ul li:hover img { opacity: 0.7; } .service-area .Img { width: 230px; height: 230px; overflow: hidden; background: transparent; position: relative; display: block; margin: 0 auto; border-radius: 50%; /* background-color: rgba(16, 54, 110, 0.65);*/ /*pointer-events: none;*/ -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; cursor: pointer; } .service-area .Img a { display: block; cursor: pointer; margin: 0; padding: 0; text-align: center } @media screen and (max-width:1680px) { .service-area ul li { width: 28%; margin: 0 0.5% 30px 1%; } .service-area ul li h4{ font-size: 18px; margin: 15px auto 15px;} } @media screen and (max-width:1512px) { .service-area .Img { width: 215px; height: 215px } } @media screen and (max-width:1440px) { .service-area ul li h4 { font-size: 18px } .service-area ul li { float: left; width: 44%; margin: 0 1.5% 30px 1.5% } } @media screen and (max-width:1280px) { .service-area .Img { width: 200px; height: 200px } } @media screen and (max-width:1050px) { .service-area ul li { float: left; width: 95%; margin: 0 1.5% 30px 1.5% } .service-area .Img { width: 185px; height: 185px } } @media screen and (max-width: 768px) { .service-area ul li:last-child { margin: 6% auto 0; } .service-area ul li { width: 92%; margin: 8% auto 0; float: none; padding: 5.6% 8% 9.73%; } .service-area ul li h4 { font-size: 20px; margin: 0 0 4%; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .service-area ul li img { display: block; margin: 0 auto; max-width: 100%; height: 100%; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .service-area ul li p { font-size:15px; } .service-area .Img { width: 200px; height: 200px; } } /* ------------------------------------------------- price金流 -------------------------------------------------------- */ .RwdTableRe { border: #d3d3d3 solid 1px; margin:30px auto; color: #222; width:100%; max-width:100%; border-collapse: collapse; background: #FFF; } .RwdTableRe th { vertical-align: middle; padding: 0.75em 0.313em; font-size:1em; letter-spacing:0.063em; text-align: center; color: #FFF; border-right: 0.063em solid #cecece; display: table-cell } .RwdTableRe thead { background:#3d4c63; color: #fff; font-weight: bold; } .RwdTableRe td { cursor: pointer; padding: 0.75em 0.313em; text-align:center; font-size:1em; display: table-cell; border: #ddd 0.063em solid; } .RwdTableRe td a{ color: #222; text-decoration:none } .RwdTableRe tr { border: none; width: 100%; display: table-row; } .RwdTableRe tr:last-child { border-bottom: none; } .RwdTableRe tbody tr:nth-child(2n) { background-color:#f9f7f3} @media screen and (max-width: 800px) { .RwdTableRe{max-width:100%;width:100%;} .RwdTableRe .th1 {display: none} .RwdTableRe .th2{display: none} .RwdTableRe tr{ line-height: 1.8em; display: block; border-bottom:#ddd solid 0.063em } .RwdTableRe td { cursor: pointer; padding: 0.75em 0.313em; text-align:left; font-size: 1em; display:block; border:none; } .RwdTableRe tbody tr:nth-child(2n) { background-color:#fff} .RwdTableRe td:before { content: attr(data-th) " : "; float: left; padding-right: 0.313em; padding-left: 0.313em; font-weight:bold; color: #000; display: inline-block; text-align: center !important; } .ReName{ letter-spacing: 1px; background:#cbf0f8; font-weight: bold; } .ReName a{font-size:1.2em} } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ service-isky ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .skybox { background-color: transparent; overflow: hidden; margin:50px auto 30px auto; position: relative; display:table; vertical-align: bottom } .skybox ul { width:100%; padding:0; margin:0 auto; position:relative; bottom:0; left:0 } .skybox ul:after { content:""; display:block; clear:both } .skybox ul li { list-style: none; list-style-type: none; display:table-cell; padding: 15px; background: #fff; box-shadow: 7px 13px 15px 0px rgb(0 0 0 / 20%); float: left; vertical-align:bottom; margin-bottom:35px; width: 28%; max-width: 28%; text-align: center; margin-right:2.5%; } .skybox ul li h4 { font-size: 18px; text-align: center; margin:15px auto; width: 100%; color: #10366a; font-weight: bold; min-height: 45px; } .skybox ul li p { color: #000; font-size: 15px; line-height: 2em; letter-spacing: -0.05em; text-align: left; height:115px } .fadeIin{ animation-duration:1s; position: relative; animation-name:fadeIin } @keyframes fadeIin{ from { opacity:0 } to { opacity:1 } } .skybox img{ text-align: center; border: none; vertical-align: middle; height: auto; max-width: 100% } @media screen and (max-width: 1680px){ .skybox ul li h4 { height: 45px} } @media screen and (max-width: 1440px){ .skybox ul li { -webkit-box-shadow: 2px 2px 10px rgb(0 0 0 / 10%); box-shadow: 2px 2px 10px rgb(0 0 0 / 10%); width: 46%; max-width: 46%; margin: 0 1.5% 45px 1.5%; padding:20px 10px } .skybox ul li h4 {height:60px;} .skybox ul li p { height:125px; margin-bottom: 10px} } @media screen and (max-width:991px){ .skybox ul li { width:96%; max-width:96%; margin: 0 auto 45px auto; border: #eee solid 1px } } .skySolution{ background-position:center bottom; background-size:cover; background-repeat: no-repeat; height:500px; padding: 0; z-index: 2; max-width: 100%; width: 100%; position: relative; display: block; margin-top: -120px; z-index: -2 } .skySolutionSec{ position: relative; width: 80%; min-height:300px; margin:40px auto 30px auto; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .service_sky { width:60%; margin-left:30%; min-height: 400px; position: relative; z-index: 2; padding: 40px; color: #fff; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .service_sky_content{ background: rgba(0, 41, 90, 0.95); content: ''; display: block; width: 100%; height: 100%; position: relative; padding:50px } .service_sky h3 { font-size: 28px; color: #fff; margin: 0 0 0.8em; text-align: left; padding: 0; font-weight: bold; z-index:3 } @media screen and (max-width:853px) { .skySolution{ margin-top:30px;height: auto} .skySolutionSec {position: relative; width: 100%;} .service_sky { margin-left: auto;width: 100%;top: 60px} .service_sky_content{ padding:30px} .service_sky h3 { font-size: 20px;} } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ service-iso ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .number_list { display: flex; flex-direction: column; } .item:not(:last-child) { margin-bottom: 80px; } ul.number_list > li { counter-increment: number; position: relative; list-style: none; } .item_image { position: absolute; width: 55.88%; z-index: 2; } .item:nth-child(even) .item_image { right: 0; } .item:nth-child(even) .item_text { padding: 100px 79px 100px 40px; float: left; } .item_text { width: 50%; padding: 100px 40px 100px 100px; margin-top: 100px; float: right; background: #fff; background-color: rgba(255, 255, 255, 0.9); box-shadow: 7px 13px 15px 0px rgb(0 0 0 / 20%); border-style: solid; border-width: 1px; border-color: #ddd } .area-web-iso h4 { color: #000; font-size: 24px; line-height: 1.6em; text-align: left; font-weight: bold; } .area-web-iso h4 small { display: inline-block; color: #3589f1; font-size:17px; font-weight: 700; line-height: 30px; } ul.square_list { overflow: hidden; margin-top: 40px; display: flex; flex-wrap: wrap; width: 100%; } ul.square_list > li { width: 100%; color: #222; font-size: 16px; letter-spacing: 0.05em; line-height: 40px; list-style: none; box-sizing: border-box; margin-left:20px; text-indent: -1em; } ul.square_list > li:before { content: '■'; color:#3589f1; margin-bottom: 5px; margin-right: 0.1em; } @media (max-width:1440px) { .item_text {width: 80%; padding:170px 30px 60px 30px;} .item:nth-child(even) .item_text{padding:165px 30px 60px 30px;} } @media (max-width:1152px) { .item_text {width: 100%; padding:90px 30px 60px 30px;margin-top: -25px; float: left} .item:nth-child(even) .item_text{padding:90px 30px 60px 30px;} .item_image {position: relative} .item_image {margin: auto} .item:nth-child(even) .item_image { right:auto;margin: auto} } @media (max-width:853px){ .area-web-iso h4 { font-size: 20px;} .item_text { width: 100%; padding: 30px 15px 15px 25px;} ul.square_list {margin-top: 20px;} ul.square_list > li { font-size: 15px; line-height:30px;} } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ service-web01 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .captionTxt{ position: relative; clear: both; display: block; margin-bottom:160px} .caption{ background-color: #f9f7f3; padding: 45px 30px 45px 30px; z-index: 1; margin-top:60px; width: 100%; max-width: 100%; } .caption-right{ margin-left: -105px;z-index: 2;float: left} .caption-left {margin-right: -210px;z-index: 2; float: right;} .caption h2 { color: #191d34; font-size:28px; font-weight: 700; line-height: 1.2; margin-bottom: 40px; display: block; } .caption-img { z-index: -1; position: absolute; width:68%; right: 0 } .caption-img img{ width:100%; height: auto; display: block; } .numberList{ text-align: center; position: absolute; box-shadow: 7px 10px 9px 0px rgb(0 0 0 / 20%); background-color: #0089e7; color: #fff; width: 80px; height: 80px; display: inline-block; justify-content: center; align-items: center; font-size: 30px; left: 40%; /* top: 40px; */ font-weight: bold; padding: 10px; right: 40%; /* margin: auto; */ top: 0; } @media (max-width:1280px) { .caption { background-color: #f9f7f3; padding: 45px 20px 45px 20px; margin-left:auto;} .caption h2 {font-size: 24px;} .captionTxt{ margin-bottom:15px; max-width:100%; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; position: relative } .caption-right{ margin-left: auto;z-index: 2;float: left} .caption-left {margin-right: auto;z-index: 2; float:left;} .numberList { position: relative; left: auto; right: auto; top: 60px; } .caption-img {position: relative;} } @media only screen and (min-width: 768px) and (max-width: 991px) { .caption img { margin-bottom:30px } .caption { padding: 30px; margin-left: 0px; } .captionTxt{margin-bottom: 30px;} } @media (max-width:853px) { .caption-img {display: none} } @media only screen and (min-width: 576px) and (max-width: 767px) { .area-web01 .caption-img img { margin-bottom:30px } } @media (max-width: 767px) { .area-web01 .caption-img img { margin-bottom:30px } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ About ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .aboutBlock{ max-width: 95%; width: 95%; margin: 0 auto; position: relative; } .aboutBlock .aboutimg { max-width: 450px; width: 36%; position: relative; top: -30px; left: 0; z-index: 2; float: left; } .aboutimg p img { box-shadow: 3px 7px 15px 0px rgb(0 0 0 / 20%); } .aboutimg:before{ background-color: #0089e7; position:absolute; content: ""; height: 100%; border-left: 30px solid #3589f1; left :-20px; z-index:0; top: 0; } .companyName-cap { position:absolute; bottom: -15px; left:-20px; } .companyName{ background-color:#29BCED; padding:15px 30px; font-size: 23px; color: #fff; text-transform: uppercase; font-weight: 700; font-style: normal; letter-spacing: 0.02rem } .company_bg_white { width: 85%; right: 0; padding: 40px 0 30px; margin: 0 0 0 auto; background: rgba(255,255,255,.9); box-shadow: 3px 7px 15px 0px rgb(0 0 0 / 20%); position: relative; display: block; left: 80px; } .comment { font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; margin-top:30px; position: relative } .comment p { margin-top: 30px; font-size: 15px; line-height: 2; letter-spacing: .03rem; } .companyinner { width: 75%; margin: 5% auto } .companyinner h3{ font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; margin-bottom: 30px; text-align: left; font-weight: bold; /* display: table; */ width: 100%; max-width: 100%; font-weight: bold; font-size: 24px; } .comment .name { font-size: 16px; text-align: right; font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; margin-top: 34px; letter-spacing: .01rem; } .comment .name img { top: 35px; position: relative; } @media (max-width:1152px) { .aboutBlock{ max-width: 100%; width: 100%;} .aboutBlock .aboutimg { max-width: 650px; width: 85%; position: relative; top: 0; left: auto; z-index: 2; margin: auto; } .company_bg_white { width: 100%; max-width: 100%; right: auto; padding:15px 15px; margin: 0 auto; margin-top: 60px; left: 10px; } .comment { margin-top:120px; display: table-cell; position: relative; } .companyinner{ max-width: 100%; width: 100%;} .companyinner h3{ font-size: 20px; padding-top: 60px; margin-bottom: 10px; position: relative; display: table} .comment .name{margin-bottom: 30px} } /* ------------------------------------------------- company -------------------------------------------------------- */ .concept{ display: flex; margin: auto; width: 100%; max-width: 100%; font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; } .concept ul { left: 0; padding: 0; margin: 0; list-style: none; list-style-type: none; justify-content: space-between; display: flex; width: 100%; max-width: 100%; } .concept ul li h4 { font-weight: bold; color: #10366a; text-align: center; border-top:#10366a solid 1px; border-bottom:#10366a solid 1px; font-size: 20px; padding: 10px 0; } .concept ul li { font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; width:31%; max-width: 31%; list-style: none; vertical-align: top; display: inline-block } .concept ul li+li { margin-left: 15px; } .concept ul li p { font-size: 16px; margin-top: 20px; line-height: 2; font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; } @media screen and (max-width:1152px) { .concept ul {display: block} .concept ul li { font-family: Noto Sans Japanese, "sans-serif"; width: 100%; max-width: 100%; margin-bottom:35px } .concept ul li+li { margin-left: auto; } } .credo { background: url("../images/company-img/com_stargoBg.jpg"); background-position:center; background-repeat: no-repeat; background-size:contain; max-height: 600px; padding:120px 0; z-index: 2; background-attachment: fixed; max-width: 100%; width: 100%; position: relative; display: block } .credo h3 { text-align: center; color: #0099FF; font-size:38px; font-weight: bold; position: relative; margin-top: -25px } .credo h3 span { font-size: 15px; margin-top: 15px; display: block; font-weight: bold; } .credo p { font-size: 22px; text-align: center; font-weight: bold; color: #ffffff; line-height: 2.5; } .credo-border { width: 1px; height:50px; position: absolute; left: 50%; top: 0; z-index: 1; background: #ffffff; } @media screen and (max-width:1152px) { .credo {background-size: cover; background-attachment: unset; height: 200px} } /*----- 企業年度指標BG -------*/ /*---Animations---*/ .c-Animations { /*Container of all 3 animations*/ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:5px auto; text-align: center; width:100%; } .c-Animations .Stat-Title { color: #336; font-weight: bold; font-family: 'Courier New', monospace; font-size: 1.3em; text-transform: uppercase; width: 100%; } /*----circle border---*/ .c-Animations .Statistics { border: 1px solid #ccc; border-radius: 50%; height: 210px; width: 210px; text-align: center; margin: auto; } .c-Animations .Statistics .Stat.Animate:after { /*Color/grey circle*/ border-radius: 50%; content: ''; display: inline-block; height: 100%; width: 100%; } .c-Animations .Statistics .Stat-1 span { color: #336; /*Center message color*/ } .c-Animations .Statistics .Stat-1.Stat:after { background-image: linear-gradient(15deg, #336 49%, transparent 50%, transparent), linear-gradient(270deg, #336 30%, #ccc 50%, #ccc); } .Statistics .Stat.Stat-1{ /*Background behind color/grey portion*/ background-color: #ccc; border-radius: 50%; display: inline-block; height: 190px; margin: .5rem; position: relative; width: 190px; } .Statistics .Stat.Stat-1 span { /*Text inside circle*/ font-size: 1.2rem; font-weight: bold; font-family: 'Courier New', monospace; position: absolute; left: 50%; top: 50%; display: block; width: 160px; height: 160px; line-height: 160px; margin-left: -80px; margin-top: -80px; text-align: center; border-radius: 50%; background: #fff; z-index: 1; } .Statistics .Stat.Stat-1 span:after { /*Inner circle border*/ content: ''; position: absolute; top: 10px; left: 10px; width: 140px; height: 140px; border-radius: 50%; border: 1px solid #ccc; } /*Add this section for Desktop Only*/ .c-Animations .Statistics .Stat.Animate:after { animation: colorload 1.5s 3 alternate; } .c-Animations .Stat-Title { margin-bottom: 2rem; } @keyframes colorload { 0% { opacity: 0; transform: rotate(0deg); } 100% { opacity: 1; transform: rotate(360deg); } } /*--------- slogn --------*/ .c-Message { display:block; text-align: center; font-weight: bold; max-width: 100%; width: 100%; font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; } .c-Message h2 { display:block; width: auto; color: #336; font-size: 1.2rem; font-weight: bold; margin: 1rem auto; text-transform: uppercase; } .c-Message p { display:block; padding: 5px 10px; width: auto; margin: 0 auto; line-height: 20px; text-align: center } /*------------------------------ EXPERyear ----------------------------------*/ .listExperience{ list-style: none; list-style-type: none; left: 0; padding: 0; margin: 0 } .listExperience>li{ display: flex; margin-bottom: 10px; } .listExp-year { display: inline-block; margin-bottom: 10px; width: 77px; text-align: right; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; text-align: center; font-weight: bold } .listExperience li ul{ width: 100%; list-style: none; list-style-type: none; padding-left: 10px; margin-left: 10px; border-left:solid 3px ; border-color:#10366a } .listExperience li ul > li{ padding:10px 5px; display: block; border-bottom: 1px solid rgba(160,160,160,0.2); } /* ------------------------------------------------- FAQ -------------------------------------------------------- */ .accordion-container { position: relative; width: 100%; max-width: 100%; border: 1px solid #ddd; border-top: none; outline: 0; cursor: pointer } .accordion-container .article-title { display: block; position: relative; margin: 0; padding: 0.625em 0.625em 0.625em 2em; border-top: 1px solid #ddd; font-size: 1em; font-weight: normal; color: #000; cursor: pointer; background-color: #FFFFFF; line-height: 1.8 } /*---Q-----*/ .accordion-container .article-title span { font-size: 1em; color: #000; padding: 3px 8px; background: #f9f9f9; text-align: center; cursor: pointer; white-space: nowrap; border-radius: 4px; margin-right: 8px; margin-left: 5px; float: left } .accordion-container .article-title:hover, .accordion-container .article-title:active, .accordion-container .content-entry.open .article-title { background-color:#0089e7; color: #fff; } .accordion-container .article-title:hover i:before, .accordion-container .article-title:hover i:active, .accordion-container .content-entry.open i { color: #fff; } .accordion-container .content-entry i { position: absolute; top: 3px; left: 12px; font-style: normal; font-size: 1.625em; color:#10366a; } .accordion-container .content-entry i:before { content: "+"; } .accordion-container .content-entry.open i:before { content: "-"; } .accordion-content { display: none; padding:10px; background-color:#FFF; height:100%; overflow: hidden } /*--------fa-----------*/ .accordion-content p { color: #000; display: inline-flex; font-size: 1em; position: relative; } .accqTxt { line-height: 1.75; display:inline-block; padding:15px; /*float: left;*/ margin-left: 20px; } .accqbox { display:inline-block; color: #fff; padding-right:10px; padding-left:10px; height: 25px; background:#0089e7; text-align: center; cursor: pointer; white-space: nowrap; border-radius: 4px; margin-right:8px; margin-top: 20px; line-height: 25px; text-align: center } /*--------answer-----------*/ #faq-content { width: 100%; max-width: 100%; } .accordion-container, #description { width: 90%; margin: 1.875em auto; } #description p { line-height: 1.5; } #description h2 { text-align: center; } @media all and (min-width: 860px) { #faq-content { width: 95%; max-width: 95%; margin: 0 auto; } } /*----------------------WEB 詢提案-----------------------*/ .ttl { color: rgb(16, 54, 106); font-weight: bold; text-align: center; position: relative; box-shadow: rgba(0, 0, 0, 0.2) 7px 13px 15px 0px; margin-top: 90px; height: 120px; line-height:90px; background: url(../images/bg-img/web-c.png) center top / auto repeat; padding:10px 8px; } .ttl span{ font-size: 24px; padding: 0px; } .proposal { background: url("../images/bg-img/web-ser.png") repeat top center; position: relative; padding-top:100px; padding-bottom: 100px; margin-top:60px; max-width: 100%; width: 100%; overflow: hidden; } .proposal ul.boxes{ margin-bottom: 0 !important; margin: 0; padding: 0; left: 0; display: flex; display: -moz-flex; flex-wrap: wrap; justify-content: space-between; } .proposal ul.boxes li{ display: flex; align-items: stretch; padding: 25px; background: #fff; box-shadow: 7px 13px 15px 0px rgb(0 0 0 / 20%); width: 31%; margin-right: 2%; float: left; margin-bottom: 35px; border: 1px solid rgba(0,0,0,0.12); border-top: 2px solid #3b5ca9; } .proposal ul.boxes li img{ text-align: center; margin: auto; position: relative; display: block;} .proposal ul.boxes li div{ padding:25px; flex-flow: wrap; display: inline-block} .proposal ul.boxes li a{ /*padding:25px;*/ flex-flow: wrap; display: inline-block } ul.boxes li p { color: #000; font-size: 15px; line-height: 2em; letter-spacing: 0.05px; text-align: left; min-height:145px; height:145px; overflow: hidden; } ul.boxes li h5 { font-size: 18px; text-align: center; margin: 30px auto 20px; color: #0089e7; font-weight: bold; width: 100%; min-height:40px; overflow: hidden } .proposal ul.boxes li p{ margin-bottom: 0px; } @media screen and (max-width:991px){ .proposal ul.boxes li{ width:48%; max-width:48%; padding: 20px; margin-right: auto; margin-bottom: 55px; border: 1px solid rgba(0,0,0,0.12); border-top: 2px solid #3b5ca9; } .ttl span { font-size: 22px;} } @media screen and (max-width:853px){ .proposal { background-size: 40px auto; padding-bottom: 40px; margin-top: 110px; } .ttl{ height: auto; line-height: 50px; background-size: 40px auto; } .ttl span{ font-size:20px; line-height:1.7; padding: 7% 0; } ul.boxes li a{ padding: 7% 5%; } ul.boxes li p{ margin-bottom: 6%; font-size:16px; line-height: 1.7em !important; overflow:unset; min-height:auto; height:auto; } } @media screen and (max-width:767px){ .proposal ul.boxes li{ width:99%; max-width:99%;} } @media screen and (max-width:480px){ .ttl span{font-size:18px;} } /*----------------------WEB quotaion-----------------------*/ .quotation_listArea{ margin:60px auto; position: relative; font-family: "Work Sans",Arial,Verdana,"Microsoft JhengHei",PMingLiU,sans-serif; } .flex_boxs { display: flex; /*flex-flow: row-reverse;*/ justify-content: space-between; position: relative } .quotation_listArea .label { background: #0089e7; display: inline-block; position:absolute; text-align: center; font-family: "Work Sans",Arial,Verdana,"Microsoft JhengHei",PMingLiU,sans-serif; font-weight: bold; color: #FFF; font-size: 17px; top: -25px; left:-15px; width: 200px; height:45px; line-height:45px; letter-spacing: 1px } .quotation_listArea .label:before { border-width: 0 15px 15px 0; left: 0px; bottom: -15px; content: ""; width: 0; height: 0; border-style: solid; border-color: transparent #10366a transparent transparent; position: absolute; } .flex_boxs_l { display: flex; width: 47%; max-width: 47%; margin-left:2% } .flex_boxs_l h4{ color: #000; font-size: 24px; line-height: 1.6em; text-align: left; font-weight: bold; display: block; padding: 15px } .quotation_list { margin: auto; position: relative; display: block } .quotation_list ul { flex-wrap: wrap; list-style: none; list-style-type: none; padding: 0; margin: 0; left: 0 } .quotation_list li { position: relative; font-weight: bold; padding-bottom: 15px; margin-left: 15px; font-size: 18px; line-height:30px } .quotation_list li:before { position: absolute; font-size:38px; font-family: Rokkitt, "sans-serif"; content: '“'; top: -2px; color:#0089e7; } .quotation_list li p { margin-left: 25px; display: block; } /*---------- 右側 -------------*/ .flex_boxs_r { color: #fff; background: url("../images/bg-img/web-quotationbg.png") no-repeat; background-position:right; background-size: cover; text-align: center; width: 45%; max-width: 45%; align-items: center; justify-content: center; margin-right: 3%; float: left; padding: 30px; display: flex; flex-direction: column; } .flex_boxs_r h5 { font-size: 22px; letter-spacing: 0.05em; line-height: 1.7; font-weight: bold; } .flex_boxs_r p { font-size: 21px; font-weight: bold; width: 280px; margin: 20px 0 35px; background: #fffc00; display: inline-block; color: #003259; padding:12px 10px; font-weight: bold } .flex_boxs_r span { font-size: 18px; font-weight: bold; line-height: 2em; display: inline-block; margin-bottom: 30px; width: 100% } @media screen and (max-width:991px){ .flex_boxs { padding: 2% 4% 7%; display: block } .flex_boxs_l{ width:100%; max-width:100%; flex: 0 0 100%; display: flex; flex-direction: column; margin-left: auto; margin-bottom:60px } .flex_boxs_r { display: flex; flex-direction: column; width:96%; max-width:96%; flex: 0 0 96%; margin-right: auto; margin-left: auto } .quotation_listArea .label{left: -10px} .quotation_listArea .label:before{ display:none} .quotation_bg_white { padding: 35px 0; width: 92% !important; max-width: 92% !important; border: 1px solid rgba(0,0,0,0.12);} } @media screen and (max-width:991px){ .quotation_list li { margin-left:8px; margin-right:8px; font-size: 17px;} .quotation_list li:before { font-size:28px; left: 3px; top:0px;} .flex_boxs_r p { font-size:18px; width: 220px; margin: 20px 0 35px;} } /*---------- price---內頁 -------------*/ .price-table { max-width: 400px; min-height: 320px; background-color: #fff; border-radius: 0 0 0 25px; border: 1px solid #ccc; box-shadow: 5px 5px 8px #ccc; display: block; margin: 10px auto 30px auto; padding: 0 0 20px 0; text-align: center; } .price-table span { display: block; } .price-table span:first-child { padding: 16px 0 0 0; font-size: 2em; text-transform: uppercase; font-weight: bold; } .price-table span:nth-child(2) { padding: 10px 0 10px 0; } .price-table span:nth-child(3) { padding: 8px 0; font-weight: bold; font-size: 1.2em; } .price-txt { padding: 8px 6px; font-weight: bold; font-style: normal; font-size: 0.738em !important; } .price-table > ul { list-style: none; display: block; padding: 0; margin: 0; } .price-table > ul > li { display: block; padding: 8px 0; } .price-table > ul > li:first-child { border-top: 1px solid #ccc; } .price-table > ul > li { border-bottom: 1px solid #ccc; } .price-table a, .price-table a:active, .price-table a:focus, .price-table a:hover, .price-table a:visited { text-transform: uppercase; display: inline-block; padding: 8px 16px; text-decoration: none; font-weight: bold; transition-duration: .2s; } .price-y-ps{ display:block; padding:5px 0; text-align: center; letter-spacing:1px; font-size: 14px; color: #777; font-weight: bold; white-space:pre-line; line-height:35px; } /* Colors */ .pt-bg-y01 span:first-child { background-image: -moz-linear-gradient( 0deg, rgb(125,119,239) 0%, rgb(153,113,244) 70%, rgb(180,106,249) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(125,119,239) 0%, rgb(153,113,244) 70%, rgb(180,106,249) 100%); background-image: -ms-linear-gradient( 0deg, rgb(125,119,239) 0%, rgb(153,113,244) 70%, rgb(180,106,249) 100%); color: #fcfcfc; } .pt-bg-y01 span:nth-child(2) { background-color: #212121; color: #fff; letter-spacing: 1px; font-size: 14px } .pt-bg-y01-total{ color:#8475f0; margin: 8px auto; font-size: 15px; } /*------2year----*/ .pt-bg-y02 span:first-child { background-image: -moz-linear-gradient( 0deg, rgb(42,174,193) 0%, rgb(23,215,202) 70%, rgb(3,255,210) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(42,174,193) 0%, rgb(23,215,202) 70%, rgb(3,255,210) 100%); background-image: -ms-linear-gradient( 0deg, rgb(42,174,193) 0%, rgb(23,215,202) 70%, rgb(3,255,210) 100%); color: #fcfcfc; } .pt-bg-y02 span:nth-child(2) { background-color: #212121; color: #D5D8DC; letter-spacing: 1px; font-size: 14px } .pt-bg-y02 a { border: 3px solid #27AE60; color: #27AE60; margin-top: 8px; } .pt-bg-y02 a:hover { background-color: #27AE60; color: #fff;} .pt-bg-y02-total{ color: #22bfc5; margin: 8px auto; font-size: 15px; } /*------3year----*/ .pt-bg-y03 span:first-child { background-image: -moz-linear-gradient( 0deg, rgb(75,166,246) 0%, rgb(38,200,246) 70%, rgb(0,234,246) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(75,166,246) 0%, rgb(38,200,246) 70%, rgb(0,234,246) 100%); background-image: -ms-linear-gradient( 0deg, rgb(75,166,246) 0%, rgb(38,200,246) 70%, rgb(0,234,246) 100%); color: #fcfcfc; } .pt-bg-y03 span:nth-child(2) { background-color:#212121; color: #D5D8DC; letter-spacing: 1px; font-size: 14px } .pt-bg-y03-total { font-size: 15px; color: #4ba6f6; margin: 8px auto; } /*------5year----*/ .pt-bg-y04 span:first-child { background-image: -moz-linear-gradient( 0deg, rgb(232,188,28) 0%, rgb(236,222,14) 70%, rgb(240,255,0) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(232,188,28) 0%, rgb(236,222,14) 70%, rgb(240,255,0) 100%); background-image: -ms-linear-gradient( 0deg, rgb(232,188,28) 0%, rgb(236,222,14) 70%, rgb(240,255,0) 100%); color: #fcfcfc; } .pt-bg-y04 span:nth-child(2) { background-color: #212121; color: #D5D8DC; letter-spacing: 1px; font-size: 14px } .pt-bg-y04-total{ font-size: 15px; color: #f1b408; margin: 8px auto; } .contents_boxs { display: block; margin:60px auto 30px auto; overflow: hidden; font-family: 'Noto Sans Japanese', sans-selif; } .contents_boxs .Barrierright { float: right; width: 48.07%; max-width: 625px; } .contents_boxs .Barrierleft { float: left; width: 48.07%; max-width: 625px; } .contents_boxs .Barrierleft h4 { color:#04405e; font-size: 24px; line-height: 1.6em; text-align: center; font-weight: bold; font-family: 'Noto Sans Japanese', sans-selif; } .contents_boxs .Barrierleft p { font-size: 15px; line-height: 2em; letter-spacing: -0.05em; text-align: left; margin: 20px auto 30px; } .square_list { overflow: hidden; margin-top: 40px; display: flex; flex-wrap: wrap; width: 100%;} .square_list ul li { color: #d6000f; font-size: 15px; letter-spacing: 0.05em; line-height: 40px; width: 50%; list-style: none; box-sizing: border-box; margin-left: 1em; text-indent: -1em; font-family: 'Noto Sans Japanese', sans-selif; } @media (max-width:1280px){ .contents_boxs .Barrierright { float:none; text-align: center; width: 100%; max-width: 100%; margin-bottom:50px } .Barrierright img{max-width: 325px;height: auto} .contents_boxs .Barrierleft { float: left; width: 100%; max-width:100%; } } /*-------------------------- pos ------------------*/ #pos-product-bg { padding: 60px 0; background: -webkit-gradient(linear, left top, right top, from(#3e2bce), color-stop(100%, #2dd3aa), color-stop(100%, #2dd3aa), to(#2dd3aa)); background: -o-linear-gradient(left, #3e2bce 0%, #2dd3aa 100%, #2dd3aa 100%, #2dd3aa 100%); background: linear-gradient(to right, #3e2bce 0%, #2dd3aa 100%, #2dd3aa 100%, #2dd3aa 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e2bce', endColorstr='#2dd3aa', GradientType=1); max-width: 100%; width: 100%; position: relative; } #pos-product-bg .fact { display: inline-block; position: relative; } .fact h2 { float: left; color: #16d0c5; font-size: 60px; margin-right: 20px; } .fact p { float: left; padding-top:15px; line-height: 1.7; letter-spacing: 0.5px; color: #fff; text-transform: uppercase; } /*---------------------------------- pos-bottom ------------------*/ .posSolution { background-position: center bottom; background-size: cover; background-repeat: no-repeat; padding: 0; z-index: 2; max-width: 100%; width: 100%; position: relative; display: block; margin-top:0px; padding: 30px 0; z-index: -2; } #pos-area{ padding:60px 0 30px 0; margin:0px auto; display: block; } #pos-area .inner{ max-width: 1500px; width: 88%; margin:30px auto 30px auto; z-index: 1; position: relative; background: rgba(0, 41, 90, 0.85); padding:30px 15px } #pos-area #pos-area-btit{ color: #FFF; letter-spacing: 1px; font-size: 24px; line-height: 2em; text-align: center; position: relative; padding: 0px 30px; margin: 0px auto 15px auto; display:table; font-weight: bold; text-shadow: 0px 0px 1px #ccc; width: 70%; max-width: 70%; z-index: 1 } #pos-area #pos-area-btit:before { border-left: solid 1px #FFF; border-top: solid 1px #FFF; border-bottom: solid 1px #FFF; top: 0; left: 0; content: ''; width: 15px; height: 100%; position: absolute; display: table-cell } #pos-area #pos-area-btit::after { content: ''; width: 15px; height: 100%; position: absolute; border-right: solid 1px #FFF; border-top: solid 1px #FFF; border-bottom: solid 1px #FFF; top: 0; right: 0; display: table-cell } #pos-area #pos-area-btit span{font-size: 36px;text-align: center} #pos-area ul{ padding: 0; margin: 0; left: 0; width: 100%; list-style: none; list-style-type: none } #pos-area ul li{ padding-left: 25px ; font-size: 18px; width:31%; display: inline-block; color: #fff; margin-bottom:20px; font-weight: bold; position: relative; vertical-align: top; } #pos-area ul li:before { position: absolute; font-size: 45px; font-family: Rokkitt, "sans-serif"; content: '“'; top: 0; color: #0089e7; display: inline-block; left: 0px; } #pos-area .label{ top: -25px; left: 100px; width: 200px; height: 50px; line-height: 50px; } #pos-area .label:before{ border-width: 0 15px 15px 0; left: 30px; bottom: -15px; } @media (max-width:911px){ #pos-area ul li{ font-size: 17px; width:49%;} } @media (max-width:475px){ #pos-area ul li{ font-size: 18px; width:100%;} } .single-posArea{ position: relative; display: block; padding: 30px 15px; margin-top: 60px } .single-pos { padding: 30px 15px; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; position: relative; z-index: 1; background: #fff; border: #e6e6e6 solid 1px; margin-bottom: 30px; cursor: pointer } .single-pos::after { position: absolute; content: ""; left: 0; bottom: 0px; background: #c7ddf9; height: 3px; width: 100%;box-sizing: border-box; } .single-pos::before { position: absolute; content: ""; left: 0; bottom: 0px; background:#3589f1; height: 3px; width: 0; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; z-index: 2;box-sizing: border-box; } .single-pos:hover::before { width: 100%; } /*------------ postproduct img ------------*/ .single-pos .cat-icon{ margin-bottom: 30px; display: block; text-align: center } .single-pos .cat-icon img{ border: none; margin: auto; text-align: center } /*------------ postproduct tit ------------*/ .cat-cap h5 > a { color: #000a2d; margin-top: 0px; font-style: normal; font-weight: 500; font-size: 20px; font-weight:bold; margin-bottom: 20px; display: block; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .cat-cap h5 > a:Hover { color: #3589f1; } .single-pos .cat-icon span { color: #3589f1; font-size: 50px; margin-bottom: 30px; display: block; } .single-pos.cat-cap p { margin-bottom: 36px; color: #57667e; font-size: 14px; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .pos-col{ -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; position: relative; width: 25%; min-height: 1px; padding-right: 10px; padding-left: 10px; } @media screen and (max-width:1680px) { .pos-col{ -ms-flex: 0 0 33%; flex: 0 0 33%; max-width: 33%; width: 33%;} } @media screen and (max-width:1366px) { .pos-col{ -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; width: 50%;} } @media screen and (max-width:991px) { .pos-col{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%;} } @media screen and (max-width:853px) { .pos-col{ -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; width: 50%;} } @media screen and (max-width:550px) { .pos-col{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%;} } .infortechbox { width: 100%; max-width:100%; display: block; align-items: center; justify-content: center; overflow: hidden } /*------------------ banner Btn -----------------*/ .hvr-hover { cursor: pointer; padding: 5px 20px; white-space: nowrap; margin:25px auto 10px auto; background: #fff !important; border: transparent !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: none !important; box-shadow: none !important; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; vertical-align: middle; text-transform: uppercase; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #1874bb; font-size: 14px; line-height:30px; font-weight: 700; font-family: "Roboto", sans-serif; z-index: 1; border: 1px solid transparent; box-sizing: border-box; overflow: hidden; letter-spacing: 1px } .hvr-hover::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #0099FF; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; color: #ffffff; } .hvr-hover:hover::after { -webkit-transform: scale(2); transform: scale(2); color: #ffffff; } .hvr-hover { overflow: hidden; } .hvr-hover:hover { color: #ffffff; } /*********************************************************** - banner - ***********************************************************/ .h-100 { height: 100%!important; } .hero-area { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; padding: 0; margin: 0; top: 115px } @media (max-width:1152px) { .hero-area {top:0px} } @media (max-width:853px) { .hero-area {margin-top:90px} } .single-slide { position: relative; z-index: 99; width: 100%; max-width: 100%; height: 700px; background-color: #ffffff; overflow: hidden; } .single-slide:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; opacity: .45; background:#000; z-index: -1; width: 100%; height: 100%; } .single-slide .slide-bg-img { position: absolute; width: 100%; height: 100%; z-index: -12; top: 0; left: 0; right: 0; bottom: 0; -webkit-animation: slide-bg linear 10000ms infinite; animation: slide-bg linear 10000ms infinite; } /*--------- txt -----------------*/ .welcome-text{ position: relative; margin-top:150px; margin-left: auto; margin-right: auto; text-align: center; } .welcome-text h6{ font-size:26px; color:#fff; margin-left: auto; margin-right: auto; text-shadow: rgb(38, 38, 38) 3px 2px 3px; } .single-slide .welcome-text h2 { animation-delay: 200ms!important; font-size:52px; color:#0089e7; text-align:center; font-weight: 600; margin-bottom: 10px; text-shadow: rgb(77, 77, 77) 3px 2px 3px; } .single-slide .welcome-text p { font-size: 18px; color: #ffffff; text-align: center; text-shadow: rgb(38, 38, 38) 2px 2px 2px; letter-spacing: 1px } .slide-du-indicator { position: absolute; z-index: 10; width: 0; height: 2px; background-color:#000; left: 0; bottom: 0; } .owl-dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; width: 100%; z-index: 100; bottom: 30px; left: 0; right: 0; } .owl-dot {cursor: pointer; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; margin: 0 6px;} .owl-dot:hover{ background-color:#00a0e9 } .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .hero-area:hover .owl-next, .hero-area:hover .owl-prev { opacity: 1; visibility: visible; } .owl-prev, .owl-next { position: absolute; width:35px; height: 35px; border-radius: 50%; top: 50%; font-size: 18px; color: #ffffff; background-color: #fff; text-align: center; -webkit-transition-duration: 500ms; transition-duration: 500ms; line-height: 46px; opacity: 0; visibility: hidden; } .owl-next { margin-right: auto!important;; right: 20px!important;; } .owl-prev { margin-left: auto !important; left: 20px !important;; } .fa-angle-left{ content: ""; position: absolute; line-height: 0; display: inline-block; top: 40%; left:39%; border-right: 2px solid #3d4c63; border-bottom: 2px solid #3d4c63; width: 0.5em; height: 0.5em; transform: rotate(-225deg); -webkit-transform: (-225deg); cursor: pointer; text-align: center; margin: auto; } .fa-angle-right { position: absolute; line-height: 0; content: ""; display: inline-block; top: 40%; right:39%; right:39%; border-right: 2px solid #3d4c63; border-bottom: 2px solid #3d4c63; width: 0.5em; height: 0.5em; transform: rotate(-45deg); -webkit-transform: (-45deg); cursor: pointer; text-align: center; margin: auto; } @media only screen and (max-width:1152px) { .welcome-text{ margin-top:240px;} } @media screen and (max-width:911px) { .single-slide { position: relative; z-index: 99; width: 100%; height: 480px;} .welcome-text{ margin-top:170px;} .single-slide .welcome-text h2 { animation-delay: 200ms!important; font-size:42px; color:#0089e7; text-align:center; font-weight: 600; margin-bottom: 10px; text-shadow: rgb(77, 77, 77) 3px 2px 3px; } } @media screen and (max-width:853px) { .welcome-text{ margin-top:150px;} } @media screen and (max-width:533px) { .single-slide { height: 325px;} .welcome-text{margin-top: 60px} .single-slide .welcome-text h2 { font-size:25px;} .single-slide .welcome-text h6 { font-size: 20px;} .single-slide .welcome-text p { font-size: 14px;} } /*▼----------------- contents mouse --------------------------------▼*/ .mouse-container { position: relative; display: block; margin: auto; clear: both; text-align: center } .mouse { cursor: pointer; position: absolute; /* margin: 0 auto; */ display: block; width: 1.3em; height: 2.2em; border: solid 2px #b7bcc0; border-radius: 25px; -webkit-animation: scroll-mouse 1.5s; /* animation: scroll-mouse 1.5s; */ /* -webkit-animation-iteration-count: infinite; */ /* animation-iteration-count: infinite; */ bottom: 5px; text-align: center; /* margin: auto; */ left: -8px } .scroll-down { display: block; width: 10px; height: 10px; background: #b7bcc0; border-radius: 50%; margin: 15% auto auto auto; -webkit-animation: scroll-inner 1.5s; animation: scroll-inner 1.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease } .mouse-in { height: 10px; width: 2px; display: block; margin: 5px auto; background: #b7bcc0; position: relative; } .mouse-in { -webkit-animation: animated-mouse 1.2s ease infinite; moz-animation: mouse-animated 1.2s ease infinite; } @-webkit-keyframes animated-mouse { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); } } .mv__scroll { width: 1px; height:90px; position: relative; left: 50%; z-index:1; background-color: #cecece; top:175px } .mv__scroll-pointer { width: 1px; height: 50px; position: absolute; top: 0; left: 0; z-index:10; } .mv__scroll-pointer:before { content: ''; display: block; width: 1px; height: 50px; /* border-radius: 50%;*/ background-color:#408bd1; } .mv__scroll-text { position: absolute; top: -30px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-family: Rokkitt, "sans-serif"; font-weight: bold; font-size: 12px; color: #777; } .mv__scroll-pointer { -webkit-animation-name: moveScrollPointer; animation-name: moveScrollPointer; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1); } @-webkit-keyframes moveScrollPointer{ 0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 100%{-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0)} } @keyframes moveScrollPointer{ 0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 100%{-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0)} } @media only screen and (max-width:1152px) { .mv__scroll { top:95px; height: 60px; } .mv__scroll-pointer:before {height: 40px;} } @media only screen and (max-width:853px) { .mv__scroll {top:105px; height: 60px;margin-bottom: 60px; } .mv__scroll-pointer:before {height: 30px;} } @media screen and (max-width: 767px) { .mv__scroll { top:70px; margin-bottom: 120px;; height: 40px;} .mv__scroll-pointer:before {height: 30px;} } /*------------------ Home more ------------------------*/ .more a, .more span { color: #1874bb; border-bottom: solid 1px #1874bb; position: relative; display: inline-block; padding: 5px 0; text-decoration: none; /* transition: 0.3s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) color, 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) border; */ overflow: hidden; font-family: 'tex', Meiryo, Osaka, "Hiragino Kaku Gothic Pro", "MS PGothic","Source Sans Pro","微軟正黑體", sans-serif; z-index: 1; cursor: pointer; } .more a:before, .more span:before { content: ''; position: absolute; top: -1px; left: 0; display: block; width: 110%; height: 110%; background: #0099FF; transform: translateX(-110%) skewX(-15deg); transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 0.5s ease-in-out; z-index: -1; } .more:hover a { padding: 5px 10px; border-color:#1874bb; color: #fff; } .more:hover a:before { transform: translateX(-5%) skewX(-15deg); /* transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); */ } .more.morebtn { position: relative; margin: 0 auto; z-index: 1 } .more.morebtn:hover:after { content: ""; border-top: solid 1px #1874bb; width: 50px; position: absolute; bottom:20px; right: -25px; } .more.morebtn:hover a:after { border-top: solid 1px #ffffff; width: 25px; } .more.morebtn a { margin: 0 auto; text-align: center; /* height: 62px; */ /* line-height: 62px; */ border: solid 1px #1874bb; display: block; padding: 0; font-size: 14px; box-sizing: border-box; font-style: normal; letter-spacing: 1px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; /* background: #ffffff; */ } .more.morebtn a:after { content: ""; border-top: solid 1px #1874bb; width: 50px; position: absolute; bottom: 20px; right: 0; } @media screen and (min-width: 766px) { .more.morebtn { position: relative; width:255px; height:48px; margin: 0 auto; } .more.morebtn:after { content: ""; border-top: solid 1px #1874bb; width: 25px; position: absolute; bottom:25px; right: 0; transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); /* transition: transform 0.5s ease-in-out; */ } .more.morebtn:hover:after { content: ""; border-top: solid 1px #1874bb; width: 50px; position: absolute; bottom: 24px; right: -25px; /* transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); */ } .more.morebtn:hover a:after { border-top: solid 1px #ffffff; right: 0; /* width: 25px; */ /* transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); */ } .more.morebtn a { width:255px; margin: 0 auto; text-align: center; height:48px; line-height: 48px; border: solid 1px #1874bb; display: block; padding: 0; font-size: 14px; box-sizing: border-box; } .more.morebtn a:after { content: ""; border-top: solid 1px #1874bb; width: 50px; /* width: 25px; */ position: absolute; bottom: 24px; right: 25px; right: 0; transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); } } @media screen and (max-width: 767px) { .more a {font-size: 15px; } .more.morebtn {width: 58%; margin: 0 auto; } .more.morebtn a {height: 45px;line-height: 45px;} .more.morebtn a:after {width: 30px;bottom: 20px} /*.more.morebtn {padding-top:40px}*/ } /*==================================== hometitle ===============================*/ /*▼ sec01 tit ▼*/ .title-block { position: relative; display: block; } .title-block h2 { font-family: 'tex', Meiryo, Osaka, "Hiragino Kaku Gothic Pro", "MS PGothic","Source Sans Pro","微軟正黑體", sans-serif; display:block; text-align: center; margin:20px auto 0 auto; text-align: center; font-size: 50px; font-weight: bold; } .title-block p { position:relative; text-align:center; display:block; font-weight: bold; /*font-family: Rokkitt, "sans-serif"; font-family: Utsukushi, "sans-serif";*/ font-family: "Source Sans Pro", "微軟正黑體", sans-serif; color:#0089e7; line-height: 1.45em; letter-spacing: 2px; margin:auto; padding-top:30px; font-size: 22px; font-style:normal} .title-block span { position:relative; text-align:center; display: block; font-weight: bold; /*font-family: Rokkitt, "sans-serif"; font-family: Utsukushi, "sans-serif";*/ font-family: "Source Sans Pro", "微軟正黑體", sans-serif; color:#0089e7; line-height: 1.45em; letter-spacing: 2px; margin:auto; padding-top:10px; font-size: 22px; font-style:normal} .title-block h2 span { font-size: 11px; } .title-block span {font-size: 20px;} /*----------- sec02tit --------*/ .uBox1 { position: relative; padding:20px 0 20px; background: #00a0e9; text-align: center; color: #fff; font-weight: bold; margin: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; z-index:1 } .uBox1:after { content: ''; display: block; position: absolute; left: 50%; bottom:-40px; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); width: 50px; height: 50px; background:#00a0e9; box-sizing: border-box; z-index:-1 } .uBox1 h2{ position:relative} .uBox1spanTit{ display: inline-block; opacity: 0.3; line-height: 1; top: 5px; left: 1%; font-size: 4.5rem; position: absolute; letter-spacing: .08em; font-family: 'tex', Meiryo, Osaka, "Hiragino Kaku Gothic Pro", "MS PGothic","Source Sans Pro","微軟正黑體", sans-serif; color: #f7f7f7;} .uBox1spanCon{ display: inline-block; letter-spacing: .08em; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; font-size:22px; line-height:1.55em; font-weight: 500; font-style:normal; vertical-align: baseline; margin:0px auto; text-align: center; position: relative; padding-top:0px; color: #fff } @media screen and (max-width: 767px) { .title-block {top: -10px;} .uBox1spanTit{ position: relative; display:block; top:-10px; font-size: 50px; font-weight: bold; margin-top: 15px;} .uBox1spanCon{ font-size:20px;} } /*-------------- Sec 02 priceTit ----------------*/ /* animation */ .animation01 h2 { -webkit-animation: textMotion01 0.6s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: textMotion01 0.6s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both; } .animation01 .lead { -webkit-animation: fadeIn 0.5s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: fadeIn 0.5s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; } .animation02 h2 { -webkit-animation: textMotion01 0.6s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: textMotion01 0.6s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) both; } .animation02 .lead { -webkit-animation: fadeIn 0.5s 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: fadeIn 0.5s 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; } /*----------- sec03tit --------*/ .uBox2 { position: relative; padding:20px 0 20px; background:transparent; text-align: center; color: #fff; font-weight: bold; margin: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; z-index:0 } .uBox2 h2{ position:relative} .uBox2spanTit{ display:inline-block; opacity:0.3; line-height: 1; top:-20px; left:1%; font-size: 4.5rem; position: absolute; letter-spacing: .08em; font-family: 'tex', Meiryo, Osaka, "Hiragino Kaku Gothic Pro", "MS PGothic","Source Sans Pro","微軟正黑體", sans-serif; color:#bb2f3e; } .uBox2spanCon { display: inline-block; letter-spacing: .08em; text-align: center; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; font-size: 22px; line-height: 1.55em; font-weight: 500; font-style: normal; vertical-align: baseline; margin-top:-20px; color:#dc6c6f } @media screen and (max-width: 800px) { .uBox2spanTit{color:#f7f7f7} } @media screen and (max-width: 767px) { .uBox2spanTit{ opacity:0.8; position: relative; display:block; top:-10px; font-size: 50px; font-weight: bold; margin-top: 15px; color:#f7f7f7} .uBox2spanCon { color:#dc6c6f !important; font-size:20px; margin-top:0} } /*----------- sec03tit --------*/ .uBox3 { position: relative; padding:20px 0 20px; background:#3b5ca9; text-align: center; color: #fff; font-weight: bold; margin: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; z-index:1 } .uBox3:after { content: ''; display: block; position: absolute; left: 50%; bottom:-40px; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); width: 50px; height: 50px; background:#3b5ca9; box-sizing: border-box; z-index:-1 } .uBox3 h2{ position:relative} /*----------- sec04tit --------*/ .uBox4 { position: relative; padding:20px 0 100px; background:transparent; text-align: center; color: #fff; font-weight: bold; margin: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; z-index:0 } .uBox4 h2{ position:relative} .uBox4spanTit{ display:inline-block; opacity:0.8; line-height: 1; top:0px; left:1%; font-size: 4.5rem; position: absolute; letter-spacing: .08em; font-family: 'tex', Meiryo, Osaka, "Hiragino Kaku Gothic Pro", "MS PGothic","Source Sans Pro","微軟正黑體", sans-serif; color:#0d366e; } @media screen and (max-width: 767px) { .uBox4spanTit{ opacity:0.8; position: relative; display:block; top:-10px; font-size: 50px; font-weight: bold; margin-top: 15px; color:#0d366e} .uBox4 { padding-bottom:10px} } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Tit ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .ContentTit-box { position: relative; text-align: center; margin: 90px auto 0 auto; display: block; } .ContentTit-box h3 { line-height: 1.45em; letter-spacing: 2px; color: #0089e7; font-size: 22px; text-align: center; margin: 20px 0; font-weight: bold; } .ContentTit-box h3:before { position: relative; left: 50%; bottom: 0; top: 40px; display: block; content: ""; width: 80px; margin: 0 0 0 -40px; border-bottom: 2px solid #0089e7; } .ContentTit-box p { color: #000; font-size: 17px; line-height: 36px; text-align: center; margin: 20px auto 15px auto; font-weight: bold; } /*--------------------- 內頁more ------------------------*/ .pmore{ clear: both; max-width: 100%; width: 100%; display: block; text-align: center; position: relative} .pmore a, .pmore span { color:#1874bb; border-bottom: solid 1px #1874bb; position: relative; display: inline-block; padding: 5px 0; text-decoration: none; /* transition: 0.3s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) color, 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) border; */ overflow: hidden; font-style: normal; letter-spacing: 1px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; z-index: 1; cursor: pointer; } .pmore.pmorebtn { width: 100%; margin-top: auto; } .pmore.pmorebtn span { height:40px; line-height: 40px; } .pmore.pmorebtn span { text-align: center; border: solid 1px #1874bb; display: block; padding: 0; } .pmore.pmorebtn span:after { content: ""; border-top: solid 1px #1874bb; width: 50px; position: absolute; bottom:20px; right: 0; } .pmore.pmorebtn:hover:after{ content:""; border-top: solid 1px #1874bb; width: 50px; position: absolute; bottom: 20px; right: -25px; } .pmore a:before, .pmore span:before { content: ''; position: absolute; top: -1px; left: 0; display: block; width: 110%; height: 110%; background:#1874bb; transform: translateX(-110%) skewX(-15deg); transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 0.5s ease-in-out; z-index: -1; } .pmore:hover { padding:0; border-color:#1874bb; color: #fff!important; } .pmorebtn:hover { color: #fff!important; } .pmore a:hover :before, .pmore span:hover :before{ content: ''; position: absolute; top: -1px; left: 0; display: block; width: 110%; height: 110%; background: #0099FF; transform: translateX(-5%) skewX(-15deg); /* transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); */ color:#fff; z-index: -1; /* transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); */ } .pmore.pmorebtn{ position:relative; margin:0 auto; } .pmore.pmorebtn:hover a:after{ border-top: solid 1px #ffffff; width: 25px; } .pmore.pmorebtn a { margin: 0 auto; text-align: center; border: solid 1px #1874bb; display: block; padding: 0; font-size: 16px; box-sizing: border-box; /* background: #ffffff; */ } .pmore.pmorebtn a:after{ content:""; border-top: solid 1px #1874bb; width: 50px; position: absolute; bottom: 20px; right: 0; } .pmore span:hover { background: #0089e7; color: #fff; } /*------------------ pager white more ------------------------*/ .wmore a, .wmore span { color: #fff; border-bottom: solid 1px #fff; position: relative; display: inline-block; padding: 5px 0; text-decoration: none; overflow: hidden; font-family: 'tex', Meiryo, Osaka, "Hiragino Kaku Gothic Pro", "MS PGothic","Source Sans Pro","微軟正黑體", sans-serif; z-index: 1; cursor: pointer; } .wmore a:before, .wmore span:before { content: ''; position: absolute; top: -1px; left: 0; display: block; width: 110%; height: 110%; background: #0099FF; transform: translateX(-110%) skewX(-15deg); transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 0.5s ease-in-out; z-index: -1; } .wmore:hover a { padding: 5px 10px; border-color:#1874bb; color: #fff; } .wmore:hover a:before { transform: translateX(-5%) skewX(-15deg); /* transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); */ } .wmore.wmorebtn { position: relative; margin: 0 auto; } .wmore.wmorebtn:hover:after { content: ""; border-top: solid 1px #fff; width: 50px; position: absolute; bottom:20px; right: -25px; } .wmore.wmorebtn:hover a:after { border-top: solid 1px #ffffff; width: 25px; } .wmore.wmorebtn a { margin: 0 auto; text-align: center; /* height: 62px; */ /* line-height: 62px; */ border: solid 1px #fff; display: block; padding: 0; font-size: 14px; box-sizing: border-box; font-style: normal; letter-spacing: 1px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; /* background: #ffffff; */ } .wmore.wmorebtn a:after { content: ""; border-top: solid 1px #fff; width: 50px; position: absolute; bottom: 20px; right: 0; } @media screen and (min-width: 766px) { .wmore.wmorebtn { position: relative; width:225px; height:40px; margin: 0 auto; } .wmore.wmorebtn:after { content: ""; border-top: solid 1px #fff; width: 25px; position: absolute; bottom:25px; right: 0; transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); /* transition: transform 0.5s ease-in-out; */ } .wmore.wmorebtn:hover:after { content: ""; border-top: solid 1px #fff; width: 50px; position: absolute; bottom: 24px; right: -25px; /* transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); */ } .wmore.wmorebtn:hover a:after { border-top: solid 1px #ffffff; right: 0; /* width: 25px; */ /* transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); */ } .wmore.wmorebtn a { width:225px; height:40px; line-height: 40px; margin: 0 auto; text-align: center; border: solid 1px #fff; display: block; padding: 0; font-size: 14px; box-sizing: border-box; } .wmore.wmorebtn a:after { content: ""; border-top: solid 1px #fff; width: 50px; position: absolute; bottom: 24px; right: 25px; right: 0; transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); } } @media screen and (max-width: 767px) { .wmore a {font-size: 15px; } .wmore.wmorebtn {width:68%; margin: 0 auto; } .wmore.wmorebtn a {height: 45px;line-height: 45px;} .wmore.morebtn a:after {width: 30px;bottom: 20px} .wmore.wmorebtn {padding-top:40px} .wmore.wmorebtn a:after{width: 30px;} } /*------------------------------------ btn pager list ----------------------------------*/ .site-pagination { clear: both; padding:1em 0 1em 0; position: relative; text-align: center; margin:auto } .pagination-container{ display: block; overflow: hidden; margin-top: 40px; margin-bottom: 5px; text-align: center;} .site-pagination ul, .site-pagination ul li { padding: 0; margin: 0; } .site-pagination ul li { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; color: #fff; padding: 0 !important; border-radius: initial; border: none; font-weight: normal; } .site-pagination ul li a{ cursor: pointer; color: #222; text-decoration: none; background-color: transparent;} .site-pagination ul li a:hover{ background-color:#f4f8ff; } .site-pagination ul li a, .site-pagination ul li span { text-align: center; background-color: #FFFFFF; border:0.048em solid #ccc; width: 40px; height: 40px; font-size:16px; margin: 0 5px; line-height: 30px; } .site-pagination ul li.active a, .site-pagination ul li.active span { background:#283d58; color: #fff; border:0.048em solid #ccc; } .site-pagination ul li.current{ display:inline-block; color: #8a8a8a; width:4.25em ; height:1.5em; border-radius:none; border:none; margin: 0 0.313em; padding:0 ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .site-pagination ul li.current a{ width:4.35em; height:1.5em; border-radius:none; border:none } .site-pagination ul li.current a:hover{ width:4.55em; background-color:#f4f8ff; border-radius:none; height:1.5em; border:none; } /*------------------------------------ btn Pagination ----------------------------------*/ .paginationBox{ text-align:center; margin:auto; padding-top:1.5em} .pagination > li > a, .pagination > li > span { position: relative; float: left; padding:0.313em 0.938em; margin-left: -1px; line-height: 1.42857143; text-decoration: none; background-color: #fff; border:0.063em solid #ddd; } .pagination { border-radius: 0; display: inline-block; padding-left: 0; margin:1.250em 0; } .pagination > li { font-size:.938em; display: inline; } .pagination > li > a, .pagination > li > span { color: #4d4c43; background-color: #fff; border-color: #ddd; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: #4d4c43; background-color:#f4f8ff; border-color:#ddd; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { color: #4d4c43; background-color:#f4f8ff; border-color: #ddd; } /*------------------------------------ btn price add ----------------------------------*/ .plan-base { position: relative; text-align: center; margin:140px auto 0px auto; display:table; left: 7% } .plan-base::before { content: "Add+"; font-family: "Montserrat", sans-serif; font-size: 1.625rem; font-weight: 600; color: #ccc; line-height: 110px; text-align: center; width: 150px; height: 150px; border: 4px solid #ccc; border-radius: 50%; display:inline-block; padding: 0; margin:auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .plan-base::after { content: "Design"; margin: 0px auto; position:absolute; top:8px; display:inline-block; font-family: "Montserrat", sans-serif; font-size: 1.425rem; font-weight: 600; color: #ccc; text-align: center; left: -36px } /*------------------------------------ btn price add ----------------------------------*/ .plan-base-total { position: relative; text-align: center; margin:115px auto -15px auto; display:table; left: 7%; } .plan-base-total::before { content: "Total"; font-family: "Montserrat", sans-serif; font-size: 1.625rem; font-weight: 600; color: #ccc; line-height: 110px; text-align: center; width: 150px; height: 150px; border: 4px solid #ccc; border-radius: 50%; display: inline-block; padding: 0; margin:auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .plan-base-total::after { margin: 5px auto; position: absolute; left: -14px; top: 23px; -webkit-animation: bounce 2000ms ease infinite; -moz-animation: bounce 2000ms ease infinite; -o-animation: bounce 2000ms ease infinite; animation: bounce 2000ms ease infinite; -webkit-animation-timing-function: cubic-bezier(.14, .75, .2, 1.01); -moz-animation-timing-function: cubic-bezier(.14, .75, .2, 1.01); -ms-animation-timing-function: cubic-bezier(.14, .75, .2, 1.01); animation-timing-function: cubic-bezier(.14, .75, .2, 1.01); border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 20px solid #ccc; content: ""; } @media screen and (max-width:767px) { .plan-base{left:auto;margin-left:46%} .plan-base-total {left: auto;margin-left:46%} } /*------------------------------------ btn price contact ----------------------------------*/ button { position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: inherit; } .learn-more { width: 15.25rem; height: auto; margin:45px auto 0px auto } .learn-more .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3rem; height: 3rem; background:#00a0e9; border-radius: 1.625rem; } .learn-more .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; } .learn-more .circle .icon.arrow { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 0.625rem; width: 1.125rem; height: 0.125rem; background: none; } .learn-more .circle .icon.arrow::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); } .learn-more .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left:17px; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1.85rem; color: #282936; font-weight: bold; line-height: 1.6; text-align: center; text-transform: uppercase; font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; } .learn-more .button-text a{ color: #282936; font-weight: bold; text-align: center; font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; } button:hover .circle { width: 100%; } button:hover .circle .icon.arrow { background: #fff; transform: translate(1rem, 0); } .price_tit_content { padding: 0; box-sizing: border-box; margin:5px auto 0px auto; font-size:24px; font-weight: 700; color:#ccc; position: relative; font-family:"Source Sans Pro", "微軟正黑體", sans-serif; text-align:left; display: block; } @charset 'utf-8'; /* CSS Document */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ main sec01 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @import url('Home_img_btn_tit.css'); .sec01 { /* height: 100vh; */ overflow: hidden; position: relative; width: 100%; padding-top:120px; padding-bottom:10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sec01 .inner { width: 100%; padding: 0; box-sizing: border-box; margin: 0 auto; position: relative; } .sec01 { opacity: 1; } .sec01.active { opacity: 1; } @media only screen and (max-width:1152px) { .sec01 { padding-top:60px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Sec01--- works ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /*---home---*/ .bx-wrapper { position: relative; margin-bottom: 60px; padding: 0; zoom: 1; -ms-touch-action: pan-y; touch-action: pan-y; margin-top: 60px; } .works .bx-viewport { margin: 0; padding: 0; /*max-width: 100%;*/ position: relative; height: 370px; overflow: hidden; } .border_inner { max-width: 100%; width: 100%; margin: 0 auto; position: relative; } .works { margin: 0 auto; padding:40px 0px; } .works ul { left: 0; position: relative; display: block; margin: 0; padding: 0; box-sizing: border-box; } .works ul li { list-style: none; list-style-type: none; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; box-shadow: 3px 7px 15px 0px rgba(0, 0, 0, 0.2); background: #ffffff; height: 212px; cursor: pointer; position: relative; display:block; float: left; list-style:none; margin-bottom:30px; } .works ul li .slide-box p { font-family: "Source Sans Pro", "微軟正黑體", sans-serif; font-weight: bold; color: #222; height: 20px; overflow: hidden; line-height: 1.45em; } .works ul li .slide-box p:hover { color: #3b5ca9; } .works ul li a { font-family: "Source Sans Pro", "微軟正黑體", sans-serif; text-decoration: none; } .works ul li .slide-box time { color: #999999; font-family: Rokkitt, "sans-serif"; font-weight: bold; } .bx-wrapper img { max-width: 100%; width: 100%; display: block; border: none; border: 0; vertical-align: top; padding: 0px; margin: 0px; height: auto; } .bx-wrapper { position: relative; margin-bottom: 60px; padding: 0; /*max-width: 100%;*/ margin-top: 50px; } .works ul li p { overflow: hidden; height: 20px; } .works ul li a img { max-width: 100%; width: 100%; -webkit-transition: all .6s; transition: all .6s; } .works .char { top: -18px; right: 100px; z-index: 2; } .works .char img { width: 208px; height: auto; } .works ul li { color: #222; height: 350px; float: left; list-style: none; position: relative; width: 380px; margin-right: 30px; } .works ul li a { color: #222; height: 350px; float: left; list-style: none; position: relative; /*width: 380px;*/ max-width:380px; margin-right: 30px; } .works ul li p { overflow: hidden; height: 20px; } .works ul li a img { width: 100%; -webkit-transition: all .6s; transition: all .6s; } .works ul li a:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .works ul li .carousel-cell-image { width: 380px; height: 215px; overflow: hidden; } .works ul li .slide-box { width: 320px; margin: 0 auto; padding: 30px 0; } .works ul li .slide-box p { font-size: 15px; } .works ul li .slide-box time { font-size: 15px; position: relative; margin-top: 20px; display: block } @media screen and (max-width:1200px) { .works ul li { height: 350px; list-style: none; position: relative; margin-right:15px; } .works ul li .carousel-cell-image { max-width: 100%; height: 200px; } .works ul li .slide-box { width: 80%; } } @media screen and (max-width: 767px) { .sec01 { padding-top: 0px; } .works { padding: 0px 0px 15px 0; } .works ul li { float: left; list-style: none; position: relative; width: 215px; margin-right: 20px; box-shadow: 3px 7px 15px 0px rgba(0, 0, 0, 0.2); background: #ffffff; height: 255px; } .works ul li img { width: 100%; height: auto; border: 0; vertical-align: top; padding: 0px; margin: 0px; } .works .char { top: 0px; right: 0; } .works ul li .carousel-cell-image { height: 150px; overflow: hidden; width: 215px; text-align: center; } .works ul li .slide-box { margin: 0 auto; padding: 10px 0; } .works ul li .slide-box p { font-size: 14px; line-height: 1.75em; } .works ul li .slide-box time { font-size: 14px; position: relative; bottom: 0px; } .works .bx-wrapper { position: relative; margin-bottom: 1px; padding: 0; -ms-touch-action: pan-y; touch-action: pan-y; margin-top: 30px; margin-bottom: 40px } .works .bx-viewport { width: 100%; position: relative; width: 100%; overflow: hidden; position: relative; height: 280px; margin: 0; padding: 0; /*overflow: inherit !important;*/ } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ SEC02-首頁 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .sec02 { /* height: 100vh; */ overflow: hidden; position: relative; width: 100%; margin-top: 0px; padding-bottom: 70px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background:#eaf5fd } /*-------------- service price ----------------*/ .service{ display: block; position: relative; margin-left: auto; margin-right: auto } .service ul { list-style:none; list-style-type:none; margin:0; padding:0; left:0 } .service ul li { font-family: "Source Sans Pro", "微軟正黑體", sans-serif; width: 22.75%; max-height:325px; background: #fff; text-align: center; position: relative; top: 0; float: left; box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); margin: 4.8% 0 0 3%; } .service ul li:first-child { margin-left: 0; } .service ul li:hover { box-shadow: 0 7px 25px 5px rgba(0, 0, 0, 0.2); } .service ul li:before { content: ""; display: block; width: 100%; height: 2px; } .service ul li.yer01:before { background-image: -moz-linear-gradient( 0deg, rgb(125,119,239) 0%, rgb(153,113,244) 70%, rgb(180,106,249) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(125,119,239) 0%, rgb(153,113,244) 70%, rgb(180,106,249) 100%); background-image: -ms-linear-gradient( 0deg, rgb(125,119,239) 0%, rgb(153,113,244) 70%, rgb(180,106,249) 100%); } .service ul li.yer02:before { background-image: -moz-linear-gradient( 0deg, rgb(42,174,193) 0%, rgb(23,215,202) 70%, rgb(3,255,210) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(42,174,193) 0%, rgb(23,215,202) 70%, rgb(3,255,210) 100%); background-image: -ms-linear-gradient( 0deg, rgb(42,174,193) 0%, rgb(23,215,202) 70%, rgb(3,255,210) 100%); } .service ul li.yer03:before { background-image: -moz-linear-gradient( 0deg, rgb(75,166,246) 0%, rgb(38,200,246) 70%, rgb(0,234,246) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(75,166,246) 0%, rgb(38,200,246) 70%, rgb(0,234,246) 100%); background-image: -ms-linear-gradient( 0deg, rgb(75,166,246) 0%, rgb(38,200,246) 70%, rgb(0,234,246) 100%); } .service ul li.yer05:before { background-image: -moz-linear-gradient( 0deg, rgb(232,188,28) 0%, rgb(236,222,14) 70%, rgb(240,255,0) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(232,188,28) 0%, rgb(236,222,14) 70%, rgb(240,255,0) 100%); background-image: -ms-linear-gradient( 0deg, rgb(232,188,28) 0%, rgb(236,222,14) 70%, rgb(240,255,0) 100%); } .service ul li a { display: block; height: 100%; width: 100%; box-sizing: border-box; padding-top:35px; color: #000; } .servicer ul li h3 { margin-top: 40px; } .service ul li h3 span { display: table; width: 100%; } .service ul li h3 span b { font-size: 2rem; text-align: center; line-height: 1.3; } .service ul li h3 span.sub { display: block; font-size: 1.4rem; margin-top: 5px; } .service ul li p { padding: 0 15px; text-align:center; font-size: 17px; margin-top: 20px; font-weight: 500; line-height:1.8em; min-height:80px; font-style:normal; letter-spacing:1px; } .service ul li .sale{ text-align:center; line-height: 1; font-size:16px; color: #999999; font-weight: bold; display: block; letter-spacing:1px; font-style:normal; padding-bottom: 15px } .service ul li.yer01 h3 span.sub { color: #8475f0; } .service ul li.yer02 h3 span.sub { color: #22bfc5; } .service ul li.yer03 h3 span.sub { color: #4ba6f6; } .service ul li.yer05 h3 span.sub { color: #f1b408; } .service ul li.consulting h3 span.sub { color: #7d77ef; } /* animation */ .service li { opacity: 0; -webkit-transform: translate(0, 30px); transform: translate(0, 30px); -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } .service li.show { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .service li.show { -moz-animation: fadeInUp .6s .2s both; -webkit-animation: fadeInUp .6s .2s both; animation: fadeInUp .6s .2s both; } /*---內頁price----*/ .service ul li .p-sale { text-align: center; font-size: 14px; color: #999999; font-weight: bold; display: block; letter-spacing: 1px; font-style: normal; padding: 8px; line-height: 20px; } .service ul li .price-h3{ display: block; height: 100%; width: 100%; box-sizing: border-box; padding-top:20px; color: #222; } .service ul li .priceM{ padding: 0 4px; text-align: center; font-size: 16px; margin-top:5px; font-weight: bold; line-height: 1.8em; min-height:60px; font-style: normal; letter-spacing: 0.5px; } @media print, screen and (min-width:1025px) and (max-width: 1366px) { .service ul li { min-height: 270px} .service ul li p { text-align: center; font-size: 16px; padding: 0 5px;line-height:16px} .service ul li .priceM{font-size: 15px} .service ul li .p-sale{font-size: 13px;padding: 3px 0 10px 0; letter-spacing: 0.5px;} .service ul li { width: 23%; margin: 2% 0 0 2%;} } @media print, screen and (min-width:751px) and (max-width:1024px) { .service ul li:nth-child(odd) { margin-left: 0} .service ul li {width: 47.5%;position:relative} .service ul li:nth-child(odd) { margin-left: 0} .service ul li:nth-child(even) {margin-left: 5%} .service ul li:after { content: ""; display: block; padding-top: 120%; } .service ul li a { width: 100%; height: 100%; padding-top: 2.8vw; position: absolute; top: 0; left: 0; color: #000; } .service ul li h3 { margin-top: 3vw;color: #222} .service ul li h3 span b { height: 60px; color: #222} .service ul li p { text-align: center; padding: 0 1vw; min-height:9vw; margin-top: 10px; font-size: 16px; } .service ul li p .tab { display: block;} .service ul li .sale { margin:0 auto} .service ul li .p-sale{ font-size: 14px; padding: 3px 0 8px 0} .service ul li .price-h3{ padding-top:15px;} .service ul li .priceM {padding: 0;font-size:15px} } @media screen and (max-width: 750px){ .service ul {margin-top: 25px} .service ul li { width: 100%; background: #fff; text-align: center; position: relative; top: 0; margin: 0 0 30px; box-shadow: 0 5px 20px 5px rgba(0,0,0,0.1); opacity: 0; } .service ul li:last-child { margin-bottom: 0; } .service ul li.show { -moz-animation: fadeInUp .6s .2s both; -webkit-animation: fadeInUp .6s .2s both; animation: fadeInUp .6s .2s both; } .service ul li:before { content: ""; display: block; width: 100%; height: 3px; } .service ul li a { display: block; width: 100%; box-sizing: border-box; padding: 30px 10px 10px; } .service ul li h3 { margin-top: 20px; line-height: 1.6; font-size: 1.3rem; } .service ul li h3 b{ font-size: 2.4rem; line-height: 1.4; } .service ul li h3 span.sub { display: block; } .service ul li .price-h3{padding-top: 5px} .service ul li .p-sale {padding: 4px 0 10px 0;} } .sec03{ padding:40px 0 60px 0; width: 100%; display: block; position: relative; box-sizing: border-box; vertical-align: baseline; overflow: hidden; } .sec03::before { content: ""; background:#fdc0b3; background-position:center; background-repeat: no-repeat; margin: 0; padding:0; border: 0; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: -1; transition: transform 0.5s; vertical-align: baseline } .priceBox { text-align: center; color: #000; background: #fff; box-sizing: border-box; position: relative; padding: 0 0 25px; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; box-shadow: 0 5px 5px rgba(0,0,0,.2); margin:15px auto 15px auto } .priceBox span{ line-height:100%} .priceBox.priceList span:nth-child(3) { margin: 0 0 0 .5em; text-decoration: none; } .priceBox .priceList .price_nt{ font-size: 16px; } .priceBox .priceList{ padding:15px 10px 15px; color: #676767; background: #fff; line-height:1} .price_total_large{ margin: 5px 0 5px 5px; font-weight: bold; display: inline-block; font-size: 2.4rem; font-weight: bold; color:#1a1a1a; } .price_total{ margin: 5px auto; font-size:16px; font-weight: bold; display: inline-block; padding:5px; line-height: 1.7; color:#636363; letter-spacing: .1em; } .priceBox> div:first-child { padding:20px 0; font-size: 1.5em; background:#eee; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; color: #1a1a1a; letter-spacing:1px; display:block} .priceBox a> div:first-child { padding:20px 0; font-size:22px; background:#eee; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; color: #1a1a1a; letter-spacing:1px; display:block} .priceBox > div:first-child:before{ content: ""; display: block; width: 100%; height:3px; background:#3b5ca9; position:absolute; top:0} .priceBox a> div:first-child:before{ content: ""; display: block; width: 100%; height:3px; background:#3b5ca9; position:absolute; top:0} .priceBox > div:nth-child(3) { width: 90%; max-width: 30em; margin: 0 auto; padding:10px 0; border-top: #ccc 1px solid; font-size: 15px; letter-spacing: 1px; color: #8c8c8c; } .priceBox a> div:nth-child(3) { width: 90%; max-width: 30em; margin: 0 auto; padding:10px 0; border-top: #ccc 1px solid; font-size: 15px; letter-spacing: 1px; color: #8c8c8c; } } @media screen and (max-width: 768px){ .priceBox> div:first-child{ font-size:1.3rem} } /*----------------------------------------------- sec04 -------------------------------------------------*/ .sec04{ padding:0px 0 100px 0; width: 100%; display: block; position: relative; box-sizing: border-box; vertical-align: baseline; overflow: hidden; } .sec04::before { content: ""; background:#3b5ca9; background:#c0ddef; background-position:center; background-repeat: no-repeat; margin: 0; padding:0; border: 0; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: -1; transition: transform 0.5s; vertical-align: baseline } /*----------------------------------------------- sec04 list -------------------------------------------------*/ .rightAnimate { position: relative; overflow: hidden; } .rightAnimate.active:before { right: 100%; } .ulBox { position: relative; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; margin-top: 110px; } .rightAnimate:before { width: 100%; height: 100%; background: #7e9dcc; position: absolute; top: 0; right: 0; transition: all 800ms cubic-bezier(.77,0,.175,1); -webkit-transition: all 800ms cubic-bezier(.77,0,.175,1); -ms-transition: all 800ms cubic-bezier(.77,0,.175,1); content: ""; } .ulBox::before { content: ""; background: url(../images/mainser_bg.jpg) no-repeat center top; background-size: cover; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } .linkUl ul { list-style: none; list-style-type: none; padding: 0; margin: 0; left: 0; } .linkUl ul li { margin: 0; padding: 0; border: 0; outline: 0; font-size: 1em; } .linkUl li { text-align: center; border-left: 1px solid #fff; border-bottom: 1px solid #fff; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; float: left; width: 25%; color: #fff !important; } .linkUl li a { font-size: 1em; width: 100%; padding: 70px 10px 30px; display: table; font-weight: bold; color: #fff !important; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; font-style: normal; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; } .linkUl li span.text { position: relative !important; top: 0; left: 0; margin: 0; padding-top: 70px; font-size: 16px; display: block; color: #fff; letter-spacing: .1em; } .linkUl li:first-child { border-left: none; } .linkUl .liStyle a { pointer-events: none; background-color: #3b5ca9; height: 100%; } .linkUl li span { margin-top: -55px; font-size: 17px; letter-spacing: 1px; display: block; color: #fff; top: 50%; left: 35%; /*margin-left: -28px;*/ } .linkUl .liStyle span { margin-top: 18px; } .linkUl li span.text { position: relative !important; top: 0; left: 0; margin: 0; padding-top: 70px; } /*--height---*/ .liStyle { height: 197px; } .liStyle02 { height: 197px; } /*--txt---*/ .linkUl li a .sub { display: table-cell; text-align: center; vertical-align: middle; color: #fff; } .listyle_tit01 { font-size: 20px; text-align: center; margin: auto; margin-top: -30px; } .listyle_tit02 { vertical-align: inherit; font-size: 20px; color: #fff; top: 0%; left: 50%; margin: auto; margin-left: 0 !important; } .img-btn span { display: block; position: absolute; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: 0.8s; } .img-btn { display: block; position: relative; } .img-btn img { max-width: 100%; width: 100%; height: auto; } .img-btn span { display: block; position: absolute; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: 0.8s; } .img-btn .back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } .img-btn:hover .front { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } .img-btn:hover .back { transform: rotateY(360deg); -webkit-transform: rotateY(360deg); } @media (max-width: 991px) and (min-width: 801px) { .linkUl li span { margin-left: -15px; } } @media (max-width: 800px) and (min-width: 0) { .ulBox { background-size: cover; background-attachment: inherit; } .linkUl li { float: left; width: 50%; border-left: none !important; border-right: 1px solid #fff !important; display: block; } .linkUl li:nth-child(2n) { float: right; border-right: none !important; } .linkUl li a { padding: 22px 5px 18px; text-decoration: none; } .linkUl .liStyle02 a { padding: 15px 5px 8px; } .linkUl li:nth-child(2n) { float: right; border-right: none !important; } .linkUl li a img { width: 60px; } .linkUl .liStyle span { margin-top: 2px; font-size: 10px; } .linkUl li a span { margin-top: -40px; left: 38%; font-size: 12px; line-height: 1.4em; } .linkUl li span.text { position: relative !important; top: 0; left: 0; margin: 0; font-size: 15px; padding-top: 73px; } .linkUl .liStyle img { width: 65px; } .linkUl li a img { width: 65px; } .liStyle { height: 130px; } .liStyle02 { height: 130px; } .listyle_tit02 { font-size: 15px!important; margin-top: 8px!important; } } @media (max-width:480px) { .linkUl li a span { left: 34%; } ; } @media (max-width:414px) and (min-width: 0) { .linkUl li span.text { font-size: 13px; } } @media (max-width:375px) { .linkUl li a span { left: 32%; } } /*----------------------------------------------- sec05 聯絡 -------------------------------------------------*/ .sec05 { padding: 50px 0 130px 0; width: 100%; display: block; position: relative; box-sizing: border-box; vertical-align: baseline; overflow: hidden; } .sec05::after { content: ""; background: url(../images/main_sec05bg.jpg); background-position: top center; background-repeat: no-repeat; margin: 0; padding: 0; border: 0; height: 50%; position: absolute; bottom: 0; left: 0; width: 100%; z-index: -1; transition: transform 0.5s; vertical-align: baseline; } .imacArea { position: absolute; display: block; float: right; padding: 0 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; right: 10px; top:200px; z-index: 5; margin-bottom: 20px; width: 19%; } .imacBox { position: relative; display: block; width: 100%; position: relative; margin: 0; right: 0; } .imacBox > img { display: block; max-width: 100%; height: auto; } /* ----------------------------------------------------------------------------- main_Sec 05 CONTACT ----------------------------------------------------------------------------- */ .contact { letter-spacing: .1em; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; position: relative; } .contact h2 { text-align: center; opacity: 0; } .contact.animation01 h2 { opacity: 1; -moz-animation: textMotion01 0.6s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; -webkit-animation: textMotion01 0.6s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: textMotion01 0.6s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; } .contact h2 b { display: block; font-size: 60px; font-family: 'Roboto', sans-serif; font-weight: 500; } .contact h2 span { font-size: 16px; display: block; } .contact ul { left:0; padding:0; margin:0; margin-top: 43px; list-style:none; list-style-type:none; } .contact li { list-style:none; list-style-type:none; width: 45%; height: 300px; background: #fff; text-align: center; border-top: 2px solid #3b5ca9; padding: 35px 15px 0; box-sizing: border-box; float: left; box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.1); } .contact li + li { margin-left: 3%; } .contact li h3 { font-size: 22px; } .contact li h3 + p { margin-top: 21px; font-size: 14px; line-height: 1.8; } .contact li .bnr { margin:30px auto 0; text-align: center; } @media (max-width:1440px) and (min-width:801px) { .contact li { width: 41%; } .contact li + li { margin-left: 2%; } .contact li .bnr { width: auto!important; } } @media (max-width:1440px) and (min-width:1024px) { .contact li .bnr:after { content: ""; border-top: solid 1px #1874bb; width: 25px; position: absolute; bottom: 25px; right: 70px !important; } .imacArea { top: 250px; width: 22%; } } @media (max-width:1024px) and (min-width:801px) { .imacArea { top: 320px; width: 22%; right:5px } .contact li .bnr:after { right: 25px !important; } .contact li .bnr:hover:after { right: 0px !important; } } @media (max-width:980px) and (min-width:801px) { .contact li { width: 45%; } .contact li + li { margin-left: 2%; } .imacArea { top: 435px; width: 22%; } .contact li .bnr:hover:after { content: ""; border-top: solid 1px #1874bb; width: 30px !important; position: absolute; bottom: 24px; right: -10px !important; /* transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); */ } } @media (max-width:800px) { .imacArea { display: none; } } @media (max-width: 766px) and (min-width: 0) { .contact ul { margin-top: 15px; } .sec05 { padding: 40px 0 60px 0; } .sec05::after { height: 60%; } } @media screen and (max-width:766px) { .contact li { width: 100%; margin-bottom: 30px; background: #fff; text-align: center; padding: 20px; box-sizing: border-box; box-shadow: 0 5px 5px rgba(0,0,0,.2); opacity: 0; -webkit-transform: translate(0,30px); transform: translate(0,30px); -webkit-transition: all 0.5s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.5s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .contact.animation01 h2 { -moz-animation: textMotion01 0.6s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both; -webkit-animation: textMotion01 0.6s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: textMotion01 0.6s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both; } .contact li { opacity: 0; -moz-transform: translate(0, 30px); -webkit-transform: translate(0, 30px); transform: translate(0, 30px); -moz-transition: all 0.5s 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: all 0.5s 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.5s 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .contact li.show { opacity: 1; -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } .contact li + li { margin-left: 0; } .contact li { height: 255px; } .contact li .bnr { margin: 0px auto 0; padding-top: 25px !important; } } @charset "utf-8"; /* CSS Document */ body { position: relative; margin: 0 !important; padding: 0 !important; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; min-height: 100%; top: 0px; } body, html { width: 100%; -webkit-text-size-adjust: 100%; } * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } ul { list-style: none; list-style-type: none; } * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; } ol li, ul li { list-style: none; list-style-type: none } img { height: auto; max-width: 100%; } .img-fluid { max-width: 100%; height: auto; vertical-align: middle; border-style: none; } /* 連結共用動畫 */ /*a, a.btn { text-decoration: none; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } */ .mt-0{margin-top:0px !important} .mt-15{margin-top:15px !important} .mt-3{margin-top:30px !important} .mt-4{margin-top:40px !important} .mt-5{margin-top:50px !important} .mt-6{margin-top:60px !important} .mb-15{margin-bottom:15px !important} .mb-3{margin-bottom:30px !important} .mb-4{margin-bottom:40px !important} .mb-5{margin-bottom:50px !important} .mb-6{margin-bottom:60px !important} .pb-15{padding-bottom:15px !important} .pb-3{padding-bottom:30px !important} .notice { color: #cc3300; font-size: 1em; display: block} .notice-blue{ font-size: 1em; display: block; color:#0f73ee} .row_rule{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style: none; border-collapse: collapse; border-spacing: 0; border: 0; clear: both; display: block; width: 100%; } .row-flex { display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; } .infull { position: relative; width: 100%; height: 100%; } /*---------- 背景--------- */ .bg-img { background-position: center center; background-size: cover; background-repeat: no-repeat !important; } .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0 } .clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0 } .clearfix { display:inline-block } * html .clearfix { height:1% } .clearfix { display:block } .overlay_black_opacity { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; background: #000; opacity: .3; } /* Clear Fix */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .d-flex { display: -ms-flexbox!important; display: flex !important; } .text-center { text-align: center!important; } .float-right { float:right!important; } .float-left { float:left!important; } @media screen and (min-width:853px) { .sp{ display: none !important; } } .box-siz{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*------------ linePager cardstyle -----------------*/ .boxSh{border: #ddd solid 1px;box-shadow: 0 5px 5px rgb(0 0 0 / 20%)} /*------------ Tabs -----------------*/ .tab-button-outer { margin: 0 auto; width: 100%; max-width:100%; display:block; text-align: center; vertical-align: middle } .tab-button { display: block; width: 100%; max-width:100%; margin: 0; left: 0; padding: 0; list-style-type: none; list-style: none; background-color: transparent } .tab-button li { display: inline-block; margin:0; padding: 0; cursor: pointer; position: relative; transform: scaleX(1); } .tab-button li :before{ width: 110%; height: 2px; content: ''; position: absolute; left: 0; bottom: 0; padding: 0; margin: 0; border-bottom: 2px solid #e5e5e5; } .tab-button li :after{ content: ''; position: absolute; left: 0; z-index:1; box-sizing: border-box; width: 0; transform: scaleX(0); margin: auto; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .tab-button li:hover:after{ content: ''; position:absolute; display: block; left: 0; bottom:0px; width: 109%; height: 2px; background: -webkit-linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5); background: linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5); z-index:1; box-sizing: border-box; transform: scaleX(1); } .tab-button li a { display: inline-block; padding:10px 12px; text-align: center; color:#444; width:auto; font-size: 17px; font-weight: bold; position: relative; text-decoration: none; letter-spacing: 0.5px } .tab-button li a:hover {color: #10366a; text-decoration: none} .tabs { overflow: hidden; margin: 0 auto; width: 100%; max-width: 100%; } .tab-contents { padding:15px; margin-top: 30px; display: block } .tab-contents h3{ padding:15px 10px; line-height: 1.45em; letter-spacing: 1px; color:#0089e7; font-size: 22px; text-align: left; margin:0 auto; font-weight: bold; display:inline-block; } .tab-contents h3:before { background: -webkit-gradient(linear, left top, right top, from(#3e2bce), color-stop(100%, #2dd3aa), color-stop(100%, #2dd3aa), to(#2dd3aa)); background: -o-linear-gradient(left, #3e2bce 0%, #2dd3aa 100%, #2dd3aa 100%, #2dd3aa 100%); background: linear-gradient(to right, #3e2bce 0%, #2dd3aa 100%, #2dd3aa 100%, #2dd3aa 100%); color: #fff; width:25px; height:25px; display: block; justify-content: center; align-items: center; position: relative; z-index: 1; float: left; margin-right: 15px; content: ""; border-radius:50%; margin-top: 5px } .tab-contents h4{ padding:15px 10px; line-height: 1.45em; letter-spacing: 1px; color:#10366a; font-size:18px; text-align: left; margin:0 auto; font-weight: bold; display:inline-block; padding-left: 35px } .tab-contents h4:before { content: ""; position: relative; top:15px; width:25px; height: 1px; display: block; margin-right: 5px; margin-top: 2px; background-color:#10366a;; transition: all 0.3s; left: -25px } .tab-contents p{ padding:5px 10px; line-height:2em; letter-spacing: 0.5px; color:#000; font-size: 16px; text-align:left; margin:0 auto; } .tab-contents ul { margin-left:25px; padding: 0 } .tab-contents ul li{ padding:10px 10px; list-style:decimal } /*------------ mobile select -----------------*/ .tab-select-outer { display: none; } @media screen and (max-width:1024px) { .tab-button-outer { display:none } .tab-select-outer{ display:block; margin-left:0; z-index:2; background-image: linear-gradient(to right, #1da4aa, #7bbd58); padding:15px} .tab-select{ margin:auto; display:block; width:300px; border:none; line-height:2; height:32px; font-size:1em; cursor:pointer; } .tab-select option{ cursor:pointer; font-size:16px; display:block; padding:15px; line-height:2; text-align: center; border: none; letter-spacing: .05em} } /* ------------------------------------------------- close規則 ----------------------------------------------------------------- */ .pc-none{ display:none} .ipc-block{display:none!important} .sp-none{display:block} .ipad-none{display:block} .ssp-none{display:block} @media screen and (max-width:991px) { .ipad-none{display:none !important} .ipc-block{ display:block!important} } @media screen and (max-width:853px) { .mpad-none{display:none !important} } @media screen and (max-width:800px) { .pc-none{ display:block} .sp-none{display:none !important} } @media (max-width: 575px) { .ssp-none{display:none !important} } @media (min-width:800px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } } /*========================================== 字型與區塊 完全置中 ===========================================*/ .items_center { text-align: center !important; -ms-flex-align: center !important; align-items: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .align-center { display: block; text-align: center; margin-left: auto; margin-right: auto; } .mx-auto{margin: auto} .flex-column { -ms-flex-direction: column!important; flex-direction: column!important; } .overdown{overflow: hidden;} /*========================================== 網格 ===========================================*/ .flex { display: flex !important; } .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .contents { background-color: #FFF; max-width: 1200px; margin:0 auto; overflow: hidden; margin: 65px auto; padding:60px 0; z-index: 2 } /*---Home---*/ .full_inner { max-width: 100%; width: 100%; margin: 0 auto; position: relative; } .inner { margin: 0 auto; position: relative; /* overflow: hidden; */ } /*---內頁的距---*/ .area-web-service{ display: block; padding:90px 15px 15px 15px; } .area-web-company{ display:block; position: relative; padding-top:90px; padding-bottom: 30px; width: 100% } .bg_white { position: relative; width: 95%; margin: 0 auto; padding: 100px 0; max-width: 1500px; background: rgba(255,255,255,.9); box-shadow: 3px 7px 15px 2px rgb(0 0 0 ,0.2); box-shadow:3px 7px 15px 2px rgba(0,0,0,0.2); border:1px solid rgba(0, 0, 0, .1) } @media screen and (max-width:991px){ .bg_white { padding:60px 0;} } @media screen and (max-width:853px){ .bg_white { padding:35px 0; width: 100%; margin: 0 auto; max-width: 100%; } } /*---pager---*/ .bg_white .page_inner { width:90%; margin: 0 auto; } .companyBg { background-repeat: repeat, no-repeat; background-position: top center; background-size: auto, cover; max-height: 606px; /* height: 64vh; */ padding: 100px 0; z-index: 2; background-attachment: fixed; position: relative } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 空間 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } .container-full{ max-width:100%; width: 100%; min-height: auto; position: relative; margin: 0 auto; } .container-fluid { width: 100%; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } .row { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-right: -15px; margin-left: -15px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*='col-'] { padding-right: 0; padding-left: 0; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col { max-width: 100%; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .col-auto { width: auto; max-width: none; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .col-1 { max-width: 8.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -moz-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } .col-2 { max-width: 16.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -moz-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } .col-3 { max-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } .col-4 { max-width: 33.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -moz-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } .col-5 { max-width: 41.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -moz-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } .col-6 { max-width: 50%; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .col-7 { max-width: 58.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -moz-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } .col-8 { max-width: 66.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -moz-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } .col-9 { max-width: 75%; -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -moz-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } .col-10 { max-width: 83.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -moz-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } .col-11 { max-width: 91.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -moz-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } .col-12 { max-width: 100%; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -moz-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -moz-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -moz-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -moz-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -moz-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-1 { margin-left: 8.33333%; } .offset-2 { margin-left: 16.66667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333%; } .offset-5 { margin-left: 41.66667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333%; } .offset-8 { margin-left: 66.66667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333%; } .offset-11 { margin-left: 91.66667%; } @media (min-width: 576px) { .col-sm { max-width: 100%; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .col-sm-auto { width: auto; max-width: none; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .col-sm-1 { max-width: 8.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -moz-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } .col-sm-2 { max-width: 16.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -moz-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } .col-sm-3 { max-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } .col-sm-4 { max-width: 33.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -moz-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } .col-sm-5 { max-width: 41.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -moz-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } .col-sm-6 { max-width: 50%; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .col-sm-7 { max-width: 58.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -moz-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } .col-sm-8 { max-width: 66.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -moz-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } .col-sm-9 { max-width: 75%; -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -moz-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } .col-sm-10 { max-width: 83.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -moz-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } .col-sm-11 { max-width: 91.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -moz-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } .col-sm-12 { max-width: 100%; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .order-sm-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-sm-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -moz-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-sm-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-sm-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-sm-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-sm-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-sm-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-sm-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-sm-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -moz-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-sm-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-sm-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-sm-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -moz-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-sm-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-sm-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -moz-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-sm-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -moz-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.33333%; } .offset-sm-2 { margin-left: 16.66667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333%; } .offset-sm-5 { margin-left: 41.66667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333%; } .offset-sm-8 { margin-left: 66.66667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333%; } .offset-sm-11 { margin-left: 91.66667%; } } @media (min-width: 768px) { .col-md { max-width: 100%; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .col-md-auto { width: auto; max-width: none; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .col-md-1 { max-width: 8.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -moz-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } .col-md-2 { max-width: 16.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -moz-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } .col-md-3 { max-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } .col-md-4 { max-width: 33.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -moz-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } .col-md-5 { max-width: 41.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -moz-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } .col-md-6 { max-width: 50%; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .col-md-7 { max-width: 58.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -moz-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } .col-md-8 { max-width: 66.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -moz-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } .col-md-9 { max-width: 75%; -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -moz-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } .col-md-10 { max-width: 83.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -moz-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } .col-md-11 { max-width: 91.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -moz-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } .col-md-12 { max-width: 100%; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .order-md-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-md-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -moz-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-md-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-md-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-md-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-md-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-md-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-md-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-md-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -moz-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-md-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-md-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-md-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -moz-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-md-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-md-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -moz-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-md-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -moz-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.33333%; } .offset-md-2 { margin-left: 16.66667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333%; } .offset-md-5 { margin-left: 41.66667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333%; } .offset-md-8 { margin-left: 66.66667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333%; } .offset-md-11 { margin-left: 91.66667%; } } @media (min-width: 992px) { .col-lg { max-width: 100%; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .col-lg-auto { width: auto; max-width: none; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .col-lg-1 { max-width: 8.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -moz-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } .col-lg-2 { max-width: 16.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -moz-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } .col-lg-3 { max-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } .col-lg-4 { max-width: 33.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -moz-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } .col-lg-5 { max-width: 41.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -moz-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } .col-lg-6 { max-width: 50%; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .col-lg-7 { max-width: 58.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -moz-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } .col-lg-8 { max-width: 66.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -moz-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } .col-lg-9 { max-width: 75%; -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -moz-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } .col-lg-10 { max-width: 83.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -moz-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } .col-lg-11 { max-width: 91.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -moz-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } .col-lg-12 { max-width: 100%; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .order-lg-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-lg-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -moz-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-lg-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-lg-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-lg-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-lg-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-lg-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-lg-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-lg-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -moz-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-lg-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-lg-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-lg-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -moz-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-lg-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-lg-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -moz-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-lg-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -moz-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333%; } .offset-lg-2 { margin-left: 16.66667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333%; } .offset-lg-5 { margin-left: 41.66667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333%; } .offset-lg-8 { margin-left: 66.66667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333%; } .offset-lg-11 { margin-left: 91.66667%; } } @media (min-width: 1200px) { .col-xl { max-width: 100%; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .col-xl-auto { width: auto; max-width: none; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .col-xl-1 { max-width: 8.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -moz-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } .col-xl-2 { max-width: 16.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -moz-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } .col-xl-3 { max-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } .col-xl-4 { max-width: 33.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -moz-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } .col-xl-5 { max-width: 41.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -moz-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } .col-xl-6 { max-width: 50%; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .col-xl-7 { max-width: 58.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -moz-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } .col-xl-8 { max-width: 66.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -moz-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } .col-xl-9 { max-width: 75%; -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -moz-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } .col-xl-10 { max-width: 83.33333%; -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -moz-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } .col-xl-11 { max-width: 91.66667%; -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -moz-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } .col-xl-12 { max-width: 100%; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .order-xl-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-xl-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -moz-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-xl-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .order-xl-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-xl-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-xl-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-xl-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-xl-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-xl-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -moz-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-xl-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-xl-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-xl-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -moz-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-xl-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .order-xl-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -moz-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .order-xl-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -moz-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.33333%; } .offset-xl-2 { margin-left: 16.66667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333%; } .offset-xl-5 { margin-left: 41.66667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333%; } .offset-xl-8 { margin-left: 66.66667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333%; } .offset-xl-11 { margin-left: 91.66667%; } } @charset 'utf-8'; /* CSS Document */ body { margin:0; position: relative; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; } header, footer, nav{ display: block; } /*▼ header ▼*/ header a:hover { text-decoration: none; } /*========================================== header區域的樣式 ========================================================*/ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } .top-header-area { width: 100%; height: 50px; background-color: #ffffff; border-bottom: 1px solid #dddee9; } .top-header-area .top-social-info a:last-child { margin-right: 0; } .top-header-area .top-social-info a:hover, .header-area .top-header-area .top-social-info a:focus, .header-area .top-header-area .top-social-info a.active { color: #40ba37; } .header { padding-top: 0; position: fixed; width: 100%; z-index: 100; background: rgba(255, 255, 255, 0.9); border-bottom: 1px #f1f1f1 solid; margin: 0; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); display: block; } .header .header-inner { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .menu{display:flex; position: relative;} .menu ul { margin: 0; padding: 0; list-style-type: none; list-style: none; margin-bottom: 0; padding-left: 0; } .menu ul li { display: inline-block; padding: 0 20px; } .header nav.menu ul li:first-child { padding-left: 0; } .header nav.menu ul li:last-child { padding-right: 0; } .header nav.menu ul li a { color: #000; font-size: 17px; line-height: 24px; letter-spacing: 0.1px; font-weight: 700; text-transform: uppercase; padding: 45px 0; display: inline-block; font-family: "Work Sans",Arial,Verdana,"Microsoft JhengHei",PMingLiU,sans-serif; } .header.transparent-header nav.menu ul li a { color: #0e9544; } .header nav.menu ul li:hover > a { color:#0099FF; } .header .header-top-area { border-bottom: 1px solid #dddddd; padding: 13px 0; } .header .header-iconline ul { padding-left: 0; margin-bottom: 0; list-style: none; font-size: 0; } .header .header-iconline ul li { display: inline-block; vertical-align: middle; padding: 0 20px; font-size:15px; line-height: 24px; color: #555; } .header .header-iconline ul li:first-child { padding-left: 0; } .header .header-iconline ul li:last-child { padding-right: 0; } .header .header-iconline ul li i { padding-right: 13px; color: #0e9544; line-height: 24px; font-size: 16px; display: inline-block; vertical-align: middle; } .header .header-iconline ul li a { display: inline-block; vertical-align: middle; color: #555; } .header .header-iconline ul li a:hover { color: #0e9544; } .header .trigger-menu-icon { width: 35px; display: inline-block; background: transparent; border: none; outline: none; padding: 0; margin: 0; vertical-align: middle; height: 35px; line-height: 35px; overflow: hidden; } .header .trigger-menu-icon span { display: block; height: 1px; background: #fff; margin: 8px 0; -webkit-transition: all 0.5s cubic-bezier(0.6, 0.02, 0.35, 0.99) 0s; -moz-transition: all 0.5s cubic-bezier(0.6, 0.02, 0.35, 0.99) 0s; -ms-transition: all 0.5s cubic-bezier(0.6, 0.02, 0.35, 0.99) 0s; -o-transition: all 0.5s cubic-bezier(0.6, 0.02, 0.35, 0.99) 0s; transition: all 0.5s cubic-bezier(0.6, 0.02, 0.35, 0.99) 0s; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .header .trigger-menu-icon.is-active span { visibility: hidden; opacity: 0; } .header .trigger-menu-icon.is-active span:first-child { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); visibility: visible; opacity: 1; margin-bottom: -9px; } .header .trigger-menu-icon.is-active span:last-child { visibility: visible; opacity: 1; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); margin-top: -8px; } /*--------------- logo ----------*/ .logo{ display: block; position:relative; top: -15px; /* top: 20px; */ left: 25px; z-index: 2; height: 35px;} .header .logo a { display: inline-block; position: relative } /*------------------ Home mobile logo ------------------------*/ .header .mlogo { display: none; } @media screen and (max-width:853px) { .mlogo { display: block!important; position: absolute; top: 10px; left: 5px; z-index: 2; height: 30px; } } @media only screen and (max-width:1152px) { .header{height:120px} .header .logo {top: 10px;position: absolute} .header nav.menu ul li a{padding: 15px 0;} .menu{top:70px; margin: auto; text-align: center;} } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header nav.menu ul li { padding: 0 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .mobile-menu-wrapper a.cr-btn { position: absolute; top: 14px; right: 50px; z-index: 9999; } } @media only screen and (max-width: 767px) { .mobile-menu-wrapper .mobile-menu { text-align: center; } .mobile-menu-wrapper .mobile-menu a.cr-btn { margin-top: 20px; margin-bottom: 20px; } .header .header-iconline { text-align: center !important; } .header .header-iconline ul li { padding: 0 30px; } .header .header-iconline ul li:first-child { padding-left: 30px; } .header .header-iconline ul li:last-child { padding-right: 30px; } .header .social-icons { text-align: center !important; } } .fixed-header { position: absolute; left: 0; top: 0; width: 100%; z-index: 9999; } .mobile-menu-wrapper { height: 80px; background: #f4f5fb; width: 100%; } .is-sticky .mobile-menu-wrapper { width: 100%; } .is-sticky .mobile-menu-wrapper .mobile-menu a.cr-btn { display: none; } /* Sticky Header */ .sticky-header:not(.header-sidemenu).is-sticky { position: fixed; top: 0; left: 0; width: 100%; background: #ffffff; -webkit-animation: slideInDown 0.7s ease-in-out 0s 1 both; -moz-animation: slideInDown 0.7s ease-in-out 0s 1 both; -ms-animation: slideInDown 0.7s ease-in-out 0s 1 both; -o-animation: slideInDown 0.7s ease-in-out 0s 1 both; animation: slideInDown 0.7s ease-in-out 0s 1 both; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); z-index: 1000; } .sticky-header:not(.header-sidemenu).is-sticky nav.menu > ul > li > a { padding: 23px 0; } /*----------------------- 1st 下拉 ----------------*/ /* Dropdown Styles */ .header nav.menu li.cr-dropdown { position: relative; } /* Dropdown Styles */ .header nav.menu li.cr-dropdown { position: relative; } .header nav.menu li.cr-dropdown ul { position: absolute; left: 0; top: 100%; width: 250px; background: #f4f5fb; padding: 20px 25px; visibility: hidden; opacity: 0; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: -9; } .header nav.menu li.cr-dropdown ul li { padding: 0; display: block; position: relative; } .header nav.menu li.cr-dropdown ul li a { display: block; padding: 6px 0; color: #222; text-transform: capitalize; font-weight: 400; font-size: 15px; text-align: left } .header nav.menu li.cr-dropdown ul li:hover > a { color:#0099FF; padding-left: 0; } /*--------------------- 1層下拉 aroow -----------------------*/ .header nav.menu li.cr-dropdown > a::after { content: ""; font-family: 'Icofont'; margin-left: 8px; font-size: 14px; font-weight: 400; display: inline-block; position: absolute; top: 40%; /* left: 20px; */ width: 10px; height: 10px; border: none; border-top: 1px solid #666; border-left: 1px solid #666; transform: rotate(225.00deg); } @media only screen and (max-width:1152px) { .header nav.menu li.cr-dropdown > a::after { top: 35%;} } .header nav.menu li.cr-dropdown ul li.cr-sub-dropdown:hover > ul { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .header nav.menu li.cr-dropdown ul li ul { visibility: hidden; opacity: 0; left: calc(100% + 26px); top: -20px; z-index: -999; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .header nav.menu li.cr-dropdown:hover > ul { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); z-index: 99; } .header nav.menu li.cr-dropdown.last-element ul { right: 0; left: auto; } .header nav.menu li.cr-dropdown.last-element ul li ul { right: calc(100% + 26px); left: auto; } /*--------------------- 1層下拉 往右 aroow -----------------------*/ .header nav.menu li.cr-dropdown ul li.cr-sub-dropdown > a:after { content: ""; line-height: 45px; font-family: 'Icofont'; float: right; margin-right: 5px; width: 10px; height: 10px; border: none; border-top: 1px solid #666; border-left: 1px solid #666; transform: rotate(140.00deg); } .header nav.menu li.cr-dropdown:hover > ul { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); z-index: 99; } .header nav.menu li.cr-dropdown.last-element ul { right: 0; left: auto; } .header nav.menu li.cr-dropdown.last-element ul li ul { right: calc(100% + 26px); left: auto; } /* Megamenu Styles */ .header nav.menu li.cr-megamenu { position: inherit; } .header nav.menu .cr-megamenu-single ul li { padding: 0; display: block; position: relative; } .header nav.menu .cr-megamenu-single ul li a { display: block; padding: 6px 0; color: #ffffff; text-transform: capitalize; font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; font-weight: 400; } .header.megamenu-fullwidth div[class^="col-"] { position: inherit !important; } .header.megamenu-container .header-inner { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header { position: relative; padding-top: 0; } } @media only screen and (max-width: 767px) { .header { position: relative; padding-top: 0; } } .mobile-menu-wrapper { background: #f4f5fb; width: 100%; } .is-sticky .mobile-menu-wrapper { width: 100%; } .is-sticky .mobile-menu-wrapper .mobile-menu a.cr-btn { display: none; } /* ------------------ Sticky Header --------------------*/ .sticky-header:not(.header-sidemenu).is-sticky { position: fixed; top: 0; left: 0; width: 100%; background: #ffffff; -webkit-animation: slideInDown 0.7s ease-in-out 0s 1 both; -moz-animation: slideInDown 0.7s ease-in-out 0s 1 both; -ms-animation: slideInDown 0.7s ease-in-out 0s 1 both; -o-animation: slideInDown 0.7s ease-in-out 0s 1 both; animation: slideInDown 0.7s ease-in-out 0s 1 both; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); z-index: 1000; } .sticky-header:not(.header-sidemenu).is-sticky nav.menu > ul > li > a { padding: 20px 0; } /* Megamenu Styles */ .header nav.menu li.cr-megamenu { position: inherit; } /*-------------- mega menu bg ------------------*/ .header nav.menu .cr-megamenu-wrap { position: absolute; left: -30px; top: 100%; width: 150%; max-width: 150%; background: #f4f5fb; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; visibility: hidden; overflow: visible; opacity: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; text-align: justify; overflow: visible; -webkit-box-align: center; height: auto; text-align: justify; list-style: none; z-index: 9999; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; box-shadow: 0 1px 1px 1px rgba(125, 125, 125, 0.3); -ms-flex-pack: justify; } .header nav.menu li.cr-megamenu:hover .cr-megamenu-wrap { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); opacity: 1; z-index: 999; -webkit-transition: all .5s cubic-bezier(.215,.61,.355,1); -moz-transition: all .5s cubic-bezier(.215,.61,.355,1); -o-transition: all .5s cubic-bezier(.215,.61,.355,1); transition: all .5s cubic-bezier(.215,.61,.355,1); } @media only screen and (min-width:1441px) and (max-width:1600px) { .menu .cr-megamenu-wrap { left: auto; right: -36px; width: 150% !important; max-width: 150% !important;} } @media only screen and (min-width:1200px) and (max-width:1440px) { .menu .cr-megamenu-wrap { left: -36px !important; width: 139% !important; max-width: 139% !important; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .menu .cr-megamenu-wrap { width: 130%; width: 130% } } @media only screen and (max-width:1152px) { .menu .cr-megamenu-wrap {top: 90%!important; left: -105px !important;} .header nav.menu li.cr-megamenu > a::after { margin-left: 15px;} .header nav.menu li.cr-dropdown ul {top:90%!important;} } @media only screen and (min-width: 912px) and (max-width:1023px) { .menu .cr-megamenu-wrap {top: 88%!important; left: -145px !important;} .header nav.menu li.cr-dropdown ul {top:88%!important;width: 225px; padding: 20px 15px;} } @media only screen and (min-width: 854px) and (max-width:911px) { .menu .cr-megamenu-wrap { top: 89%!important; width: 130%!important; max-width: 130%!important; left: -96px !important; } .header nav.menu li.cr-dropdown ul {top:88%!important;width:170px;padding: 15px 15px; left: -20px} } /*------------------------ 子選單下拉 -----------------------*/ .header nav.menu .cr-megamenu-single { padding: 15px; border-right: 1px solid #f2f4f8; max-width: 100%; width: 100%; display: block; z-index: 888; top:0; left: 0; } .header nav.menu .cr-megamenu-single ul{ display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; max-width: 100%; padding:0px; margin: 0; flex: 0 0 100%; } /*--------mega各欄標準----*/ .header nav.menu .cr-megamenu-single ul li { padding: 0; display: block !important; position: relative; clear: both !important; -ms-flex-positive: 0; flex-grow: 0; } .header nav.menu .cr-megamenu-single ul li a { display: block!important; padding: 6px 0; color: #222; font-size: 15px; text-transform: capitalize; font-weight: 400; } .header nav.menu .cr-megamenu-single ul li a:hover { color: #0099FF; } .header nav.menu .cr-megamenu-single:last-child { border-right: 0; } .header nav.menu .cr-megamenu-single > h6 { color: #333; font-size: 17px; font-weight: 700; position: relative; text-transform: uppercase; letter-spacing: 1px; } .header nav.menu .cr-megamenu-single > h6 a{ color: #333; font-size: 17px; padding:0 0 10px 0!important; } .header nav.menu .cr-megamenu-single > h6 a:hover{ color: #0099FF; text-decoration: none } .header nav.menu .cr-megamenu-single > h6:after { content: ""; height: 1px; background: #ddd; width: 100%; left: 0; bottom: 0; position: absolute; } /*---------- mega arrow --------------*/ .header nav.menu li.cr-megamenu > a::after { content: ""; font-family: 'Icofont'; margin-left: 10px; font-size: 14px; font-weight: 400; display: inline-block; position: absolute; top:40%; width: 10px; height: 10px; border: none; border-top: 1px solid #666; border-left: 1px solid #666; transform: rotate(225.00deg); z-index: 9999 } @media only screen and (max-width:1152px) { .header nav.menu li.cr-megamenu > a::after {top:35%;} } .header nav.menu li.cr-megamenu:hover .cr-megamenu-wrap { visibility: visible; opacity: 1; z-index: 999; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .header.megamenu-fullwidth div[class^="col-"] { position: inherit !important; } .header.megamenu-container .header-inner { position: relative; } @media only screen and (max-width:853px) { .menu { display: none; } } @media only screen and (max-width: 767px) { .cr-megamenu-wrap { display: none; } } /*! ####################################################################### Menu 手機 ####################################################################### */ .cr-sub-dropdown { float: left; width: 100%; position: relative; padding: 0; min-height: 66px; z-index: 999; } /*------------------------- 聯絡咨詢表單 ------------------*/ .Mobileform{ width: 100%; z-index: 2; clear: both; position: relative; display: block; padding: 0; overflow:unset } .Mobileform ul{ display: flex; justify-content: space-between; width: 100%; list-style: none; list-style-type: none; margin: 0; padding: 0; } .Mobileform ul li { display: block; color: #444444; font-weight: bold; padding:15px; border-top: none; border-bottom: none; margin: 0 0%; font-size:17px } .Mobileform ul li a { padding:15px; display:block; font-size:17px; position: relative; color: #444444; font-weight: bold; font-weight: 500; text-transform: capitalize; letter-spacing: 0.5px; font-size: 16px; position: relative; } .Mobileform ul li a:hover { color:#0099FF; } .Mobileform ul li span { padding: 10px; float: left; letter-spacing: 0; margin: 0 0 0; font-weight: normal; } .Mobileform ul li span img { max-width: 100px; height: auto; border: none } .Mobileform ul li p { margin:0px auto 0 auto; font-weight: normal; float: left; position:relative; margin: 30px auto 0 auto; } .Mobileform ul li p:hover { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } .Mobileform ul li p:after { position:absolute; display:inline-block; top: 6px; left: auto; right: -30px; content: ""; vertical-align: middle; width: 8px; height: 8px; border-top: 1.5px solid #6e6e6e; border-right: 1.5px solid #6e6e6e; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /*------------------------- 聯絡我們 ------------------*/ .cr-btn, a.cr-btn, button.cr-btn { display: inline-block; height: 50px; color: #fff; background:#10366a; font-weight: 500; text-transform: capitalize; letter-spacing: 0.5px; position: relative; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; border: none; outline: none; overflow: hidden; vertical-align: middle; height: 40px; line-height: 40px; font-size: 14px; -webkit-transform: translateY(0) translateZ(0); -moz-transform: translateY(0) translateZ(0); -ms-transform: translateY(0) translateZ(0); -o-transform: translateY(0) translateZ(0); transform: translateY(0) translateZ(0); } .cr-btn span { bottom: 5px; position: relative; display: block; } .cr-btn:hover, a.cr-btn:hover, button.cr-btn:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } .cr-btn:hover b, a.cr-btn:hover b, button.cr-btn:hover b { height: 400px; width: 400px; } .cr-btn:active, a.cr-btn:active, button.cr-btn:active { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .cr-btn.cr-btn-sm, a.cr-btn.cr-btn-sm, button.cr-btn.cr-btn-sm { height: 40px; font-size: 14px; padding: 5px 15px; } .cr-btn.cr-btn-lg, a.cr-btn.cr-btn-lg, button.cr-btn.cr-btn-lg { height: 56px; font-size: 18px; padding: 12px 15px; } .cr-btn.cr-btn-white, a.cr-btn.cr-btn-white, button.cr-btn.cr-btn-white { color: #3366cc; background: #fff; } .cr-btn.cr-btn-white b, a.cr-btn.cr-btn-white b, button.cr-btn.cr-btn-white b { background: #0e9544; } .cr-btn.cr-btn-white:hover, a.cr-btn.cr-btn-white:hover, button.cr-btn.cr-btn-white:hover { color: #ffffff; } .cr-btn.cr-btn-dark, a.cr-btn.cr-btn-dark, button.cr-btn.cr-btn-dark { color: #ffffff; background: #333333; } .cr-btn.cr-btn-dark b, a.cr-btn.cr-btn-dark b, button.cr-btn.cr-btn-dark b { background: rgab(255, 255, 255, 0.1); } .cr-btn.cr-btn-minimal, a.cr-btn.cr-btn-minimal, button.cr-btn.cr-btn-minimal { color: #333333; background: #fff; } .cr-btn.cr-btn-minimal b, a.cr-btn.cr-btn-minimal b, button.cr-btn.cr-btn-minimal b { background: #333333; } .cr-btn.cr-btn-minimal:hover, a.cr-btn.cr-btn-minimal:hover, button.cr-btn.cr-btn-minimal:hover { color: #ffffff; } .cr-btn.cr-btn-transparent, a.cr-btn.cr-btn-transparent, button.cr-btn.cr-btn-transparent { background: transparent; border: 1px solid #fff; -webkit-transition: all 0.6s ease-in-out 0s, border-color 0.4s ease-in-out 0.2s; -moz-transition: all 0.6s ease-in-out 0s, border-color 0.4s ease-in-out 0.2s; -ms-transition: all 0.6s ease-in-out 0s, border-color 0.4s ease-in-out 0.2s; -o-transition: all 0.6s ease-in-out 0s, border-color 0.4s ease-in-out 0.2s; transition: all 0.6s ease-in-out 0s, border-color 0.4s ease-in-out 0.2s; } .cr-btn.cr-btn-transparent b, a.cr-btn.cr-btn-transparent b, button.cr-btn.cr-btn-transparent b { background: #0e9544; } .cr-btn.cr-btn-transparent:hover, a.cr-btn.cr-btn-transparent:hover, button.cr-btn.cr-btn-transparent:hover { border-color: #0e9544; } .cr-btn.cr-btn-round, a.cr-btn.cr-btn-round, button.cr-btn.cr-btn-round { border-radius: 100px; overflow: hidden; } @media only screen and (max-width:1152px) { .cr-btn{position: absolute!important;right: 5px;top:25px} } .mobileNav{ display: none } /*--------------------------------- 手機選單 ------------------------------------------------- */ @media (max-width:853px) { .mobileNav{ display:block } #header_menu header{ height:90px; margin-top: 0; top: 0; position: fixed } header nav { display: block; position: relative; right: 5px; top: 15px } .toggle { display: inline-block; transition: all .4s; box-sizing: border-box; position: absolute; right: 10px; cursor: pointer; background-color: #10366a; z-index: 1000 } .toggle:hover{ background-color: #304565!important } .menuOpen{ overflow: hidden; height: 100%; } .toggleOpen header{ position: fixed; } header nav > ul > li.contact { width: 100%; font-weight: normal; font-size: 16px; } /*-----spbtn-----*/ header .toggle p{ top: 10px; position: relative; top: 30%; width: 30px; height: 23px; margin: 0 auto; display: block; } header .toggle span { position: absolute; left: 0; width: 100%; height: 3px; background-color: #fff; } header .toggle span:nth-of-type(1) { top: 0; } header .toggle span:nth-of-type(2) { top: 10px; } header .toggle span:nth-of-type(3) { bottom: 0; } header .toggle.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); } header .toggle.active span:nth-of-type(2) { opacity: 0; } header .toggle.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg); } header .accordion_icon, .accordion_icon span { display: inline-block; transition: all .4s; box-sizing: border-box; } header .accordion_icon { position: absolute; top: 14px; right: 15px; width: 20px; height: 20px; z-index: -1; } /*--3st---*/ header .accordion_icon span { position: absolute; width: 100%; height: 2px; background-color: #6E6E6E; border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; } /*--3st menu---*/ header nav > ul > li > div { background: #0099FF;cursor: pointer; } header nav > ul > li li > a { padding:15px; display: block; border-bottom: 1px solid #ddd; box-sizing: border-box; color: #fff; text-align: left; } header .accordion_icon span:nth-of-type(1) { top: 10px; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } header .accordion_icon span:nth-of-type(2) { top: 10px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } header .is-current .accordion_icon span:nth-of-type(1) { display: none; } header .is-current .accordion_icon span:nth-of-type(2) { top: 10px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } header > nav > ul.isOpen { transform: translateX(0); background:#f4f5fb; overflow-y: scroll; max-height: 93vh; top:90px } header > nav > ul { position: fixed; z-index: 200; top: 50px; right: 0; width: 93%; transform: translateX(100%); transition: all .3s; display: block; font-size: 16px; } header nav > ul > li { width: 100%; position: relative; z-index: 2; display: block; clear: both; } header nav > ul > li > a { display: block; width: 100%; padding: 13px 0 13px 25px; color: #222; text-align: left; border-bottom: 1px solid #ddd; } header nav > ul > li > a:hover{ color:#0099FF; } } /*▼--------------------------- footer ---------------------------▼*/ .Rokkitt { font-family: 微軟正黑體, "sans-serif"; font-weight: bold; letter-spacing:0.1em } footer { font-family: "Amiri", "微軟正黑體", serif; position: relative; background: #ffffff; } footer .footer_contact { background:#10366a; color: #ffffff; font-size: 18px; text-align: center; } footer .footer_contact li { width: 100%; } footer .footer_contact li a { display: block; padding: 30px 5%; /* width: 90%; */ margin: 0 auto; font-family: "Amiri", "微軟正黑體", serif; color: #ffffff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; text-decoration: none; height: 100%; } footer .footer_contact li:nth-child(2) a { cursor: context-menu; } footer .footer_contact li:nth-child(odd) a:hover { text-decoration: none; background: #3d4c63; } footer .footer_contact li span { display: block; font-size:28px; padding-bottom: 10px; font-family: "Amiri", "微軟正黑體", serif; font-weight: bold; letter-spacing: .1em; color: #ececec; text-transform: uppercase; outline: 0; vertical-align: baseline; font-style: normal; } footer .footer_contact li:first-child span img { width: 38px; height: auto; vertical-align: middle; } footer .footer_contact li span img { width: 21px; height: auto; vertical-align: baseline; display: initial; } footer .footer_contact li:last-child span img { width: 32px; height: auto; vertical-align: middle; } footer .access .logo img { max-width:100%; height: auto; margin: 0 auto 20px; } footer .access p { font-size: 14px; color: #222222; line-height: 1.7; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; font-weight: bold; } footer .access p span.co_name { display: block; margin-bottom: 10px; font-weight: bold; text-align: center; color: #10366a; } footer .access p span.co_name a{ color: #10366a; text-decoration: none } footer .access p span.co_name a:hover{ color:#0099FF;} footer .copyright { background: #222222; font-size: 16px; text-align: left; color: #999999; height:90px; line-height:90px; max-width:100%; font-family: Rokkitt, "sans-serif"; font-weight: bold; position: relative; } footer .copyright span { /* width: 95%; */ width: 83.3%; display: block; /* margin: 0 0 0 auto; */ margin: 0 auto; } footer .linkBlock .fnav li a { text-decoration: none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; color: inherit; } @-webkit-keyframes moveScrollPointer_pagetop { 0% { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes moveScrollPointer_pagetop { 0% { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } footer .footer_contact ul { display: flex; justify-content: space-between; margin: 0 auto; } footer .footer_contact ul li+li { border-left: 1px solid #fff; } footer .footerInner { display: flex; justify-content: space-between; max-width: 85%; width: 85%; /* max-width: 1500px; */ margin: 0 auto; padding: 50px 0 15px; } footer .access { padding-right:5%; } footer .linkBlock { width: 70%; } footer .linkBlock a { color:#222; text-decoration: none; font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; } footer .linkBlock a:hover { color:#3b5ca9!important; } footer .linkBlock .fnav>div { display: inline-block; vertical-align: top; min-width: 182px; width: 24%; } footer .linkBlock div { padding-right: 5%; padding-bottom: 2%; } footer .linkBlock div:last-child { padding-right: 0; } footer .linkBlock .fnav p { font-size: 15px; color: #222222; line-height: 2.4; font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif; font-weight: bold; } footer .linkBlock .fnav h3:last-child { border: none; } footer .linkBlock .fnav h3 { font-size: 13px; color: #666666; line-height: 2.1; font-weight: normal; } .lineBox{display:none} .lineBoxpc{ display: block;} .lineBox_txt{display: inline-block; padding:3px 3px 0 3px !important; top: 5px;position: relative;} @media screen and (max-width:1280px){ footer .footerInner { max-width: 95%; width: 95%; } } @media screen and (max-width:1024px){ footer .footerInner { display: flex; justify-content: space-between; width: 96%; max-width: 96%; margin: 0 auto; padding: 30px 0 15px; } footer .linkBlock { width: 77%;} footer .access { padding-right: 3%; } } @media screen and (max-width:767px){ footer .footer_contact ul li+li {border-left:none;} footer .footer_contact ul {display: block} footer .linkBlock { display: none} .lineBox{ display:block!important; margin:auto; text-align: center; font-size: 14px; color: #222222; line-height: 1.7; font-family: "Source Sans Pro", "微軟正黑體", sans-serif; font-weight: bold;} .lineBox_add{display: inline-block;} .lineBox_add a{ display: inline-block; padding-bottom: 10px; padding-left: 5px; top:0px; position: relative; color: #222 } .lineBox_add a:hover{ color:#1874bb} } /*--------------TOP BTN-------------*/ .pagetop__scroll { bottom: 90px; } .pagetop__scroll { width: 1px; height: 60px; position: fixed; right: 10%; z-index: 10; background-color: #83deff; } .pagetop__scroll-pointer:before { content: ''; display: block; width: 1px; height: 30px; border-radius: 50%; background-color:#3b5ca9; } .pagetop__scroll a { display: block; } .pagetop__scroll a:before { content: ""; width: 100px; height: 100px; position: relative; top: 0; right: 50px; display: block; } .pagetop__scroll-pointer { width: 1px; height: 30px; position: absolute; top: 0; left: 0; z-index: 10; } .pagetop__scroll a:hover .pagetop__scroll-pointer { -webkit-animation-name: moveScrollPointer_pagetop; animation-name: moveScrollPointer_pagetop; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); } .pagetop__scroll-text { text-align: center; position: absolute; top: 80px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-family: Rokkitt, "sans-serif"; font-weight: bold; font-size:15px; color:#3d4c63; width:125px } @media screen and (max-width: 767px) { .fnav{display: none} footerr{max-width: 100%;width:100% } footer .footer_contact { font-size: 16px; } footer .footer_contact li+li { border-top: 1px solid #fff; } footer .footer_contact li a { padding: 30px 0; } footer .footer_contact li a:hover { opacity: .7; } /*footer .footer_contact li span{ display:block; font-size: 28px; padding-bottom: 10px; }*/ /*footer .footer_contact li:first-child span img{ width:38px; height:auto; vertical-align: middle; }*/ /*footer .footer_contact li span img{ width:21px; height:auto; vertical-align: baseline; }*/ /*footer .footer_contact li:last-child span img{ width:32px; height:auto; vertical-align: middle; }*/ footer .access { text-align: center; padding: 30px 0; text-align: center; padding: 30px 0; margin: 0 auto; max-width: 90%; } footer .access p span a { color: #222222; text-decoration: none; } footer .access p span a:hover { text-decoration: none; } footer .copyright { font-size: 12px; min-width: 100%; height: 60px; line-height: 60px; } footer .copyright span { width: 100%; text-align: center; } @-webkit-keyframes moveScrollPointer_pagetop { 0% { -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes moveScrollPointer_pagetop { 0% { -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .pagetop__scroll { bottom:110px; width: 1px; height: 30px; position: fixed; right: 60px; z-index: 10; background-color:#83deff;} .pagetop__scroll a { display: block; } .pagetop__scroll-pointer { width: 1px; height: 15px; position: absolute; top: 0; left: 0; z-index: 100; } .pagetop__scroll-pointer { -webkit-animation-name: moveScrollPointer_pagetop; animation-name: moveScrollPointer_pagetop; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); } .pagetop__scroll-pointer:before { content: ''; display: block; width: 1px; height: 15px; border-radius: 50%; background-color: #222222; } .pagetop__scroll-text { position: absolute; top: 35px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-family: Rokkitt, "sans-serif"; font-weight: bold; font-size: 11px; color:#3b5ca9; width: max-content; text-align: center; line-height: normal; } } #contents { overflow: hidden; /*width: 100% !important;*/ } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -ms-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important; } @media screen and (min-width: 766px) { .sns.pc { position: fixed; top: 0; left: 50px; z-index: 10; margin-top: 120px; display: none; } .sns.pc p+p { margin-top: 20px; } .sns.pc p:first-child a { display: inline-block; background: url(/files/img/fb_icon_on.png) no-repeat; background-size: cover; width: 22px; height: 21px; } .sns.pc p:nth-child(2) { display: inline-block; background: url(/files/img/tw_icon_on.png) no-repeat; background-size: cover; width: 22px; height: 21px; } .sns.pc p:nth-child(3) a { display: inline-block; background: url(/files/img/ig_icon_on.png) no-repeat; background-size: cover; width: 22px; height: 21px; } .sns.pc p a img { vertical-align: inherit; transition: opacity 0.5s; } .sns.pc p a:hover img { opacity: 0; } .mag { position: fixed; top: 0; right: 50px; z-index: 10; margin-top: 120px; display: none; } .mag img { width: 50px; height: auto; box-shadow: 3px 7px 15px 0px rgba(0, 0, 0, 0.2); } .mag:hover { top: 2px; right: 48px; transition-duration: 0.6s; } .mag:hover img { box-shadow: 2px 4px 15px 0px rgba(0, 0, 0, 0.25); } #service #contents { padding-bottom: 50px; } } @media screen and (max-width: 767px) { @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateX(0); } 100% { opacity: 1; -webkit-transform: translateX(-38px); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 1; -webkit-transform: translateX(-38px); -ms-transform: translateX(-38px); transform: translateX(-38px); } } .sns.fadeInDown { display: none !important; opacity: 0 !important; } .mag { position: fixed; top: 0; right: -38px; z-index: 10; margin-top: 120px; /*display: none;*/ } .mag img { width: 38px; height: auto; box-shadow: 3px 7px 15px 0px rgba(0, 0, 0, 0.2); } } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; } to { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(135deg) translate(0%, -83%); transform: rotate(135deg) translate(0%, -83%); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; } to { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(135deg) translate(0%, -83%); transform: rotate(135deg) translate(0%, -83%); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; } to { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin:right center; transform-origin:right center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; } to { -webkit-transform-origin:center center; transform-origin:center center; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @media screen and (max-width: 767px) { @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; } to { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(135deg); transform: rotate(135deg); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; } to { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(135deg); transform: rotate(135deg); opacity: 1; } } /*------------------ Home footer ------------------------*/ @media screen and (max-width: 767px) { body.lineBk { position: relative; } body.lineBk:before { content: ''; position: fixed; top: -20%; background: #D6000F; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; transition: 2s; -ms-transition: 2s; -webkit-transition: 2s; left: 40px; width: 200%; height: 70px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } body.lineBk.active:before { top: 1%; opacity: 1; } } @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-fast { -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .ftco-animated { -webkit-animation-duration: .5s; animation-duration: .5s; -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; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-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-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-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-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-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 { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-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-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-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-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-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; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { 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 { from { -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); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -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); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -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); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -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); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -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 { from, to { -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); } to { -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); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -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); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -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); } to { -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 { from { -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); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -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); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-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); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-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); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-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); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-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); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-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); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-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); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { 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); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { 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); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { 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); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { 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); } to { -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); } to { 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); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-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); } to { 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); } to { 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); } to { 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); } to { 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); } to { 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); } to { 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); } to { 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); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; visibility: hidden; -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); } to { opacity: 1; visibility: visible; -ms-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); } } @keyframes fadeIn { from { opacity: 0; visibility: hidden; -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); } to { opacity: 1; visibility: visible; -ms-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);*/ -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } to { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);*/ -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } to { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);*/ -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } to { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);*/ -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } to { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);*/ -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } to { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);*/ -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } to { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);*/ -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } to { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);*/ -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpMenu { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);*/ -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } } @keyframes fadeInUpMenu { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);*/ -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpMenu { -webkit-animation-name: fadeInUpMenu; animation-name: fadeInUpMenu; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } } @keyframes fadeOutDown { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -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; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -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; } to { -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 { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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); } to { -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 { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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); } to { -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 { from { -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; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -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; } to { -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-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -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; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -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; } to { -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-keyframes lightSpeedIn { from { -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; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -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; } to { -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 { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -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 { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -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 { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -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; } to { -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; } to { -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 { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { 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 { from { opacity: 1; } to { 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 { from { opacity: 1; } to { 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 { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { 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 { from { 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 { from { 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 { from { 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 { from { 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 { from { 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 { from { 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 { from { 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 { from { 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 { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { 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); } to { 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); } to { 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); } to { 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); } to { 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); } to { 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); } to { 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); } to { 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); } to { 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 { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } .worksArea { background: url("../images/bg-img/web-works.png") repeat top center; position: relative; padding-top: 60px; padding-bottom: 60px; margin-top:60px; max-width: 100%; width: 100%; overflow: hidden; } .worksWrap { max-width:90%; max-width: 1500px; width: 90%; margin: 0 auto; position: relative; display: block; /* background-color: rgb(255,255,255,0.8); background-color: rgba(255,255,255, 0.8);*/ padding: 30px 15px } .ul_works { display: flex; flex-wrap: wrap; justify-content: space-between; } .ul_works { display: flex; flex-wrap: wrap; justify-content: space-between; } .ul_works li { width: calc(100% / 3 - 2.6%); background: rgba(255,255,255,.9); box-shadow: 3px 7px 15px 0px rgba(0,0,0,0.2); position: relative; z-index: 1; } .ul_works li:nth-child(n + 4) { margin-top: 57px; } .box_text { padding: 20px 6% 80px; font-size: 18px; letter-spacing: .07rem; } .box_text .tit_list { margin: 0; font-size: 18px; font-weight: 700; } .box_text .tit_list:hover { color: #3b5ca9; } .box_text .date { position: absolute; bottom: 28px; } @media screen and (max-width: 767px){ .works_wrap { max-width: initial; width: 92%; } .ul_works { margin-top: 1%; } .ul_works li, .ul_works li:nth-child(n + 4) { width: 100%; margin-top: 9%; } .ul_works li:first-child { margin-top: 0; } .box_text { padding: 5% 6% 10%; font-size: 14px; } .box_text .date { position: static; margin: 14% 0 0; } } /* IMG WROKS /* ---------------------------------- */ .ul_works li .box_img { width: 100%; position: relative; } .ul_works li .box_img .inner::before { content: ''; display: block; padding-top: 57.5%; } .ul_works li .box_img .inner .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .ul_works li .box_img .img_content { width: 100%; height: 100%; background-size: cover; background-position: center top; transition: all .6s; } .ul_works li:hover .box_img .img_content { transform: scale(1.1); transition: all .6s; } /* ------------------------------------------------ */ /* 詳細 single /* ------------------------------------------------ */ .works.single .bg_white { padding: 80px 8.2% 100px; overflow: hidden; } .works.single .works_content .date { font-size: 18px; text-align: right; letter-spacing: .05rem; } .works.single .tit_content, .works.single .detail_works h4 { margin: 4px 0 0; font-size: 30px; font-weight: 700; color: #222; position: relative; font-family: Noto Sans Japanese, "sans-serif"; } .works.single .tit_content::before, .works.single .detail_works h4::before { content: ''; width: 60px; height: 3px; display: block; background: #d6000f; position: absolute; left: -90px; top: 22px; bottom: 0; /* margin: auto; */ } .works.single .content_head { margin: 21px auto 0; font-size: 18px; display: flex; justify-content: space-between; } .works.single .content_head .ul_clientname li + li { margin: 10px 0 0; } .works.single .content_head .ul_clientname span { width: 5.6rem; display: inline-block; font-weight: 700; } .works.single .content_head .ul_clientname li a { color: #d6000f; text-decoration: underline; } .works.single .content_head .ul_clientname li a:hover { text-decoration: none; } .works.single .txt_worksname { padding: 7px 0 0; font-weight: 700; } .works.single .img_design { margin: 58px auto 0; text-align: center; } .works.single .img_design img { max-width: 89%; } @media screen and (max-width: 1200px) { .works.single .content_head { display: block; } .works.single .txt_worksname { margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid #ddd; } } @media screen and (max-width: 767px) { .works.single .bg_white { padding: 7% 0 0; } .works.single .works_content .date { font-size: 16px; margin: 0 5% 0 0; } .works.single .tit_content, .works.single .detail_works h4 { margin: 2% 0 0; padding: 0 3% 0 13%; font-size: 22px; } .works.single .tit_content::before, .works.single .detail_works h4::before { width: 8vw; left: 0; top: 1rem; } .works.single .content_head { margin: 5% auto 0; font-size: 16px; } .works.single .content_head .ul_clientname { width: 88%; margin: 0 auto 0; } .works.single .content_head .ul_clientname li + li { margin: 3%px 0 0; } .works.single .content_head .ul_clientname span { width: 4.9rem; } .works.single .txt_worksname { margin: 7% auto 0; padding: 5% 6% 0; border-top: 1px solid #ccc; line-height: 1.7; } .works.single .img_design { margin: 9% auto 0; text-align: center; } .works.single .img_design img { max-width: 80%; } } /* -- 詳細サブ内容 -- */ .works.single .detail_works { margin: 50px auto 0; } .works.single .detail_works + .detail_works { margin: 70px auto 0; } .works.single .detail_works h4 { margin: 20px 0 0; padding: 0 0 16px 30px; font-size: 24px; border-bottom: 1px solid #ddd; } .works.single .detail_works h4::before { width: 20px; top: 19px; bottom: auto; left: 0; } .works.single .detail_works p { margin: 26px 0 0; font-size: 15px; line-height: 2; } .works.single .detail_works .mark { margin: 0; padding: 14px 21px 6px; font-size: 18px; font-weight: 700; color: #d6000f; border: 1px solid #d6000f; text-align: center; display: inline-block; line-height: 1; } .works.single .img_website { width: 100%; margin: 70px auto 0; text-align: center; } .works.single .img_website img { max-width: 100%; } @media screen and (max-width: 767px) { /* -- 詳細サブ内容 -- */ .works.single .detail_works { width: 89%; margin: 12% auto 0; } .works.single .detail_works + .detail_works { margin: 12% auto 0; } .works.single .detail { margin: 3% 0 0; padding: 0 0 4% 8%; font-size: 18px; line-height: 1.6; } .works.single .detail::before { width: 4vw; top: 0.7rem; left: 0; } .works.single .detail_works p { margin: 5% 0 0; font-size: 14px; line-height: 1.75; } .works.single .detail_works .mark { padding: 3% 5% 1.6%; font-size: 14px; display: inline-block; } .works.single .img_website { width: 89%; margin: 12% auto 0; } .works.single .img_website img { max-width: 100%; } } /* 詳細ページ関連エリア /* ---------------------------------- */ .works.single .bottom_content { margin: 90px auto 0; z-index: 1; position: relative; } .works.single .tit_bottomcontent { /* margin: 90px auto 0; */ font-size: 42px; text-align: center; position: relative; } .works.single .tit_bottomcontent::before { content: ''; width: 1px; height: 60px; display: block; background: #d6000f; position: absolute; left: 0; right: 0; top: -90px; margin: auto; } .works.single .tit_bottomcontent span { margin: 15px auto 0; font-family: Utsukushi, "sans-serif"; font-size: 15px; display: block; letter-spacing: .09rem; } .works.single .bottom_content .ul_works { max-width: 1500px; width: 83.3%; margin: 30px auto 0; } @media screen and (max-width: 767px) { .works.single .bottom_content { margin: 14% auto 0; } .works.single .tit_bottomcontent { font-size: 32px; } .works.single .tit_bottomcontent::before { content: none; } .works.single .pager_wrap { padding: 0 0 14%; position: relative; } .works.single .pager_wrap::after { content: ''; width: 1px; height: 11vw; display: block; background: #d6000f; position: absolute; left: 0; right: 0; margin: auto; bottom: -11vw; } .works.single .tit_bottomcontent span { margin: 3% auto 0; font-size: 11px; letter-spacing: .09rem; } .works.single .bottom_content .ul_works { max-width: 1500px; width: 91.5%; margin: 6.5% auto 0; } } .pager_wrap.casestady .wp-pagenavi3 { width: 83.3%; margin: 0 auto; } .box_text { padding: 20px 6% 80px; font-size: 18px; letter-spacing: .07rem; } .box_text .tit_list { margin: 0; font-size: 18px; font-weight: 700; color: #222 } .box_text .date { position: absolute; bottom: 28px; font-size: 15px; margin-top: 20px; display: block; color: #999999; font-family: Rokkitt, "sans-serif"; font-weight: bold; }