/* Minification failed. Returning unminified contents. (5,1): run-time error CSS1019: Unexpected token, found '@import' (5,9): run-time error CSS1019: Unexpected token, found 'url(https://fonts.googleapis.com/earlyaccess/notosanstc.css)' (760,30): run-time error CSS1030: Expected identifier, found ',' (760,42): run-time error CSS1031: Expected selector, found ')' (760,42): run-time error CSS1025: Expected comma or open brace, found ')' (11593,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '=' (11651,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11652,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (11663,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11664,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (18159,1): run-time error CSS1019: Unexpected token, found '@keyframes' (18160,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20364,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (20366,9): run-time error CSS1035: Expected colon, found ',' (20410,1): run-time error CSS1019: Unexpected token, found '@keyframes' (20412,9): run-time error CSS1035: Expected colon, found ',' (22125,1): run-time error CSS1019: Unexpected token, found '@import' (22125,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap&subset=chinese-traditional')' (25068,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (25069,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (25078,1): run-time error CSS1019: Unexpected token, found '@keyframes' (25079,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (25359,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (25360,10): run-time error CSS1035: Expected colon, found '{' (25371,1): run-time error CSS1019: Unexpected token, found '@keyframes' (25372,10): run-time error CSS1035: Expected colon, found '{' (30544,1): run-time error CSS1019: Unexpected token, found '}' (34133,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34134,8): run-time error CSS1035: Expected colon, found '{' (34147,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34148,8): run-time error CSS1035: Expected colon, found '{' (34162,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34163,8): run-time error CSS1035: Expected colon, found '{' (34193,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34194,7): run-time error CSS1035: Expected colon, found ',' (34221,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34222,7): run-time error CSS1035: Expected colon, found ',' (34256,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34257,7): run-time error CSS1035: Expected colon, found ',' (34266,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34267,7): run-time error CSS1035: Expected colon, found ',' (34283,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34284,8): run-time error CSS1035: Expected colon, found '{' (34300,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34301,8): run-time error CSS1035: Expected colon, found '{' (34322,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34323,8): run-time error CSS1035: Expected colon, found '{' (34359,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34360,8): run-time error CSS1035: Expected colon, found '{' (34401,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34402,7): run-time error CSS1035: Expected colon, found ',' (34418,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34419,7): run-time error CSS1035: Expected colon, found ',' (34440,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34441,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (34472,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34473,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (34511,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34512,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (34538,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34539,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (34572,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34573,8): run-time error CSS1035: Expected colon, found '{' (34599,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34600,8): run-time error CSS1035: Expected colon, found '{' (34633,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34634,8): run-time error CSS1035: Expected colon, found '{' (34670,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34671,8): run-time error CSS1035: Expected colon, found '{' (34712,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34713,7): run-time error CSS1035: Expected colon, found ',' (34754,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34755,7): run-time error CSS1035: Expected colon, found ',' (34803,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34804,7): run-time error CSS1035: Expected colon, found ',' (34843,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34844,7): run-time error CSS1035: Expected colon, found ',' (34888,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34889,7): run-time error CSS1035: Expected colon, found ',' (34922,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34923,7): run-time error CSS1035: Expected colon, found ',' (34961,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (34962,7): run-time error CSS1035: Expected colon, found ',' (34995,1): run-time error CSS1019: Unexpected token, found '@keyframes' (34996,7): run-time error CSS1035: Expected colon, found ',' (35034,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35035,7): run-time error CSS1035: Expected colon, found ',' (35068,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35069,7): run-time error CSS1035: Expected colon, found ',' (35107,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35108,7): run-time error CSS1035: Expected colon, found ',' (35141,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35142,7): run-time error CSS1035: Expected colon, found ',' (35180,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35181,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35199,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35200,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35223,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35224,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35242,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35243,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35266,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35267,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35280,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35281,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35299,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35300,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35313,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35314,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35332,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35333,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35351,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35352,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%' (35375,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35376,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35386,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35387,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35406,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35407,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35417,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35418,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35437,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35438,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35448,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35449,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35470,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35471,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35479,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35480,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35492,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35493,8): run-time error CSS1035: Expected colon, found '{' (35504,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35505,8): run-time error CSS1035: Expected colon, found '{' (35521,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35522,8): run-time error CSS1035: Expected colon, found '{' (35535,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35536,8): run-time error CSS1035: Expected colon, found '{' (35554,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35555,8): run-time error CSS1035: Expected colon, found '{' (35568,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35569,8): run-time error CSS1035: Expected colon, found '{' (35587,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35588,8): run-time error CSS1035: Expected colon, found '{' (35601,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35602,8): run-time error CSS1035: Expected colon, found '{' (35620,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35621,8): run-time error CSS1035: Expected colon, found '{' (35634,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35635,8): run-time error CSS1035: Expected colon, found '{' (35653,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35654,8): run-time error CSS1035: Expected colon, found '{' (35667,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35668,8): run-time error CSS1035: Expected colon, found '{' (35686,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35687,8): run-time error CSS1035: Expected colon, found '{' (35700,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35701,8): run-time error CSS1035: Expected colon, found '{' (35719,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35720,8): run-time error CSS1035: Expected colon, found '{' (35733,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35734,8): run-time error CSS1035: Expected colon, found '{' (35752,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35753,8): run-time error CSS1035: Expected colon, found '{' (35762,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35763,8): run-time error CSS1035: Expected colon, found '{' (35777,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35778,8): run-time error CSS1035: Expected colon, found '{' (35789,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35790,8): run-time error CSS1035: Expected colon, found '{' (35806,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35807,8): run-time error CSS1035: Expected colon, found '{' (35818,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35819,8): run-time error CSS1035: Expected colon, found '{' (35835,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35836,8): run-time error CSS1035: Expected colon, found '{' (35847,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35848,8): run-time error CSS1035: Expected colon, found '{' (35864,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35865,8): run-time error CSS1035: Expected colon, found '{' (35876,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35877,8): run-time error CSS1035: Expected colon, found '{' (35893,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35894,8): run-time error CSS1035: Expected colon, found '{' (35905,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35906,8): run-time error CSS1035: Expected colon, found '{' (35922,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35923,8): run-time error CSS1035: Expected colon, found '{' (35934,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35935,8): run-time error CSS1035: Expected colon, found '{' (35951,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35952,8): run-time error CSS1035: Expected colon, found '{' (35963,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35964,8): run-time error CSS1035: Expected colon, found '{' (35982,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35983,8): run-time error CSS1035: Expected colon, found '{' (35994,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35995,8): run-time error CSS1035: Expected colon, found '{' (36011,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36012,8): run-time error CSS1035: Expected colon, found '{' (36048,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36049,8): run-time error CSS1035: Expected colon, found '{' (36092,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36093,8): run-time error CSS1035: Expected colon, found '{' (36125,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36126,8): run-time error CSS1035: Expected colon, found '{' (36165,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36166,8): run-time error CSS1035: Expected colon, found '{' (36198,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36199,8): run-time error CSS1035: Expected colon, found '{' (36238,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36239,8): run-time error CSS1035: Expected colon, found '{' (36257,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36258,8): run-time error CSS1035: Expected colon, found '{' (36283,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36284,8): run-time error CSS1035: Expected colon, found '{' (36302,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36303,8): run-time error CSS1035: Expected colon, found '{' (36328,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36329,8): run-time error CSS1035: Expected colon, found '{' (36354,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36355,8): run-time error CSS1035: Expected colon, found '{' (36387,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36388,8): run-time error CSS1035: Expected colon, found '{' (36399,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36400,8): run-time error CSS1035: Expected colon, found '{' (36418,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36419,8): run-time error CSS1035: Expected colon, found '{' (36436,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36437,8): run-time error CSS1035: Expected colon, found '{' (36459,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36460,8): run-time error CSS1035: Expected colon, found '{' (36477,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36478,8): run-time error CSS1035: Expected colon, found '{' (36500,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36501,8): run-time error CSS1035: Expected colon, found '{' (36518,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36519,8): run-time error CSS1035: Expected colon, found '{' (36541,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36542,8): run-time error CSS1035: Expected colon, found '{' (36559,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36560,8): run-time error CSS1035: Expected colon, found '{' (36582,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36583,8): run-time error CSS1035: Expected colon, found '{' (36600,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36601,8): run-time error CSS1035: Expected colon, found '{' (36623,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36624,8): run-time error CSS1035: Expected colon, found '{' (36639,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36640,8): run-time error CSS1035: Expected colon, found '{' (36660,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36661,8): run-time error CSS1035: Expected colon, found '{' (36676,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36677,8): run-time error CSS1035: Expected colon, found '{' (36697,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36698,8): run-time error CSS1035: Expected colon, found '{' (36713,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36714,8): run-time error CSS1035: Expected colon, found '{' (36734,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36735,8): run-time error CSS1035: Expected colon, found '{' (36750,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36751,8): run-time error CSS1035: Expected colon, found '{' (36771,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36772,8): run-time error CSS1035: Expected colon, found '{' (36787,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36788,8): run-time error CSS1035: Expected colon, found '{' (36808,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36809,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (36842,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36843,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (36883,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36884,8): run-time error CSS1035: Expected colon, found '{' (36897,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36898,8): run-time error CSS1035: Expected colon, found '{' (36918,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36919,8): run-time error CSS1035: Expected colon, found '{' (36930,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36931,8): run-time error CSS1035: Expected colon, found '{' (36947,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36948,8): run-time error CSS1035: Expected colon, found '{' (36959,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36960,8): run-time error CSS1035: Expected colon, found '{' (36976,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (36977,8): run-time error CSS1035: Expected colon, found '{' (36994,1): run-time error CSS1019: Unexpected token, found '@keyframes' (36995,8): run-time error CSS1035: Expected colon, found '{' (37017,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37018,8): run-time error CSS1035: Expected colon, found '{' (37035,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37036,8): run-time error CSS1035: Expected colon, found '{' (37058,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37059,8): run-time error CSS1035: Expected colon, found '{' (37076,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37077,8): run-time error CSS1035: Expected colon, found '{' (37099,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37100,8): run-time error CSS1035: Expected colon, found '{' (37117,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37118,8): run-time error CSS1035: Expected colon, found '{' (37140,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37141,8): run-time error CSS1035: Expected colon, found '{' (37156,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37157,8): run-time error CSS1035: Expected colon, found '{' (37177,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37178,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (37197,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37198,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (37222,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37223,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (37238,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37239,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (37259,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37260,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (37275,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37276,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (37296,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37297,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (37316,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37317,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%' (37341,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37342,8): run-time error CSS1035: Expected colon, found '{' (37354,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37355,8): run-time error CSS1035: Expected colon, found '{' (37372,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37373,8): run-time error CSS1035: Expected colon, found '{' (37385,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37386,8): run-time error CSS1035: Expected colon, found '{' (37403,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37404,8): run-time error CSS1035: Expected colon, found '{' (37416,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37417,8): run-time error CSS1035: Expected colon, found '{' (37434,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37435,8): run-time error CSS1035: Expected colon, found '{' (37447,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37448,8): run-time error CSS1035: Expected colon, found '{' (37465,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37466,8): run-time error CSS1035: Expected colon, found '{' (37478,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37479,8): run-time error CSS1035: Expected colon, found '{' (37496,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37497,8): run-time error CSS1035: Expected colon, found '{' (37509,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37510,8): run-time error CSS1035: Expected colon, found '{' (37527,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37528,8): run-time error CSS1035: Expected colon, found '{' (37540,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37541,8): run-time error CSS1035: Expected colon, found '{' (37558,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (37559,8): run-time error CSS1035: Expected colon, found '{' (37571,1): run-time error CSS1019: Unexpected token, found '@keyframes' (37572,8): run-time error CSS1035: Expected colon, found '{' */ /** =========================================================================== Last edited: 2017-07-13, editor: =============================================================================== **/ @charset "utf-8"; @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); /*----------------------------------------------------------------------------- [TABLE OF CONTENTS] +reset +common +header +content +home +footer +jquery plugin +media -----------------------------------------------------------------------------*/ /* reset *----------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, /*sub, sup,*/ tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /* common *----------------------------------------------------------------------------*/ body, html { color: #363636; font-family: "source-han-sans-traditional", "Microsoft JhengHei", "Kozuka Gothic Pro", "Myriad Pro", Helvetica, sans-serif; font-family: 微軟正黑體, "Microsoft JhengHei", "!important 0"; /* Adobe Typekit 思源 "source-han-sans-traditional" */ /* 小塚ゴシック pro "Kozuka Gothic Pro" */ font-size: 13px; line-height: 20px; -webkit-text-size-adjust: none; /*overflow-x: hidden;*/ overflow: hidden; background: #f4f4f4; } body.ie { font-family: "微軟正黑體", "Microsoft JhengHei", "Kozuka Gothic Pro", "Myriad Pro", Helvetica, sans-serif !important; } * { box-sizing: border-box; } /** * * anchor * **/ a:link, a:visited { color: #676767; text-decoration: none; } a:hover, a:active { color: #000; } .hidden { display: none; } /** * * clear,clearfix * **/ .clear { clear: both; } .clearfix { display: inline-block; } .clearfix:after { display: block; visibility: hidden; clear: both; height: 0; font-size: 0; line-height: 0; content: "."; } * html .clearfix { height: 1%; } .clearfix { display: block; } .hidden { display: none; } /** * * input placeholder * **/ ::-webkit-input-placeholder { color: #8b8b8b; } :-moz-placeholder { color: #8b8b8b; opacity: 1; } ::-moz-placeholder { color: #8b8b8b; opacity: 1; } :-ms-input-placeholder { color: #8b8b8b; } input, select, textarea { font-family: "source-han-sans-traditional", "Kozuka Gothic Pro", "Myriad Pro", Helvetica, sans-serif; /*-webkit-appearance: none; border-radius: 0;*/ } /** * * backtop * **/ .backtop { position: fixed; right: 25px; bottom: 80px; width: 56px; height: 56px; display: none; z-index: 777; } .backtop a { display: block; width: 56px; height: 56px; font-size: 0; text-indent: -100000px; background: #f5d335 url(../Content/images/icon_backtop.png?v20170216) no-repeat; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .backtop a:hover { background: #ddbb1b url(../Content/images/icon_backtop.png?v20170216) no-repeat; } /** * * show / hide * **/ .pc-show { display: block; } .mb-show { display: none; } /** * * submit btn loading * **/ .loadingBtn { position: relative; background: #fff url(../Content/images/loading.gif) no-repeat center center !important; background-size: 26px auto !important; border: 1px solid #999 !important; z-index: 2 !important; cursor: wait !important; pointer-events: none !important; } /** * * btn * **/ .btn-round { border-radius: 30px; } .btn-black { color: #fff; background: #000; } /** * * text color * **/ .text-black { color: #000; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .bg-grey-m-l { background-color: #e4e4e4; } ul.disc { list-style: disc; padding-left: 20px; } /* wrapper *----------------------------------------------------------------------------*/ #wrapper { position: relative; width: 100%; margin: 0 auto; overflow-x: hidden; } .wrapper a.mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(245, 211, 53, 0.6); z-index: 98; display: none; } .main { position: relative; margin: 0 auto; } img { vertical-align: middle; } #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 51; } /* #loading .icon { position: absolute; top: 50%; left: 50%; width: 320px; padding: 100px 0 0 0; font-size: 15px; text-align: center; margin: -95px 0 0 -160px; color: #888; background: url(../Content/images/loading.gif?v20170216) no-repeat center; } #loading .icon span { margin: 0 0 0 10px; }*/ .cs3as05 { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .cs3as1 { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } /** * * width * **/ .ht20 { height: 20px; } .ht30 { height: 30px; } .ht70 { height: 70px; } .ht80 { height: 80px; } .ht110 { height: 110px; } .ht70.even, .ht80.even, .ht110.even { background: #f4f4f4; } [class^="ht"] { clear: both; } /* Percentage */ .wpe20 { width: 20%; } .wpe30 { width: 30%; } .wpe40 { width: 40%; } .wpe50 { width: 50%; } .wpe100 { width: 100%; } /* Pixels */ .wpx10 { width: 10px; } .wpx150 { width: 150px; } fieldset input[type=text], fieldset input[type=email], fieldset input[type=password], fieldset textarea { padding: 0; margin: 0 -1px; height: 64px; line-height: 64px; font-size: 15px; text-indent: 10px; vertical-align: middle; color: #000; background: #fff; border: 1px solid #dcdcdc; } fieldset textarea { height: auto; line-height: 1.3; padding: 8px; text-indent: 0; } fieldset input[type=reset], fieldset input[type=submit], fieldset input[type=button], input[type=button] { width: 100%; max-width: 350px; margin: 0 auto; color: #fff; font-size: 15px; font-weight: bold; line-height: 62px; vertical-align: middle; border: 0; cursor: pointer; background: #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .btn-blk { display: inline-block; padding: 0 20px; font-size: 13px; color: #fff; background: #000; cursor: pointer; } a.btn-blk:link, a.btn-blk:visited { color: #fff; } .btn-sm { min-height: 30px; line-height: 30px; border-radius: 50px; } fieldset .btnBox input.green { background: #b9b9b9; } section article.personalBox .memberPersonal fieldset input[type=button] { margin: 0 0 0 10px; max-width: 120px; font-size: 14px; line-height: 30px; } .m-t-20 { margin-top: 20px; } select, .twzipcode .zipcode, .twzipcode .county, .twzipcode .district, .twzipcode2 .zipcode, .twzipcode2 .county, .twzipcode2 .district { padding: 0; width: 100%; margin: 0 -1px; height: 66px; font-size: 15px; vertical-align: middle; color: #000; border: 1px solid #c6c6c6 !important; text-indent: 3px; background: #fff url(../Content/images/icon/icon_select.gif?v20170216) no-repeat right center; -webkit-appearance: none; -moz-appearance: none; text-overflow: ""; } .twzipcode .zipcode, .twzipcode .county, .twzipcode .district { position: absolute; top: 0; } .twzipcode input[type="text"].zipcode { text-indent: 10px; height: 64px; background: none; background: #fff; } .twzipcode .county { left: 0; right: 68%; width: 34%; } .twzipcode .district { left: 36%; right: 28%; width: 34%; } .twzipcode .zipcode { left: 72%; right: 0%; width: 28%; } /* header *----------------------------------------------------------------------------*/ header { position: fixed; top: 0; left: 0; width: 100%; *height: 90px; height: 70px; z-index: 101; /*51*/ } header .main { max-width: 1440px; /*min-height: 90px;*/ *min-height: 100%; margin: 0 auto; } header .neoMenu:not(.indexTop):not(.indexTop2) .main { background: rgba(255, 255, 255, 1); } header .main .logo { position: absolute; top: 29px; *left: 2%; } header .main .logo a { display: block; width: 120px; height: 40px; } header .main .logo a img { width: 100%; } header .main nav { float: right; margin-top: 28px; /*position: absolute; top: 25px; right: 0;*/ } header .main nav ul { position: relative; text-align: right; display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } header .main nav ul.nav { display: table-cell; padding: 0 5px 0 0; } header .main nav ul li { /*display: inline-block;*/ display: table-cell; vertical-align: middle; padding: 0 15px; font-size: 15px; line-height: 35px; text-align: left; } header .main nav ul li.MultipleLevel { line-height: 35px; } header .main nav ul li.search { margin: 2px; } header .main nav ul li.search .menuSearch { display: inline-block; background: none; border: none; padding: 0px; cursor: pointer; } header .main nav ul li.search .menuSearch>* { cursor: pointer; } header .main nav ul li.search .deviceSearch { display: none; } header .main nav ul li.search input { background: #676767; border: none; color: #fff; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; height: 30px; line-height: 30px; padding: 5px 35px; margin-left: 10px; max-width: 100px; } header .main nav ul li.search input::-webkit-input-placeholder { color: #fff; padding-left: 3px; text-align: center; } header .main nav ul li.search input:-moz-placeholder { /* Firefox 18- */ color: #fff; padding-left: 3px; text-align: center; } header .main nav ul li.search input::-moz-placeholder { /* Firefox 19+ */ color: #fff; padding-left: 3px; text-align: center; } header .main nav ul li.search input:-ms-input-placeholder { color: #fff; padding-left: 3px; text-align: center; } header .neoMenu:not(.indexTop, .indexTop2) .main nav ul li { background: #FFF; } header .main nav ul li.loginMsg { display: none; background: #f2f2f2; } header .main nav ul li.loginMsg a { /*display: inline;*/ } header .main nav ul li.loginMsg a.name { margin: 0 0 0 15px; } header .main nav ul li.menu, header .main nav ul li.open a.product img, header .main nav ul li a.support img, header .main nav ul li a.service img { display: none; } header .main nav ul li .monitor { display: inline-block; } header .main nav ul li .mobile { display: none; } @media only screen and (max-width : 768px) { header .main nav ul li .monitor { display: none; } header .main nav ul li .mobile { display: inline-block; } } header .main nav ul li.menu a { position: relative; top: 2px; font-size: 25px; font-weight: 200; } /*This will work for firefox*/ @-moz-document url-prefix() { header .main nav ul li.menu a { top: 4px; } } header .main nav ul li.cart, header .main nav ul li.login, header .main nav ul li.logoff { border-left: 1px #676767 solid; } header li.buergerIcon { padding: 0 20px 0 0; font-size: 26px; } header li.buergerIcon a { font-size: 26px; } header li.buergerIcon.hide { display: none; } header .main nav ul li a { /*text-align: center; font-weight: 100;*/ display: block; } header .main nav ul li.logoff>a { display: inline; } header .main nav ul li.logoff>a span { display: inline-block; vertical-align: middle; width: 18px; height: 18px; background: url(../Content/images/icon/icon_moreArrow_open.png) no-repeat center; background-size: 100% auto; } header .indexTop .main nav ul li.logoff>a span { background: url(../Content/images/icon/icon_moreArrow_open_w.png) no-repeat center; background-size: 100% auto; } header .main nav ul li.cart a, header .main nav ul li.login a { /*font-size: 14px;*/ } header .main nav ul li.cart { position: relative; padding: 0 30px 0 30px; } header .main nav ul li.cart a.icon { position: absolute; top: 0px; left: 50%; width: 22px; height: 22px; line-height: 22px; text-align: center; margin: 0 0 0 4px; color: #fff; background: #1f7cd1; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; font-family: Arial; z-index: 1; } header .main nav ul li.logoff { position: relative; text-align: center; min-width: 100px; } header .logo { background: url(images/logo.png) no-repeat; background-size: 100% auto; } header .cart .box { position: absolute; top: 3px; left: 15px; background: url(images/icon/icon_car.png) no-repeat; width: 28px; height: 28px; } header .neoMenu.indexTop, header .neoMenu.indexTop2 { height: 90px; transition: all 300ms linear } header .neoMenu:not(.indexTop):not(.indexTop2) { min-height: 70px; } header .neoMenu:not(.indexTop):not(.indexTop2) .main nav { margin-top: 16px; } header .neoMenu:not(.indexTop):not(.indexTop2) .main .logo { top: 16px; } /* header .neoMenu:not(.indexTop):not(.indexTop2) .main .tools{ padding-top: 4px } */ header .main .tools .navbar-right { display: table-cell } header .pcHide, header .subnav .bd a.pcHide, header .subnav2 .bd a.pcHide { display: none; } header .subnav, header .subnav2 { position: fixed; top: -1000px; left: 0; right: 0; width: 100%; /*height: 102px;*/ display: table; border-bottom: 1px #d0d0d0 solid; background: #fff; display: block; z-index: -1; /*background: rgba(255,255,255,0.9); background: #fff \9;*/ } header .sublogoff { position: absolute; top: -300px; left: 0; right: 0; } header .sublogoff .bd { position: relative; top: -30px; width: 100%; min-width: 100px; min-height: 152px; text-align: center; border-bottom: 1px #d0d0d0 solid; background: #fff; display: flex; align-items: center; justify-content: center; } header .sublogoff .box a { position: relative; } header .sublogoff .box a:last-child { padding: 5px 0 0 0; } header .sublogoff .bd:after { position: absolute; left: 10px; right: 10px; bottom: 40px; content: ""; height: 1px; background-color: #ececec; } header .subnav .main { /* display: table; */ width: 100%; max-width: 1080px; padding: 20px 0 30px 0; /* 20200923 */ display: grid; grid-template-columns: repeat(11, 1fr); grid-gap: 0; grid-auto-rows: minmax(100px, auto); } header .subnav.midWidth .main { display: table; width: 100%; max-width: 760px; padding: 10px 0 30px 0; } header .subnav2 .main { display: table; width: 100%; max-width: 600px; padding: 0 0 0px 0; } header .subnav .main .home { /* width: 65%; */ text-align: left; /* display: table-cell; *display: inline; zoom: 1; vertical-align: top; -ms-flex-order: 1; order: 1; */ /* 20200923 */ grid-column: 1 / 8; grid-row: 1 / 3; } header .subnav2 .main .prod-info, header .subnav2 .main .service { width: 50%; text-align: left; display: table-cell; *display: inline; zoom: 1; vertical-align: top; } header .subnav .main .office, header .subnav .main .other { /* width: 100%; */ text-align: left; /* *display: inline; zoom: 1; vertical-align: top; -ms-flex-order: 2; order: 2; */ } header .subnav .main .office { grid-column: 8 / 12; grid-row: 1 / 2; } header .subnav .main .other { grid-column: 8 / 12; grid-row: 2 / 4; } header .subnav .tabCell { display: table-cell; } header .midWidth .blog { width: 49%; padding: 0 15px; text-align: left; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header .subnav .main .home .bd>.box:nth-child(1) { width: 97%; } header .subnav .main .home .bd>.box:nth-child(2) { width: 97%; } header .subnav .main .home .bd .box .bgGrey { background: #F2F2F2; color: #5f5f5f; padding: 0 0 0 10px; } header .subnav .main .home .bd .box .bgGrey h4 { font-weight: 400; } header .subnav .main .home .hd, header .subnav .main .home .bd, header .subnav .main .office .hd, header .subnav .main .office .bd, header .subnav .main .other .hd, header .subnav .main .other .bd, header .subnav2 .main .prod-info .hd, header .subnav2 .main .prod-info .bd, header .subnav2 .main .service .hd, header .subnav2 .main .service .bd { margin: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header .subnav .main .home .hd, header .subnav .main .office .hd, header .subnav .main .other .hd, header .subnav .main .blog .hd, header .subnav2 .main .prod-info .hd, header .subnav2 .main .service .hd { position: relative; border-bottom: 1px #d0d0d0 solid; } /*header .subnav .main .other .hd { border-top: 1px #d0d0d0 solid; }*/ header .subnav .main .home .bd, header .subnav .main .office .bd, header .subnav .main .other .bd, header .subnav2 .main .prod-info .bd, header .subnav2 .main .service .bd { width: 100%; padding: 10px 0; display: table; } header .subnav .hd a, header .subnav2 .hd a { padding: 0 0 0 5px; display: block; line-height: 56px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header .subnav .hd a i, header .subnav2 .hd a i { content: ""; display: none; vertical-align: middle; width: 20px; height: 20px; background: url(../Content/images/icon/icon_subnavArrow.png?v20170216) no-repeat center; } header .subnav .hd a:hover i, header .subnav2 .hd a:hover i { display: inline-block; } header .subnav .hd a.toCatalog, header .subnav2 .hd a.toCatalog { position: absolute; top: 15px; right: 30px; padding: 2px 10px 2px 15px; display: block; font-size: 13px; line-height: 26px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px #ddd solid; background: url(../Content/images/icon/icon_navCatalog.png) no-repeat left center / auto 60%; } header .subnav .main .office .hd a.toCatalog, header .subnav2 .main .office .bd a.toCatalog { right: 15px; } header .subnav .hd a:hover, header .subnav2 .hd a:hover { /* background: #f3f3f3 url(../Content/images/icon/icon_subnavArrow.png?v20170216) no-repeat 95% center; */ } @media only screen and (max-width : 767px) { header .subnav .hd a.toCatalog, header .subnav2 .hd a.toCatalog { display: none; } } header .subnav .home .bd a { display: inline-block; padding: 2px 10px 4px; text-align: left; width: 32.3%; line-height: 1.6em; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header .subnav2 .main .prod-info .bd a, header .subnav2 .main .service .bd a { display: inline-block; padding: 2px 3px; text-align: left; width: 171px; } header .subnav .bd a, header .subnav2 .bd a { display: inline-block; width: 180px; text-align: left; } header .subnav .bd a:hover, header .subnav2 .bd a:hover { color: #bcbcbc; } header .subnav .main .office .bd .box, header .subnav2 .main .office .bd .box { padding-bottom: 28px; } header a.navSmall { display: block; position: absolute; top: 15px; right: 15px; width: 50px; height: 50px; margin-top: -70px; background: url(../Content/images/icon/icon_navSmall.gif?v20170216) no-repeat; cursor: pointer; z-index: 9; } .lineBox>div { position: fixed; background: #fff; z-index: 99; } .lineBox .lineTop { top: 0; left: 0; width: 100%; height: 16px; } .lineBox .lineLeft { top: 0; left: 0; width: 16px; height: 100%; } .lineBox .lineRight { top: 0; right: 0; width: 16px; height: 100%; } .lineBox .lineBottom { bottom: 0; left: 0; width: 100%; height: 16px; } .memberBox, .cartBox { position: fixed; top: 0; right: -100%; bottom: 0; padding: 40px 0 40px 0; color: #676767; overflow: auto; overflow-x: hidden; width: 400px; background: #f4f4f4; -webkit-overflow-scrolling: touch; z-index: 200; } .memberBox a.close, .cartBox a.close { display: block; font-size: 15px; font-weight: 200; padding: 0 25px 0 0; position: absolute; right: 10px; top: 10px; background: url(../Content/images/icon/icon_howChooseClose_bk.png?v20170216) no-repeat right center; } .memberBox .loginBox { width: 100%; margin: 0 auto; text-align: center; } .memberBox .loginBox .title { font-size: 24px; line-height: 46px; } .memberBox .loginBox .subtitle { font-size: 18px; line-height: 36px; text-align: center; } .memberBox .community a { display: block; margin: 10px 0; color: #fff; line-height: 52px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .memberBox .community a img { width: 24px; } .memberBox .community a.facebook { background: #3b5997; } .memberBox .community a.google { background: #4485f8; } .memberBox .loginBox fieldset { margin: 0 0 40px 0; text-align: left; } .memberBox .loginBox fieldset input[type=text], .memberBox .loginBox fieldset input[type=email], .memberBox .loginBox fieldset input[type=password], .memberBox .loginBox fieldset button[type=text], .memberBox .loginBox fieldset button[type=email], .memberBox .loginBox fieldset button[type=password] { width: 100%; text-indent: 45px; } .memberBox .loginBox fieldset input.mail { border-bottom: 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background: #fff url(../Content/images/icon/icon_memberMail.gif?v20170216) no-repeat 10px center; } .memberBox .loginBox fieldset input.password { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; background: #fff url(../Content/images/icon/icon_memberPassword.gif?v20170216) no-repeat 10px center; } .memberBox fieldset input[type=submit], .memberBox fieldset button[type=submit] { width: 100%; margin: 10px auto; color: #fff; font-size: 15px; font-weight: bold; line-height: 52px; border: 0; cursor: pointer; background: #000000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .memberBox fieldset button[type=submit].lineLogin { background: #1dc221 url(../Content/images/icon/icon_line.svg?v20170216) no-repeat 10px center / 30px auto; } .memberBox fieldset hr { border: 0; height: 0; margin: 20px 0 -20px 0; border-bottom: 1px #b9b9b9 solid; } .memberBox .loginBox p a { border-bottom: 1px #676767 solid; } .memberBox .registerBox { width: 100%; margin: 0 auto; text-align: center; display: none; } .memberBox .registerBox fieldset { margin: 20px 0 40px 0; text-align: left; } .memberBox .registerBox fieldset label { padding: 3px 0 0 0; vertical-align: middle; line-height: 40px; } .memberBox .registerBox fieldset input[type=checkbox] { vertical-align: middle; } .memberBox .registerBox fieldset input[type=text], .memberBox .registerBox fieldset input[type=email], .memberBox .registerBox fieldset input[type=password] { width: 100%; height: 54px; line-height: 54px; margin: 5px 0; background: #fff; } .memberBox .registerBox fieldset input[type=button] { margin-top: 5px !important; } .memberBox .joinBox { width: 100%; margin: 0 auto 40px auto; text-align: center; } .memberBox .joinBox .title { padding: 20px 0; margin: 0 0 20px 0; font-size: 29px; border-bottom: 1px #b9b9b9 solid; } .memberBox .joinBox .text { font-size: 12px; } .memberBox .joinBox fieldset input[type=submit] { background: #b9b9b9; } .memberBox .signupBox, .memberBox .registerBox, .memberBox .conBox { position: absolute; top: 40px; left: 10%; right: 10%; width: 80%; } .memberBox .conBox { width: 80%; margin: 0 auto 40px auto; text-align: center; display: none; } .memberBox .conBox .title { margin: 0 0 20px 0; font-size: 24px; line-height: 46px; border-bottom: 1px #b9b9b9 solid; } .memberBox .conBox .text { font-size: 12px; text-align: left; } .memberBox .conBox.againAgreeBox .text a { color: #5899db; } .memberBox .conBox.forgetBox .text { margin: 10px auto; } .memberBox .forgetBox fieldset input[type=text], .memberBox .forgetBox fieldset input[type=email], .memberBox .forgetBox fieldset input[type=password] { width: 100%; height: 54px; line-height: 54px; background: #fff; } .memberBox .forgetBox p { text-align: left; } .cartBox .cartBoxBd { width: 80%; margin: 0 auto 60px auto; } .cartBox .cartBoxBd .title { font-size: 24px; line-height: 46px; text-align: center; } .cartBox .cartBoxBd .number { margin: 10px 0 0 0; color: #000; font-size: 16px; font-weight: 400; text-align: center; } .cartBox .cartBoxBd .cartList ul { margin: 20px 0; border: 1px #c9c9c9 solid; } .cartBox .cartBoxBd .cartList ul li { position: relative; border-bottom: 1px #c9c9c9 solid; background: #fff url(../Content/images/icon/icon_cartArrow.png?v20170216) no-repeat 98% center; } .cartBox .cartBoxBd .cartList ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cartBox .cartBoxBd .cartList ul li .photo, .cartBox .cartBoxBd .cartList ul li .con { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } .cartBox .cartBoxBd .cartList ul li .photo { width: 100px; background: #f4f4f4; } .cartBox .cartBoxBd .cartList ul li .photo img { max-width: 100px; } .cartBox .cartBoxBd .cartList ul li .con { padding: 0 25px 0 10px; } .cartBox .cartBoxBd .cartList ul li .name { font-size: 16px; line-height: 24px; color: #000; height: 3em; overflow: hidden; } .cartBox .cartBoxBd .cartList ul li .icon { position: absolute; top: 50%; right: 30px; margin: -11px 0 0 0; max-width: 36px; } .cartBox .cartBoxBd .cartList ul li .icon img { width: 100%; } .cartBox .cartBoxBd .cartList ul li .price { font-size: 14px; line-height: 36px; } .cartBox .cartBoxBd .cartList ul li .price span { padding: 0 0 0 5px; color: #000; font-weight: 600; } .cartBox .cartBoxBd .cartList h4 { font-weight: normal; margin: 0 0 -20px 0; } .cartBox .cartBoxBd .cartList .total { margin: -10px 0 25px 0; font-size: 12px; } .cartBox .cartBoxBd .cartList .total span { font-size: 20px; color: #000; font-weight: 600; } .cartBox .cartBoxBd .btn a { display: block; margin: 10px auto; padding: 0 0 0 20px; color: #fff; font-size: 13px; font-weight: bold; line-height: 36px; text-align: center; border: 0; cursor: pointer; background: #000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .cartBox .cartBoxBd .btn a span { float: right; display: block; width: 20px; height: 20px; margin: 8px; color: #676767; font-size: 15px; font-weight: bold; line-height: 20px; text-align: center; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .cartBox .cartBoxBd p a { border-bottom: 1px #676767 solid; } .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 10; display: none; } .mask a { display: block; width: 100%; height: 100%; } /* content *----------------------------------------------------------------------------*/ section { position: relative; width: 100%; margin: 91px 0 0 0; background: #fff; } .page section, .homePage section, .homePageW section { margin: 0; } .crumbBox { position: fixed; right: 8px; bottom: 8px; border: 1px #cacaca solid; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #f1f1f1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; z-index: 120; } .crumbBox ol { display: flex; } .crumbBox ol:after { content: ""; display: table; clear: both; } .crumbBox ol li { position: relative; display: flex; } .crumbBox ol li:hover { background: #e3e3e3; } .crumbBox ol li:last-child { margin: 0; background: #e3e3e3; } .crumbBox ol li:after { position: absolute; top: 0; bottom: 0; right: -16px; content: ""; width: 20px; height: 100%; background: url(../Content/images/icon/icon_crumbBoxArrow.gif?v20170216) no-repeat center; -moz-background-size: auto 100%; -webkit-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; z-index: 1; } .crumbBox ol li:hover:after { background: url(../Content/images/icon/icon_crumbBoxArrowHover.gif?v20170216) no-repeat center; -moz-background-size: auto 100%; -webkit-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; } .crumbBox ol li:last-child:after { display: none; } .crumbBox ol li * { display: block; line-height: 16px; } .crumbBox ol li a { font-size: 12px; } .crumbBox ol li:nth-child(1) a { background: url(../Content/images/icon/icon_crumbBox.gif?v20170216) no-repeat 15px center; } .crumbBox ol li a span { padding: 6px 10px 6px 25px; } .crumbBox ol li:nth-child(1) a span { font-size: 0; width: 40px; padding: 0; } .crumbBox ol li:last-child a span, .crumbBox ol li:last-child a .crumbBox-name { padding: 6px 20px 6px 25px; background: none; } .crumbBox ol li:hover:last-child * { cursor: default; } .crumbBox ol li a span sub, .crumbBox ol li a span sup { display: inline; } section h1.title, section .series-title { text-align: center; font-size: 18px; font-weight: 100; color: #000; height: 102px; line-height: 102px; background: #f4f4f4; } section h1.title.articleTitle { margin: -20px 0 0 0; } @media only screen and (max-width : 768px) { section h1.title.articleTitle { margin: 0 0 0 0; } } section h1.title span, section .series-title span { padding: 0 5px; font-size: 24px; color: #55a7f2; text-align: center; } section article.unitList { position: relative; color: #fff; } section h1.title.Kseries span, section .title.Kseries span { color: #f8b617; } section h1.title.Cseries span, section .title.Cseries span { color: #ea904d; } section h1.title.DHseries span, section .title.DHseries span { color: #86c5d7; } section h1.title.Kseries span, section .title.Kseries span { color: #f8b617; } section h1.title.Cseries span, section .title.Cseries span { color: #ea904d; } section h1.title.DHseries span, section .title.DHseries span { color: #86c5d7; } section h1.title.EFseries span, section .title.EFseries span { color: #9097e6; } section h1.title.HLseries span, section .title.HLseries span { color: #8ad69e; } section h1.title.PBSseries span, section .title.PBSseries span { color: #548bef; } .main .unitList .swiper-container .swiper-slide a.link { display: block; position: absolute; left: 0px; top: 0px; width: 90%; height: 95%; margin-left: 5%; } .main .unitList .swiper-container .swiper-slide .bg { width: 100%; height: 100%; background-size: cover !important; } .main .unitList .swipers-pagination-bullet-active { background: url(../Content/images/circlepoint.png?v20170216) no-repeat; width: 16px; height: 16px; } .main .unitList .swiper-pagination-bullet { background: url(../Content/images/circle.png?v20170216) no-repeat; width: 16px; height: 16px; opacity: 1px; } .main .unitList .swiperbox { position: relative; top: 40%; margin: 0 10%; } .main .unitList .swiper-slide iframe { width: 100%; height: 100%; } .main .unitList .swiper-slide .content { margin: 0 auto; max-width: 425px; } .main .unitList .swiper-slide .content .date { font-size: 13px; margin: 10px 0; } .main .unitList .swiper-slide .content .title { font-size: 42px; line-height: 42px; max-height: 85px; overflow: hidden; } .main .unitList .swiper-slide .content .mintitle { font-size: 17px; float: left; line-height: 50px; margin-top: 12px; padding-right: 110px; } .main .unitList .swiper-slide .content .understandMore { position: absolute; border: 1px solid #fff; padding: 3% 6%; right: 0ox; font-size: 20px; right: 0px; margin-top: 20px; } .main .unitList .swiper-slide .content .understandMore:hover { border: 1px solid #fff; background: #fff; } .main .unitList .swiper-slide .content .understandMore>* { color: #fff; font-size: 14px; } .main .unitList .swiper-slide .content .understandMore:hover>* { color: #676767; } .main .unitList .whiteline { width: 100%; height: 10px; margin: 2% auto; border-bottom: 2px solid white; } .main .unitList .swiperbox.black>* { color: #000 !important; } .main .unitList .swiperbox.black .whiteline { width: 100%; height: 10px; margin: 2% auto; border-bottom: 2px solid #000; } .main .unitList .swiper-slide .swiperbox.black .content .understandMore { border: 1px solid #000; } .main .unitList .swiper-slide .swiperbox.black .content .understandMore:hover { border: 1px solid #fff; background: #FFF; } .main .unitList .swiper-slide .swiperbox.black .content .understandMore>* { color: #000; } .main .unitList .undeBox { position: relative; } /* section article.unitList .titleHd { position: absolute; top: 50%; left: 50%; width: 540px; text-align: center; margin: -100px 0 0 -270px; z-index: 12; } section article.unitList .titleHd .titleSlide1, section article.unitList .titleHd .titleSlide2 { position: absolute; top: -100px; left: 0; z-index: 3; filter:alpha(opacity=0); -moz-opacity:0.0; opacity:0.0; -webkit-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s; -moz-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s; } section article.unitList .titleHd .titleSlide1.on, section article.unitList .titleHd .titleSlide2.on { top: 0; filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; } section article.unitList .titleHd h1 { font-size: 62px; line-height: 65px; font-weight: 100; margin: 0 0 20px; } section article.unitList .titleHd h3 { font-size: 16px; font-weight: 100; } section article.unitList .titleHd .business, section article.unitList .titleHd .home { display: none; *display: inline; zoom: 1; vertical-align: middle; opacity: 0; } section article.unitList .titleHd .titleSlide2 { position: relative; display: block; width: 100%; } section article.unitList .titleHd .business, section article.unitList .titleHd .home { width: 40%; } section article.unitList .titleHd .business a, section article.unitList .titleHd .home a { display: block; padding: 135px 0 0 0; color: #fff; filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; -webkit-transition: all 0.3s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; transition: all 0.3s ease-in-out 0.2s; } section article.unitList .titleHd .business a {background: url(../Content/images/icon/icon_homeBusiness.png?v20170216) no-repeat top center;} section article.unitList .titleHd .home a {background: url(../Content/images/icon/icon_homeHome.png?v20170216) no-repeat top center;} section article.unitList .titleHd .business a:hover, section article.unitList .titleHd .home a:hover { filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; } section article.unitList .titleHd .line { position: absolute; top: 50%; left: 50%; width: 1px; height: 0; background: #fff; } */ section article.unitList .titleSlide1 { position: absolute; top: 20%; left: 50%; width: 500px; margin-left: -250px; margin-top: -50px; z-index: 3; opacity: 0; } section article.unitList .titleSlide_h1 { font-size: 45px; line-height: 47px; font-weight: 100; text-align: center; position: absolute; top: 45%; left: 50%; width: 500px; margin-left: -250px; margin-top: -60px; z-index: 3; opacity: 0; } section article.unitList .titleSlide_h3 { font-size: 16px; font-weight: 100; text-align: center; font-weight: 200; position: absolute; top: 45%; left: 50%; width: 500px; margin-left: -250px; margin-bottom: -40px; z-index: 3; opacity: 0; } section article.unitList .title_icon { position: absolute; top: 58%; left: 50%; width: 110px; font-size: 14px; z-index: 5; color: #fff; /*cursor: pointer;*/ text-align: center; opacity: 0; } section article.unitList .title_icon.pointer { cursor: pointer; } section article.unitList .title_icon hr { border: 0; height: 1px; width: 80%; margin: 5px 10%; background: #fff; } section article.unitList .title_icon span { font-size: 17px; } section article.unitList .title_icon.business { margin-left: -110px; margin-top: -70px; } section article.unitList .title_icon.business .icon { width: 50px; height: 50px; margin: 10px auto 20px auto; background: url(../Content/images/icon/icon_homeBusiness_s.png?v20170216) no-repeat top center; -webkit-background-size: 50px auto; -o-background-size: 50px auto; background-size: 50px auto; opacity: 0; } section article.unitList .title_icon.business .icon.on { opacity: 1; } section article.unitList .title_icon.home { margin-left: 0px; margin-top: -70px; } section article.unitList .title_icon.home .icon { width: 50px; height: 50px; margin: 10px auto 20px auto; background: url(../Content/images/icon/icon_homeHome_s.png?v20170216) no-repeat top center; -webkit-background-size: 50px auto; -o-background-size: 50px auto; background-size: 50px auto; opacity: 0; } section article.unitList .title_icon.home .icon.on { opacity: 1; } section article.unitList .title_line { position: absolute; width: 1px; height: 0px; background: #FFF; top: 58%; left: 50%; margin-top: 0px; z-index: 5; } section article.unitList .title_over { position: absolute; z-index: 10; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; cursor: pointer; } section article.unitList .titleLr, section article.unitList .titleRl { position: absolute; top: 0; width: 50%; height: 100%; z-index: 16; display: block; white-space: nowrap; } section article.unitList .titleLr { left: -50%; overflow: hidden; } section article.unitList .titleRl { right: -50%; overflow: hidden; } section article.unitList .conBox { position: relative; width: 100%; height: 100%; display: inline-block; } section article.unitList .titleLr .conBox { float: left; background: url(../Content/images/banner/bg_homeBusiness_720838.jpg?v20170216) no-repeat center; } section article.unitList .titleRl .conBox { float: right; background: url(../Content/images/banner/bg_homeHome_720838.jpg?v20170216) no-repeat center; } section article.unitList .box { position: fixed; width: 100%; overflow: hidden; } section article.unitList .box img { width: 100%; } /* Ver 2015 section article.unitList .bg { position: relative; width: 100%; overflow: hidden; background: url(../Content/images/banner/bg_home_19201080.jpg?v20170216) no-repeat center; } */ .ie section article.unitList .video { display: none; } section article.unitList .video { position: absolute; top: 50%; left: 50%; z-index: 1; min-width: 100%; min-height: 100%; width: auto; height: auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } section article.unitList .titleLr .conBox, section article.unitList .titleRl .conBox, section article.unitList .bg { -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } section article.unitList .conBox .title { position: absolute; bottom: 20px; } section article.unitList .titleLr .conBox .title { left: 30px; color: #fff; } section article.unitList .titleRl .conBox .title { right: 30px; color: #000; } section article.unitList .conBox span.h1 { /*display: block; font-size: 120px; font-weight: 700; line-height: 1.1em; letter-spacing: -2px;*/ } section article.unitList .conBox span.h3 { display: block; padding: 0 10px; font-size: 29px; font-weight: 200; } section article.unitList .conBox span.btnBusiness, section article.unitList .conBox span.btnHome { position: absolute; bottom: 50px; display: block; font-size: 20px; height: 30px; line-height: 30px; } section article.unitList .conBox span.btnBusiness { left: 30px; color: #fff; padding: 0 0 0 30px; background: url(../Content/images/icon/icon_productArrow_L_w.png?v20170216) no-repeat; } section article.unitList .conBox span.btnHome { right: 30px; color: #000; padding: 0 30px 0 0; background: url(../Content/images/icon/icon_productArrow_R.png?v20170216) no-repeat right; } section article.unitList .scrollDownBox { position: absolute; left: 0; bottom: 0; width: 100%; } section article.unitList .scrollDownBox .main { max-width: 1440px; margin: 0 auto; } section article.unitList a.scrollDownNews, section article.unitList a.scrollDownClients, section article.unitList a.eventBox { position: absolute; bottom: 0; line-height: 30px; padding: 0 45px 0 45px; color: #5b4d39; z-index: 2; background: #f4f4f4; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } section article.unitList a.scrollDownNews { left: 40px; } section article.unitList a.scrollDownClients { right: 40px; } section article.unitList a.eventBox { left: 185px; z-index: 1; color: #fff; padding: 0 30px; background: #43bae2; } section article.unitList a.eventBox img { margin: 0 0 0 5px; } section article.unitList .adBox { position: absolute; right: 40px; bottom: -300px; width: 360px; z-index: 1; } section article.unitList .adBox img { width: 100%; max-width: 360px; border: 3px solid white; opacity: 1; } section article.unitList .adBox a.close { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; font-size: 0; background: url(../Content/images/icon/icon_close.png?v20170216) no-repeat; } section article.unitMainList { position: relative; overflow: hidden; /* background-repeat: no-repeat; background-position: center top; -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; background-size:cover; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto;*/ } section article.unitMainList .bg img { width: 100%; } section article.unitMainList .bg span.img1, section article.unitMainList .bg span.img2 { display: block; } section article.unitMainList .bg img.img1pro, section article.unitMainList .bg img.img2pro, section article.unitMainList .bg .bacteriaBox, section article.unitMainList .bg img.img1bg, section article.unitMainList .bg img.img2bg { position: absolute; top: 0; left: 0; width: 100%; min-width: 1600px; } /* section article.unitMainList .bg span.img2, section article.unitMainList .bg span.img2 span.img2proBox, section article.unitMainList .bg span.img1, section article.unitMainList .bg span.img1 span.img1proBox, section article.unitMainList .bg span.img1 img.img1bg { z-index: 1; } section article.unitMainList .bg span.img2 img.img2bg { z-index: 0; } section article.unitMainList .bg span.img1 span.img1proBox { display: block; z-index: 5; } section article.unitMainList .bg span.img2 span.img2proBox { display: block; z-index: 4; }*/ section article.unitMainList .bg img.img1pro { z-index: 5; } section article.unitMainList .bg img.img2pro { z-index: 4; } section article.unitMainList .bg .bacteriaBox { position: fixed; z-index: 3; opacity: 1; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; transition: opacity 1s; } section article.unitMainList .bg .bacteriaBox.dispear { opacity: 0; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; transition: opacity 1s; } section article.unitMainList .bg img.img1bg { z-index: 2; } section article.unitMainList .bg img.img2bg { z-index: 1; } section article.unitMainList .icon { position: absolute; top: 120px; left: 50%; width: 80px; height: 150px; margin: 0 0 0 -40px; z-index: 5; background: url(../Content/images/banner/icon_home.png?v20170216) no-repeat; } section article.unitMainList.business .icon { width: 90px; height: 170px; background: url(../Content/images/banner/icon_business.png?v20170216) no-repeat; margin: -10px 0 0 -45px; } section article.unitMainList.business { background: #000 url(../Content/images/banner/bg_bussiness.png?v20170216) no-repeat bottom center; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } /* section article.unitMainList .bx-wrapper .bx-viewport { min-height: 870px; } */ /* ---- particles.js container ---- */ .particle-Box { position: relative; width: 100%; height: 100%; } .particle-Box .particles, .particle-Box .particles3 { position: absolute; opacity: 1; } /* #particles-js, #particles-js2, #particles-js3, #particles-js4, #particles-js6, #particles-js7, #particles-js8, #particles-js9, #particles-js10, #particles-js11, #particles-js12 { position: absolute; top:0; left: 0; width: 100%; height: 100%; } */ /* .bacteriaBox .particles { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform .6s linear, opacity .6s linear 3s; -moz-transition: -moz-transform .6s linear, opacity .6s linear 3s; -o-transition: -o-transform .6s linear, opacity .6s linear 3s; -ms-transition: -ms-transform .6s linear, opacity .6s linear 3s; transition: transform .6s linear, opacity .6s linear 3s; } .bacteriaBox .particles.shrink { -webkit-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } */ /*** * *test * **/ /*第一*/ #particles-js, #particles-js4 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1s linear, opacity .6s linear 3s; -moz-transition: -moz-transform 1s linear, opacity .6s linear 3s; -o-transition: -o-transform 1s linear, opacity .6s linear 3s; -ms-transition: -ms-transform 1s linear, opacity .6s linear 3s; transition: transform 1s linear, opacity .6s linear 3s; } #particles-js.shrink2, #particles-js4.shrink2 { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); } #particles-js.dispear, #particles-js4.dispear, #particles-js2.dispear, #particles-js5.dispear, #particles-js3.dispear, #particles-js11.dispear, #particles-js12.dispear, #particles-js13.dispear, #particles-js16.dispear, #particles-js17.dispear, #particles-js18.dispear { opacity: 0; } /*第二*/ #particles-js2, #particles-js5 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.5s linear, opacity 1s linear 3.5s; -moz-transition: -moz-transform 1.5s linear, opacity 1s linear 3.5s; -o-transition: -o-transform 1.5s linear, opacity 1s linear 3.5s; -ms-transition: -ms-transform 1.5s linear, opacity 1s linear 3.5s; transition: transform 1.5s linear, opacity 1s linear 3.5s; } #particles-js2.shrink3, #particles-js5.shrink3 { -webkit-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } /*第三*/ #particles-js3, #particles-js16 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 3.5s linear, opacity 2s linear 4s; -moz-transition: -moz-transform 3.5s linear, opacity 2s linear 4s; -o-transition: -o-transform 3.5s linear, opacity 2s linear 4s; -ms-transition: -ms-transform 3.5s linear, opacity 2s linear 4s; transition: transform 3.5s linear, opacity 2s linear 4s; } #particles-js3.shrink4, #particles-js16.shrink4 { -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } /*第四*/ #particles-js11, #particles-js17 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 3s linear, opacity 3s linear 5s; -moz-transition: -moz-transform 3s linear, opacity 3s linear 5s; -o-transition: -o-transform 3s linear, opacity 3s linear 5s; -ms-transition: -ms-transform 3s linear, opacity 3s linear 5s; transition: transform 3s linear, opacity 3s linear 5s; } #particles-js11.shrink5, #particles-js17.shrink5 { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5); } /*第五*/ #particles-js12, #particles-js13 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 2s linear, opacity 3s linear 3s; -moz-transition: -moz-transform 2s linear, opacity 3s linear 3s; -o-transition: -o-transform 2s linear, opacity 3s linear 3s; -ms-transition: -ms-transform 2s linear, opacity 3s linear 3s; transition: transform 2s linear, opacity 3s linear 3s; } #particles-js12.shrink6, #particles-js13.shrink6 { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); } /*第五*/ #particles-js18 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 4s linear, opacity 3s linear 4s; -moz-transition: -moz-transform 4s linear, opacity 3s linear 4s; -o-transition: -o-transform 4s linear, opacity 3s linear 4s; -ms-transition: -ms-transform 4s linear, opacity 3s linear 4s; transition: transform 4s linear, opacity 3s linear 4s; } #particles-js18.shrink7 { -webkit-transform: scale(.7); -ms-transform: scale(.7); -o-transform: scale(.7); -moz-transform: scale(.7); transform: scale(.7); } /*** * *test * **/ #particles-js.dispear { opacity: 0; } #particles-js { width: 194px; height: 154px; top: 40%; left: 0; background: url(../Content/images/banner/bacteria/ba01.png?v20170216) no-repeat; } #particles-js2 { width: 97px; height: 96px; top: 10%; left: 15%; background: url(../Content/images/banner/bacteria/ba_02.png?v20170216) no-repeat; } #particles-js3 { width: 170px; height: 85px; top: 30%; left: 45%; background: url(../Content/images/banner/bacteria/ba_13.png?v20170216) no-repeat; } #particles-js4 { width: 116px; height: 100px; top: 40%; right: 20%; background: url(../Content/images/banner/bacteria/ba_04.png?v20170216) no-repeat; } #particles-js5 { width: 80px; height: 54px; bottom: 30%; right: 50%; background: url(../Content/images/banner/bacteria/ba_03.png?v20170216) no-repeat; } #particles-js11 { width: 83px; height: 83px; bottom: 10%; left: 35%; background: url(../Content/images/banner/bacteria/ba_09.png?v20170216) no-repeat; } #particles-js12 { width: 91px; height: 63px; bottom: 20%; left: 13%; background: url(../Content/images/banner/bacteria/ba_07.png?v20170216) no-repeat; } #particles-js13 { width: 130px; height: 101px; top: 10%; left: 40%; background: url(../Content/images/banner/bacteria/ba_14.png?v20170216) no-repeat; } #particles-js6 { width: 194px; height: 154px; top: 10%; left: 20%; opacity: .8; background: url(../Content/images/banner/bacteria/ba01.png?v20170216) no-repeat; } #particles-js7 { width: 67px; height: 67px; bottom: 10%; left: 5%; opacity: .8; background: url(../Content/images/banner/bacteria/ba03.png?v20170216) no-repeat; } #particles-js8 { width: 161px; height: 161px; top: 10%; right: 30%; opacity: .9; background: url(../Content/images/banner/bacteria/ba_08.png?v20170216) no-repeat; } #particles-js9 { width: 107px; height: 85px; bottom: 20%; right: 20%; opacity: .9; background: url(../Content/images/banner/bacteria/ba07.png?v20170216) no-repeat; } #particles-js10 { width: 145px; height: 146px; bottom: 30%; right: 40%; opacity: .8; background: url(../Content/images/banner/bacteria/ba_11.png?v20170216) no-repeat; } #particles-js14 { width: 80px; height: 54px; top: 10%; left: 10%; opacity: .9; background: url(../Content/images/banner/bacteria/ba_03.png?v20170216) no-repeat; } #particles-js15 { width: 91px; height: 63px; top: 8%; right: 10%; opacity: .8; background: url(../Content/images/banner/bacteria/ba_07.png?v20170216) no-repeat; } #particles-js16 { width: 194px; height: 154px; bottom: 10%; right: 10%; -webkit-transform: scale(.8); -moz-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8); background: url(../Content/images/banner/bacteria/ba_01.png?v20170216) no-repeat; } #particles-js17 { width: 97px; height: 96px; top: 35%; left: 35%; -webkit-transform: scale(.7); -moz-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); background: url(../Content/images/banner/bacteria/ba_10.png?v20170216) no-repeat; } #particles-js18 { width: 47px; height: 36px; top: 20%; right: 24%; background: url(../Content/images/banner/bacteria/ba_16.png?v20170216) no-repeat; } #particles-js19 { width: 194px; height: 154px; bottom: 10%; right: 8%; -webkit-transform: scale(.5) rotateY(-20deg); -moz-transform: scale(.5) rotateY(-20deg); -ms-transform: scale(.5) rotateY(-20deg); transform: scale(.5) rotateY(-20deg); background: url(../Content/images/banner/bacteria/ba01.png?v20170216) no-repeat; } #particles-js20 { width: 161px; height: 161px; bottom: 50%; right: 8%; -webkit-transform: rotateY(-20deg); -moz-transform: rotateY(-20deg); -ms-transform: rotateY(-20deg); transform: rotateY(-20deg); background: url(../Content/images/banner/bacteria/ba05.png?v20170216) no-repeat; } #particles-js21 { width: 107px; height: 85px; bottom: 20%; left: 9%; -webkit-transform: scale(.5) rotateY(-180deg); -moz-transform: scale(.5) rotateY(-180deg); -ms-transform: scale(.5) rotateY(-180deg); transform: scale(.5) rotateY(-180deg); background: url(../Content/images/banner/bacteria/ba07.png?v20170216) no-repeat; } #particles-js22 { width: 161px; height: 161px; top: 0%; left: 29%; opacity: 0.7; -webkit-transform: scale(.6) rotateY(-180deg); -moz-transform: scale(.6) rotateY(-180deg); -ms-transform: scale(.6) rotateY(-180deg); transform: scale(.6) rotateY(-180deg); background: url(../Content/images/banner/bacteria/ba05.png?v20170216) no-repeat; } #particles-js23 { width: 91px; height: 63px; bottom: 5%; right: 30%; opacity: 0.8; -webkit-transform: scale(1.2) rotateY(-180deg); -moz-transform: scale(1.2) rotateY(-180deg); -ms-transform: scale(1.2) rotateY(-180deg); transform: scale(1.2) rotateY(-180deg); background: url(../Content/images/banner/bacteria/ba_07.png?v20170216) no-repeat; } section.bacteriaBanner { margin: -90px 0 0; } section.bacteriaBanner article.unitMainList { position: relative; overflow: hidden; } section.bacteriaBanner article.unitMainList .partBox .bacteriaBox3 { position: relative; height: 600px; z-index: 3; } section article.unitMainList .partBox { position: relative; } section article.unitMainList .partBox .model { position: absolute; top: 180px; left: 0; width: 100%; z-index: 4; } section article.unitMainList .partBox .model .modelBox { width: 1360px; padding: 0 20px; margin: 0 auto; } section article.unitMainList.home .partBox .model h2 { max-width: 420px; font-size: 40px; font-weight: 200; line-height: 50px; margin: 0 0 40px 0; } section article.unitMainList.home .partBox.part2 .model h2 { max-width: 440px; } section article.unitMainList.home .partBox .model .textHd { font-size: 15px; font-weight: 400; line-height: 22px; } section article.unitMainList.home .partBox .model p { max-width: 420px; color: #707070; margin: 0 0 30px 0; } section article.unitMainList.home .partBox.part2 .model p { color: #fff; } section article.unitMainList.home .partBox.part2 .model .tB p { color: #000; } section article.unitMainList.home .partBox .model .textFt { font-size: 15px; font-weight: 400; line-height: 22px; } section article.unitMainList.home .partBox .model .textFt span { font-size: 13px; } section article.unitMainList.home .partBox h2 span.green { font-size: 30px; letter-spacing: -2px; } section article.unitMainList.home .partBox h2 span.blue { font-size: 68px; font-weight: 100; letter-spacing: -2px; } section article.unitMainList .partBox.part1 .model { z-index: 6; } section article.unitMainList.home .partBox.part1 .model1 .modelBox, section article.unitMainList.home .partBox.part2 .model2 .modelBox { position: fixed; top: 220px; left: 15%; right: 15%; z-index: 2; } section article.unitMainList .partBox.part2 .model2 .modelBox { display: none; } section article.unitMainList .partBox.part2 .model2 .modelBox, section article.unitMainList .partBox.part3 .model .modelBox { color: #fff; } section article.unitMainList .partBox.part1 .model1 .modelBox.tW { color: #fff; } section article.unitMainList .partBox.part2 .model2 .modelBox.tB { color: #000; } section article.unitMainList .partBox.part3 .model .modelBox { width: auto; max-width: 1280px; padding: 0 60px; } section article.unitMainList .partBox.part1 .model h2 { max-width: 440px; } section article.unitMainList .partBox.part1 h2 em, section article.unitMainList .partBox.part2 h2 em { font-size: 22px; font-style: normal; } section article.unitMainList .partBox.part1 .model2 p { padding: 0 20px 0 0; color: #fff; } section article.unitMainList .partBox.part1 .model .bacteriaBox { position: absolute; width: 100%; min-height: 700px; } /**/ section.bacteriaBanner article.unitMainList .partBox.part3 .product { position: absolute; top: 0; left: 0; width: 100%; background: url(../Content/images/banner/bg_product1440800.png?v20170216) bottom; background-repeat: no-repeat; z-index: 4; } section.bacteriaBanner article.unitMainList .partBox.part3 { position: relative; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; z-index: 6; overflow: hidden; } section.bacteriaBanner article.unitMainList .partBox.part3 .right.text2 { display: none; position: relative; float: right; z-index: 3; } section article.unitMainList .partBox.part3 { position: relative; background-repeat: no-repeat; background-position: center; -moz-background-size: 1920px auto; -webkit-background-size: 1920px auto; -o-background-size: 1920px auto; background-size: 1920px auto; z-index: 3; } section article.unitMainList .partBox.part3 .right { position: relative; float: right; z-index: 3; } section article.unitMainList .partBox.part3 h2, section article.unitMainList .partBox.part3 .model p { color: #fff; } section article.unitMainList .partBox.part3 .icon1, section article.unitMainList .partBox.part3 .icon2 { position: absolute; left: 50%; top: 50%; font-size: 15px; color: #000; z-index: 1; } section article.unitMainList .partBox.part3 .icon1 { /*top: 330px;*/ width: 190px; height: 240px; margin: 50px 0 0 -200px; padding: 0 0 0 110px; background: url(../Content/images/banner/icon_home_part3-1.png?v20170216) no-repeat bottom; } section article.unitMainList .partBox.part3 .icon2 { /*top: 140px;*/ width: 280px; height: 230px; margin: -139px 0 0 -636px; padding: 0 0 0 40px; background: url(../Content/images/banner/icon_home_part3-2.png?v20170216) no-repeat bottom; } section article.unitMainList .partBox.part3 .round1, section article.unitMainList .partBox.part3 .round2 { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; } section article.unitMainList .partBox.part3 .round1 { margin: 115px 0 0 -90px; } section article.unitMainList .partBox.part3 .round2 { margin: -84px 0 0 -612px; } section article.unitMainList .partBox.part3 .round1 .box, section article.unitMainList .partBox.part3 .round2 .box { position: relative; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; } section article.unitMainList .partBox.part3 .round1.on .box, section article.unitMainList .partBox.part3 .round2.on .box { top: -150%; left: -150%; width: 400%; height: 400%; -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; } section article.unitMainList .partBox.part3 .icon1 b, section article.unitMainList .partBox.part3 .icon2 b { font-size: 20px; } section article.unitMainList .partBox.part3 .desc { position: absolute; right: 40px; bottom: 40px; font-size: 12px; } section article.unitMainList .partBox.part3 .desc b { font-size: 13px; } section article.unitMainList .partBox.part3 .dmask { position: absolute; left: 0; bottom: 0; width: 100%; background: url(../Content/images/banner/bg_home_part3_x.png?v20170216) repeat-x bottom; z-index: 3; } section article.unitMainList .partBox.part3 .modelMask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #a9937b; z-index: 2; } section article.unitMainList.business .partBox.part1 .model h2 { max-width: 420px; font-size: 40px; font-weight: 200; line-height: 50px; margin: 0 0 40px 0; } section article.unitMainList.business .partBox.part1 .model .modelBox { position: fixed; top: 220px; right: 15%; } section article.unitMainList.business .partBox .model .textHd { font-size: 15px; font-weight: 400; line-height: 22px; } section article.unitMainList.business .partBox .model p { max-width: 420px; margin: 0 0 30px 0; } section article.unitMainList.business .partBox .model .textFt { font-size: 15px; font-weight: 400; line-height: 22px; } section article.unitMainList.business .partBox .model .textFt span { font-size: 13px; } section article.unitMainList.business .partBox h2 span.green { color: #fff; font-size: 30px; letter-spacing: -2px; } section article.unitMainList.business .partBox h2 span.blue { font-size: 68px; font-weight: 100; letter-spacing: -2px; } section article.unitMainList.business .partBox.part1 { color: #fff; background-repeat: no-repeat; background-position: center; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } section article.unitMainList.business .partBox.part1 .right { position: relative; float: right; z-index: 3; } section article.unitMainList.business .partBox.part2 .model h2 { position: absolute; top: 60px; left: 0; width: 100%; font-size: 62px; font-weight: 100; line-height: 120px; color: #3192dc; text-align: center; } section article.unitMainList.business .partBox.part2 .model h2 span.blue { font-size: 110px; letter-spacing: -2px; } section article.unitMainList.business .partBox.part2 .model h2 em { color: #fff; font-size: 37px; font-style: normal; } section article.unitMainList.business .partBox.part2 .form { position: absolute; top: 200px; left: 50%; width: 780px; height: 160px; margin: 0 0 0 -390px; background: url(../Content/images/banner/bg_form.png?v20170216) no-repeat bottom center; } section article.unitMainList.business .partBox.part2 .form .strip1 { position: absolute; top: 25px; left: 72px; width: 100%; height: 10px; } section article.unitMainList.business .partBox.part2 .form .strip2 { position: absolute; top: 105px; left: 72px; width: 100%; height: 10px; } section article.unitMainList.business .partBox.part2 .form .strip1 .line { background: url(../Content/images/banner/bg_form_line1.png?v20170216) no-repeat; } section article.unitMainList.business .partBox.part2 .form .strip2 .line { background: url(../Content/images/banner/bg_form_line2.png?v20170216) no-repeat; } section article.unitMainList.business .partBox.part2 .form .strip1 .line, section article.unitMainList.business .partBox.part2 .form .strip2 .line { position: relative; height: 10px; -webkit-background-size: 100% 10px; -o-background-size: 100% 10px; background-size: 100% 10px; } section article.unitMainList.business .partBox.part2 .form .line span { position: absolute; right: -80px; top: -6px; display: block; font-size: 20px; } section article.unitMainList.business .partBox.part2 .form .strip1 .line span { color: #55a7f2; } section article.unitMainList.business .partBox.part2 .form .strip2 .line span { color: #8075be; } section article.unitMainList.business .partBox.part2 .textCe { position: absolute; top: 400px; left: 35%; right: 35%; } section article.unitMainList.business .partBox.part2 .textCe { color: #fff; } section article.unitMainList.business .partBox.part2 .textCe a { color: #8075be; } section article.unitMainList .bxslider .bg img { /*width: 100%;*/ } section article.unitMainList .bx-wrapper ul li { background-repeat: no-repeat; /*-moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; background-size:cover;*/ -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } section article.unitMainList .bx-wrapper .bx-pager { position: absolute; top: 300px; bottom: auto; width: 100%; left: 0; text-align: center; padding-top: 0; } section article.unitMainList .bx-wrapper .bx-pager.bx-default-pager a { background: #a9a9a9; text-indent: -9999px; display: block; width: 8px; height: 8px; margin: 0 10px; outline: 0; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } section article.unitMainList .bx-wrapper .bx-pager.bx-default-pager a.active, section article.unitMainList .bx-wrapper .bx-pager.bx-default-pager a:hover { background: #46cfd9; } section article.unitMainList.business .bx-wrapper .bx-pager.bx-default-pager a.active, section article.unitMainList.business .bx-wrapper .bx-pager.bx-default-pager a:hover { background: #8075be; } section .typeNav { position: fixed; top: 100px; right: 0; z-index: 7; } section .typeNav .typeNavBox { height: 40px; line-height: 40px; padding: 0 20px 0 10px; background: #2f7dcd; -webkit-border-radius: 20px 0 0 20px; -moz-border-radius: 20px 0 0 20px; border-radius: 20px 0 0 20px; -webkit-box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3); -moz-box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3); } section .typeNav .typeNavBox a { padding: 0 10px; color: #fff; font-size: 14px; border-left: 1px #fff solid; } section .typeNav .typeNavBox a:first-child { border-left: 0; } section h1.title.home, section .title.home { height: 130px; line-height: 130px; background: #fff; } section h1.title.business, section .title.business { height: 130px; line-height: 130px; color: #fff; background: #3f3f3f; } section h1.title.business span, section .title.business span { color: #8075be; } section article.seriesMainList { position: relative; } section article.seriesMainList ul.smslider li { position: relative; } section article.seriesMainList ul.smslider li img { position: relative; min-width: 480px; } section article.seriesMainList ul.smslider li a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; display: none; } section article.seriesMainList ul.smslider li.li_fader img { opacity: 0; } section article.seriesMainList ul.smslider li.li_fader .fader { position: absolute; top: 0; left: 0; height: 100%; } section article.seriesMainList .smslider_icons { position: fixed; top: 55px; left: 55px; width: 120px; height: 120px; z-index: 5; display: none; } section article.seriesMainList .smslider_icons img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } section article.seriesMainList .smslider_titleBox { position: absolute; right: 60px; bottom: 40px; width: 360px; height: 240px; color: #fff; z-index: 5; } section article.seriesMainList .titleBox { position: absolute; top: 0; left: 0; width: 360px; opacity: 0; } section article.seriesMainList .titleBox .titlehd { padding: 15px 20px; } section article.seriesMainList .titleBox.Oseries .titlehd { background: #54b2ef; } section article.seriesMainList .titleBox.Kseries .titlehd { background: #f8b617; } section article.seriesMainList .titleBox.Cseries .titlehd { background: #ea904d; } section article.seriesMainList .titleBox.DHseries .titlehd { background: #86c5d7; } section article.seriesMainList .titleBox.CUseries .titlehd { background: #96b865; } section article.seriesMainList .titleBox.Hseries .titlehd { background: #c3ce68; } section article.seriesMainList .titleBox.DCseries .titlehd { background: #56cbba; } section article.seriesMainList .titleBox.WHseries .titlehd { background: #94d6de; } section article.seriesMainList .titleBox.EFseries .titlehd { background: #9097e6; } section article.seriesMainList .titleBox.HLseries .titlehd { background: #8ad69e; } section article.seriesMainList .titleBox.PBSseries .titlehd { background: #548bef; } section article.seriesMainList .titleBox.MRSseries .titlehd { background: #446ca4; } section article.seriesMainList .titleBox.ICEseries .titlehd { background: #c16800; } section article.seriesMainList .titleBox.HOTseries .titlehd { background: #982320; } section article.seriesMainList .titleBox.Centralseries .titlehd { background: #908b73; } section article.seriesMainList .titleBox.Softseries .titlehd { background: #356e87; } section article.seriesMainList .titleBox.MRSseries .titlehd .tw, section article.seriesMainList .titleBox.ICEseries .titlehd .tw, section article.seriesMainList .titleBox.HOTseries .titlehd .tw, section article.seriesMainList .titleBox.Centralseries .titlehd .tw, section article.seriesMainList .titleBox.Softseries .titlehd .tw { font-size: 43px; } section article.seriesMainList .titleBox .titlehd .en { font-size: 15px; font-weight: 100; } section article.seriesMainList .titleBox .titlehd .tw { font-size: 46px; line-height: 50px; font-weight: 600; } section article.seriesMainList .titleBox .title { position: relative; padding: 15px 20px; background: #676767; } section article.seriesMainList .titleBox.MRSseries .title, section article.seriesMainList .titleBox.ICEseries .title, section article.seriesMainList .titleBox.HOTseries .title, section article.seriesMainList .titleBox.Centralseries .title, section article.seriesMainList .titleBox.Softseries .title { background: #3f3f3f; } section article.seriesMainList .titleBox .title .ser, section article.seriesMainList .titleBox .title .sercon { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.seriesMainList .titleBox .title .ser { padding: 0 4px 0 5px; font-size: 50px; line-height: 57px; font-weight: 100; } section article.seriesMainList .titleBox .title .ser.tw { font-size: 37px; } section article.seriesMainList .titleBox .title .en { font-size: 19px; line-height: 21px; font-weight: 200; } section article.seriesMainList .titleBox .title .en.min { font-size: 13px; line-height: 15px; } section article.seriesMainList .titleBox .title .ch { font-size: 18px; line-height: 19px; font-weight: 200; } section article.seriesMainList .titleBox .title .en.ch { line-height: 24px; } section article.seriesMainList .titleBox .title a.more { position: absolute; top: 34px; right: 10px; color: #fff; } section article.newsList .desc { position: absolute; right: 60px; bottom: 20px; color: #4f4f4f; font-size: 11px; } section article.newsList { width: calc(100% - 450px); background: #fff; } section article.newsList .newsBox { position: relative; width: 100%; margin: 0 auto; padding: 40px 0 150px 0; background: #fff; border-top: 1px #e8e8e8 solid; } section article.newsList .newsBox h2, section article.newsList .newsBox .maintitle { position: relative; margin: 0 0 40px 0; font-size: 18px; font-weight: 200; line-height: 24px; text-align: center; cursor: pointer; } section article.newsList .newsBox h2:after, section article.newsList .newsBox .maintitle:after { content: ''; position: absolute; right: -12px; width: 1px; top: 0px; bottom: -22px; background: rgba(208, 208, 208, 0.8); } section article.newsList .newsBox h2 span, section article.newsList .newsBox .maintitle span { width: 100%; display: block; font-size: 32px; line-height: 40px; } section article.newsList .container { width: 100%; max-width: 1070px; max-width: 1280px; margin: 0 auto; } section article.newsList .container .item { position: relative; margin: auto 20px; } /* section article.newsList .container .item a{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } */ section article.newsList .container .item a { position: relative; width: 100%; height: 100%; } section article.newsList .container .item .date { line-height: 50px; font-size: 13px; } section article.newsList .container .item .title { font-size: 20px; font-weight: 400; line-height: 28px; height: auto; padding-top: 16px; overflow: hidden; } /* section article.newsList .container .item .hd{ font-size: 13px; color: #676767; padding-bottom: 60px; overflow:hidden; } */ section article.newsList .container .item .hd { font-size: 13px; color: #676767; padding-bottom: 30px; overflow: hidden; } section article.newsList .container .item .boxHd, section article.newsList .container .item img { max-width: 430px; max-height: 280px; margin: 0 auto; } section article.newsList .container .item:hover .photo { opacity: .5; -webkit-transition: all .8s; -moz-transition: all .8s; -o-transition: all .8s; transition: all .8s; } /* section article.newsList .container .item .photo{ max-width: 430px; max-height: 280px; height: 0; padding-bottom: 65%; overflow: hidden; margin:0 auto; } */ section article.newsList .container .item .photo { position: relative; max-width: 430px; max-height: 280px; height: auto; overflow: hidden; margin: 0 auto; } /* section article.newsList .container .item .video { position: relative; max-width: 430px; max-height: 280px; height: auto; overflow: hidden; margin: 0 auto; width: 100%; padding-bottom: 280px; } */ section article.newsList .container .item .photo iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } section article.newsList .container .item .photo h2.seo { position: absolute; font-size: 0; padding: 0; margin: 0; } section article.newsList .line { width: 90%; max-width: 970px; margin: 20px auto 0px auto; padding: 10px auto; height: 1px; border-bottom: 1px solid #c2c2c2; } .homePage button.slick-prev { left: 50px; margin-top: -22px; } .homePage button.slick-next { right: 50px; margin-top: -22px; } .homePage .container.slick-slider .slick-dots { bottom: -70px; } /* section article.newsList { background: #fff; } section article.newsList .newsBox { position: relative; width: 90%; max-width: 1200px; margin: 0 auto; padding: 80px 0 80px 0; } section article.newsList .newsBox h2 { margin: 0 0 40px 0; font-size: 18px; font-weight: 200; text-align: center; } section article.newsList .newsBox h2 span { font-size: 32px; line-height: 36px; width:100%; display:block; } section article.newsList .newsBox .item .photo{ display: inline-block;} */ /* Ver 2015 section article.newsList .newsBox .owl-carousel { width: 90%; margin: 0 auto;} section article.newsList .newsBox .owl-carousel .owl-stage-outer { margin: 0 0 20px 0;} section article.newsList .newsBox .owl-carousel .owl-item img { display: block; width: 100%; max-width: 430px; margin: 0 auto;} section article.newsList .newsBox .owl-theme .owl-nav {left: 0; right: auto; width: 100%;} section article.newsList .newsBox .owl-theme .owl-nav .owl-prev{left: -60px;} section article.newsList .newsBox .owl-theme .owl-nav .owl-next{right: -60px;} section article.newsList .owl-one { width: 90%; margin: 0 auto; text-align: center;} section article.newsList .owl-one img { display: block; width: 100%; max-width: 430px; margin: 0 auto;} */ section article.newsList .desc { position: absolute; left: 80px; bottom: 20px; color: #4f4f4f; font-size: 11px; } /* * 粉絲團 * */ .mainPushWrapper { position: relative; width: 100%; margin: -8% auto 0; padding: 0 10% 30px; display: flex; align-items: flex-start; background: #fff; z-index: 5; } section article.socialLinkBox { width: 450px; padding-left: 50px; } section article.socialLinkBox_M { display: none; position: relative; z-index: 5; background: #fff; } section article.socialLinkBox .newsBox h2, section article.socialLinkBox_M .newsBox h2 { margin: 0 0 40px 0; font-size: 18px; font-weight: 200; line-height: 24px; text-align: center; cursor: pointer; } section article.socialLinkBox .newsBox h2 span, section article.socialLinkBox_M .newsBox h2 span { width: 100%; display: block; font-size: 32px; line-height: 40px; } section article.socialLinkBox .newsBox, section article.socialLinkBox_M .newsBox { position: relative; width: 100%; margin: 0 auto; padding: 40px 0 0 0; background: #fff; z-index: 5; } #fb-root { display: none; } /* 讓所有容器的寬度都變成 100% */ .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; margin: 0 auto; } /* * SEO * */ section article.promotList { width: 100%; margin-top: -8%; background: #ddd; } section article.promotList .promotBox { position: relative; padding: 0; border-bottom: 2px solid #fff; width: 100%; margin: 40px auto 0; background: #fff; border-top: 1px #e8e8e8 solid; z-index: 5; } section article.promotList .promotBox ul { list-style: none; margin: 0; padding: 0; } section article.promotList .promotBox ul li { position: relative; width: 20%; padding-bottom: 16%; display: block; float: left; cursor: pointer; background: #e2e1ea; list-style-type: none; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.promotList .promotBox ul li.w40 { width: 40%; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } section article.promotList .promotBox ul li.w20 { width: 20%; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } section article.promotList .promotBox ul:before, section article.promotList .promotBox ul:after { content: ""; display: table; clear: both; } section article.promotList .promotBox ul li a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } section article.promotList .promotBox ul li div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 100%; margin: 0 auto; vertical-align: bottom; background-position: center; background-size: cover; background-repeat: no-repeat; } section article.promotList .promotBox ul li a .item { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } section article.promotList .promotBox ul li.w20 .smallImg { display: block; } section article.promotList .promotBox ul li.w20 .bigImg { display: none; } section article.promotList .promotBox ul li.w40 .smallImg { display: none; } section article.promotList .promotBox ul li.w40 .bigImg { display: block; } /* section article.promotList .promotBox ul li.promo-1 a { background: #e2e1ea url(images/pro/promo_720512_1.png?v20170216) no-repeat; background-position: top center; background-size: 100% auto; } section article.promotList .promotBox ul li.promo-2 a { background: #e2e1ea url(images/pro/promo_720512_2.png?v20170216) no-repeat; background-position: top center; background-size: 100% auto; } section article.promotList .promotBox ul li.promo-3 a { background: #e2e1ea url(images/pro/promo_360256_3.png?v20170216) no-repeat; background-position: top center; background-size: 100% auto; } section article.promotList .promotBox ul li.promo-4 a { background: #e2e1ea url(images/pro/promo_360256_4.png?v20170216) no-repeat; background-position: top center; background-size: 100% auto; } section article.promotList .promotBox ul li.promo-1 a.move, section article.promotList .promotBox ul li.promo-2 a.move, section article.promotList .promotBox ul li.promo-3 a.move, section article.promotList .promotBox ul li.promo-4 a.move { background-position: top center; background-size: 116% auto; }*/ section article.promotList .promotBox ul span.titleBox { display: block; position: absolute; left: 50%; margin: 16px auto 0 -95px; width: 190px; text-align: center; } section article.promotList .promotBox ul span.titleBox.move .subTitle { display: block; transform: translateY(15px); opacity: 1; -webkit-transition: all 400ms linear 400ms; transition: all 400ms linear 400ms; } section article.promotList .promotBox ul span.titleBox .title { display: block; position: relative; font-size: 20px; line-height: 26px; color: #887969; } section article.promotList .promotBox ul span.titleBox .subTitle { display: block; transform: translateY(34px); font-size: 13px; line-height: 18px; height: 2.5em; color: #666; opacity: 0; overflow: hidden; } section article.promotList .promotBox ul span.titleBox .subTitle .price { font-weight: bold; padding-left: 5px; } section article.promotList .promotBox ul span.titleBox .title:before { content: ''; position: absolute; top: 28px; left: 50%; margin-left: -25px; width: 50px; height: 2px; background: #887969; } .homePage section article.consumerList, .homePage section article.professionalList, .homePage section article.clientsList, .homePage section article.rewardList, .homePage section article.filtrationList, .homePage article.howChoose, .homePage article.contactBox, .homePage footer { position: relative; z-index: 1 } .homePage section article.clientsList .desc_index { margin: auto 80px; line-height: 28px; } section article.consumerList, section article.consumerList { background: #f4f4f4; } section article.consumerList .consumerBox { position: relative; width: 90%; max-width: 1440px; margin: 0 auto; padding: 0 0 180px 0; } section article.consumerList h2 { padding: 60px 0 20px 0; font-size: 18px; font-weight: 200; margin: 0; text-align: center; } section article.consumerList h2 span { font-size: 24px; } section article.consumerList .container { width: 90%; max-width: 1440px; margin: 0 auto; } section article.consumerList .container .item { margin-right: 40px; } section article.consumerList .container .item:hover img { opacity: .5; -webkit-transition: all .8s; -moz-transition: all .8s; -o-transition: all .8s; transition: all .8s; } section article.consumerList .container .item .hd { margin-top: 20px; font-size: 15px; } section article.consumerList .container .item .shortLine, section article.professionalList .container .item .shortLine { height: 1px; margin: 4px 0 8px 0; border-bottom: 1px solid black; width: 15px; } section article.consumerList .container .item .hd span { font-size: 18px; } section article.consumerList .container .item .text, section article.professionalList .container .item .text { color: #888; } section article.rewardList { position: relative; background: #f4f4f4; } section article.rewardList .rewardBox { position: relative; width: 90%; max-width: 1200px; margin: 0 auto; padding: 80px 0 80px 0; } section article.rewardList .rewardBox h2 { margin: 0 0 60px 0; font-size: 18px; font-weight: 200; text-align: center; } section article.rewardList .rewardBox h2 span { font-size: 24px; } section article.rewardList .rewardBox .container { text-align: center; } section article.rewardList .rewardBox ul li { display: inline-block; padding-right: 40px; } /* * SEO * */ section article.filtrationList { position: relative; width: 100%; } section article.filtrationList .filtrationBox { margin: 0 auto; padding: 40px 0 0 0; background: #fff; border-top: 1px #e8e8e8 solid; z-index: 5; } section article.filtrationList .filtrationBox h2 { margin: 0 0 40px 0; font-size: 18px; font-weight: 200; line-height: 24px; text-align: center; cursor: pointer; } section article.filtrationList .filtrationBox h2 span { /* width: 100%; */ display: block; font-size: 32px; line-height: 40px; } section article.filtrationList .filtrationBox ul.filtrationItem:after { content: ""; display: table; clear: both; } section article.filtrationList .filtrationBox ul.filtrationItem>li { position: relative; float: left; width: 50%; padding: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; } section article.filtrationList .filtrationBox ul.filtrationItem>li.max { width: 100%; } section article.filtrationList .filtrationBox ul.filtrationItem>li>a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; } section article.filtrationList .filtrationBox .title, section article.filtrationList .filtrationBox .seriesTtl { position: absolute; top: 80px; left: 50%; right: 0; width: 90%; text-align: center; color: #fff; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } section article.filtrationList .filtrationBox .title:after { position: absolute; top: -34px; left: 50%; width: 50px; height: 2px; content: ""; margin: 0 0 0 -25px; background-color: #fff; } section article.filtrationList .filtrationBox ul.filtrationItem>li.first { overflow: hidden; display: block; } section article.filtrationList .filtrationBox ul.filtrationItem>li.first .title { z-index: 4; } section article.filtrationList .filtrationBox ul.filtrationItem>li.first .title:after { display: none; } section article.filtrationList .filtrationBox ul.filtrationItem>li .filtrationMenu { position: absolute; left: 8px; right: 8px; top: calc(100% + 8px); bottom: auto; text-align: right; margin-top: -44px; -webkit-transition: all 400ms linear; transition: all 400ms linear; z-index: 7; } /* productList banner title */ .bannerHd .seriesTtl { position: absolute; top: 50%; right: 8%; height: 105px; color: #fff; margin: -52px 0 0 0; z-index: 9; } .bannerHd .seriesTtl .titleSub { font-size: 60px; line-height: 70px; text-align: center; font-weight: 400; } .bannerHd .seriesTtl .btn-howChoose { margin: 30px auto 0; width: 194px; height: 44px; border-radius: 30px; border: 1px solid #fff; text-align: center; } .bannerHd .seriesTtl .btn-howChoose a { font-size: 22px; line-height: 44px; color: #fff; } /* productList title */ section article.filtrationList .filtrationBox .seriesTtl .titleSub { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; } section article.filtrationList .filtrationBox .allSeries { position: absolute; top: 80px; left: 0; right: 0; margin: 68px auto 0; width: 114px; height: 32px; border-radius: 20px; border: 1px solid #fff; text-align: center; z-index: 2; } section article.filtrationList .filtrationBox .allSeries a { display: block; font-size: 12px; line-height: 32px; color: #fff; } section article.filtrationList .filtrationBox .seriesTtl .titleSub>span { padding-right: 14px; } section article.filtrationList .filtrationBox .seriesTtl .titleSub .name { font-size: 58px; line-height: 60px; color: #fff; } section article.filtrationList .filtrationBox .seriesTtl .titleSub .cont { font-size: 23px; line-height: 28px; color: #fff; text-align: left; } section article.filtrationList .filtrationBox .allSeries.bkColor { border: 1px solid #0f0f0f; } section article.filtrationList .filtrationBox .allSeries.bkColor a, section article.filtrationList .filtrationBox .seriesTtl.bkColor .titleSub .name, section article.filtrationList .filtrationBox .seriesTtl.bkColor .titleSub .cont { color: #0f0f0f; } section article.filtrationList .filtrationBox ul.filtrationItem li .filtrationMenu.open { bottom: 0; top: auto; } section article.filtrationList .filtrationBox ul.filtrationItem li .filtrationMenu a.btnMenu { text-align: center; display: inline-block; width: 66px; line-height: 36px; background-color: rgba(255, 255, 255, .8); } section article.filtrationList .filtrationBox ul.filtrationItem li .filtrationMenu a.btnMenu img { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 300ms linear; transition: all 300ms linear; } section article.filtrationList .filtrationBox ul.filtrationItem li .filtrationMenu.open a.btnMenu img { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 300ms linear; transition: all 300ms linear; } section article.filtrationList .filtrationBox ul.filtrationItem li .filtrationMenu .filtrationMenuBox { padding: 40px; text-align: left; font-size: 16px; color: #000; background-color: rgba(255, 255, 255, .8); } section article.filtrationList .filtrationBox ul.filtrationItem li .filtrationMenu .filtrationMenuBox a { color: #000; } section article.filtrationList .filtrationBox ul.filtrationItem li .filtrationMenu .filtrationMenuBox .main { max-width: 1120px; margin: 0 auto; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxHd { padding: 0 0 10px 0; margin: 0 0 10px 0; border-bottom: 1px #9f9f9f solid; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .menuBoxBd-inner { display: table; width: 100%; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi a { width: 25%; margin: 10px -2px 0 -2px; display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi span { display: block; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi span.seriesHd { font-size: 16px; font-weight: 400; color: #000; } /* section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi span.seriesHd + span.seriesBd { margin: 5px 0 0 0; } */ section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi span.seriesBd { font-size: 12px; color: #666; } section article.filtrationList .filtrationBox .title.bkColor { color: #0f0f0f; } section article.filtrationList .filtrationBox .title.bkColor:after { background-color: #0f0f0f; } section article.filtrationList .filtrationBox .title .titleSub { margin: 0 0 15px 0; font-size: 36px; line-height: 40px; } section article.filtrationList .filtrationBox .title .btn-howChoose a, section article.filtrationList .filtrationBox .title .text { font-size: 18px; line-height: 20px; } section article.filtrationList .filtrationBox .title .btn-howChoose a { display: inline-block; width: 170px; height: 42px; line-height: 42px; color: #fff; border: 2px #fff solid; -webkit-border-radius: 22px; border-radius: 22px; } section article.filtrationList .filtrationBox .title .btn-howChoose a img { margin-top: -2px; max-width: 24px; } section article.filtrationList .filtrationBox ul.filtrationItem li .photo { position: relative; width: 100%; padding-bottom: 66%; overflow: hidden; } section article.filtrationList .filtrationBox ul.filtrationItem li .photo:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0); } section article.filtrationList .filtrationBox ul.filtrationItem li.first.max .photo { padding-bottom: 41%; } section article.filtrationList .filtrationBox ul.filtrationItem li.max .photo { padding-bottom: 32%; } section article.filtrationList .filtrationBox ul.filtrationItem li .photo .photo-inner-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 100ms linear; transition: all 100ms linear; } section article.filtrationList .filtrationBox ul.filtrationItem li:hover .photo .photo-inner-img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 400ms linear; transition: all 400ms linear; } section article.professionalList, section article.professionalList>* { background: #f4f4f4; } section article.professionalList .professionalBox { position: relative; width: 90%; max-width: 1440px; margin: 0 auto; padding: 0 0 180px 0; } section article.professionalList .professionalBox h2 { margin: 0 0 40px 0; font-size: 18px; font-weight: 200; text-align: center; } section article.professionalList .professionalBox h2 span { font-size: 24px; } section article.professionalList .container { width: 90%; max-width: 1440px; margin: 0 auto; } section article.professionalList .container .item { margin-right: 40px; } section article.professionalList .container .item:hover img { opacity: .5; -webkit-transition: all .8s; -moz-transition: all .8s; -o-transition: all .8s; transition: all .8s; } section article.professionalList .container .item .hd { margin-top: 20px; font-size: 15px; } section article.professionalList .container .item .hd span { font-size: 18px; } section article.newsList .slick-prev, section article.newsList .slick-next, section article.consumerList .slick-prev, section article.consumerList .slick-next, section article.professionalList .slick-prev, section article.professionalList .slick-next { top: calc(100% + 70px); } section article.newsList .slick-slide img, section article.consumerList .slick-slide img, section article.professionalList .slick-slide img { width: 100%; } .slick-dots { position: absolute; bottom: -45px; display: block; width: 100%; padding: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; vertical-align: middle; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button::before { font-family: slick; font-size: 38px; line-height: 28px; position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; content: "•"; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; } .slick-dots li.slick-active button::before { opacity: 1; } section article.clientsList { position: relative; background: #fff; } section article.clientsList .clientsBox { position: relative; width: 90%; max-width: 1200px; margin: 0 auto; padding: 80px 0 80px 0; } section article.clientsList .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } section article.clientsList .container .item { position: relative; width: 20%; margin: 40px 0 50px 0; text-align: center; } section article.clientsList .container .item a { position: relative; display: block; width: 150px; height: 150px; margin: 0 auto; } section article.clientsList .container .item img { filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -webkit-filter: grayscale(1); filter: grayscale(1); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } section article.clientsList .container .item a:hover img { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; -webkit-filter: none; filter: none; } section article.clientsList .desc { position: absolute; left: 40px; bottom: 20px; color: #4f4f4f; font-size: 11px; } section article.clientsNumber { position: relative; background: #fff; z-index: 2; padding: 80px 0 80px 0; } section article.clientsNumber .numberBox { width: 80%; margin: 0 auto; } section article.clientsNumber h2 { margin: 0 0 40px 0; font-size: 18px; font-weight: 200; text-align: center; } section article.clientsNumber h2 span { font-size: 24px; } section article.clientsNumber .jumping { color: #000; font-weight: 100; line-height: 120px; width: 700px; margin: 0 auto; } section article.clientsNumber .jumping span:nth-child(1) { font-size: 45px; vertical-align: top; } section article.clientsNumber .jumping span:nth-child(2) { font-size: 120px; color: #55a7f2; font-weight: 200; } section article.clientsNumber .jumping span:nth-child(3) { font-size: 30px; vertical-align: bottom; } section article.clientsNumber .clientstype ul li { display: block; float: left; width: 20%; text-align: center; } section article.clientsNumber .clientstype ul li span { display: block; margin-bottom: 20px; font-size: 20px; line-height: 20px; font-weight: 200; } section article.clientsNumber .numberBox .desc p { font-size: 13px; line-height: 25px; color: #000; margin: 30px auto 0; text-align: center; } section article.clientsMap { position: relative; width: 100%; padding-bottom: 28%; background-size: cover; z-index: 2; overflow: hidden; } section article.clientsMap .title { position: absolute; top: 50%; margin: -20px auto 0; width: 100%; height: 40px; text-align: center; } section article.clientsMap .title h2 { font-size: 30px; color: #515151; line-height: 40px; font-weight: 200; } section article.clientsMap .pinBox .pin { position: absolute; top: 0; left: 0; } section article.clientsMap .pinBox .pin img { max-width: 100%; } section article.clientsMap .pinBox .pin img.pinmobile { display: none; } /* section article.bannerBox .photo { position: relative; height: 452px; overflow: hidden; background: url(../Content/images/business/productBusiness.jpg?v20170216) no-repeat; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; }*/ section article.bannerBox .photo img { width: 100%; min-width: 1850px; vertical-align: bottom; } section article.bannerBox .bannerHd .photo img { position: relative; min-width: 720px; } section article.bannerBox .bannerHd { position: relative; } section article.bannerBox .bannerHd.home { background: #fff; } section article.bannerBox .bannerHd.busines { background: #000; } section article.bannerBox .bannerHd .title { position: absolute; top: 50%; right: 8%; height: 105px; color: #fff; margin: -52px 0 0 0; z-index: 9; line-height: inherit; background: transparent; } section article.bannerBox .bannerHd .title.bk { color: #000; } section article.bannerBox .bannerHd .title.bk .icon { border-right: 2px #000 solid; } section article.bannerBox .bannerHd .title .icon, section article.bannerBox .bannerHd .title .ser, section article.bannerBox .bannerHd .title .sercon { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.bannerBox .bannerHd .title .icon { width: 106px; padding: 0 20px 0 0; border-right: 2px #fff solid; } section article.bannerBox .bannerHd .title .icon img { width: 100%; } section article.bannerBox .bannerHd .title .ser { padding: 0 4px 0 20px; font-size: 95px; font-weight: 100; } section article.bannerBox .bannerHd .title .ser.tw { font-size: 76px; } section article.bannerBox .bannerHd .title .en { display: block; font-size: 45px; line-height: 45px; font-weight: 200; text-align: left; } section article.bannerBox .bannerHd .title .ch { font-size: 38px; line-height: 40px; font-weight: 200; text-align: left; } section article.bannerBox .bannerHd .title .button { display: block; clear: both; width: 100%; height: 30px; margin: 20px 0 0 0; } section article.bannerBox .bannerHd .title .button a { display: block; float: right; padding: 4px 50px; font-size: 18px; line-height: 30px; color: #636363; -webkit-border-radius: 25; -moz-border-radius: 25; border-radius: 25px; background: #ffffff; background-image: -webkit-linear-gradient(top, #ffffff, #e0e0df); background-image: -moz-linear-gradient(top, #ffffff, #e0e0df); background-image: -ms-linear-gradient(top, #ffffff, #e0e0df); background-image: -o-linear-gradient(top, #ffffff, #e0e0df); background-image: linear-gradient(to bottom, #ffffff, #e0e0df); } section article.bannerBox .bannerHd .reserveBtn { position: absolute; bottom: 0; left: 8%; z-index: 2; } section article.bannerBox .bannerHd .reserveBtn>span { display: block; float: left; width: 210px; height: 60px; padding: 12px 16px; background: #2f8be0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.bannerBox .bannerHd .reserveBtn span.custom { background: transparent; color: #fff; font-size: 11px; line-height: 40px; width: 220px; } section article.bannerBox .bannerHd .reserveBtn span a { color: #fff; font-size: 17px; line-height: 40px; } section article.bannerBox .bannerHd .reserveBtn span img { width: 40px; height: 40px; vertical-align: top; } section article.bannerBox .bgMask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; } section article.bannerBox.Oseries .bgMask { background: #297cc8; } section article.bannerBox.Kseries .bgMask { background: #e0a415; } section article.bannerBox.Cseries .bgMask { background: #d38245; } section article.bannerBox.DHseries .bgMask { background: #79b2c2; } section article.bannerBox.CUseries .bgMask { background: #87a65b; } section article.bannerBox.Hseries .bgMask { background: #c3ce68; } section article.bannerBox.DCseries .bgMask { background: #56cbba; } section article.bannerBox.WHseries .bgMask { background: #94d6de; } section article.bannerBox.EFseries .bgMask { background: #9097e6; } section article.bannerBox.HLseries .bgMask { background: #80c692; } section article.bannerBox.PBSseries .bgMask { background: #4a7ad2; } section article.bannerBox.SEOseries .bgMask { background: #c3c1cc; } section article.bannerBox.ICEseries .bgMask { background-color: #99612e; } section article.bannerBox.MRSseries .bgMask { background-color: #3d6194; } section article.bannerBox.HOTseries .bgMask { background-color: #89201d; } section article.bannerBox.Centralseries .bgMask { background-color: #827d68; } section article.bannerBox.Softseries .bgMask { background-color: #30637a; } section article.bannerBox .bannerBd.home { padding: 60px 60px; text-align: center; background: #fff; } section article.bannerBox .bannerBd.home .title { width: 160px; margin: 0 auto 20px auto; padding: 50px 0 0 0; } section article.bannerBox .bannerBd.home .title span { font-size: 18px; font-weight: 200; margin: 0 0 20px 0; padding: 0 0 20px 0; } section article.bannerBox.Oseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeO.png?v20170216) no-repeat top center; } section article.bannerBox.Oseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeO.gif?v20170216) no-repeat bottom center; color: #54b2ef; } section article.bannerBox.Kseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeK.png?v20170216) no-repeat top center; } section article.bannerBox.Kseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeK.gif?v20170216) no-repeat bottom center; color: #f8b617; } section article.bannerBox.Cseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeC.png?v20170216) no-repeat top center; } section article.bannerBox.Cseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeC.gif?v20170216) no-repeat bottom center; color: #ea904d; } section article.bannerBox.DHseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeDH.png?v20170216) no-repeat top center; } section article.bannerBox.DHseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeDH.gif?v20170216) no-repeat bottom center; color: #86c5d7; } section article.bannerBox.CUseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeCU.png?v20170216) no-repeat top center; } section article.bannerBox.Hseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeH.gif?v20170216) no-repeat bottom center; color: #c3ce68; } section article.bannerBox.Hseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeH.png?v20170216) no-repeat top center; } section article.bannerBox.DCseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeDC.gif?v20170216) no-repeat bottom center; color: #56cbba; } section article.bannerBox.DCseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeDC.png?v20170216) no-repeat top center; } section article.bannerBox.WHseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeWH.gif?v20170216) no-repeat bottom center; color: #94d6de; } section article.bannerBox.WHseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeWH.png?v20170216) no-repeat top center; } section article.bannerBox.EFseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeEF.gif?v20170216) no-repeat bottom center; color: #9097e6; } section article.bannerBox.EFseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeEF.png?v20170216) no-repeat top center; } section article.bannerBox.HLseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeHL.gif?v20180209) no-repeat bottom center; color: #8ad69e; } section article.bannerBox.HLseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeHL.png?v20180209) no-repeat top center; } section article.bannerBox.SOHOseries .bannerBd.home .title span { background: url(../Content/images/home/line_homeSOHO.gif?v20230223) no-repeat bottom center; color: #a994de; } section article.bannerBox.SOHOseries .bannerBd.home .title { background: url(../Content/images/home/icon_homeSOHO.png?v20230223) no-repeat top center; } /* section article.bannerBox.PBSseries .bannerBd.home .title span { background: url(../Content/images/home/line_homePBS.gif?v20180209) no-repeat bottom center; color: #548bef;} */ section article.bannerBox.PBSseries .bannerBd.home .title { background: url(../Content/images/home/icon_homePBS.png?v20180209) no-repeat top center; } /* 2019/11/05 愛惠浦形象照*/ section article.bannerBox .bannerHd .title { transition: color .2s linear .35s; } section article.bannerBox .bannerHd .title .icon { transition: border .2s linear .35s; } section article.bannerBox.DHseries.active .bannerHd .title { color: #86c5d7; } section article.bannerBox.DHseries.active .bannerHd .title .icon { border-right: 2px #7dacbd solid; } section article.bannerBox.Hseries.active .bannerHd .title { color: #c3ce68; } section article.bannerBox.Hseries.active .bannerHd .title .icon { border-right: 2px #acb35f solid; } section article.bannerBox.PBSseries.active .bannerHd .title { color: #548bef; } section article.bannerBox.PBSseries.active .bannerHd .title .icon { border-right: 2px #548bef solid; } section article.bannerBox.ICEseries .bannerHd .title.bk { color: #3d1400; } section article.bannerBox.ICEserie .bannerHd .title.bk .icon { border-right: 2px #3d1400 solid; } section article.bannerBox.Centralseries .bannerHd .title { color: #3c3a2e; } section article.bannerBox.Centralseries .bannerHd .title .icon { border-right: 2px #3c3a2e solid; } section article.bannerBox .bannerBd.busines { padding: 60px 60px; text-align: center; background: #000; } section article.bannerBox .bannerBd.busines .title { width: 160px; margin: 0 auto 20px auto; padding: 50px 0 0 0; background: url(../Content/images/business/icon_business.png?v20170216) no-repeat top center; } section article.bannerBox .bannerBd.busines .title span { font-size: 18px; font-weight: 200; margin: 0 0 20px 0; padding: 0 0 20px 0; color: #fff; background: url(../Content/images/business/line_business.gif?v20170216) no-repeat bottom center; } section article.banner.productDetail img { width: 100%; } /* 2019/11/05 熱飲／咖啡系列 */ section article.bannerBox.HOTseries .bannerBd.busines { background: #a78057; } section article.bannerBox.HOTseries .bannerHd .reserveBtn>span { background: #664c2a; } section article.bannerBox.HOTseries .bannerHd .reserveBtn span.custom { background: transparent; } section article.bannerBox.MRSseries .bannerBd.busines { background: #203354; } section article.bannerBox.Centralseries .bannerBd.busines { background: #3c3a2e; } section article.bannerBox.Centralseries .bannerHd .reserveBtn>span { background: #908b73; } section article.bannerBox.Centralseries .bannerHd .reserveBtn span.custom { background: transparent; } section article.bannerBox.ICEseries .bannerBd.busines { background: #3d1400; } section article.bannerBox.ICEseries .bannerHd .reserveBtn>span { background: #aa6b33; } section article.bannerBox.ICEseries .bannerHd .reserveBtn span.custom { background: transparent; } section article.bannerBox .bannerFt { position: relative; } section article.bannerBox .bannerFt.home { background-color: #e5e7f3; } section article.bannerBox .bannerFt.busines { background-color: #323232; } section article.bannerBox .bannerFt .photo img { min-width: inherit; } section article.bannerBox .bannerFt:after { content: ""; display: table; clear: both; } section article.bannerBox .bannerFt .banner { position: absolute; top: 0; left: 0; width: 60%; height: 100vh; overflow: hidden; } section article.bannerBox .bannerFt .banner.start { position: fixed; top: 0; left: 0; } section article.bannerBox .bannerFt .banner.end { bottom: 0; left: 0; position: absolute; top: auto; } section article.bannerBox .bannerFt .con { float: right; width: 40%; } section article.bannerBox .bannerFt .banner .desc { position: absolute; left: 40px; bottom: 40px; z-index: 2; } section article.bannerBox .bannerFt .banner.start .desc { position: fixed; bottom: 50px; } section article.bannerBox .bannerFt .banner.end .desc { position: absolute; bottom: 40px; } section article.bannerBox .bannerFt .banner .desc .icon, section article.bannerBox .bannerFt .banner .desc .text { display: table-cell; *display: inline; zoom: 1; vertical-align: bottom; } section article.bannerBox .bannerFt .banner .desc .icon { padding: 0 10px 0 0; } section article.bannerBox .bannerFt.home .banner .desc .icon img { max-width: 64px; min-width: initial; } section article.bannerBox .bannerFt.busines .banner .desc .icon img { max-width: 76px; } section article.bannerBox .bannerFt .banner .desc .text { font-size: 11px; line-height: 18px; font-weight: 200; } section article.bannerBox .bannerFt .banner>.photo>img { min-width: 140vh; } section article.bannerBox .bannerFt.home .banner .desc .text { color: #fff; } section article.bannerBox .bannerFt.busines .banner .desc .text { color: #3f3f3f; } section article.bannerBox.MRSseries .bannerFt.busines .banner .desc .text, section article.bannerBox.HOTseries .bannerFt.busines .banner .desc .text, section article.bannerBox.Centralseries .bannerFt.busines .banner .desc .text, section article.bannerBox .bannerFt.busines .banner .desc .text.we { color: #fff; } section article.bannerBox .bannerFt.home .banner .desc.black .text { color: #000; } section article.bannerBox .bannerFt .conbox1 { position: absolute; top: 0; right: 0; left: 0; height: 100vh !important; z-index: 2; } /*家用*/ section article.bannerBox .bannerFt img.bgFull { position: relative; left: 50%; width: auto; left: 50%; height: 100vh; transform: translateX(-50%) translateY(0); -moz-transform: translateX(-50%) translateY(0); -o-transform: translateX(-50%) translateY(0); z-index: 1; } /*商用*/ section article.bannerBox.busines .bannerFt img.bgFull {} section article.bannerBox .bannerFt .conbox { position: relative; width: 100%; height: calc(100vh * 1.6) !important; max-height: 1360px; min-height: 1200px; float: right; display: table-cell; text-align: center; vertical-align: middle; color: #fff; background: url(../Content/images/icon/icon_info.gif?v20170216) no-repeat right top; background-attachment: scroll; z-index: 3; } section article.bannerBox .bannerFt .con.start .conbox { background-attachment: fixed; display: block; } section article.bannerBox .bannerFt .con.end .conbox { /*background-position: right 70.5%;*/ background-attachment: scroll; display: block; } section article.bannerBox .bannerFt .con .conbox .OpenFix { position: absolute !important; left: auto !important; } section article.bannerBox.Oseries .bannerFt .con { background-color: #54b2ef; } section article.bannerBox.Kseries .bannerFt .con { background-color: #f8b617; } section article.bannerBox.Cseries .bannerFt .con { background-color: #ea904d; } section article.bannerBox.DHseries .bannerFt .con { background-color: #86c5d7; } section article.bannerBox.CUseries .bannerFt .con { background-color: #96b865; } section article.bannerBox.Hseries .bannerFt .con { background-color: #c3ce68; } section article.bannerBox.DCseries .bannerFt .con { background-color: #56cbba; } section article.bannerBox.WHseries .bannerFt .con { background-color: #94d6de; } section article.bannerBox.EFseries .bannerFt .con { background-color: #9097e6; } section article.bannerBox.HLseries .bannerFt .con { background-color: #8ad69e; } section article.bannerBox.PBSseries .bannerFt .con { background-color: #548bef; } section article.bannerBox.SOHOseries .bannerFt .con { background-color: #a994de; } section article.bannerBox .bannerFt .conbox a.more { position: absolute; left: 20px; bottom: 40px; display: block; padding: 0 0 0 30px; color: #fff; font-size: 18px; font-weight: 400; line-height: 25px; background: url(../Content/images/icon/icon_productArrow.png?v20170216) no-repeat; } section article.bannerBox .bannerFt .conboxbd { width: 100%; max-width: 29vw; min-width: 90%; margin: 0 auto; padding: 60px 3vw; display: inline-block; text-align: left; } /* section article.bannerBox .bannerFt.busines .conboxbd { padding-top: 100px;} */ section article.bannerBox .bannerFt .conboxMain { position: relative; text-align: center; } section article.bannerBox .bannerFt .con.start a.more { position: fixed; left: initial; margin: 0 0 0 20px; } section article.bannerBox .bannerFt .conbox h2, section article.bannerBox .bannerFt .conbox1 h2 { font-size: 30px; font-weight: 100; line-height: 36px; color: #fff; margin: 0 0 20px 0; opacity: 1; } section article.bannerBox .bannerFt .conbox p, section article.bannerBox .bannerFt .conbox1 p { font-size: 16px; line-height: 30px; font-weight: 100; letter-spacing: 1px; color: #fff; opacity: 1; } section article.bannerBox .bannerFt.home .con { position: relative; overflow: hidden; vertical-align: bottom; z-index: 2; } section article.bannerBox .bannerFt.home .con img.product { position: relative; top: 90px; width: 100%; vertical-align: bottom; margin-top: 80px; } /* section article.bannerBox.DHseries .bannerFt.home .con img.product { top: 120px; } */ section article.bannerBox .bannerFt.home .con .title { width: 100%; text-align: center; font-size: calc(30px + (50 - 30) * ((100vw - 300px) / (1600 - 300))); line-height: 1.1em; font-weight: 600; margin-top: 180px; } section article.bannerBox .bannerFt.home .con .titleBoxSq { text-align: left; display: inline-table; } section article.bannerBox.Oseries .bannerFt.home .con .title, section article.bannerBox.Kseries .bannerFt.home .con .title, section article.bannerBox.Cseries .bannerFt.home .con .title, section article.bannerBox.DHseries .bannerFt.home .con .title, section article.bannerBox.CUseries .bannerFt.home .con .title, section article.bannerBox.Hseries .bannerFt.home .con .title, section article.bannerBox.DCseries .bannerFt.home .con .title, section article.bannerBox.WHseries .bannerFt.home .con .title, section article.bannerBox.EFseries .bannerFt.home .con .title, section article.bannerBox.HLseries .bannerFt.home .con .title, section article.bannerBox.PBSseries .bannerFt.home .con .title, section article.bannerBox.SOHOseries .bannerFt.home .con .title { width: 100%; max-width: 29vw; min-width: 90%; padding: 0 3vw; margin: 180px auto 0 auto; text-align: left; } /* { width: 52%; margin: 180px auto 0 auto;} */ section article.bannerBox.Oseries .bannerFt.home .con .title span, section article.bannerBox.Kseries .bannerFt.home .con .title span, section article.bannerBox.Cseries .bannerFt.home .con .title span, section article.bannerBox.DHseries .bannerFt.home .con .title span, section article.bannerBox.CUseries .bannerFt.home .con .title span, section article.bannerBox.Hseries .bannerFt.home .con .title span, section article.bannerBox.DCseries .bannerFt.home .con .title span, section article.bannerBox.WHseries .bannerFt.home .con .title span, section article.bannerBox.EFseries .bannerFt.home .con .title .titleBoxSq>span, section article.bannerBox.HLseries .bannerFt.home .con .title span, section article.bannerBox.PBSseries .bannerFt.home .con .title span, section article.bannerBox.SOHOseries .bannerFt.home .con .title .titleBoxSq>span { display: inline-block; width: 100%; } section article.bannerBox.Oseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.Kseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.Cseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.DHseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.CUseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.Hseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.DCseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.WHseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.EFseries .bannerFt.home .con .title .titleBoxSq>span>span { color: #fff; } section article.bannerBox.HLseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.PBSseries .bannerFt.home .con .title span { color: #fff; } section article.bannerBox.SOHOseries .bannerFt.home .con .title .titleBoxSq>span { color: #fff; } section article.bannerBox.DHseries .bannerFt.home .con img.product { margin-top: 0; } section article.bannerBox .bannerFt2 { position: relative; } section article.bannerBox .bannerFt2 .titleBoxs { position: absolute; top: 20%; left: 17%; width: 60%; max-width: 540px; z-index: 1; } section article.bannerBox .bannerFt2 .titleBoxs .title { line-height: 90px; margin: 0 0 10px -8px; } section article.bannerBox .bannerFt2.busines .titleBoxs .title { color: #fff; } section article.bannerBox .bannerFt2 .titleBoxs .title .ser, section article.bannerBox .bannerFt2 .titleBoxs .title .sercon { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.bannerBox .bannerFt2 .titleBoxs .title .ser { padding: 0 4px 0 0; font-size: 88px; font-weight: 100; } section article.bannerBox .bannerFt2 .titleBoxs .title .ser.tw { font-size: 66px; } section article.bannerBox .bannerFt2.busines .titleBoxs .title .ser { font-size: 66px; } section article.bannerBox .bannerFt2.busines .titleBoxs .title .ser.tw { font-size: 66px; } section article.bannerBox .bannerFt2 .titleBoxs .title .en { font-size: 33px; line-height: 33px; font-weight: 200; text-align: left; } section article.bannerBox .bannerFt2 .titleBoxs .title .ch { font-size: 28px; line-height: 30px; font-weight: 200; text-align: left; } section article.bannerBox .bannerFt2 .titleBoxs .title .ser.tw.tag { font-size: 18px; border: 1px #888 solid; line-height: 1.8; display: inline-block; padding: 0 10px; margin: 0 0 -20px 0; } section article.bannerBox .bannerFt2 .titleBoxs .text { margin: 0 0 20px 0; font-size: 22px; font-weight: 100; line-height: 30px; color: #878787; } section article.bannerBox .bannerFt2 .titleBoxs .textFt { font-size: 14px; line-height: 1.2em; margin: 0 0 20px 0; color: #676767; } section article.bannerBox .bannerFt2 .titleBoxs .btn { /*width: 146px;*/ } section article.bannerBox .bannerFt2 .titleBoxs .btn a { display: inline-block; padding: 0 30px; min-width: 146px; height: 30px; line-height: 30px; text-align: center; color: #fff; margin: 0 10px 0 0; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; font-size: 14px; } section article.bannerBox .bannerFt2 .titleBoxs .btn a:last-child { margin: 0; } section article.bannerBox .bannerFt2 .titleBoxs .btn a.max { width: 200px; } section article.bannerBox .bannerFt2 .photo { *display: table-cell; display: block; vertical-align: bottom; background: #e5e7f2; } section article.bannerBox .bannerFt2 .photo img { display: inline-block; } /** product bussiness**/ section article.bannerBox.ICEseries .bannerFt.busines .con { background: #aa6b33; } section article.bannerBox.MRSseries .bannerFt.busines .con { background: #446ca4; } section article.bannerBox.HOTseries .bannerFt.busines .con { background: #664c2a; } section article.bannerBox.Centralseries .bannerFt.busines .con { background: #908b73; } section article.bannerBox.Softseries .bannerFt.busines .con { background: #356e87; } section article.bannerBox .bannerFt.busines .con { position: relative; overflow: hidden; vertical-align: bottom; z-index: 2; } section article.bannerBox .bannerFt.busines .con img.product { position: relative; top: 120px; vertical-align: bottom; display: block; width: 100%; max-width: 100%; min-width: 100%; padding: 0; margin: 0 auto; } section article.bannerBox.DHseries .bannerFt.busines .con img.product { top: 120px; } /* section article.bannerBox.ICEseries .bannerFt .conbox { background-color: #aa6b33;} section article.bannerBox.MRSseries .bannerFt .conbox { background-color: #446ca4;} section article.bannerBox.HOTseries .bannerFt .conbox { background-color: #982320;} section article.bannerBox.Centralseries .bannerFt .conbox { background-color: #908b73;} section article.bannerBox.Softseries .bannerFt .conbox { background-color: #356e87;} */ section article.bannerBox .bannerFt.busines .con .title { width: 100%; text-align: center; font-size: 56px; font-weight: 600; line-height: 1.1em; margin-top: 220px; } section article.bannerBox .bannerFt.busines .con .titleBoxSq { text-align: left; display: inline-table; } section article.bannerBox.ICEseries .bannerFt.busines .con .title, section article.bannerBox.MRSseries .bannerFt.busines .con .title, section article.bannerBox.HOTseries .bannerFt.busines .con .title, section article.bannerBox.Centralseries .bannerFt.busines .con .title, section article.bannerBox.Softseries .bannerFt.busines .con .title { /* width: 80%; padding: 0 10%; text-align: left; */ width: 100%; max-width: 29vw; min-width: 90%; padding: 0 3vw; margin: 180px auto 0 auto; letter-spacing: -2px; text-align: left; } section article.bannerBox.ICEseries .bannerFt.busines .con .titleBoxSq, section article.bannerBox.MRSseries .bannerFt.busines .con .titleBoxSq, section article.bannerBox.HOTseries .bannerFt.busines .con .titleBoxSq, section article.bannerBox.Centralseries .bannerFt.busines .con .titleBoxSq, section article.bannerBox.Softseries .bannerFt.busines .con .titleBoxSq { color: #fff; font-size: calc(30px + (50 - 30) * ((100vw - 300px) / (1600 - 300))); line-height: 1.1em; } /* if we want the our font size in a range where 30px is the minimum size at the smallest viewport width of 300px and where 50px is the maximum size at the largest viewport width of 1600px, then our equation looks like this: */ section article.bannerBox.ICEseries .bannerFt.busines .con .title span { color: #3d1400; } section article.bannerBox.MRSseries .bannerFt.busines .con .title span { color: #193356; } section article.bannerBox.HOTseries .bannerFt.busines .con .title span { color: #a78057; } section article.bannerBox.Centralseries .bannerFt.busines .con .title span { color: #3c3a2e; } section article.bannerBox.Softseries .bannerFt.busines .con .title span { color: #173642; } section article.infoBox { position: relative; background: #f4f4f4; } section article.infoBox .desc { display: table; color: #000; text-align: center; background: #f4f4f4; padding: 20px 10px; margin: 0 auto; } section article.unitTitle { position: relative; /*width: 100%;*/ /*display: table;*/ color: #fff; /*text-align: center;*/ } section article.unitTitle .main { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; */ width: 100%; padding: 30px 40px 30px 0px; max-width: 1440px; } section article.unitTitle .resultTitle { color: #000; font-size: 30px; line-height: 60px; text-align: center; margin: 0 auto; } section article.unitTitle.busines { color: #fff; background: #3f3f3f; } section article.unitTitle.home, section article.unitTitle.member, section article.unitTitle.survey { color: #000; background: #fff; } section article.unitTitle .icon, section article.unitTitle .title { *display: inline; zoom: 1; vertical-align: middle; } section article.unitTitle .btnHowChoose, section article.unitTitle .btnLocation { /* margin-left: auto; */ } .boxtr>.infoBox, .boxtr>.infoDIYreturn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 15px; } .boxtr>.infoBox.hidden, .boxtr>.infoDIYreturn.hidden { display: none } .boxtr>.infoBox .msgBox, .boxtr>.infoDIYreturn .msgBox { margin: 0 0 10px 0; } section article.orderConBox .orderList .tabDetail .btn a.gray, .boxtr>.infoBox .btn a.gray, .boxtr>.infoDIYreturn .btn a.gray { color: #515151; background: #d3d3d2; } section article.unitTitle .default, section article.unitTitle .infoBox, section article.unitTitle .infoDIYreturn { /* width: calc(100% - 170px); margin-right: auto; padding: 0 40px 0 0; */ -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } section article.unitTitle .default.hidden, section article.unitTitle .infoBox.hidden, section article.unitTitle .infoDIYreturn.hidden { display: none } section article.unitTitle .icon { padding: 0 40px 0 40px; border-right: 1px solid #9f9f9f; } section article.unitTitle .icon img { width: 100%; width: 85px; vertical-align: bottom; } section article.unitTitle .title { margin-left: auto; margin-right: auto; text-align: center; vertical-align: middle; background: inherit; line-height: normal; height: auto; } section article.unitTitle .title+.btnLocation { margin-left: 0; } section article.unitTitle .title .box { display: inline-block; } section article.unitTitle .title .ser, section article.unitTitle .title .sercon { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.unitTitle .title .ser { padding: 0 4px 0 20px; font-size: 50px; line-height: 1em; font-weight: 100; } section article.unitTitle .title .ser.tw { font-size: 42px; line-height: 1em; } section article.unitTitle .title .en { font-size: 18px; font-weight: 300; text-align: left; } section article.unitTitle .title .ch { font-size: 22px; font-weight: 200; text-align: left; } section article.unitTitle .title .ch span { padding: 0 0 0 2px; font-size: 15px; } section article.unitTitle .tel { font-size: 12px; line-height: 16px; color: #9f9f9f; padding: 0 0 0 25px; margin-left: auto; background: url(../Content/images/icon/icon_tel.png?v20170216) no-repeat left center; } section article.unitTitle .tel .dnw { font-size: 17px; } /* section article.unitTitle .btnHowChoose, section article.unitTitle .btnLocation { position: absolute; top: 60px; right: 40px; } */ section article.unitTitle .btnHowChoose span, section article.unitTitle .btnLocation span { padding: 4px 25px; color: #000; font-size: 14px; background: #d3d3d2; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.unitTitle .register, section article.unitTitle .msgBox { padding: 0 40px 0 40px; /*margin: 0 auto; border-left: 1px #9f9f9f solid; display: table-cell; *display: inline; zoom: 1; vertical-align: middle;*/ } section article.unitTitle .main>.register, section article.unitTitle .main>.msgBox, section article.unitTitle .main>.title { /* width: calc(100% - 170px); */ } section article.unitTitle .register { padding: 0 160px 0 40px; } section article.unitTitle .register .info { margin: 5px 0 0 10px; color: #d92e00; font-size: 14px; display: none; } section article.unitTitle .register .msg { margin: 5px 0 0 10px; color: #65a6e0; font-size: 13px; } section article.unitTitle .register .msg a { color: #65a6e0; } section article.unitTitle .locationBox, section article.unitTitle .qaBox { width: 90%; max-width: 960px; min-height: 65px; margin: 0 auto; border-left: 1px #9f9f9f solid; vertical-align: middle; } section article.unitTitle .locationBox { min-height: 80px; border-left: 0; } section article.unitTitle .register input[type=text] { width: 75%; } section article.unitTitle .register input[type=submit] { width: 20%; } section article.unitTitle .msgBox .boxtdl, section article.unitTitle .msgBox .boxtdr { font-size: 17px; line-height: 32px; text-align: left; display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.unitTitle .msgBox .boxtdl { width: 120px; } section article.unitTitle .msgBox .boxtdr b { font-size: 19px; } section article.unitTitle .msgBox .boxtdr.transit { color: #70b5f1; } section article.unitTitle .msgBox h3 { font-size: 17px; font-weight: 400; line-height: 32px; text-align: left; } section article.unitTitle .msgBox h3 span { color: #70b5f1; } section article.unitTitle .msgBox p { font-size: 12px; line-height: 20px; text-align: left; margin: 10px 0 0 0; } section article.unitTitle .msgBox .desc { text-align: left; font-size: 13px; font-weight: 100; } section article.unitTitle .msgBox ul.checkbox { margin: 10px 0 0 0; } section article.unitTitle .msgBox ul.checkbox li { color: #666; display: inline-block; } section article.unitTitle .msgBox ul.surveyBox { /*margin: 0 240px 0 0;*/ text-align: left; } section article.unitTitle .msgBox ul.surveyBox li { display: inline-block; } section article.unitTitle .msgBox ul.surveyBox li .boxtdl { width: auto; font-size: 17px; padding: 0 20px 0 0; } section article.unitTitle .msgBox ul.surveyBox li .boxtr { margin: 0 40px; } section article.unitTitle .msgBox ul.surveyBox li .boxtdr { color: #666; font-weight: 200; } section article.unitTitle .locationBox fieldset, section article.unitTitle .qaBox fieldset { position: relative; width: 100%; } section article.unitTitle .locationBox .buyArea, section article.unitTitle .locationBox .buyClass, section article.unitTitle .locationBox .buyText, section article.unitTitle .locationBox .buyBtn, section article.unitTitle .qaBox .qaText, section article.unitTitle .qaBox .qaBtn { position: absolute; top: 0; } section article.unitTitle .locationBox .buyArea { left: 0; width: 120px; } section article.unitTitle .locationBox .buyClass { left: 119px; width: 150px; } section article.unitTitle .locationBox .buyText { left: 269px; right: 200px; } section article.unitTitle .locationBox .buyBtn { right: 0; width: 200px; } section article.unitTitle .qaBox .qaText { left: 0; right: 200px; } section article.unitTitle .qaBox .qaBtn { right: 0; width: 200px; } section article.unitTitle .locationBox .selectboxit-container span { height: 64px; line-height: 64px; } section article.unitTitle .locationBox input[type=text], section article.unitTitle .qaBox input[type=text] { background: #f4f4f4; border: 1px solid #c6c6c6; } section article.unitTitle .locationBox input[type=submit], section article.unitTitle .qaBox input[type=submit] { line-height: 64px; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } section article.unitTitle .locationBox .reset { position: absolute; top: 70px; left: 5px; font-size: 12px; } section article.unitTitle .clock { position: absolute; top: 50px; right: 40px; text-align: center; font-size: 12px; line-height: 28px; color: #3b3b3b; } section article.unitTitle .clock span { display: block; } section article.unitTitle .btn { /* text-align: center; */ font-size: 14px; color: #3b3b3b; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } section article.unitTitle .btn>div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } section article.unitTitle .btn span, section article.unitTitle .btn a { margin: 0 0 0 5px; } section article.unitTitle .btn a { padding: 8px 20px; color: #fff; font-weight: 400; background: #000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } section article.unitTitle .btn a.gray, section article.unitTitle .infoBox .btn a.gray, section article.unitTitle .infoDIYreturn .btn a.gray { color: #515151; background: #d3d3d2; } /* section article.unitTitle .infoBox .btn, section article.unitTitle .infoDIYreturn .btn { top: 35px; } */ section article.unitTitle .infoBox .btn a, section article.unitTitle .infoDIYreturn .btn a { display: block; width: 160px; margin: 10px 0; padding: 4px 20px; color: #fff; font-weight: 400; text-align: center; background: #000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } section article.unitTitle .btn .invoiceDetail { /* margin: 18px 0 0 0; */ /* text-align: right; */ } section article.unitTitle .btn .invoiceDetail a { position: relative; padding: 8px 20px; color: #aaa; font-weight: 400; background: none; cursor: default; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } section article.unitTitle .btn .invoiceDetail a:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; border: 2px #ccc solid; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } section article.unitTitle .btn .invoiceDetail.openDetail a { padding: 8px 20px; color: #fff; font-weight: 400; background: #000; cursor: pointer; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } section article.unitTitle .btn .invoiceDetail.openDetail a:after, section article.unitTitle .btn .invoiceDetail span a:after { display: none; } section article.unitTitle .btn .invoiceDetail.openDetail span a, section article.unitTitle .btn .invoiceDetail span a { padding: 0; color: #70b5f1; font-weight: 400; background: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } section article.unitTitle .btn .invoiceDetail span a { color: #3b3b3b; cursor: default; } section article.unitTitle .btn .invoiceDetail.openDetail span a { cursor: pointer; } article.seriesList { width: 100%; } article.seriesList .item, article.seriesList .item .photo { position: relative; } article.seriesList .item.last { height: auto !important; } article.seriesList.busines .item { background: #000; } article.seriesList .item .photo .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; text-indent: -9999px; } /* article.seriesList .item .photo img { width: 100%; } article.seriesList .item .photo .box img { position: relative; min-width: 720px; }*/ article.seriesList .item .photo .title { position: absolute; top: 50%; right: 8%; height: 110px; color: #fff; margin: -55px 0 0 0; z-index: 1; } article.seriesList .item .photo .title .icon { width: 106px; padding: 0 20px 0 0; border-right: 2px #fff solid; } article.seriesList .item .photo .title.bk { color: #000; } article.seriesList .item .photo .title.bk .icon { border-right: 2px #000 solid; } article.seriesList .item .photo .title .icon img { width: 100%; } article.seriesList .item .photo .title .ser { padding: 0 4px 0 20px; font-size: 95px; font-weight: 100; } article.seriesList .item .photo .title .ser.tw { font-size: 76px; } article.seriesList .item .photo .title .en { font-size: 45px; line-height: 45px; font-weight: 200; text-align: left; } article.seriesList .item .photo .title .ch { font-size: 38px; line-height: 40px; font-weight: 200; text-align: left; } article.seriesList .item .conBox { display: table; width: 90%; max-width: 1100px; padding: 0 20px; margin: 0 auto; } article.seriesList.busines .item .conBox { color: #fff; } article.seriesList .item .conBox .title, article.seriesList .item .conBox .btn, article.seriesList .item .title .ser, article.seriesList .item .title .sercon, article.seriesList .item .photo .title .icon { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } article.seriesList .item .conBoxMin { display: inline-block; vertical-align: middle; margin: 0 -4px 0 0; } article.seriesList .item .conBoxMin { position: relative; width: 20%; } article.seriesList .item .minList { display: table; width: 90%; /*max-width: 1440px;*/ margin: 0 auto; padding: 0 0 40px 0; } article.seriesList .item .conBox .title .ser, article.seriesList .item .conBox .title .sercon { vertical-align: bottom; } article.seriesList .item .conBoxMin .title .ser, article.seriesList .item .conBoxMin .title .sercon { vertical-align: middle; } article.seriesList .item .conBox .title, article.seriesList .item .conBoxMin .title { margin: 0 auto; height: 210px; text-align: center; } article.seriesList .item .conBoxMin .title { display: table; } article.seriesList .item .conBox .title .titleBd, article.seriesList .item .conBoxMin .title .titleBd { display: inline-block; vertical-align: bottom; padding: 0 0 10px 0; } article.seriesList .item .conBox .title .ser, article.seriesList .item .conBoxMin .title .ser { padding: 0 4px 0 0; font-size: 48px; line-height: 48px; font-weight: 400; } article.seriesList .item .conBoxMin .title .ser { font-weight: 100; } article.seriesList .item .conBox .title .ser.tw, article.seriesList .item .conBoxMin .title .ser.tw { font-size: 42px; } article.seriesList .item .conBox .title .en, article.seriesList .item .conBox .title .ch, article.seriesList .item .conBoxMin .title .en, article.seriesList .item .conBoxMin .title .ch { font-weight: 100; text-align: left; } article.seriesList .item .conBox .title .en { font-size: 36px; line-height: 36px; font-weight: 200; } article.seriesList .item .conBox .title .ch { font-size: 32px; line-height: 36px; } article.seriesList .item .conBoxMin .title .en { font-size: 18px; font-weight: 200; } article.seriesList .item .conBoxMin .title .ch { font-size: 15px; } article.seriesList .item .conBox .title { width: 70%; text-align: left; } article.seriesList .item .conBox .btn { width: 30%; text-align: right; } article.seriesList .item .conBoxMin btn a, article.seriesList .item .conBox .btn a { display: inline-block; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } article.seriesList.busines .item .conBox .btn a { background: #444; } article.seriesList .item .conBoxMin .btn { position: absolute; top: 50%; left: 50%; width: 136px; margin: 40px 0 0 -68px; } article.seriesList .item .conBoxMin .btn a { display: block; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } article.serviceList { width: 100%; } article.serviceList .item { position: relative; } article.serviceList .item .photo { position: relative; cursor: pointer; } article.serviceList .item .photo .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } article.serviceList .item .photo .box.odd { background-position: left center; } /* article.serviceList .item .photo img { width: 100%; min-width: 1440px; } */ article.serviceList .item .photo .title { position: absolute; top: 50%; left: 50%; width: 1100px; margin: -120px 0 0 -550px; z-index: 1; } article.serviceList .item.securitVerificationv .photo .title, article.serviceList .item.DIYSteps .photo .title, article.serviceList .item.cantactUS .photo .title, article.serviceList .item.warrantyConditions .photo .title, article.serviceList .item.Consulting .photo .title, article.serviceList .item.Replacement .photo .title { color: #fff; } article.serviceList .item .photo .title h2, article.serviceList .item .photo .title h1 { font-size: 54px; font-weight: 100; line-height: 60px; margin: 0 0 20px 0; } article.serviceList .item .photo .title h4 { margin: 0 0 20px 0; font-weight: 200; } article.serviceList .item .photo .title h4 b { font-size: 15px; } article.serviceList .item .photo .title p { font-size: 13px; } article.serviceList .item .conBox { display: table; width: 90%; max-width: 1100px; padding: 0 20px; margin: 0 auto; } article.serviceList .item .conBox .title, article.serviceList .item .conBox .btn, article.serviceList .item .title .icon, article.serviceList .item .title .sercon, article.serviceList .item .photo .title .icon { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } article.serviceList .item .minList { display: table; width: 90%; margin: 0 auto; padding: 0 0 40px 0; } article.serviceList .item .conBox .title { margin: 0 auto; height: 210px; text-align: center; } article.serviceList .item .conBox .title .titleBd { display: inline-block; vertical-align: bottom; padding: 0 0 10px 0; } article.serviceList .item .conBox .title .icon { padding: 0 10px 0 0; } article.serviceList .item .conBox .title .icon.tw { font-size: 42px; } article.serviceList .item .conBox .title .en, article.serviceList .item .conBox .title .ch { font-weight: 100; text-align: left; } article.serviceList .item .conBox .title .en { font-size: 30px; line-height: 36px; font-weight: 200; } article.serviceList .item .conBox .title .ch { font-size: 30px; line-height: 36px; } article.serviceList .item .conBox .title { width: 70%; text-align: left; } article.serviceList .item .conBox .btn { width: 30%; text-align: right; } article.serviceList .item .conBox .btn a { display: inline-block; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } article.serviceList.busines .item .conBox .btn a { background: #444; } article.serviceContent, article.formBox.listFormBox { position: relative; } article.serviceContent .bg, article.formBox.listFormBox .bg { padding-top: 91px; width: 100%; } article.serviceContent .bg.RE { background: #e4e7f2 url(../Content/images/service/serviceListRealEverpure_1920960.jpg?v20170216) no-repeat left top; } article.serviceContent .bg.SV { background: #000000 url(../Content/images/service/serviceListSecuritVerificationv_1920960.jpg?v20170216) no-repeat left bottom; } article.serviceContent .bg.OLR { background: #e2e2e2 url(../Content/images/service/serviceListOnLineReport_1920960.jpg?v20170216) no-repeat left top; } article.serviceContent .bg.DIY { background: #000000 url(../Content/images/service/serviceListDIYSteps_1920960.jpg?v20170216) no-repeat left bottom; } article.serviceContent .bg.FAQ { background: #f6f6f6 url(../Content/images/service/serviceListFAQ_19201325.jpg?v20170216) no-repeat left top; } article.serviceContent .bg.US { background: #5d5e62 url(../Content/images/service/serviceListCantactUS_1920960.jpg?v20170216) no-repeat left center; } article.serviceContent .bg.CD { background: #eaebf5 url(../Content/images/service/serviceListCompanyDealers_1920960.jpg?v20170216) no-repeat left top; } article.serviceContent .bg.WC { background: #000000 url(../Content/images/service/serviceListWarrantyConditions_1920960.jpg?v20170216) no-repeat left top; } article.serviceContent .bg.HM { background: #e5e7f2 url(../Content/images/service/serviceListHeaterMaintenance_1920960.jpg?v20170216) no-repeat left bottom; padding-bottom: 40px; } article.serviceContent .bg.INST { background: #f8f8f8 url(../Content/images/service/serviceListInstallation_1920960.jpg?v20170216) no-repeat left bottom; } article.serviceContent .bg.RR { background: #ededed url(../Content/images/service/serviceListReminder_1920960.jpg?v20170216) no-repeat left bottom; padding-bottom: 180px; } article.serviceContent .bg.ReP { background: #ededed url(../Content/images/service/serviceListReplacement_1920960.jpg?v20170216) no-repeat left bottom; padding-bottom: 90px; } article.serviceContent .bg.IMPO { background: #f8f8f8 url(../Content/images/service/serviceListImportant_1920960.jpg?v20170216) no-repeat left bottom; } article.serviceContent .bg.RE, article.serviceContent .bg.SV, article.serviceContent .bg.OLR, article.serviceContent .bg.DIY, article.serviceContent .bg.FAQ, article.serviceContent .bg.US, article.serviceContent .bg.CD, article.serviceContent .bg.WC, article.serviceContent .bg.HM, article.serviceContent .bg.INST, article.serviceContent .bg.ReP, article.formBox.listFormBox .bg.ADV, article.serviceContent .bg.IMPO { -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; /* -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; background-size:cover;*/ } article.serviceContent .serviceBd, article.formBox.listFormBox .serviceBd, article.companyService .serviceBd { position: relative; max-width: 1360px; margin: 0 auto; } article.serviceContent .serviceNav { position: absolute; top: 80px; left: 40px; } /*新增原廠*/ article.companyService .serviceNav { position: absolute; top: 80px; left: 40px; z-index: 2; } article.formBox.listFormBox .serviceNav { position: absolute; top: 80px; left: 40px; } article.serviceContent .serviceNav ul li, article.formBox.listFormBox .serviceNav ul li, article.companyService .serviceNav ul li { position: relative; padding: 10px 0; font-size: 0px; } article.serviceContent .serviceNav ul li a, article.formBox.listFormBox .serviceNav ul li a, article.companyService .serviceNav ul li a { position: relative; display: inline-block; width: 60px; height: 60px; vertical-align: top; color: #fff; } article.serviceContent .serviceNav ul li a.RE { background: url(../Content/images/service/icon_RealEverpure_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.SV { background: url(../Content/images/service/icon_SecuritVerificationv_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.OLR { background: url(../Content/images/service/icon_OnLineReport_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.DIY { background: url(../Content/images/service/icon_DIYSteps_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.FAQ { background: url(../Content/images/service/icon_FAQ_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.US { background: url(../Content/images/service/icon_CantactUS_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.CD { background: url(../Content/images/service/icon_CompanyDealers_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.WC { background: url(../Content/images/service/icon_WarrantyConditions_s.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.SERV { background: url(../Content/images/service/icon_GenuineService_s.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.HEA { background: url(../Content/images/service/icon_Heater_s.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.INST { background: url(../Content/images/service/icon_Installation_s.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.REM { background: url(../Content/images/service/icon_Reminder_s.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.FREE { background: url(../Content/images/service/icon_Freefix_s.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.ADV { background: url(../Content/images/service/icon_Advice_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.SERV { background: url(../Content/images/service/icon_GenuineService_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.HEA { background: url(../Content/images/service/icon_Heater_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.INST { background: url(../Content/images/service/icon_Installation_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.REM { background: url(../Content/images/service/icon_Reminder_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.FREE { background: url(../Content/images/service/icon_Freefix_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.ADV { background: url(../Content/images/service/icon_Advice_s.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.SERV { background: url(../Content/images/service/icon_GenuineService_s.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.HEA { background: url(../Content/images/service/icon_Heater_s.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.INST { background: url(../Content/images/service/icon_Installation_s.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.REM { background: url(../Content/images/service/icon_Reminder_s.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.FREE { background: url(../Content/images/service/icon_Freefix_s.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.ADV { background: url(../Content/images/service/icon_Advice_s.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.RE:hover { background: url(../Content/images/service/icon_RealEverpure_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.SV:hover { background: url(../Content/images/service/icon_SecuritVerificationv_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.OLR:hover { background: url(../Content/images/service/icon_OnLineReport_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.DIY:hover { background: url(../Content/images/service/icon_DIYSteps_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.FAQ:hover { background: url(../Content/images/service/icon_FAQ_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.US:hover { background: url(../Content/images/service/icon_CantactUS_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.CD:hover { background: url(../Content/images/service/icon_CompanyDealers_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.WC:hover { background: url(../Content/images/service/icon_WarrantyConditions_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.RE { background: url(../Content/images/service/icon_RealEverpure_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.SERV:hover { background: url(../Content/images/service/icon_GenuineService_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.HEA:hover { background: url(../Content/images/service/icon_Heater_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.INST:hover { background: url(../Content/images/service/icon_Installation_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.REM:hover { background: url(../Content/images/service/icon_Reminder_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.FREE:hover { background: url(../Content/images/service/icon_Freefix_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li a.ADV:hover { background: url(../Content/images/service/icon_Advice_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.SERV:hover { background: url(../Content/images/service/icon_GenuineService_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.HEA:hover { background: url(../Content/images/service/icon_Heater_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.INST:hover { background: url(../Content/images/service/icon_Installation_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.REM:hover { background: url(../Content/images/service/icon_Reminder_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.FREE:hover { background: url(../Content/images/service/icon_Freefix_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li a.ADV:hover { background: url(../Content/images/service/icon_Advice_s_w.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.SERV:hover { background: url(../Content/images/service/icon_GenuineService_s_w.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.HEA:hover { background: url(../Content/images/service/icon_Heater_s_w.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.INST:hover { background: url(../Content/images/service/icon_Installation_s_w.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.REM:hover { background: url(../Content/images/service/icon_Reminder_s_w.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.FREE:hover { background: url(../Content/images/service/icon_Freefix_s_w.png?v20170216) no-repeat; } article.companyService .serviceNav ul li a.ADV:hover { background: url(../Content/images/service/icon_Advice_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.SV { background: url(../Content/images/service/icon_SecuritVerificationv_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.OLR { background: url(../Content/images/service/icon_OnLineReport_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.DIY { background: url(../Content/images/service/icon_DIYSteps_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.FAQ { background: url(../Content/images/service/icon_FAQ_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.US { background: url(../Content/images/service/icon_CantactUS_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.CD { background: url(../Content/images/service/icon_CompanyDealers_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.WC { background: url(../Content/images/service/icon_WarrantyConditions_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li.on a.HEA { background: url(../Content/images/service/icon_Heater_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li.on a.INST { background: url(../Content/images/service/icon_Installation_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li.on a.REM { background: url(../Content/images/service/icon_Reminder_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li.on a.FREE { background: url(../Content/images/service/icon_Freefix_s_w.png?v20170216) no-repeat; } article.formBox.listFormBox .serviceNav ul li.on a.ADV { background: url(../Content/images/service/icon_Advice_s_w.png?v20170216) no-repeat; } article.companyService .serviceNav ul li.on a.SERV { background: url(../Content/images/service/icon_GenuineService_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.HEA { background: url(../Content/images/service/icon_Heater_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.INST { background: url(../Content/images/service/icon_Installation_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.REM { background: url(../Content/images/service/icon_Reminder_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.FREE { background: url(../Content/images/service/icon_Freefix_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li.on a.ADV { background: url(../Content/images/service/icon_Advice_s_w.png?v20170216) no-repeat; } article.serviceContent .serviceNav ul li ._text, article.formBox.listFormBox .serviceNav ul li ._text, article.companyService .serviceNav ul li ._text { display: inline-block; margin-left: 20px; width: 120px; height: 60px; line-height: 56px; text-align: center; color: #fff; font-size: 13px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; /* border: 2px #fff solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; */ z-index: 1; } article.serviceContent .serviceNav ul li canvas, article.formBox.listFormBox .serviceNav ul li canvas, article.companyService .serviceNav ul li canvas { position: absolute; top: 24px; left: 80px; width: 120px; height: 30px; z-index: 0; } /* article.serviceContent .serviceNav ul li a:hover span { left: 0; filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; } */ article.serviceContent .bg.HM .title, article.serviceContent .bg.INST .title, article.serviceContent .bg.RR .title, article.serviceContent .bg.IMPO .title { color: #000; } article.serviceContent .title { padding: 90px 120px 60px 260px; color: #fff; /*min-height: 450px;*/ } article.serviceContent .bg.CD .title { padding: 90px 120px 260px 260px; } article.serviceContent .title ol.sLH li p { line-height: 20px; } h1.text-seo, h2.text-seo, h3.text-seo { font-size: 0; height: 0; line-height: 0; } article.serviceContent .title .ttl, article.serviceContent .title h2, article.serviceContent .title h1 { font-size: 54px; font-weight: 100; line-height: 60px; margin: 0 0 20px 0; letter-spacing: -1px; } article.serviceContent .title p { font-size: 13px; line-height: 24px; font-weight: 200; margin: 0 0 1em 0; max-width: 510px; } article.serviceContent .title a[href^="tel:"] { color: rgba(60, 156, 181, 1); text-decoration: underline; } article.serviceContent .title p.left { text-align: left; } article.serviceContent .title p img.icon { display: inline-block; } article.serviceContent .title p span { display: block; } article.serviceContent .title p span em { position: relative; top: 3px; font-size: 15px; padding: 0 3px 0 0; } article.serviceContent .title p span.buimp, article.serviceContent .title p span.buimp a { color: #65a6e0; } article.serviceContent .selectboxit-list a.selectboxit-option-anchor { color: #000; } article.serviceContent .title li.min p { max-width: 460px; } article.serviceContent .title p b { font-size: 15px; font-weight: 600; } article.serviceContent .title p b>span { display: inline; font-size: 13px; font-weight: normal; } article.serviceContent .title a { color: #fff; text-decoration: underline; } article.serviceContent .title a.selectboxit-option-anchor { text-decoration: none; } article.serviceContent .bg.IMPO .title p>a { padding: 0 2px; color: #000; text-decoration: none; border-bottom: 1px #000 solid; } article.serviceContent .title .uniform>div { position: relative; display: inline-block; margin: 0 10px 0 0; } article.serviceContent .title .uniform>div a { display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: url(../Content/images/service/serviceListRealEverpure_uniform_zoom.png?v20170216) no-repeat right bottom; } article.serviceContent .title .uniform>div a:hover { background: rgba(0, 0, 0, .5) url(../Content/images/service/serviceListRealEverpure_uniform_zoom.png?v20170216) no-repeat right bottom; } article.serviceContent .qaBox { position: relative; max-width: 510px; min-height: 32px; margin: 0 0 40px 0; } article.serviceContent .qaBox .qaText, article.serviceContent .qaBox .qaBtn { position: absolute; top: 0; } article.serviceContent .qaBox .qaText { left: 0; right: 200px; } article.serviceContent .qaBox .qaBtn { right: 0; width: 180px; } article.serviceContent .qaBox input[type=submit] { max-width: none; font-weight: 200; line-height: 32px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; } article.serviceContent .qaList { max-width: 600px; } article.serviceContent .qaList .item { padding: 20px 0; border-bottom: 1px #c3c3c3 solid; } article.serviceContent .qaList .item .boxHd { padding: 0 30px 0 0; background: url(../Content/images/icon/icon_location_open.gif?v20170216) no-repeat right center; } article.serviceContent .qaList a { text-decoration: none; } article.serviceContent .qaList .item .boxHd.open { background: url(../Content/images/icon/icon_location_close.gif?v20170216) no-repeat right center; } article.serviceContent .qaList .item .boxHd span { display: block; } article.serviceContent .qaList .item .boxHd span.hd { font-size: 14px; } article.serviceContent .qaList .item .boxBd { display: none; padding: 20px 0 0 15px; } article.serviceContent .qaList .item .boxBd p { margin: 0; color: #848484; } article.serviceContent .qaList .item .boxBd p.bd { color: #505050; } article.serviceContent .qaList .item boxBd div.bd a { color: #5799e1; border-bottom: 1px solid #5799e1; } article.serviceContent .qaList .subitem .hd { cursor: pointer; } article.serviceContent .qaList .subitem .hd.open { color: #02328d; } article.serviceContent .qaList .subitem .bd { display: none; padding: 10px 0 30px 20px; } article.serviceContent .serviceBd.bk .serviceNav ul li a span { color: #000; border: 2px #000 solid; } article.serviceContent .serviceBd.bk .title, article.serviceContent .serviceBd.bk .title a { color: #000; } article.serviceContent .title .companyBox { margin: 60px 0 0 0; } /*article.serviceContent .serviceBd.bk .title a.btn {*/ article.serviceContent .serviceBd .title a.btn { display: inline-block; padding: 0 40px; height: 30px; font-size: 14px; line-height: 30px; text-align: center; color: #fff; background: #000; text-decoration: none; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } article.serviceContent .stepBox { position: relative; min-height: 400px; } article.serviceContent .stepBox .step1, article.serviceContent .stepBox .step2, article.serviceContent .stepBox .step3, article.serviceContent .stepBox .step4 { position: absolute; top: 0; left: 0; width: 510px; } article.serviceContent .stepBox .step1:not(.hidden), article.serviceContent .stepBox .step2:not(.hidden), article.serviceContent .stepBox .step3:not(.hidden) { position: relative; } article.serviceContent .explainBox { position: relative; width: 460px; padding: 20px 20px; color: #fff; border: 2px #5b5b5b solid; background: #212121; text-decoration: none; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } article.serviceContent .explainBox a.close { position: absolute; top: 5px; right: 5px; display: block; width: 22px; height: 22px; background: url(../Content/images/icon/icon_howChooseClose.png?v20170216) no-repeat; } article.serviceContent .explainBox .box { display: table; width: 100%; margin: 0 0 10px 0; line-height: 60px; } article.serviceContent .explainBox .box>div { width: 50%; display: table-cell; *display: inline; zoom: 1; vertical-align: middle; font-size: 15px; } article.serviceContent .explainBox .box>div img { max-width: 95%; } article.serviceContent .explainBox .box>div img+img { margin: 2px 0 0 0; } article.serviceContent .explainBox .year { margin: 0 0 4px 0; } article.serviceContent .explainBox p { line-height: 20px; margin: 0; } article.serviceContent .purviveBox { width: 100%; max-width: 510px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } article.serviceContent .purviveBox .pv-img { width: 70%; } article.serviceContent .purviveBox .pv-link { width: 30%; font-size: 15px; min-width: 12em; white-space: nowrap; text-align: left; margin-bottom: 30px; } article.serviceContent .purviveBox .pv-link>img { display: inline-block; margin-right: 4px; } .SVBox .explainBox { position: relative; width: 360px; text-decoration: none; } .SVBox .explainBox .box { display: table; width: 100%; margin: 0 0 10px 0; line-height: 60px; } .SVBox .explainBox .box>div { width: 50%; display: table-cell; *display: inline; zoom: 1; vertical-align: middle; font-size: 15px; } .SVBox .explainBox .box .year { text-align: right; } .SVBox .explainBox p { color: #777; line-height: 20px; margin: 0; } .SVBox .explainBox hr { background: #b4b3b3; border: 0 none; height: 1px; margin: 15px 0; } .ReadAgainBox .form-read h3, .ReadBox .form-read h3 { font-size: 18px; color: #0082dd; margin: 10px 0 20px 0; } .ReadAgainBox .form-read .txt, .ReadBox .form-read .txt { color: #666; margin: 0 0 10px 0; } .ReadBox .form-read .photo { margin: 0 0 5px 0; } .ReadBox .form-read .photo img { width: 100%; max-width: 625px; } .ReadAgainBox .form-read .btn, .ReadBox .form-read .btn { text-align: center; margin: 20px 0 0 0; } .ReadAgainBox .form-read .btn input[type="submit"], .ReadBox .form-read .btn input[type="submit"] { background: #000000 none repeat scroll 0 0; border: 0 none; border-radius: 21px; color: #fff; cursor: pointer; height: 42px; line-height: 38px; max-width: 200px; text-align: center; width: 60%; } .ReadAgainBox .form-read table.tabRead { width: 100%; } .ReadAgainBox .form-read table.tabRead th, .ReadAgainBox .form-read table.tabRead td { padding: 4px 5px; border: 1px solid #c3c3c3; } .ReadAgainBox .form-read table.tabRead th { background-color: #f4f4f4; } .ReadAgainBox .form-read table.tabRead td.center { text-align: center; } .ReadAgainBox .form-read .monitor { display: block; } .ReadAgainBox .form-read .mobile { display: none; } .ReadAgainBox .form-read .mobile>div { margin: 0 0 10px 0; } .ReadAgainBox .form-read table.tabRead th.head, .ReadAgainBox .form-read table.tabRead td.head { background-color: #e4e4e4; } article.serviceContent .stepBox hr { border: 0; height: 1px; margin: 15px 0; background: #f4f4f4; } article.serviceContent .successBox { width: 400px; padding: 20px 0; } article.serviceContent .successBox h3 { font-size: 30px; font-weight: 200; line-height: 32px; } article.serviceContent .successBox .boxtd { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } article.serviceContent .successBox .boxtd.tdl { width: 100px; height: 100px; text-align: center; background: #fff; } article.serviceContent .successBox .boxtd.tdc, article.serviceContent .successBox .boxtd.tdr { padding: 0 0 0 40px; } article.serviceContent .successBox .boxtd.tdc { font-size: 11px; } article.serviceContent .successBox .boxtd.tdr, article.serviceContent .successBox .boxtd.boxdw { font-size: 15px; } article.serviceContent .title .successBox a.btn { display: inline-block; background: #444; } article.serviceContent .title .successBox a.btn.white { margin-top: 10px; padding: 0 102px; display: inline-block; color: #000; background: #fff; } article.serviceContent fieldset .box { padding: 5px 0; width: 80%; } article.serviceContent fieldset .box:after { content: ""; display: table; clear: both; } article.serviceContent fieldset .box label, article.serviceContent fieldset .box .con { position: relative; float: left; } article.serviceContent fieldset .box label { width: 18%; font-size: 13px; padding: 6px 0; } article.serviceContent fieldset .box .con label { width: auto; float: none; color: inherit; padding: 0; cursor: pointer; } article.serviceContent fieldset .box .con { width: 82%; min-height: 32px; } article.serviceContent fieldset .box .con .codeLeft, article.serviceContent fieldset .box .con .codeRight { position: absolute; top: 0; min-height: 32px; } article.serviceContent fieldset .box .con .codeLeft { left: 0; width: 160px; background: #444; } article.serviceContent fieldset .box .con .codeRight { left: 170px; right: 0; } article.serviceContent fieldset .box .con .codeLeft img { vertical-align: middle; } article.serviceContent fieldset .box .con a.msg { position: absolute; top: -25px; right: 0; } article.serviceContent fieldset .box .con .codeLeft a.reset { position: absolute; top: 0; right: 0; display: block; width: 32px; height: 32px; background: url(../Content/images/icon/icon_reset.png?v20170216) no-repeat center; } article.serviceContent fieldset .box img { width: 100% } article.serviceContent fieldset .box.verifiCodeBox>label, article.serviceContent fieldset .box.verifiCodeBox>.con { display: block !important; width: 100% !important; } article.serviceContent fieldset .box.verifiCodeBox .verifiCode-note-box { color: #dedede; line-height: 1.6em; font-size: 13px; display: block; margin: 5px 0 0 0; } article.serviceContent fieldset input[type=text], article.serviceContent fieldset input[type=email], article.serviceContent fieldset input[type=password] { height: 32px; line-height: 32px; border: 0; } article.serviceContent fieldset.bk input[type=text], article.serviceContent fieldset.bk input[type=email], article.serviceContent fieldset.bk input[type=password] { color: #fff; background: #444; } article.serviceContent fieldset textarea { line-height: 22px; padding: 4px 0; } article.serviceContent fieldset .box.time>label { width: 23%; } article.serviceContent fieldset .box.time .con { width: 68%; } article.serviceContent fieldset .box.way .con { width: 48%; } article.serviceContent fieldset .box.max>label { width: 100%; } article.serviceContent fieldset .box.max .con { width: 100%; } article.serviceContent .selectboxit-container span { height: 32px; line-height: 32px; } article.serviceContent .selectboxit-btn { background: #d3d3d2 url(../Content/images/icon/icon_nextArrow.png?v20170216) no-repeat right; border: 0; height: 32px; line-height: 32px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; } article.serviceContent .selectboxit-container span { height: 32px; line-height: 32px; text-align: center; } article.serviceContent .selectboxit-default-arrow { width: 0; height: 0; border: 0; } article.serviceContent .selectboxit-text { text-indent: -20px; overflow: hidden; text-overflow: ellipsis; float: none; } article.serviceContent fieldset .btnBox { width: 80%; margin: 20px 0 0 0; text-align: center; } article.serviceContent fieldset .btnBox input[type=submit], article.serviceContent fieldset .btnBox input[type=reset], article.serviceContent fieldset .btnBox input[type=button] { max-width: none; color: #fff; line-height: 32px; background: #000; line-height: 32px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; } article.serviceContent fieldset.bk .btnBox { text-align: right; } article.serviceContent fieldset.bk .btnBox>div { display: inline-block; } article.serviceContent fieldset.bk .btnBox input[type=submit], article.serviceContent fieldset.bk .btnBox input[type=reset] { max-width: 150px; background: #444; } article.serviceContent .bx-controls-direction { position: absolute; top: 50%; right: -80px; margin: -180px 0 0 0; width: 60px; height: 180px; } article.serviceContent .bx-wrapper .bx-prev, article.serviceContent .bx-wrapper .bx-next { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } article.serviceContent .bx-wrapper .bx-prev { left: auto; background: url(../Content/images/icon/icon_serviceArrow_P.png?v20170216) no-repeat center; } article.serviceContent .bx-wrapper .bx-next { right: auto; background: url(../Content/images/icon/icon_serviceArrow_N.png?v20170216) no-repeat center; } article.serviceContent .bx-wrapper .bx-prev:hover, article.serviceContent .bx-wrapper .bx-next:hover { filter: alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; } article.serviceContent .bx-wrapper .bx-controls-direction a { position: relative; top: auto; margin: 40px 0; width: 60px; height: 60px; display: block; } article.serviceContent .bx-wrapper .bx-controls-direction a.disabled { display: block; cursor: default; filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3; } article.serviceContent .bx-wrapper .bx-controls-direction a:hover.disabled { filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3; } /* article.serviceContent .title .versionBox { display: table; width: 560px; padding: 10px; font-size: 15px; font-weight: 400; background: #fff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } article.serviceContent .title .versionBox .boxtr, article.serviceContent .title .versionBox .boxtdl, article.serviceContent .title .versionBox .boxtdr { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } article.serviceContent .title .versionBox .boxtr { width: 50%; } article.serviceContent .title .versionBox .boxtdl, article.serviceContent .title .versionBox .boxtdr { padding: 0 10px 0 0; } */ article.serviceContent .title .versionBox { margin-top: 25px; } article.serviceContent .title .versionBox .explainBox { background: none; border: 0; border-radius: 0; color: #666; padding: 0; position: relative; text-decoration: none; width: 500px; } article.serviceContent .title .versionBox .explainBox hr { background: #5b5b5b none repeat scroll 0 0; border: 0 none; height: 1px; margin: 15px 0; } article.serviceContent .title .versionBox .explainBox img { /* max-width: initial; */ margin: 0; } article.serviceContent .title .versionBox .explainBox img+img { margin: 10px 0 0 0; } article.serviceContent .title .titlehd { font-size: 18px; font-weight: bold; line-height: 28px; margin: 30px 0 20px 0; } article.serviceContent .title .titlehd span.no { font-size: 40px; } article.serviceContent .title span.blue { color: #00a2ff; } article.serviceContent .title span.red { color: #ff3232; } article.serviceContent .title ol { font-size: 13px; line-height: 20px; margin: 0 0 1em 20px; } section article.productList { padding: 60px 0; background: #f4f4f4; } section article.productList .container-slick, section article.productList .container { width: 90%; max-width: 1440px; margin: 0 auto; } section article.productList .producttitle { width: 90%; max-width: 1400px; padding: 40px 0; margin: 0 auto 40px auto; font-size: 20px; font-weight: 400; text-align: center; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } section article.productList .groupBox { width: 90%; max-width: 1400px; padding: 40px 0 0 0; margin: 0 auto; } section article.productList .groupBox .photo, section article.productList .groupBox .item { display: table-cell; vertical-align: top; } section article.productList .groupBox .photo { text-align: right; width: 50%; min-width: 300px; padding: 0 100px 0 0; } section article.productList .groupBox .photo img { max-width: 300px; width: 100%; } section article.productList .groupBox .item { padding: 0 40px 0 0; } section article.productList .groupBox .item .boxHd { font-size: 20px; color: #000; padding: 0 0 20px 0; } section article.productList .groupBox .item .boxHd p.hd { font-size: 20px; margin: 0 0 4px 0; } section article.productList .groupBox .item .boxBd { padding: 20px 0; margin: 15px auto; font-size: 15px; font-weight: 400; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } section article.productList .groupBox .itemBox { display: inline-block; vertical-align: top; width: 48%; margin: 0 -4px 0 0; } section article.productList .groupBox .itemBox.last { padding: 0 0 0 4%; margin: 0; } section article.productList .groupBox ol.boxFt { margin: 0 0 20px 0; } section article.productList .groupBox ol.boxFt li { position: relative; font-size: 15px; font-weight: 400; padding: 0 0 0 18px; margin: 8px 0 0 0; } section article.productList .groupBox ol.boxFt li:before { position: absolute; top: 10px; left: 0; content: "●"; width: 10px; height: 20px; margin-top: -10px; font-size: 8px; line-height: 20px; text-align: center; } section article.productList .groupBox ol.boxFt li.hd { font-size: 15px; font-weight: 400; color: #000; padding: 20px 0; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; margin: 8px 0 12px 0; } section article.productList .groupBox ol.boxFt li.hd:before { display: none; } section article.productList .introBox { position: relative; width: 90%; max-width: 1320px; margin: 0 auto 0 auto; z-index: 9; } section article.productList .introBox.min { min-height: inherit; margin: -20px auto 0 auto; } /* section article.productList .item .introBox { display: none !important; } */ section article.productList .introBox .btnBox { position: absolute; top: 40px; left: 0; width: 100%; text-align: center; } section article.productList .introBox .btnBox a { display: inline-block; padding: 0 40px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; font-size: 14px; } section article.productList .introBox .btnBox a:nth-child(2), section article.productList .introBox .btnBox a:nth-child(3) { margin: 0 0 0 10px; } section article.productList .introBox .introBoxBd { display: none; min-height: 60px; margin: 40px auto 40px auto; } section article.productList .introBox .featureBox { position: relative; padding: 30px 40px 40px 40px; background: #fff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.productList .introBox .featureBox h4 { font-size: 17px; font-weight: 400; margin: 0 0 15px 0; } section article.productList .introBox .featureBox p { line-height: 26px; } section article.productList .introBox .featureBox a.close { position: absolute; top: 20px; right: 20px; display: block; width: 22px; height: 22px; font-size: 0; background: url(../Content/images/icon/icon_howChooseClose_bk.png?v20170216) no-repeat; } section article.productList .bx-wrapper { margin: -20px auto 0; } section article.productList .bx-wrapper img { max-width: 90%; display: block; margin: 0 auto; } section article.productList .bx-controls.bx-has-pager.bx-has-controls-direction { margin-top: -10px } section article.productList .feature { width: 90%; max-width: 1400px; line-height: 26px; padding: 20px 0; margin: 0 auto; font-size: 15px; } section article.productList .feature ol { list-style: decimal outside; margin: 5px 0 0 20px; color: #515151; font-weight: 100; } section article.productList .feature ol li { font-size: 14px; } section article.productList .container-slick .item, section article.productList .container .item { width: 25%; margin: 30px 0 } section article.productList .container-slick.max .item, section article.productList .container.max .item { width: 33.3%; } section article.productList .container-slick .item .photo, section article.productList .container .item .photo { text-align: center; margin: 0 0 10px 0; height: 300px; } section article.productList .container-slick .item .photo img, section article.productList .container .item .photo img { /* width: 100%; */ max-width: 100%; max-height: 100%; margin: auto; } section article.productList .container .item .boxHd.equalHeight { min-height: 255px; } @media only screen and (max-width : 768px) { section article.productList .container .item .boxHd.equalHeight { height: auto; min-height: inherit; min-height: initial; } } section article.productList .container-slick .item .boxHd, section article.productList .container-slick .item .boxBd, section article.productList .container-slick .item .boxFt, section article.productList .container .item .boxHd, section article.productList .container .item .boxBd, section article.productList .container .item .boxFt { max-width: 240px; margin: 0 auto; } section article.productList .container .item h3.boxHd { padding: 0 0; text-align: left; } section article.productList .container-slick.max .item .boxHd, section article.productList .container-slick.max .item .boxBd, section article.productList .container-slick.max .item .boxFt, section article.productList .container.max .item .boxHd, section article.productList .container.max .item .boxBd, section article.productList .container.max .item .boxFt { max-width: 320px; } section article.productList .container-slick .item .boxHd, section article.productList .container .item .boxHd { font-size: 15px; color: #000; } section article.productList .container-slick .item .boxHd>h3, section article.productList .container .item .boxHd>h3 { text-align: left; font-size: 15px; color: #000; margin: 0 0 10px 0; } section article.productList .container-slick .item .boxHd p, section article.productList .container .item .boxHd p { line-height: 26px; } section article.productList .container-slick .item .boxHd p.spaceNowrap, section article.productList .container .item .boxHd p.spaceNowrap { white-space: nowrap; } section article.productList .container .item .boxHd span.hiddenfar { display: none; height: 0; overflow: hidden; font-size: 0; } section article.productList .container-slick .item .boxHd p.tag, section article.productList .container .item .boxHd p.tag { float: left; padding: 2px 10px; margin: 0 0 5px 0; font-size: 12px; line-height: 16px; color: #fff; background: #3b90df; } section article.productList .container-slick .item .boxHd p.tag.Oseries, section article.productList .container .item .boxHd p.tag.Oseries { background: #3b90df; } section article.productList .container-slick .item .boxHd p.tag.Kseries, section article.productList .container .item .boxHd p.tag.Kseries { background: #f8b617; } section article.productList .container-slick .item .boxHd p.tag.Cseries, section article.productList .container .item .boxHd p.tag.Cseries { background: #ea904d; } section article.productList .container-slick .item .boxHd p.tag.DHseries, section article.productList .container .item .boxHd p.tag.DHseries { background: #86c5d7; } section article.productList .container-slick .item .boxHd p.tag.CUseries, section article.productList .container .item .boxHd p.tag.CUseries { background: #96b865; } section article.productList .container-slick .item .boxHd p.tag.Hseries, section article.productList .container .item .boxHd p.tag.Hseries { background: #c3ce68; } section article.productList .container-slick .item .boxHd p.tag.DCseries, section article.productList .container .item .boxHd p.tag.DCseries { background: #56cbba; } section article.productList .container-slick .item .boxHd p.tag.WHseries, section article.productList .container .item .boxHd p.tag.WHseries { background: #94d6de; } section article.productList .container-slick .item .boxHd p.tag.EFseries, section article.productList .container .item .boxHd p.tag.EFseries { background: #9097e6; } section article.productList .container-slick .item .boxHd p.tag.HLseries, section article.productList .container .item .boxHd p.tag.HLseries { background: #8ad69e; } section article.productList .container-slick .item .boxHd p.tag.PBSseries, section article.productList .container .item .boxHd p.tag.PBSseries { background: #548bef; } section article.productList .container-slick .item .boxHd p.hd, section article.productList .container .item .boxHd p.hd { font-size: 20px; clear: both; } section article.productList .container-slick .item .boxHd p span span, section article.productList .container .item .boxHd p span span { font-size: 13px; } section article.productList .container-slick .item .boxHd p span span.nt, section article.productList .container .item .boxHd p span span.nt { font-size: 15px; } /* section article.productList .container .item .boxHd p.specialBox, section article.productList .container-slick .item .boxHd p.specialBox, section article.productList .container .item .boxHd p.diyBox, section article.productList .container-slick .item .boxHd p.diyBox { font-size: 15px; } */ section article.productList .container .item .boxHd span.special, section article.productList .container-slick .item .boxHd span.special, section article.productList .container .item .boxHd span.diy, section article.productList .container-slick .item .boxHd span.diy { font-size: 15px; color: #e70d0d; } section article.productList .container .item .boxHd p>span, section article.productList .container-slick .item .boxHd p>span { padding-right: 10px; } section article.productList .container .item .boxHd p>span:last-child, section article.productList .container-slick .item .boxHd p>span:last-child { padding-right: 0; } section article.productList .container .item .boxHd .hd>span:last-child, section article.productList .container-slick .item .boxHd .hd>span:last-child { padding: 0; margin: 0; line-height: 26px; } section article.productList .container-slick .item .boxBd, section article.productList .container .item .boxBd { padding: 20px 0; margin: 15px auto; font-size: 15px; font-weight: 400; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } section article.productList .container-slick .item .boxFt, section article.productList .container .item .boxFt { color: #515151; font-weight: 200; line-height: 26px; } section article.productList .container-slick .item .btn, section article.productList .container .item .btn { width: 136px; margin: 20px auto 0 auto; } section article.productList .container-slick.max .item .btn, section article.productList .container.max .item .btn { margin: 40px auto; } section article.productList .container-slick .item .btn a, section article.productList .container .item .btn a { display: block; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; font-size: 14px; } section article.productList .container-slick .item .btn a:nth-child(2), section article.productList .container .item .btn a:nth-child(2) { margin: 10px 0 0 0; } section article.productList .container-slick .item .btn a.on, section article.productList .container .item .btn a.on { color: #000; background: #fff; } section article.productList .container-slick .item .btnSub, section article.productList .container .item .btnSub {} section article.productList .container-slick .item .btnSub a, section article.productList .container .item .btnSub a { display: block; margin: 0 auto 0 auto; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.productList .container-slick .item .boxHd.h90, section article.productList .container .item .boxHd.h90 { min-height: 90px; } section article.productList .container-slick .item .boxHd.h110, section article.productList .container .item .boxHd.h110 { min-height: 110px; } section article.productList .container-slick .item .boxHd.h140, section article.productList .container .item .boxHd.h140 { min-height: 140px; } section article.productList .container-slick .item .boxFt.h120, section article.productList .container .item .boxFt.h120 { min-height: 120px; } section article.productList .container-slick .item .boxFt.h160, section article.productList .container .item .boxFt.h160 { min-height: 160px; } section article.productList .container-slick .item .boxFt.h200, section article.productList .container .item .boxFt.h200 { min-height: 200px; } /** * * otherEfficacy * **/ .lightbox article.otherEfficacy { padding: 0 0 10px 0; background: #fff; } .lightbox article.otherEfficacy .producttitle { font-size: 32px; line-height: 1.2em; font-weight: 400; margin: -10px auto 20px; text-align: justify; color: #000; } .lightbox article.otherEfficacy .producttitle span { color: #000 !important; } .lightbox article.otherEfficacy .otherEfficacy_hd { display: grid; row-gap: 20px; column-gap: 40px; grid-template-columns: 1fr 1fr; } .lightbox article.otherEfficacy .otherEfficacy_hd div { text-align: center; } .lightbox article.otherEfficacy .otherEfficacy_hd img { width: 100%; max-width: 100%; } .lightbox article.otherEfficacy .otherEfficacy_hd h3 { margin-top: 10px; color: #00A7E1; font-size: 16px; font-weight: bold; line-height: 1.3; } .lightbox article.otherEfficacy .otherEfficacy_hd p { margin-top: 5px; text-align: center; font-size: 13px; line-height: 1.3; } .lightbox article.otherEfficacy .otherEfficacy_bd { display: grid; row-gap: 20px; column-gap: 40px; grid-template-columns: 1fr 1fr; margin-top: 40px; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item { display: flex; align-items: center; justify-content: center; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max { grid-column: 1 / -1; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item img { width: 70px; margin-right: 20px; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item .con { width: calc(100% - 90px); } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item .con h3 { display: flex; align-items: center; justify-content: flex-start; color: #00A7E1; font-size: 14px; font-weight: bold; line-height: 1.3; margin-bottom: 20px; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item .con h3 .icon { color: #fff; font-size: 16px; font-weight: bold; line-height: 1.3; background-color: #00A7E1; border-radius: 5px; padding: 8px; margin-right: 5px; text-align: center; min-width: 66px; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item .con p { font-size: 13px; line-height: 1.6; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item .con p span { color: #9FA0A0; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con { display: flex; align-items: center; justify-content: flex-start; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con div, .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con table { width: 47%; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con table th { color: #00A7E1; font-size: 13px; font-weight: bold; line-height: 1.6; text-align: left; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con table td span { font-size: 12px; color: #9FA0A0; } @media only screen and (max-width : 767px) { .lightbox article.otherEfficacy .producttitle { font-size: 6vw; margin: 0 auto 4vw; } .lightbox article.otherEfficacy .producttitle span { display: block; } .lightbox article.otherEfficacy .otherEfficacy_hd, .lightbox article.otherEfficacy .otherEfficacy_bd { grid-template-columns: 1fr; } .lightbox article.otherEfficacy .otherEfficacy_bd { column-gap: 100px; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max { align-items: flex-start; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con { display: block; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con div, .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con table { width: 100%; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con table { margin-top: 4vw; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con table th, .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con table td { display: block; width: 100%; } .lightbox article.otherEfficacy .otherEfficacy_bd .otherEfficacy_item.max .con table td { padding-left: 1em; } } /** * * otherBoxEF * **/ .lightbox article.otherBoxEF { padding: 40px 0; background: #f4f4f4; } .lightbox article.otherBoxEF.tableCell { display: table-cell; width: 50%; } .lightbox article.otherBoxEF.bgEF { background: #a6aceb; } .lightbox article.otherBoxEF.bgSoft { background: #ddd; } .lightbox article.otherBoxEF .main { padding: 0 40px; } .lightbox article.otherBoxEF .producttitle { font-size: 36px; line-height: 1.2em; font-weight: 400; margin: 0 auto 10px; text-align: justify; color: #000; } .lightbox article.otherBoxEF .productSubtitle { margin: 0 auto 40px; font-size: 15px; line-height: 1.4em; text-align: justify; } .lightbox article.otherBoxEF .otherBoxEFBd { position: relative; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .lightbox article.otherBoxEF .text { font-size: 13px; color: #777; margin: 0 0 5px 0; } .lightbox article.otherBoxEF table.tabNorm { width: 100%; margin: 15px 0 0 0; background-color: #fff; } .lightbox article.otherBoxEF table.tabNorm th, .lightbox article.otherBoxEF table.tabNorm td { padding: 5px 10px; font-size: 12px; line-height: 22px; text-align: center; vertical-align: middle; border: 1px #c3c3c3 solid; } .lightbox article.otherBoxEF table.tabNorm td.left { padding: 5px 10px; text-align: left; } .lightbox article.otherBoxEF table.tabNorm td hr { margin: 5px -10px; border: 0; border-bottom: 1px #c3c3c3 solid; } .lightbox article.otherBoxEF table.tabNorm .hd, .lightbox article.otherBoxEF table.tabNorm .bd { display: table-cell; } /** * * discontinued * **/ .lightbox article.discontinued .discontinuedL, .lightbox article.discontinued .discontinuedR { display: table-cell; vertical-align: top; width: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; } .lightbox article.discontinued .discontinuedL { position: relative; padding: 60px 30px 140px 30px; background-color: #f4f4f4; } .lightbox article.discontinued .discontinuedL .title { position: relative; display: block; font-size: 24px; font-weight: bold; line-height: 1.2em; padding: 0 0 20px 0; margin: 0 0 20px 0; color: #333; } .lightbox article.discontinued .discontinuedL .title:after { position: absolute; left: 0; bottom: 0; width: 40px; height: 1px; content: ""; background-color: #000; } .lightbox article.discontinued .discontinuedL .txt { font-size: 13px; line-height: 1.4em; color: #333; } .lightbox article.discontinued .discontinuedL .tel { font-size: 18px; line-height: 1.2em; margin: 30px 0 0 0; color: #a1a1a1; } .lightbox article.discontinued .discontinuedL .link { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 30px; height: 80px; font-size: 24px; font-weight: normal; line-height: 80px; color: #fff; background-color: #c5cf6d; -webkit-box-sizing: border-box; box-sizing: border-box; } .lightbox article.discontinued .discontinuedL .link a { color: #fff; } .lightbox article.discontinued .discontinuedL .link img { max-height: 24px; vertical-align: middle; } .lightbox article.discontinued .discontinuedR { padding: 30px 0 30px 50px; } .lightbox article.discontinued .productList { position: relative; width: 408px; margin: 0 auto; } .lightbox article.discontinued .box { display: inline-block; vertical-align: top; width: 200px; } .lightbox article.discontinued .box .photo { text-align: center; margin: 0 0 10px 0; } .lightbox article.discontinued .box .photo img { width: 100%; max-width: 300px; } .lightbox article.discontinued .box .boxHd, .lightbox article.discontinued .box .boxBd, .lightbox article.discontinued .box .boxFt { max-width: 240px; margin: 0 auto; } .lightbox article.discontinued .box .boxHd { font-size: 15px; color: #000; } .lightbox article.discontinued .box .boxHd p { line-height: 26px; } .lightbox article.discontinued .box .boxHd p.hd { font-size: 20px; clear: both; } .lightbox article.discontinued .box .boxHd p span span { font-size: 11px; color: #000; } .lightbox article.discontinued .box .boxHd p span s { position: relative; top: -3px; font-size: 11px; color: #888; } .lightbox article.discontinued .box .boxHd p>span { display: block; padding-right: 10px; line-height: 20px; color: #000; } .lightbox article.discontinued .box .boxHd p>span:last-child { padding-right: 0; } .lightbox article.discontinued .box .boxBd { padding: 20px 0; margin: 15px auto; font-size: 15px; font-weight: 400; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } .lightbox article.discontinued .box .boxFt { color: #515151; font-weight: 200; line-height: 26px; } .lightbox article.discontinued .box .btn { width: 136px; margin: 20px auto 0 auto; } .lightbox article.discontinued .box .btn a { display: block; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .lightbox article.discontinued .box .btn a:nth-child(2) { margin: 10px 0 0 0; } /*.lightbox article.otherBoxEF.bgSoft .producttitle,*/ .lightbox article.otherBoxEF.bgEF .producttitle, .lightbox article.otherBoxEF.bgEF .productSubtitle, .lightbox article.otherBoxEF.bgEF .text, .lightbox article.otherBoxEF.bgEF .desc, .lightbox article.otherBoxEF.bgEF .desc { color: #fff; } .lightbox article.otherBoxEF .photo, .lightbox article.otherBoxEF ul { display: table-cell; vertical-align: middle; width: 50%; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } .lightbox article.otherBoxEF ul { padding: 0 10px 0 20px; } .lightbox article.otherBoxEF ul li { font-size: 15px; line-height: 1.4em; padding: 8px 0 8px 30px; display: flex; align-items: center; justify-content: start; } .lightbox article.otherBoxEF ul li:nth-child(1) { background: url(../Content/images/icon/icon_number_1.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(2) { background: url(../Content/images/icon/icon_number_2.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(3) { background: url(../Content/images/icon/icon_number_3.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(4) { background: url(../Content/images/icon/icon_number_4.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(5) { background: url(../Content/images/icon/icon_number_5.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(6) { background: url(../Content/images/icon/icon_number_6.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(7) { background: url(../Content/images/icon/icon_number_7.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(8) { background: url(../Content/images/icon/icon_number_8.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(9) { background: url(../Content/images/icon/icon_number_9.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(10) { background: url(../Content/images/icon/icon_number_10.png) no-repeat; } .lightbox article.otherBoxEF ul li:nth-child(1), .lightbox article.otherBoxEF ul li:nth-child(2), .lightbox article.otherBoxEF ul li:nth-child(3), .lightbox article.otherBoxEF ul li:nth-child(4), .lightbox article.otherBoxEF ul li:nth-child(5), .lightbox article.otherBoxEF ul li:nth-child(6), .lightbox article.otherBoxEF ul li:nth-child(7), .lightbox article.otherBoxEF ul li:nth-child(8), .lightbox article.otherBoxEF ul li:nth-child(9), .lightbox article.otherBoxEF ul li:nth-child(10) { background-size: 20px auto; background-position: 0 8px; } .lightbox article.otherBoxEF .photo { margin: 0; text-align: center; } .lightbox article.otherBoxEF .photo img { width: 100%; } .lightbox article.otherBoxEF.bgEF .photo img, .lightbox article.otherBoxEF.bgEF2 .photo img { max-width: 510px; } .lightbox article.otherBoxEF.bgSoft2 .photo img { max-width: 179px; max-height: 500px; } .lightbox article.otherBoxEF.bgSoft3 .photo img { max-width: 179px; max-height: 500px; } .lightbox article.otherBoxEF.bgCentral .photo img { max-width: 700px; max-height: 540px; } .lightbox article.otherBoxEF.bgMRS .photo img { max-width: 520px; max-height: 700px; } .lightbox article.otherBoxEF .monitor { display: block; } .lightbox article.otherBoxEF .mobile { display: none; } .lightbox article.otherBoxEF .desc { font-size: 13px; line-height: 1.2em; color: #999; } .lightbox article.otherBoxEF .desc p { padding: 5px 0; } .lightbox article.otherBoxEF.bgEF2 .desc { text-align: right; } .lightbox article.otherBoxEF sup { vertical-align: super; font-size: 0.4em; } .lightbox article.otherBoxEF.bgEF2 .photo, .lightbox article.otherBoxEF.bgEF2 ul { display: block; width: auto; } .lightbox article.otherBoxEF.bgEF2 ul li { font-size: 13px; line-height: 1.4em; padding: 5px 0; display: block; align-items: initial; justify-content: initial; background: none; } .lightbox article.otherBoxEF.bgEF2 ul { color: #777; } .lightbox article.otherBoxEF.bgEF2 ul b { display: block; font-size: 16px; color: #000; } .lightbox article.otherBoxEF .tabFilter { max-width: 540px; width: 100%; border: 1px #c3c3c3 solid; } .lightbox article.otherBoxEF .tabFilter:after { content: ""; display: table; clear: both; } .lightbox article.otherBoxEF .tabFilter .tabFilterL { float: left; width: 26%; } .lightbox article.otherBoxEF .tabFilter .tabFilterR { float: left; width: 74%; } .lightbox article.otherBoxEF .tabFilter dl { position: relative; } .lightbox article.otherBoxEF .tabFilter dl:before { position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: #c3c3c3; content: ""; z-index: 1; } .lightbox article.otherBoxEF .tabFilter dl dd { position: relative; padding: 0 5px; font-size: 12px; min-height: 40px; line-height: 1.2em; text-align: center; /*border-right: 1px #c3c3c3 solid;*/ border-bottom: 1px #c3c3c3 solid; background: #f4f4f4; display: flex; align-items: center; justify-content: center; } .lightbox article.otherBoxEF .tabFilter dl dd:first-child { min-height: 30px; color: #fff; background-color: #356e87; } .lightbox article.otherBoxEF .tabFilter dl dd:nth-child(even) { background-color: #fff; } .lightbox article.otherBoxEF .tabFilter dl dd.photo { height: 200px; line-height: 200px; } .owl-carousel .owl-item dl dd.photo img { display: inline; width: auto; } .lightbox article.otherBoxEF .tabFilter dl dd:last-child { border-bottom: 0; } .lightbox article.otherBoxEF .tabFilter dl dd.del { color: #aaa; } .lightbox article.otherBoxEF .tabFilter .owl-theme .owl-controls { margin-top: 0; position: absolute; top: 0; right: 0; } .lightbox article.otherBoxEF .tabFilter .owl-theme .owl-controls .owl-buttons { position: absolute; right: 0; top: -32px; width: 50px; } .lightbox article.otherBoxEF .tabFilter .owl-theme .owl-controls .owl-buttons div { background: url(../Content/images/icon/icon_timeArrow.gif?v20170216) no-repeat; } .lightbox article.otherBoxEF .tabFilter .owl-theme .owl-controls .owl-buttons .owl-prev { left: 0; top: 0; background-position: 0 0; } .lightbox article.otherBoxEF .tabFilter .owl-theme .owl-controls .owl-buttons .owl-next { right: 0; top: 0; background-position: -22px 0; } .splitUnit .lightbox article.otherBoxEF .tabFilter { max-width: 100%; font-size: 0; } .splitUnit .lightbox article.otherBoxEF .tabFilter .tabFilterL { width: 40%; } .splitUnit .lightbox article.otherBoxEF .tabFilter .tabFilterR { width: 60%; } .splitUnit .lightbox article.otherBoxEF .tabFilter .title { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 12px; min-height: 44px; line-height: 1.3em; padding: 5px 0 5px 0; text-align: center; color: #fff; background-color: #356e87; border-bottom: 1px #c3c3c3 solid; } .splitUnit .lightbox article.otherBoxEF .tabFilter .title:before { position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: #c3c3c3; content: ""; z-index: 1; } .splitUnit .lightbox article.otherBoxEF .tabFilter .tabFilterL .title span { color: #fff; font-weight: bold; } .splitUnit .lightbox article.otherBoxEF .tabFilter .tabFilterR .title span { color: #9cd1ff; font-weight: bold; } .splitUnit .lightbox article.otherBoxEF .tabFilter .tabFilterL dl { position: relative; display: inline-block; width: 33.3%; font-size: 12px; } .splitUnit .lightbox article.otherBoxEF.bgSoft3 .tabFilter .tabFilterL { width: 200px; } .splitUnit .lightbox article.otherBoxEF.bgSoft3 .tabFilter .tabFilterL dl { width: 100%; } .splitUnit .lightbox article.otherBoxEF.bgSoft3 .tabFilter .tabFilterL dl dd:first-child { background-color: #555; } .splitUnit .lightbox article.otherBoxEF.bgSoft3 .tabFilter .tabFilterR { width: calc(100% - 200px); } .lightbox article.otherBoxEF.bgSoft3 .tabFilter dl dd { padding: 5px 5px; } .lightbox article.otherBoxEF .tabFilter dl dd:first-child { min-height: 40px; } /* .splitUnit .lightbox article.otherBoxEF.bgSoft3 .tabFilter .tabFilterR dl { width: 100%; } */ .splitUnit .lightbox article.otherBoxEF .tabFilter .tabFilterL .title, .splitUnit .lightbox article.otherBoxEF .tabFilter .tabFilterL dl dd:first-child { background-color: #555; } .splitUnit .lightbox article.otherBoxEF .tabFilter .tabFilterR dl { position: relative; display: inline-block; width: 50%; font-size: 12px; } @media only screen and (max-width : 768px) { .splitUnit .lightbox article.otherBoxEF .tabFilter .title span { display: block; } .splitUnit .lightbox article.otherBoxEF .tabFilter dl dd { padding: 5px 5px; } section article.productList .introBox .btnBox { position: relative; top: auto; left: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; } section article.productList .introBox .btnBox { display: flex; align-items: center; justify-content: center; flex-direction: column; } section article.productList .introBox .btnBox a:nth-child(2) { margin: 10px 0 0 0; } section article.productList .introBox .btnBox a:nth-child(3) { margin: 10px 0 0 0; } section article.productList .introBox .btnBox a:nth-child(4) { margin: 10px 0 0 0; } } @media only screen and (max-width : 400px) { .splitUnit .lightbox article.otherBoxEF.bgSoft .producttitle { margin: 0 auto 15px; } .splitUnit .owl-theme .owl-nav { margin: -45px 0 0; } } @media only screen and (max-width : 320px) { .splitUnit .lightbox article.otherBoxEF.bgSoft .producttitle { margin: 0 auto 40px; } .splitUnit .owl-theme .owl-nav { margin: -35px 0 0; } } /* .lightbox article.otherBoxEF .tabSoftCom { display: table; width: 100%; background: #f4f4f4; } .lightbox article.otherBoxEF .tabSoftCom.mobile { display: none; } .lightbox article.otherBoxEF .tabSoftCom th { color: #fff; font-weight: normal; background-color: #356e87; } .lightbox article.otherBoxEF .tabSoftCom tr:nth-child(even) { background-color: #fff; } .lightbox article.otherBoxEF .tabSoftCom th, .lightbox article.otherBoxEF .tabSoftCom td { padding: 5px 10px; vertical-align: middle; } .lightbox article.otherBoxEF .tabSoftCom td { text-align: center; } .lightbox article.otherBoxEF .tabSoftCom td.del { color: #aaa; } .lightbox article.otherBoxEF .tabSoftCom td:nth-child(1) { text-align: left; } */ section .main .notes { max-width: 1320px; margin: 20px auto 40px auto; padding: 0 20px; width: 90%; font-size: 11px; text-align: right } section .main .notes span { padding: 0 0 0 20px; color: #515151; font-weight: 100; line-height: 16px; font-size: 12px; } section article.productList .descBox { position: relative; width: 90%; max-width: 1320px; padding: 30px 0; margin: 40px auto 0 auto; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } section article.productList .descBox .desc {} section article.productList .descBox .desc .icon, section article.productList .descBox .desc .text { display: table-cell; *display: inline; zoom: 1; vertical-align: bottom; } section article.productList .descBox .desc .icon { padding: 0 10px 0 0; } section article.productList .descBox .desc .icon img { max-width: 76px; width: 100%; } section article.productList .descBox .desc .text { font-size: 14px; line-height: 18px; color: #3f3f3f; font-weight: 200; } section article.productList .descBox .iconBox { position: absolute; top: 40px; right: 0; } section article.productList .descBox .iconBox span { margin: 0 0 0 20px; } /* blog */ section article.productBlogBox { padding: 80px 0; background: #fff; } section article.productBlogBox .main { max-width: 1100px; padding: 0 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.productBlogBox h3 { font-size: 20px; font-weight: 400; color: #000; margin: 0 0 25px 0; text-align: center; } section article.productBlogBox .blogSlick { padding: 14px 0px; border-top: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.productBlogBox button.slick-next { right: -50px; } section article.productBlogBox button.slick-prev { left: -50px; } section article.productBlogBox .table { display: table; width: 100%; vertical-align: middle; } section article.productBlogBox .photo, section article.productBlogBox .cont { display: table-cell; vertical-align: middle; } section article.productBlogBox .photo { position: relative; width: 300px; height: 300px; overflow: hidden; cursor: pointer; } section article.productBlogBox .photo a { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; cursor: pointer; z-index: 2 } section article.productBlogBox .photo.text { padding: 24px 16px; font-size: 26px; line-height: 36px; color: #fff; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.productBlogBox .photo .photoInner { position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } section article.productBlogBox .text .photoInner { position: relative; height: 252px; overflow: hidden; } /* color chioce */ section article.productBlogBox .text.bgPupl { background-color: #9abae1; } section article.productBlogBox .text.bgOrang { background-color: #eec9ab; } section article.productBlogBox .text.bgGren { background-color: #9addcd; } section article.productBlogBox .photo .photoInner img { width: 100% } section article.productBlogBox .cont { padding: 0 0 0 60px; width: calc(100% - 300px); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.productBlogBox .cont .ttl { margin: 0px 0 28px; max-height: 3em; font-size: 24px; line-height: 1.5em; overflow: hidden; cursor: pointer; } section article.productBlogBox .cont .ttl a { color: #383838; } section article.productBlogBox .cont .ttl:hover a { color: #2c2c2c; } section article.productBlogBox .cont .name { margin-bottom: 12px; font-size: 20px; line-height: 1.2em; color: #2c2c2c; } section article.productBlogBox .cont .line { margin-bottom: 22px; width: 16px; height: 2px; background-color: #2c2c2c; } section article.productBlogBox .cont .context { max-height: 4em; font-size: 14px; line-height: 1.4em; color: #7a7879; overflow: hidden; } section article.productBlogBox .btn { width: 120px; margin: 20px 0 0 auto; } section article.productBlogBox .btn a { float: right; display: block; width: 100%; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; cursor: pointer; } section article.productBlogBox .btn img { display: inline-block; width: 12px; vertical-align: -2%; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } section article.productBlogBox .slick-dots li button::before { font-size: 30px; left: -4px; } section article.productBlogBox .slick-dots li { width: 12px; } section article.productBlogBox .slick-dots { bottom: -30px; } section article.productConBox { background: #fff; } section article.productConBox.even { background: #f4f4f4; } section article.productConBox.first { border-bottom: 1px #d3d3d2 solid; } section article.productConBox.first .main { max-width: 1340px; min-height: 700px; padding: 40px 0; margin-left: 15%; } section article.productConBox.block .main { width: 100%; display: table; } section article.productConBox .main { max-width: 1080px; } section article.productConBox .productlist, section article.productConBox .detailBox { /*display: table-cell; */ float: left; *display: inline; zoom: 1; vertical-align: middle; } section article.productConBox .productlist { width: 45%; margin: 0 4% 0 5%; padding-bottom: 40px; /*padding: 0 3% 0 2%;*/ } section article.productConBox .productlist ul li { text-align: center; height: 398px; } section article.productConBox .productlist ul li img { max-width: 100%; max-height: 100%; margin: auto; } section article.productConBox .detailBox { width: 40%; margin-right: 0; } section article.productConBox .detailBox .posBox { /*width: 40%; position: absolute; top: 50%; right: calc(3% + 40px); -webkit-transform: translateY(-60%); transform: translateY(-60%);*/ } section article.productConBox .detailBox .tabDetail { padding-top: 15%; } section article.productConBox .detailBox .tabDetail .type { font-size: 27px; font-weight: 100; margin: 0 0 5px 0; } section article.productConBox .detailBox .tabDetail .boxtr { position: relative; width: 100%; display: table; border-bottom: 1px #d7d7d7 solid; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea { padding: 15px 0 14px; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea .boxtdl { /* padding: 11px 0 20px; */ padding: 0 0 20px; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea+.boxtr.addBuyArea { padding: 0 0 14px; } section article.productConBox .detailBox .tabDetail .boxtr.boderNone { border-bottom: none; } section article.productConBox .detailBox .tabDetail .boxtdl, section article.productConBox .detailBox .tabDetail .boxtdr { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; padding: 11px 0; font-size: 12px; } section article.productConBox .detailBox .tabDetail .boxtdl.withBlock, section article.productConBox .detailBox .tabDetail .boxtdr.withBlock { width: 100%; display: block; } section article.productConBox .detailBox .tabDetail .boxtdl.pd0, section article.productConBox .detailBox .tabDetail .boxtdr.pd0 { padding: 0; } section article.productConBox .detailBox .tabDetail .boxtdl { width: 40%; } section article.productConBox .detailBox .tabDetail .boxtdr { width: 60%; } section article.productConBox .detailBox .tabDetail .boxtdl.type, section article.productConBox .detailBox .tabDetail .price { vertical-align: bottom; } section article.productConBox .detailBox .tabDetail .boxtdl.type { font-size: 27px; font-weight: 200; line-height: 30px; width: 55%; } section article.productConBox .detailBox .tabDetail .boxtdl.type .txt { font-size: 13px; font-weight: 400; } section article.productConBox .detailBox .tabDetail .boxtdl.type .txt span { font-weight: 600; } section article.productConBox .detailBox .tabDetail .price, section article.productConBox .detailBox .tabDetail .default, section article.productConBox .detailBox .tabDetail .DIYprice { position: relative; display: table-cell; vertical-align: top; text-align: right; padding: 15px 0 10px 0; } section article.productConBox .detailBox .tabDetail .price span, section article.productConBox .detailBox .tabDetail .default span, section article.productConBox .detailBox .tabDetail .DIYprice span { font-size: 12px; } section article.productConBox .detailBox .tabDetail .price span.box, section article.productConBox .detailBox .tabDetail .default span.box, section article.productConBox .detailBox .tabDetail .DIYprice span.box { position: relative; display: inline-block; font-size: 22px; padding: 0 0 0 6px; } section article.productConBox .detailBox .tabDetail .price span.box { color: #c81313; } section article.productConBox .detailBox .tabDetail .DIYprice>span { color: #5799e1; } section article.productConBox .detailBox .tabDetail .default span.box img, section article.productConBox .detailBox .tabDetail .price span.box img, section article.productConBox .detailBox .tabDetail .DIYprice span.box img { position: absolute; top: -20px; left: -15px; } section article.productConBox .detailBox .tabDetail .DIYprice a { position: relative; display: inline-block; width: 12px; height: 12px; /* line-height: 14px; */ margin: 0 5px; text-align: center; color: #999; font-size: 0; border: 0; z-index: 9; background: url(../Content/images/icon/icon_info.svg) no-repeat; } section article.productConBox .detailBox .tabDetail .DIYprice a em { display: none; } section article.productConBox .detailBox .tabDetail .DIYprice a:hover em { display: block; position: absolute; top: 0; right: 0; padding: 22px 0 0 0; margin: 0 -36px 0 0; } section article.productConBox .detailBox .tabDetail .DIYprice a em>span { display: block; width: 90px; padding: 5px 0; line-height: 16px; text-align: center; background: #fff; font-size: 12px; font-style: normal; border: 1px #cfd1d0 solid; } section article.productConBox .detailBox .tabDetail .DIYprice a em>span:before { position: absolute; top: 16px; left: 50%; width: 14px; height: 7px; content: ""; margin-left: -4px; background: url(../Content/images/icon/icon_DIYprice.gif) no-repeat; -webkit-background-size: 14px auto; background-size: 14px auto; z-index: 1; } section article.productConBox .detailBox .tabDetail .price.noPrice { color: #999; text-align: left; } /* section article.productConBox .detailBox .tabDetail .price span.special { color: #000; font-size: 12px; padding-right: 15px; } */ section article.productConBox .detailBox .tabDetail .iconSale { /* text-align: right; margin: 0 0 -5px 0; */ position: absolute; top: -8px; right: 0; } section article.productConBox .detailBox .tabDetail .title { display: block; font-size: 27px; font-weight: 200; line-height: 30px; margin: 0 0 10px 0; text-align: left; height: inherit; padding: 0; } section article.productConBox .detailBox .tabDetail .subTitle { font-size: 15px; line-height: 24px; margin: 0 0 24px 0; } section article.productConBox .detailBox .tabDetail .price span.box { position: relative; display: inline-block; } section article.productConBox .detailBox .btn { position: relative; width: 100%; margin: 32px 0 10px; } section article.productConBox .detailBox .btn:after { content: ""; display: table; clear: both; } section article.productConBox .detailBox .btn .number { position: absolute; top: 0; left: 0; right: 62%; } section article.productConBox .detailBox .selectboxit-btn { background: #d3d3d2 url(../Content/images/icon/icon_nextArrow.png?v20170216) no-repeat right; border: 0; height: 42px; line-height: 42px; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; } section article.productConBox .detailBox .number .selectboxit-btn { background: #d3d3d2 url(../Content/images/icon/icon_nextArrow.png?v20170216) no-repeat left; -webkit-border-radius: 21px 0 0 21px; -moz-border-radius: 21px 0 0 21px; border-radius: 21px 0 0 21px; } section article.productConBox .detailBox .number .selectboxit-container .selectboxit-options { min-width: auto !important; width: auto; border-radius: 0; left: 32px; right: 0; } section article.productConBox .detailBox .number .selectboxit-container .selectboxit-options .selectboxit-option {} section article.productConBox .detailBox .diyful .selectboxit-btn { -webkit-border-radius: 0 21px 21px 0; -moz-border-radius: 0 21px 21px 0; border-radius: 0 21px 21px 0; } section article.productConBox .detailBox .diyful .selectboxit-container .selectboxit-options { min-width: auto !important; width: auto; border-radius: 0; left: 0; right: 32px; text-align: center; } section article.productConBox .detailBox .diyful .selectboxit-container .selectboxit-options .selectboxit-option { text-indent: 0; } section article.productConBox .detailBox .selectboxit-container * { font-size: 13px; } section article.productConBox .detailBox .selectboxit-container span { height: 42px; line-height: 42px; position: relative; } section article.productConBox .detailBox .number .selectboxit-container>span { padding: 0 0 0 35px; } section article.productConBox .detailBox .diyful .selectboxit-container>span { padding: 0 0 0 25px; text-align: center; } section article.productConBox .detailBox .diyful .selectboxit-container>span:before { position: absolute; top: 0; left: 15px; content: "數量"; } section article.productConBox .detailBox .selectboxit-default-arrow { width: 0; height: 0; border: 0; } section article.productConBox .detailBox .selectboxit-text { overflow: hidden; text-overflow: ellipsis; float: none; } section article.productConBox .detailBox .diyful .selectboxit-text { text-indent: -20px; } section article.productConBox .detailBox .btn input[type=submit].buy { float: right; width: 40%; color: #fff; text-align: center; border: 0; height: 42px; line-height: 42px; cursor: pointer; background: #000000 url(../Content/images/icon/icon_productCar.png?v20170216) no-repeat right; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; padding: 0 20px 0 6px; font-size: 13px; font-weight: normal; } section article.productConBox .detailBox .desc { text-align: right; color: #000; font-size: 12px; } section article.productConBox .detailBox .desc a { display: inline-block; margin: 0 0 0 15px; } section article.productConBox .detailBox .desc img { max-width: 16px; } /** * * discontinued * **/ section article.productConBox .detailBox .addPricePro { padding-top: 5%; } section article.productConBox .detailBox .addPricePro .addPriceProHd { border-bottom: 1px #d7d7d7 solid; } section article.productConBox .detailBox .addPricePro .addPriceProHd span { display: inline-block; padding: 5px 10px; font-size: 15px; color: #fff; background-color: #03a8e0; } section article.productConBox .detailBox .addPricePro .addPriceProBd { font-size: 0; padding: 5% 0 0 0; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto, section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody { display: table-cell; vertical-align: top; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto { width: 38%; padding: 0 4% 0 0; text-align: center; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto img { width: 100%; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody { width: 58%; min-width: 280px; font-size: 13px; padding: 30px 0 0 0; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPriceTitle { font-size: 24px; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPriceMsg { margin: 5px 0 0 0; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPriceLi { position: relative; margin: 0 4px 0 18px; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody a.addPriceLi { color: #333; border-bottom: 1px #333 solid; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody a:hover.addPriceLi { color: #03a8e0; border-bottom: 1px #03a8e0 solid; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPriceLi:after { position: absolute; top: 50%; left: -18px; content: ""; width: 14px; height: 14px; margin-top: -7px; background-color: #333; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPricePlan { margin: 30px 0 0 0; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPricePlan ul { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin: 0 -5px; width: calc(100% + 10px); } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPricePlan ul li { position: relative; width: calc(50% - 10px); height: 70px; margin: 0 5px 14px; cursor: pointer; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .btn { margin: 5px 0 0; display: none; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .btn input[type="reset"].buy, section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .btn input[type="button"].buy, section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .btn input[type="submit"].buy { float: right; color: #fff; text-align: center; border: 0; height: 42px; line-height: 42px; cursor: pointer; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; padding: 0 20px 0 6px; width: 100%; font-size: 13px; font-weight: normal; background: #03a8e0 url(../Content/images/icon/icon_productCar.png?v20170216) no-repeat right; } section article.productConBox .detailBox .addPricePro .addPriceProBd input.addRadios { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; } section article.productConBox .detailBox .addPricePro .addPriceProBd input.addRadios:afetr { content: ''; position: absolute; width: 20px; height: 20px; background: #000; border-radius: 50%; } section article.productConBox .detailBox .addPricePro .addPriceProBd .box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 10px 10px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; border: 1px solid #d7d7d7; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPricePlan ul li span { color: #03a8e0; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPricePlan ul li span.txt { color: #333; font-size: 15px; margin: 0 0 8px 0; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPricePlan ul li span.price { font-size: 28px; } section article.productConBox .detailBox .addPricePro .addPriceProBd .box:before { content: ''; position: absolute; top: -7px; left: -7px; width: 0; height: 0; background: #03a8e0; border-radius: 50%; } section article.productConBox .detailBox .addPricePro .addPriceProBd .checkICON, section article.productConBox .detailBox .addPricePro .addPriceProBd .checkICON2 { position: absolute; top: -9px; left: -9px; width: 26px; height: 26px; z-index: 2; stroke-dasharray: 13; stroke-dashoffset: 14; } section article.productConBox .detailBox .addPricePro .addPriceProBd .checkICON.on, section article.productConBox .detailBox .addPricePro .addPriceProBd .checkICON2.on { animation: checkON 0.3s 300ms cubic-bezier(0.57, 0.43, 0.2, 0.9) forwards; } section article.productConBox .detailBox .addPricePro .addPriceProBd input:checked+.box { top: -1px; bottom: -1px; left: -1px; right: -1px; border: 2px solid #03a8e0; } section article.productConBox .detailBox .addPricePro .addPriceProBd input:checked+.box:before { width: 20px; height: 20px; transform: scale(0); animation: bounceIn 0.3s 100ms cubic-bezier(0.57, 0.43, 0.2, 0.9) forwards; } .jconfirm.placardMsgBody .jconfirm-box-container { max-width: 480px; } .jconfirm.placardMsgBody h2 { padding: 0 0 15px 0; margin: 0 0 15px 0; font-size: 16px; text-align: center; border-bottom: 1px solid #d7d7d7; } .jconfirm.placardMsgBody ul li { margin: 6px 0; } section article.productConBox .detailBox .reward ul li { display: inline-block; padding-right: 15px; } section article.productConBox .detailBox .event { position: absolute; right: 0; bottom: -1px; width: 230px; height: 35px; overflow: hidden; border: 1px #d3d3d2 solid; } section article.productConBox .detailBox .event.open { height: auto; } section article.productConBox .detailBox .event a { display: block; width: 230px; line-height: 35px; text-align: center; color: #fff; font-size: 15px; font-weight: 400; background: #c81313; } section article.productConBox .detailBox .event .eventBd { padding: 15px; background: #fff; } section article.productConBox .detailBox .event .eventBd .photo { position: relative; height: 100px; text-align: center; margin: 0 auto; } section article.productConBox .detailBox .event .eventBd .photo img { max-width: 100px; } section article.productConBox .detailBox .event .eventBd p { margin: 14px 0 0 0; padding: 16px 0 0 0; color: #515151; border-top: 1px #d3d3d2 solid; } section article.productConBox .relatedProBox { width: 73%; padding: 0; margin: 80px auto 0; padding: 14px 0 0 0; margin: 38px 0 0 20px; width: 100%; border-top: 1px solid #d7d7d7; } section article.productConBox .relatedProBox ul { /*display: flex;*/ align-items: flex-end; justify-content: space-between; } section article.productConBox .relatedProBox ul li { display: inline-block; width: 33.3%; min-width: 88px; vertical-align: top; text-align: center; margin: 5px -2px; } section article.productConBox .relatedProBox.max ul li { width: 25%; } section article.productConBox .relatedProBox ul li .photo { max-width: 150px; margin: 0 auto; } section article.productConBox .relatedProBox ul li .photo img { width: 100%; } section article.productConBox .relatedProBox ul li .title { margin: 5px 5px; } section article.productConBox .relatedProBox.max ul li .title { font-size: 12px; } section article.productConBox .relatedProBox ul li .title span { display: block; color: #000; font-size: 15px; } section article.productConBox .relatedProBox ul li a { display: inline-block; width: 87%; padding: 2px 0; color: #888; } section article.productConBox .relatedProBox ul li a:not(.no-board) { border: 1px #d2d2d2 solid; } section article.productConBox .relatedProBox .relatedProBoxHd { font-size: 12px; color: #363636; padding-bottom: 20px; border-bottom: 1px #d3d3d2 solid; } section article.productConBox .relatedProBox .relatedProBoxBd { padding: 0; } @media only screen and (max-width : 1290px) { section article.productConBox .relatedProBox { margin: 50px 16%; width: 80%; } } @media only screen and (max-width : 1020px) { section article.productConBox .relatedProBox { margin: 60px auto 100px; width: 80%; } section article.productConBox .relatedProBox ul li { display: block; width: 100%; margin: 0 0 5%; } } section article.productConBox .otherChooseBox { display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; margin: 0 -5px; width: calc(100% + 10px); } section article.productConBox .otherChooseBox .item { position: relative; width: calc(50% - 10px); /* height: 95px; */ margin: 0 5px 14px; } section article.productConBox .otherChooseBox .item label.radio { cursor: pointer; } section article.productConBox .otherChooseBox .item label.radio input { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; } section article.productConBox .otherChooseBox .item label.radio input:afetr { content: ''; position: absolute; width: 20px; height: 20px; background: #000; border-radius: 50%; } section article.productConBox .otherChooseBox .item label.radio .box { /* position: absolute; top: 0; bottom: 0; left: 0; right: 0; */ height: 100%; display: flex; flex-direction: row; align-items: center; border: 2px solid #d7d7d7; } section article.productConBox .otherChooseBox .item label.radio .box:before { content: ''; position: absolute; top: -5px; left: -5px; width: 0; height: 0; background: #000; border-radius: 50%; } section article.productConBox .otherChooseBox .item label.radio .checkICON { position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; z-index: 2; stroke-dasharray: 13; stroke-dashoffset: 14; } section article.productConBox .otherChooseBox .item label.radio .checkICON.on { animation: checkON 0.3s 300ms cubic-bezier(0.57, 0.43, 0.2, 0.9) forwards; } section article.productConBox .otherChooseBox .item label.radio input:checked+.box { border: 2px solid #000; } section article.productConBox .otherChooseBox .item label.radio input:checked+.box:before { width: 20px; height: 20px; transform: scale(0); animation: bounceIn 0.3s 100ms cubic-bezier(0.57, 0.43, 0.2, 0.9) forwards; } section article.productConBox .otherChooseBox .item label.radio .box .pic { display: block; width: 65px; padding: 0; position: relative; height: 80px; } section article.productConBox .otherChooseBox .item label.radio .box .details { display: block; width: calc(100% - 65px); padding: 13px 5px 20px 5px; } section article.productConBox .otherChooseBox .item label.radio .box .details .ttl { font-size: 15px; line-height: 1.4em; color: #000; /* max-height: 2.8em; overflow: hidden; */ } section article.productConBox .otherChooseBox .item label.radio .box .details .addPrice { font-size: 17px; line-height: 1.6em; color: #000; } section article.productConBox .otherChooseBox .item label.radio .box .pic img { position: absolute; top: 50%; right: 0; bottom: 0; left: 50%; height: 100%; transform: translate(-50%, -50%); } section article.productConBox .otherChooseBox .item label.radio .box .details>span { display: block } section article.productConBox .otherChooseBox .item .infoBox { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; border-radius: 50%; background: #d3d3d2 url(images/icon/icon_info.png) no-repeat center center; background-size: 16px auto; cursor: pointer; z-index: 2; transition: all 200ms linear; } section article.productConBox .otherChooseBox .item .infoBox:hover { background: #000 url(images/icon/icon_info.png) no-repeat center center; background-size: 16px auto; } section article.productConBox .otherChooseBox .item .infoBox span { position: absolute; right: 20px; bottom: -2px; font-size: 12px; display: block; width: 27px; color: #666; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea.displayFlex { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea.displayFlex .displayFlex__item { width: 66%; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea.displayFlex .displayFlex__item+.displayFlex__item { width: 33%; margin-left: 10px; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea.displayFlex .displayFlex__item+.displayFlex__item .item { width: calc(100% - 10px); } section article.productConBox .otherChooseBox.small .item { width: calc(33% - 10px); /* height: 75px; */ } .boxtr.addBuyArea.displayFlex .otherChooseBox .item { /* height: 75px; */ } .boxtr.addBuyArea.displayFlex .otherChooseBox .item .infoBox span, section article.productConBox .otherChooseBox.small .item .infoBox span { display: none; } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .pic, section article.productConBox .otherChooseBox.small .item label.radio .box .pic { width: 55px; height: 60px; } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .details, section article.productConBox .otherChooseBox.small .item label.radio .box .details { width: calc(100% - 40px); /* padding: 10px 5px 12px 5px; */ padding: 6px 5px 26px 5px; align-self: flex-start; } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .details .ttl, section article.productConBox .otherChooseBox.small .item label.radio .box .details .ttl { font-size: 12px; } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .details .addPrice, section article.productConBox .otherChooseBox.small .item label.radio .box .details .addPrice { font-size: 12px; position: absolute; bottom: 5px; } section article.productConBox .otherChooseBox.small .item label.radio .box .details .addPrice.red { color: red !important; } section article.productConBox .otherChooseBox .item .infoBox { width: 15px; height: 15px; background: #d3d3d2 url(images/icon/icon_info.png) no-repeat center center; background-size: 14px auto; } section article.productConBox .otherChooseBox .item .infoBox:hover { background: #000 url(images/icon/icon_info.png) no-repeat center center; background-size: 14px auto; } @media only screen and (max-width : 1280px) { section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea.displayFlex { flex-direction: column; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea.displayFlex .displayFlex__item { width: 100%; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea.displayFlex .displayFlex__item+.displayFlex__item { width: 100%; margin-left: auto; } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea.displayFlex .displayFlex__item+.displayFlex__item .item { width: calc(50% - 10px); } section article.productConBox .otherChooseBox.small .item { width: calc(50% - 10px); /* height: 90px; */ } .boxtr.addBuyArea.displayFlex .otherChooseBox .item { /* height: 90px; */ } /* .boxtr.addBuyArea.displayFlex .otherChooseBox .item .infoBox span, section article.productConBox .otherChooseBox.small .item .infoBox span { display: block; } */ section article.productConBox .otherChooseBox .item .infoBox { right: 10px; bottom: 10px; } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .pic, section article.productConBox .otherChooseBox.small .item label.radio .box .pic { width: 65px; height: 80px; } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .details, section article.productConBox .otherChooseBox.small .item label.radio .box .details { width: calc(100% - 65px); padding: 6px 5px 26px 5px; = } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .details .ttl, section article.productConBox .otherChooseBox.small .item label.radio .box .details .ttl { font-size: 15px; } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .details .addPrice, section article.productConBox .otherChooseBox.small .item label.radio .box .details .addPrice { font-size: 15px; bottom: 5px; } } @media only screen and (max-width: 767px) { section article.productConBox .otherChooseBox.small .item { width: calc(100% - 10px); /* height: 75px; */ } .boxtr.addBuyArea.displayFlex .otherChooseBox .item { /* height: 75px; */ } section article.productConBox .detailBox .tabDetail .boxtr.addBuyArea.displayFlex .displayFlex__item+.displayFlex__item .item { width: calc(100% - 10px); } .boxtr.addBuyArea.displayFlex .otherChooseBox .item .infoBox span, section article.productConBox .otherChooseBox.small .item .infoBox span { display: block; } /* .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .pic, section article.productConBox .otherChooseBox.small .item label.radio .box .pic{ width: 65px; height: 80px; } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .details, section article.productConBox .otherChooseBox.small .item label.radio .box .details { width: calc(100% - 65px); padding: 13px 5px 20px 5px; } .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .details .ttl, section article.productConBox .otherChooseBox.small .item label.radio .box .details .ttl{ font-size: 15px; } */ /* .boxtr.addBuyArea.displayFlex .otherChooseBox .item label.radio .box .details .addPrice, section article.productConBox .otherChooseBox.small .item label.radio .box .details .addPrice { position: relative; bottom: auto; margin: 10px 0 0 0; } */ } @keyframes checkON { 0% { stroke-dasharray: 13; stroke-dashoffset: 14; } 100% { stroke-dasharray: 23; stroke-dashoffset: 14; } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3) translate3d(0, 0, 0); } 50% { opacity: 0.9; transform: scale(1.1); } 80% { opacity: 1; transform: scale(0.89); } 100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); } } /** lightbox ---------------------------------------------------*/ .jconfirm.otherProduct .jconfirm-box-container, .jconfirm.testReport .jconfirm-box-container { max-width: inherit; width: 60vw; } .jconfirm.otherProduct .jconfirm-box { border-radius: 0 !important; } .jconfirm.otherProduct .jconfirm-box div.content { padding: 24px 42px 46px; } .lightboxSec { display: none; } .jconfirm.testReport .jconfirm-box div.content { padding: 20px; } .jconfirm.testReport iframe { height: 90vh; } .jconfirm.testReport .jconfirm-box { /* background: none; border-radius: 0 !important; */ box-shadow: 0 0 0 rgba(0, 0, 0, 0.2) !important; } .otherProductBox { display: flex; flex-direction: row; align-items: center; } .otherProductBox .bx-wrapper { width: 50% } .otherProductBox .lightHeader .ttl { font-size: 26px; line-height: 1em; color: #363636; } .otherProductBox .lightHeader .sub { font-size: 15px; line-height: 2em; color: #363636; } .otherProductBox .lightDetails { position: relative; width: 50%; margin: 30px 0 0 0; display: flex; flex-direction: column; } .otherProductBox .lightDetails .box { width: 100%; margin-top: 30px; } .otherProductBox .lightDetails .box .ht { padding: 6px 0; } .otherProductBox .lightDetails .box .hc { padding: 10px 0; border-top: 1px solid #d7d7d7; } .otherProductBox .lightDetails .box .hc li { margin-bottom: 4px; } .otherProductBox .lightDetails .box .hc .num, .otherProductBox .lightDetails .box .hc ol { list-style-type: decimal; margin: 0 0 0 20px; } .otherProductBox .lightDetails .box .hc ul { list-style-type: disc; margin: 0 0 0 20px; } .dispatchBox { display: flex; flex-direction: row; align-items: center; } .dispatchBox .lightHeader .ttl { font-size: 26px; line-height: 1em; color: #363636; } .dispatchBox .bx-wrapper .text { margin-top: 20px; } .dispatchBox .bx-wrapper .openSmProBtn { text-align: center; } /* 雙溫 SEO lightbox */ .jconfirm.choose-filtration .jconfirm-box-container { width: 90%; margin: 0 auto; max-width: 1280px; } .jconfirm.choose-filtration .jconfirm-box div.content { padding: 0; } .jconfirm.choose-filtration .view { max-width: 86%; margin: 0 auto; } .jconfirm.choose-filtration .cont { font-size: 16px; line-height: 1.75em; color: #666; } .howChoose-filtration h3, .howChoose-filtration h4 { font-weight: 400 } .jconfirm.choose-filtration .link { color: #286ee3; border-bottom: 1px solid #286ee3; } .jconfirm.choose-filtration img { max-width: 100%; } .howChoose-filtration .howChoose-header { padding: 50px 0 35px; text-align: center; } .howChoose-filtration .howChoose-header .subTtl { font-size: 24px; line-height: 1.4em; font-weight: 400; color: #938d8d; } .howChoose-filtration .howChoose-header .ttl { font-size: 36px; line-height: 2em; font-weight: 400; color: #1e1c1c; } .howChoose-filtration .howChoose-header .cont { margin-top: 20px; text-align: left; } .howChoose-filtration .howChoose-good { padding: 45px 0; background: #f4f4f4; } .howChoose-filtration .howChoose-good .view { display: flex; align-items: center; } .howChoose-filtration .howChoose-good .howChoose-good-txt { width: 45%; padding-right: 10%; } .howChoose-filtration .howChoose-good .howChoose-good-txt .ttl { margin-bottom: 30px; font-size: 30px; line-height: 1.4em; color: #000 } .howChoose-filtration .howChoose-good .howChoose-good-img { width: 55%; max-width: 670px; } .howChoose-filtration .howChoose-good .howChoose-good-img img { max-width: 100%; } .howChoose-filtration .howChoose-products { display: flex; justify-content: space-between; padding: 90px 0; } .howChoose-filtration .howChoose-products .howChoose-products-item { width: calc(50% - 32px) } .howChoose-filtration .howChoose-products .howChoose-products-item .subTtl { font-size: 16px; line-height: 1.2em; color: #000; } .howChoose-filtration .howChoose-products .howChoose-products-item .ttl { margin-bottom: 40px; margin-top: 20px; font-size: 40px; line-height: 1.4em; color: #000; } .howChoose-filtration .howChoose-products .howChoose-products-item .ttl .smTxt { font-size: 21px; line-height: 1.4em; color: #666; } .howChoose-filtration .howChoose-products .howChoose-products-item .img { max-width: 400px; margin: 0 auto; } .howChoose-filtration .howChoose-question { background: #f4f4f4 } .howChoose-filtration .howChoose-question .view { display: flex; } .howChoose-filtration .howChoose-question { padding: 45px 0; background: #f4f4f4; } .howChoose-filtration .howChoose-question .view { display: flex; justify-content: space-between; } .howChoose-filtration .howChoose-question .txt { width: calc(50% - 15px) } .howChoose-filtration .howChoose-question .ttl { font-size: 36px; line-height: 1.2em; color: #000; } /* LED說明 */ .sml_ProductBox { position: relative; width: 100%; background: #fff; display: none; } .sml_ProductBox .sml_icn_close { position: absolute; top: 7px; right: 0px; cursor: pointer; width: 20px; height: 20px; transform: rotate(-225deg); overflow: hidden; } .sml_ProductBox .img { max-width: 436px; } .sml_ProductBox img { width: 100% } .sml_ProductBox .sml_Ttl { padding-bottom: 10px; font-size: 24px; line-height: 30px; color: #7a7a7a; border-bottom: 1px solid #e0e0e0; } /* invoiceLightbox */ .invoiceLightbox .backPage { display: block; max-width: 1000px; padding: 0 20px; margin: -10px auto 20px; } .invoiceLightbox .backPage .icon { margin-top: -2px; width: 18px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -ms-transition: all 150ms linear; transition: all 150ms linear; } .invoiceLightbox .backPage .txt { color: #000; font-size: 15px; border-bottom: 1px solid #000; } .invoiceLightbox .backPage:hover .icon { -webkit-transform: rotate(-180deg) translateX(3px); -moz-transform: rotate(-180deg) translateX(3px); -ms-transform: rotate(-180deg) translateX(3px); transform: rotate(-180deg) translateX(3px); } .invoiceLightbox { display: table; width: 100%; color: #333; font-size: 13px; } .invoiceLightbox * { -webkit-box-sizing: border-box; box-sizing: border-box; } .invoiceLightbox .invoiceBox { text-align: center; border: 1px #eee solid; } .invoiceLightbox .invoiceBox .invoiceMainBox { width: 260px; padding: 20px; margin: 0 auto; background-color: #fff } .invoiceLightbox .invoiceBox .tag { display: inline-block; padding: 5px 30px; margin: 0 auto 10px auto; text-align: center; border: 1px #aaa solid; font-size: 13px; } .invoiceLightbox .invoiceBox .everpureTitle { margin-bottom: 15px; font-size: 15px; } .invoiceLightbox .invoiceBox .invoiceTitle { margin-bottom: 5px; font-size: 21px; font-weight: bold; } .invoiceLightbox .invoiceBox .date, .invoiceLightbox .invoiceBox .number { margin-bottom: 5px; font-size: 18px; color: #666; } .invoiceLightbox .invoiceBox .info .box, .invoiceLightbox .invoiceBox .qrCode { display: flex; align-items: center; justify-content: space-between; } .invoiceLightbox .invoiceBox .number, .invoiceLightbox .invoiceBox .info, .invoiceLightbox .invoiceBox .barCode, .invoiceLightbox .invoiceBox .qrCode, .invoiceLightbox .invoiceBox .priceInfo { margin: 0 0 10px 0; } .invoiceLightbox .invoiceBox .barCode img { max-width: 100%; } .invoiceLightbox .invoiceBox .qrCode img { max-width: 100px; border: 1px #eee solid; } .invoiceLightbox .invoiceBox .priceInfo { padding: 10px 0; font-size: 12px; text-align: left; border-top: 1px #eee solid; border-bottom: 1px #eee solid; } /* .invoiceLightbox .invoiceBox .priceInfo .box > div {display: table-cell;} */ .invoiceLightbox .invoiceBox .priceInfo .box { display: flex; flex-direction: row; } .invoiceLightbox .invoiceBox .priceInfo .label { width: 100px; } .invoiceLightbox .invoiceBox .priceInfo .text-right { width: calc(100% - 100px); text-align: right; } .invoiceLightbox .invoiceBox .desc { text-align: left; } .invoiceLightbox .invoiceDetailBox { position: relative; padding: 0 0 70px 40px; } .invoiceLightbox .invoiceDetailBox .invoiceMainBox { padding: 10px 0 0 0; } .invoiceLightbox .invoiceDetailBox .invoiceMainBox:before, .invoiceLightbox .invoiceDetailBox .invoiceMainBox:after { position: absolute; left: 40px; right: 0; content: ""; height: 1px; background-color: #ccc; } .invoiceLightbox .invoiceDetailBox .invoiceMainBox:before { top: 0; } .invoiceLightbox .invoiceDetailBox .invoiceMainBox:after { bottom: 0; } .invoiceLightbox .invoiceDetailBox .detailTitle { text-align: center; margin-bottom: 15px; font-size: 18px; font-weight: bold; margin: 20px 0 30px 0; } .invoiceLightbox .invoiceDetailBox .invoiceDetailHd, .invoiceLightbox .invoiceDetailBox .invoiceDetailBd table { display: table; width: 100%; } .invoiceLightbox .invoiceBox, .invoiceLightbox .invoiceDetailBox { display: table-cell; vertical-align: top; } .invoiceLightbox .invoiceDetailBox .invoiceDetailHd { margin: 0 0 20px 0; } .invoiceLightbox .invoiceDetailBox .invoiceDetailHd>div { display: table-cell; vertical-align: top; padding: 0 10px; } .invoiceLightbox .invoiceDetailBox .invoiceDetailHd>div:nth-child(2) { min-width: 190px; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd { padding: 0 10px; margin: 0 0 10px 0; min-height: 200px; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd table { border-top: 1px #ccc solid; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd th, .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td { padding: 5px 10px; } .jconfirm .jconfirm-box div.content .invoiceDetailBd td span { color: #333; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd th { border-bottom: 1px #aaa solid; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(2), .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(3), .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(4) { min-width: 60px; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(2), .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(4) { text-align: right; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(3) { text-align: center; } .invoiceLightbox .invoiceDetailBox .invoiceDetailFt { display: flex; align-items: start; justify-content: space-between; margin: 0 10px; padding: 10px 10px; border-top: 1px #aaa solid; border-bottom: 1px #ccc solid; } .invoiceLightbox .invoiceDetailBox .invoiceDetailFt>div:nth-child(1) .box>div { display: table-cell; } .invoiceLightbox .invoiceDetailBox .invoiceDetailFt>div:nth-child(2) .box { min-width: 140px; display: flex; align-items: start; justify-content: space-between; } .invoiceLightbox .invoiceDetailBox .invoiceMainBox .desc { position: absolute; left: 50px; right: 10px; bottom: 10px; font-size: 12px; } .invoiceLightbox.details-page { background: #f4f4f4; } .invoiceLightbox.details-page .invoiceBox { border: 1px solid #bbb } .invoiceLightbox.details-page .wrap { display: table; max-width: 900px; margin: 0 auto; padding: 40px 0 110px; } .invoiceLightbox.details-page .optionBox+.optionBox { margin: 0px auto 100px; } section article.productConBox .textbox { width: 50%; padding: 60px 40px; display: table-cell; *display: inline; zoom: 1; vertical-align: top; } section article.productConBox .textbox.max { width: auto; display: block; *display: block; } section article.productConBox .textbox h3 { font-size: 16px; font-weight: 400; color: #000; margin: 0 0 25px 0; } section article.productConBox .textbox h3.center { text-align: center; } section article.productConBox .textbox p { line-height: 26px; color: #515151; } section article.productConBox .textbox a { color: #2f7dcd; border-bottom: 1px #2f7dcd solid; } section article.productConBox .textbox .tabFilter dl dd a { border-bottom: 0; } section article.productConBox .textbox a.manualBox { display: block; margin: 20px 0 0 0; border-bottom: 0; } section article.productConBox .textbox a.manualBox+a.manualBox { margin: 10px 0 0 0; } section article.productConBox .textbox a.manualBox span { display: inline-block; text-align: center; /* min-width: 160px; */ font-size: 13px; color: #333; padding: 0 20px; line-height: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background-color: #e9e9e9; } section article.productConBox .textbox a.manualBox img { margin-top: -5px; max-width: 15px; } section article.productConBox .textbox ul { list-style-type: disc; } section article.productConBox .textbox ol { list-style-type: decimal; } section article.productConBox .textbox ul, section article.productConBox .textbox ol { margin: 8px 0 0 18px; } section article.productConBox .textbox ul li, section article.productConBox .textbox ol li { line-height: 26px; } section article.productConBox .textbox.htmlTag ul.fetable { display: inline-block; border-top: 1px #d7d7d7 solid; list-style-type: none; margin: 25px 0 0 0; padding: 10px 10px 0 0; } section article.productConBox .textbox.htmlTag ul.fetable li { line-height: 2; list-style: none; line-height: 20px; } section article.productConBox .textbox.htmlTag ul.fetable li a { padding: 0 20px 0 0; color: #818ea1; font-size: 12px; border-bottom: 0; background: url(../Content/images/icon/icon_serviceArrow_N.png) repeat-y 100% -5px; -webkit-background-size: 20px auto; background-size: 20px auto; } section article.productConBox .textbox.htmlTag ul.fetable li a:hover { color: #333; background: url(../Content/images/icon/icon_serviceArrow_N.png) repeat-y 100% 15px; -webkit-background-size: 20px auto; background-size: 20px auto; -webkit-transition: all .5s; transition: all .5s; } section article.productConBox .compareBox { margin: 0 0 20px 0; } section article.productConBox .compareBox h3 { text-align: center; } section article.productConBox .compareBox .typeBox { width: 200px; display: inline-block; margin: 0 0 0 10px; } section article.productConBox .compareBox .selectboxit-btn { background: #d3d3d2 url(../Content/images/icon/icon_nextArrow.png?v20170216) no-repeat right; border: 0; height: 42px; line-height: 42px; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; } section article.productConBox .compareBox .selectboxit-container span { height: 42px; line-height: 42px; text-align: center; } section article.productConBox .compareBox .selectboxit-default-arrow { width: 0; height: 0; border: 0; } section article.productConBox .compareBox .selectboxit-text { text-indent: -20px; overflow: hidden; text-overflow: ellipsis; float: none; } section article.productConBox .iconbox, section article.productConBox .conbox { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.productConBox .iconbox { font-size: 16px; font-weight: 400; color: #000; line-height: 30px; padding: 0 40px 0 60px; background: url(../Content/images/icon/icon_note.png?v20170216) no-repeat left center; } section article.productConBox .conbox p { line-height: 22px; } section article.productConBox .tabFilter { width: 100%; border: 1px #c3c3c3 solid; position: relative; } section article.productConBox .tabFilter:after { content: ""; display: table; clear: both; } section article.productConBox .tabFilter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } section article.productConBox .tabFilter .tabFilterL { width: 180px; } section article.productConBox .tabFilter .tabFilterR { width: calc(100% - 180px); } section article.productConBox .tabpicblock { text-align: center; } section article.productConBox .tabpicblock img { margin: 0 10px; } section article.productConBox .tabFilter dl dd { padding: 0 15px; font-size: 12px; height: 30px; line-height: 30px; text-align: center; border-right: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } section article.productConBox .tabFilter dl dd.double { display: flex; align-items: center; justify-content: center; height: 40px; line-height: 1.4em; } section article.productConBox .tabFilter dl dd.photo { height: 200px; line-height: 200px; } section article.productConBox .tabFilter dl dd a.del { display: inline-block; padding: 5px 15px; text-indent: -100000px; line-height: 22px; background: url(../Content/images/icon/icon_tabFilter_del.png?v20170216) no-repeat center; } .owl-carousel .owl-item dl dd.photo img { display: inline; width: auto; } section article.productConBox .tabFilter dl dd:last-child { border-bottom: 0; } section article.productConBox .tabFilter dl dd.del { border-right: 1px solid #c3c3c3; background: #f4f4f4; } section article.productConBox .tabFilter .owl-theme .owl-controls { margin-top: 0; position: absolute; top: 0; right: 0; } section article.productConBox .tabFilter .owl-theme .owl-controls .owl-buttons { position: absolute; right: 0; top: -32px; width: 50px; } section article.productConBox .tabFilter .owl-theme .owl-controls .owl-buttons div { background: url(../Content/images/icon/icon_timeArrow.gif?v20170216) no-repeat; } section article.productConBox .tabFilter .owl-theme .owl-controls .owl-buttons .owl-prev { left: 0; top: 0; background-position: 0 0; } section article.productConBox .tabFilter .owl-theme .owl-controls .owl-buttons .owl-next { right: 0; top: 0; background-position: -22px 0; } section article.productConBox .descBox { position: relative; padding: 30px 0; margin: 40px 0 0 0; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } section article.productConBox .descBox .desc {} section article.productConBox .descBox .desc .icon, section article.productConBox .descBox .desc .text { display: table-cell; *display: inline; zoom: 1; vertical-align: bottom; } section article.productConBox .descBox .desc .icon { padding: 0 10px 0 0; } section article.productConBox .descBox .desc .text { font-size: 11px; line-height: 18px; color: #3f3f3f; font-weight: 200; } section article.productConBox .descBox .iconBox { position: absolute; top: 40px; right: 0; } section article.productConBox .descBox .iconBox span { margin: 0 0 0 20px; } section article.productConBox .setupbox { padding: 110px 40px; } section article.productList h3, section article.productConBox .setupbox h3 { font-size: 20px; font-weight: 400; color: #000; text-align: center; padding: 25px 0; margin: 0 0 10px 0; } .photoSwitch-tab { position: relative; margin: 0 auto 40px; padding: 38px 0 0 0; width: 100%; } .photoSwitch-tab .switchNav { position: absolute; bottom: -64px; left: 0; right: 0; width: 100%; background-color: #f4f4f4; color: #000; font-size: 18px; line-height: 64px; height: 64px; display: flex; flex-direction: row; flex-wrap: wrap; } .photoSwitch-tab .css3-tab-nav { display: flex; flex-direction: row; align-items: flex-start; } .photoSwitch-tab .css3-tab-nav li { background-color: #666666; color: #FFFFFF; width: 64px; line-height: 64px; text-align: center; transition: all .3s ease 0s; } .photoSwitch-tab .css3-tab-nav li:only-child { display: none } .photoSwitch-tab .css3-tab-nav li.current { background-color: #000; } .photoSwitch-tab .css3-tab-nav li a { display: block; color: #FFFFFF; } .photoSwitch-tab .tabs_item { display: none; } .photoSwitch-tab .tabs_item:first-child { display: block } .photoSwitch-tab .tabs_item img { width: 100% } .photoSwitch-tab .photoTitle { padding: 0 30px; box-sizing: border-box } .photoSwitch-tab .tab_ttl { display: none; } .photoSwitch-tab .tab_ttl:first-child { display: block } .photoSwitch-tab .placeFrom { position: absolute; right: 30px; color: #727272; font-size: 16px; font-weight: 200; } .photoSwitch-tab .placeFrom span { font-size: 14px; margin: 0 10px 0 0; } .photoSwitch-tab .placeFrom span.mobile { display: inline; } @media only screen and (max-width: 768px) { .photoSwitch-tab .placeFrom span.mobile { display: none; } .photoSwitch-tab .placeFrom .tab_place { line-height: 1.4em; } .photoSwitch-tab .placeFrom { top: 110%; left: 0; right: 0; } } .photoSwitch-tab .placeFrom .tab_place { display: none; } .photoSwitch-tab .placeFrom .tab_place:first-child { display: block; } section article.recordBox { padding: 0 0 80px 0; background: #f4f4f4; } section article.recordBox:after { content: ""; display: table; clear: both; } section article.recordBox .main { max-width: 1440px; } section article aside.subnav { float: left; width: 18%; padding: 80px 0 0 0; margin: 0 2% 0 5%; } section article aside.subnav ul { border-top: 1px #dbdbdb solid; } section article aside.subnav ul li { font-size: 14px; padding: 15px 0 15px 20px; border-bottom: 1px #dbdbdb solid; background: url(../Content/images/icon/icon_subnav.png?v20170216) no-repeat left center; } section article aside.subnav ul li.on { background: url(../Content/images/icon/icon_subnavHover.png?v20170216) no-repeat left center; } section article aside.subnav ul li.on a { color: #000; } section article.recordBox .productList { float: right; width: 70%; margin: 0 5% 0 0; } section article.recordBox .productList .item { margin: 60px 0 0 0; } section article.recordBox .productList .photo, section article.recordBox .productList .tabDetail { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.recordBox .productList .photo { width: 46%; min-width: 400px; text-align: center; } section article.recordBox .productList .photo img { max-width: 100% } section article.recordBox .productList .tabDetail { width: 54%; } section article.recordBox .productList .tabDetail .type { font-size: 27px; font-weight: 100; margin: 0 0 5px 0; } section article.recordBox .productList .tabDetail .boxtr { width: 100%; display: table; } section article.recordBox .productList .tabDetail .boxtdl, section article.recordBox .productList .tabDetail .boxtdr { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; padding: 10px 0; font-size: 13px; border-bottom: 1px #c3c3c3 solid; } section article.recordBox .productList .tabDetail .boxtdl { width: 40%; } section article.recordBox .productList .tabDetail .boxtdr { width: 60%; } section article.recordBox .productList .tabDetail .boxtdl.type, section article.recordBox .productList .tabDetail .boxtdr.grade { vertical-align: bottom; } section article.recordBox .productList .tabDetail .boxtdl.type { font-size: 27px; line-height: 1.2em; font-weight: 200; width: 60%; } section article.recordBox .productList .tabDetail .boxtdl.type .txt { font-size: 13px; font-weight: 400; } section article.recordBox .productList .tabDetail .boxtdr.grade { text-align: right; font-size: 11px; color: #000; width: 40%; } section article.recordBox .productList .tabDetail .boxtdr span { display: inline-block; width: 6px; height: 6px; margin: 0 0 0 10px; } section article.recordBox .productList .tabDetail .boxtdr span.icon { float: right; width: 20px; height: 20px; margin: 0; } section article.recordBox .productList .tabDetail .boxtdr span.level1 { background: #c5d777; } section article.recordBox .productList .tabDetail .boxtdr span.level2 { background: #77bccd; } section article.recordBox .productList .tabDetail .boxtdr span.level3 { background: #ff8a20; } section article.recordBox .productList .tabDetail .boxtdr span.level4 { background: #e70d0d; } section article.recordBox .productList .btn { margin: 20px 0; } section article.recordBox .productList .btn input[type=submit] { color: #fff; width: 60%; text-align: center; border: 0; height: 42px; line-height: 38px; cursor: pointer; background: #000000; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; } section article.recordBox .productList .btn input.del[type=submit] { color: #515151; background: #d3d3d2; } section article.recordBox .productList .desc { position: relative; } section article.recordBox .productList .desc span { padding: 0 0 0 20px; color: #000; border-bottom: 1px #000 solid; line-height: 30px; background: url(../Content/images/icon/icon_tag.png?v20170216) no-repeat left center; } section article.recordBox .productList .desc span.text { position: absolute; top: 0; left: 85px; right: 0; padding: 0; border-bottom: 0; background: none; } section article.recordBox .productList .desc span.text input[type=text] { width: 100%; color: #000; border: 0; text-indent: 10px; line-height: 30px; } section article.orderConBox { padding: 0 0 80px 0; background: #f4f4f4; } section article.orderConBox:after { content: ""; display: table; clear: both; } section article.orderConBox .main { max-width: 1440px; } section article.orderConBox .productList, section article.orderConBox .orderList, section article.orderConBox .testReportList { float: right; width: 65%; margin: 0 5% 0 5%; padding: 30px 0 0 0; } section article.orderConBox .returnList { width: 90%; margin: 0 5% 0 5%; padding: 30px 0 0 0; } section article.orderConBox .tabDetail { margin: 0 0 20px 0; } section article.orderConBox .tabDetail .boxtr { position: relative; width: 100%; display: table; } section article.orderConBox .tabDetail .boxth, section article.orderConBox .tabDetail .boxtd { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; padding: 15px 0; border-bottom: 1px #d7d7d7 solid; min-height: 1em; font-size: 14px; } section article.orderConBox .productList .tabDetail .col1 { position: relative; width: 55%; } section article.orderConBox .productList .tabDetail .col2, section article.orderConBox .productList .tabDetail .col3, section article.orderConBox .productList .tabDetail .col4 { width: 15%; } section article.orderConBox .orderList .tabDetail .col1 { width: 18%; } section article.orderConBox .orderList .tabDetail .col2 { width: 20%; text-align: center; } section article.orderConBox .orderList .tabDetail .col3 { width: 34%; } section article.orderConBox .orderList .tabDetail .col4 { width: 28%; } section article.orderConBox .orderList .tabDetail .btn { margin: 0 0 10px 0; } section article.orderConBox .orderList .tabDetail .col1 b { font-size: 19px; } section article.orderConBox .orderList .tabDetail span.transit { color: #70b5f1; } section article.orderConBox .orderList .tabDetail span.price { font-size: 19px; } section article.orderConBox .orderList .tabDetail .btn a { margin: 2px; display: inline-block; padding: 2px 10px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; font-size: 14px; } section article.orderConBox .orderList .tabDetail .btn span { margin: 2px; display: block; padding: 2px 0; text-align: left; color: #999; font-size: 13px; } @media only screen and (max-width : 768px) { section article.orderConBox .orderList .tabDetail .btn span { margin: 2px 0; } } section article.orderConBox .testReportList .tabDetail .col1 { width: 20%; } section article.orderConBox .testReportList .tabDetail .col2 { width: 56%; } section article.orderConBox .testReportList .tabDetail .col3 { width: 24%; text-align: center; } section article.orderConBox .testReportList .tabDetail b { font-size: 18px; } section article.orderConBox .testReportList .tabDetail span.transit { color: #70b5f1; } section article.orderConBox .testReportList .tabDetail .btn a { display: inline-block; padding: 2px 10px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.orderConBox .tabDetail .boxtd .label, section article.orderConBox .tabDetail .boxtd .photo, section article.orderConBox .tabDetail .boxtd .title, section article.orderConBox .tabDetail .total .text span.hd, section article.orderConBox .tabDetail .total .text span.bd { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.orderConBox .tabDetail .boxtd .title { width: 100%; } section article.orderConBox .tabDetail .boxtd span.hd, section article.orderConBox .tabDetail .boxtd span.bd { display: block; font-size: 15px; color: #000; } section article.orderConBox .tabDetail .boxtd span.bd { font-size: 20px; } section article.orderConBox .tabDetail .boxtd span.mbd { display: none; } section article.orderConBox .tabDetail .boxtd span.tag { display: block; } section article.orderConBox .tabDetail .boxtd span.tag span { display: inline-block; padding: 1px 6px; color: #fff; /* border: 1px #888 solid; */ background-color: #548bef; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 0 5px 2px 0; } section article.orderConBox .tabDetail .boxtd a.cancelReservation { color: #548bef; text-decoration: underline; } section article.orderConBox .tabDetail .boxtd span.refunds { color: #70b5f1; padding: 0 0 0 10px; } section article.orderConBox .tabDetail .boxtd .photo { width: 100px; padding-right: 10px } section article.orderConBox .tabDetail .boxtd .photo img { max-width: 100px; } section article.orderConBox .tabDetail .boxtd .iconAdd { /* position: absolute; top: 0; right: 5%; bottom: 0; margin: auto;*/ display: table-cell; vertical-align: middle; padding: 0 20px 0 10px; height: 26px; } section article.orderConBox .tabDetail .boxtd .iconAdd img { max-width: 56px; } section article.orderConBox .tabDetail .total { position: relative; display: block; padding: 15px 0; border-bottom: 1px #d7d7d7 solid; } section article.orderConBox .tabDetail .total:after { content: ""; display: table; clear: both; } section article.orderConBox .tabDetail .total .totalbox { float: right; } section article.orderConBox .tabDetail .total .text { text-align: right; font-size: 16px; padding: 2px 0; } section article.orderConBox .tabDetail .total .text span.hd { width: 80px; text-align: left; } section article.orderConBox .tabDetail .total .text span.bd { width: 120px; text-align: right; } section article.orderConBox .tabDetail .total .text .red { color: #f32b2b; } section article.orderConBox .tabDetail .total .desc { position: absolute; bottom: 10px; left: 10px; font-size: 12px; } section article.orderConBox .otherOrder { display: flex; align-items: stretch; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; margin: 0 0 40px 0; } section article.orderConBox .otherOrder .payerBox { width: 48%; background: #fff; } section article.orderConBox .otherOrder .installBox { width: 48%; background: #fff; } section article.orderConBox .otherOrder .otherBox { position: relative; padding: 30px 60px 80px 60px; } section article.orderConBox .otherOrder .otherBox h4 { font-size: 18px; font-weight: 400; line-height: 40px; margin: 0 0 10px 0; border-bottom: 1px #d7d7d7 solid; } section article.orderConBox .otherOrder .otherBox p { padding: 5px 0; font-size: 14px; } section article.orderConBox .otherOrder .otherBox p span.hd, section article.orderConBox .otherOrder .otherBox p span.bd { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.orderConBox .otherOrder .otherBox p span.hd { width: 100px; } section article.orderConBox .otherOrder .otherBox p span.bd b { color: #4774c9; font-weight: normal; } section article.orderConBox .otherOrder .otherBox p span.bd span { display: inline-block; } section article.orderConBox .otherOrder .otherBox p.desc { font-size: 12px; } section article.orderConBox .otherOrder .otherBox .time+p.desc { border-top: 1px #d7d7d7 solid; } section article.orderConBox .otherOrder .otherBox .time { margin: 10px 0; padding: 20px 10px; text-align: center; font-size: 18px; color: #fff; background: #f32b2b; border-right: 2px #fff solid; border-bottom: 2px #fff solid; -webkit-box-shadow: 3px 3px #f32b2b; -moz-box-shadow: 3px 3px #f32b2b; box-shadow: 3px 3px #f32b2b; } section article.orderConBox .otherOrder .otherBox .dispatch { margin: 10px 0; padding: 20px 10px; text-align: center; font-size: 16px; color: #fff; background: #4774c9; border-right: 2px #fff solid; border-bottom: 2px #fff solid; -webkit-box-shadow: 3px 3px #4774c9; -moz-box-shadow: 3px 3px #4774c9; box-shadow: 3px 3px #4774c9; } section article.orderConBox .otherOrder .otherBox .dispatch span { display: block; } section article.orderConBox .otherOrder .otherBox .dispatch span.desc { font-size: 12px; margin: 5px 0 0 0; } section article.orderConBox .otherOrder .otherBox .dispatch .btn { margin: 10px 0 0 0; padding: 8px 40px; border: 0; color: #fff; font-size: 14px; font-weight: 400; background: #000; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; cursor: pointer; } section article.orderConBox .returnList .notebox, section article.orderConBox .productList .notebox { margin: 0 0 20px 0; } section article.orderConBox .otherOrder .otherBox .notebox { margin: 20px 0 0 0; } section article.orderConBox .returnList .notebox h4, section article.orderConBox .productList .notebox h4 { font-size: 13px; margin: 0 0 10px 0; } section article.orderConBox .returnList .notebox p, section article.orderConBox .productList .notebox p { font-size: 12px; font-weight: 100; } section article.orderConBox .returnList .notebox p span, section article.orderConBox .productList .notebox p span { display: block; margin: 0 0 0 1em; } section article.orderConBox .returnList .descBox, section article.orderConBox .productList .descBox { position: relative; padding: 30px 0; margin: 40px 0 0 0; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } section article.orderConBox .returnList .descBox .desc .icon, section article.orderConBox .returnList .descBox .desc .text, section article.orderConBox .productList .descBox .desc .icon, section article.orderConBox .productList .descBox .desc .text { display: table-cell; *display: inline; zoom: 1; vertical-align: bottom; } section article.orderConBox .returnList .descBox .desc .icon, section article.orderConBox .productList .descBox .desc .icon { padding: 0 10px 0 0; } section article.orderConBox .returnList .descBox .desc .text, section article.orderConBox .productList .descBox .desc .text { font-size: 11px; line-height: 18px; color: #3f3f3f; font-weight: 200; } section article.orderConBox .returnList .descBox .iconBox, section article.orderConBox .productList .descBox .iconBox { position: absolute; top: 40px; right: 0; } section article.orderConBox .returnList .descBox .iconBox span, section article.orderConBox .productList .descBox .iconBox span { margin: 0 0 0 20px; } section article.personalBox { background: #f4f4f4; } section article.personalBox .memberPersonal { float: right; width: 65%; margin: 0 5% 0 5%; padding: 30px 0 0 0; } section article.personalBox .memberPersonal fieldset { border-bottom: 1px #e7e6e6 solid; padding: 20px 0; } section article.personalBox .memberPersonal fieldset .box { padding: 15px 0; width: 100%; } section article.personalBox .memberPersonal fieldset .box:after { content: ""; display: table; clear: both; } section article.personalBox .memberPersonal fieldset .box label, section article.personalBox .memberPersonal fieldset .box .con { position: relative; float: left; } section article.personalBox .memberPersonal fieldset .box label { width: 16%; font-size: 18px; color: #483e34; padding: 24px 0; } section article.personalBox .memberPersonal fieldset .box label.max { padding: 16px 0 16px 0; } section article.personalBox .memberPersonal fieldset .box label span { position: relative; top: -1px; display: block; font-size: 13px; padding: 0 0 0 4px; } section article.personalBox .memberPersonal fieldset .box .con label { width: auto; float: none; font-size: inherit; color: inherit; padding: 0; cursor: pointer; } section article.personalBox .memberPersonal fieldset .box .con { width: 84%; min-height: 66px; } section article.personalBox .memberPersonal fieldset .box .con a { text-decoration: underline; } section article.personalBox .memberPersonal fieldset .box .con a.selectboxit-option-anchor { text-decoration: none; } section article.personalBox .memberPersonal fieldset .box .con span.blank { display: inline-block; width: 2%; } section article.personalBox .memberPersonal fieldset .box .con .TelArea, section article.personalBox .memberPersonal fieldset .box .con .TelBox, section article.personalBox .memberPersonal fieldset .box .con .TelExtension, section article.personalBox .memberPersonal fieldset .box .con .AddLeft, section article.personalBox .memberPersonal fieldset .box .con .AddRight { position: absolute; top: 0; } section article.personalBox .memberPersonal fieldset .box .con .TelArea { left: 0; right: 80%; } section article.personalBox .memberPersonal fieldset .box .con .TelBox { left: 22%; right: 22%; } section article.personalBox .memberPersonal fieldset .box .con .TelExtension { left: 80%; right: 0; } section article.personalBox .memberPersonal fieldset .box .con .areabox, section article.personalBox .memberPersonal fieldset .box .con .birbox, section article.personalBox .memberPersonal fieldset .box .con .twzipcode { position: relative; min-height: 66px; } section article.personalBox .memberPersonal fieldset .box .con .twzipcode, section article.personalBox .memberPersonal fieldset .box .con .areabox { margin: 0 0 20px 0; } section article.personalBox .memberPersonal fieldset .box .con .AddLeft { left: 0; right: 51%; } section article.personalBox .memberPersonal fieldset .box .con .AddRight { left: 51%; right: 0%; } section article.personalBox .memberPersonal fieldset .box .con .birbox select { position: relative; width: 90%; margin: 0 0.5% 0 0; } section article.personalBox .memberPersonal fieldset hr { padding: 0; margin: 30px 0; height: 1px; border: 0; border-bottom: 1px #e7e6e6 solid; } section article.personalBox .memberPersonal fieldset .btnBox { margin: 0 0 20px 0; text-align: center; } section article.personalBox .memberPersonal fieldset .btn:after, section article.personalBox .memberPersonal fieldset .btnBox:after { content: ""; display: table; clear: both; } section article.personalBox .memberPersonal fieldset .btnBox .btnBoxLeft { float: left; width: 49%; } section article.personalBox .memberPersonal fieldset .btnBox .btnBoxRight { float: right; width: 49%; } section article.personalBox .memberPersonal fieldset .btnBox .btnBoxCenter { margin: 0 auto; max-width: 500px; width: 100%; } section article.personalBox .memberPersonal fieldset .text { line-height: 26px; } section article.personalBox .memberPersonal fieldset span.txt { line-height: 67px; } section article.personalBox .memberPersonal fieldset span.error { position: relative; top: -8px; padding: 0 0 0 20px; margin: 0 0 0 16%; font-size: 14px; color: #d92e00; background: url(../Content/images/icon/icon_error.png?v20170216) no-repeat left top; } section article.personalBox .userSelf { max-width: 770px; margin: 0 auto; padding: 20px 60px; border-top: 1px #ccc solid; background-color: #fff; } section article.personalBox .userSelf fieldset { padding: 20px 0; } section article.personalBox .userSelf fieldset .box { padding: 15px 0; display: table; width: 100%; } section article.personalBox .userSelf fieldset .box label, section article.personalBox .userSelf fieldset .box .con, section article.personalBox .userSelf fieldset .box .btn { display: table-cell; } section article.personalBox .userSelf fieldset .box label { width: 24%; padding: 0 5px; } section article.personalBox .userSelf fieldset .box .con { padding: 0 10px 0 0; } section article.personalBox .userSelf fieldset .box .btn { width: 120px; } section article.personalBox .resultBox { position: relative; line-height: 56px; text-align: center; font-size: 18px; font-weight: 200; color: #fff; background-color: #80bef5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: none; } section article.personalBox .resultBox span { position: absolute; top: 0; right: 20px; color: #c4dff7; } section article.personalBox .memberSurvey { width: 80%; max-width: 770px; margin: 0 auto; padding: 60px 0 0 0; } section article.personalBox .userSelf+.memberSurvey { padding: 60px 0px; width: auto; max-width: 770px; } section article.personalBox .memberSurvey .title { font-size: 22px; font-weight: 200; line-height: 30px; } section article.personalBox .memberSurvey .title span { display: block; font-size: 15px; line-height: 20px; color: #000; } section article.personalBox .memberSurvey fieldset { border-bottom: 1px #e7e6e6 solid; padding: 20px 0; } section article.personalBox .memberSurvey fieldset .box { padding: 15px 0; width: 100%; } section article.personalBox .memberSurvey fieldset .box:after { content: ""; display: table; clear: both; } section article.personalBox .memberSurvey fieldset .box label, section article.personalBox .memberSurvey fieldset .box .con { position: relative; float: left; } section article.personalBox .memberSurvey fieldset .box.max label, section article.personalBox .memberSurvey fieldset .box.max .con { width: 100%; } section article.personalBox .memberSurvey fieldset .box label { width: 38%; margin: 0 2% 0 0; font-size: 15px; color: #483e34; line-height: 24px; } section article.personalBox .memberSurvey fieldset .box.max label { margin: 0 0 2% 0; } section article.personalBox .memberSurvey fieldset .box .con label { width: auto; float: none; font-size: inherit; color: inherit; padding: 0; cursor: pointer; } section article.personalBox .memberSurvey fieldset .box .con { width: 60%; } section article.personalBox .memberSurvey fieldset .box .con a { text-decoration: underline; } section article.personalBox .memberSurvey fieldset .box .con a.selectboxit-option-anchor { text-decoration: none; } section article.personalBox .memberSurvey fieldset .box .con span.blank { display: inline; width: 2%; } section article.personalBox .memberSurvey fieldset span.txt { line-height: 24px; } section article.personalBox .memberSurvey fieldset hr { padding: 0; margin: 30px 0; height: 1px; border: 0; border-bottom: 1px #e7e6e6 solid; } section article.personalBox .memberSurvey fieldset .btnBox { margin: 0 0 20px 0; text-align: center; } section article.personalBox .memberSurvey fieldset .btn:after, section article.personalBox .memberSurvey fieldset .btnBox:after { content: ""; display: table; clear: both; } section article.personalBox .memberSurvey fieldset .btnBox .btnBoxLeft { float: left; width: 49%; } section article.personalBox .memberSurvey fieldset .btnBox .btnBoxRight { float: right; width: 49%; } section article.personalBox .memberSurvey fieldset .btnBox .btnBoxCenter { margin: 0 auto; max-width: 500px; width: 100%; } .memberSurvey textarea { line-height: normal; text-indent: initial; } section article.signupBox { background: #fff; } section article.signupBox:after { content: ""; display: table; clear: both; } section article.signupBox .main { max-width: 480px; width: 90%; margin: 0 auto; } section article.signupBox .loginBox { width: 100%; margin: 20px auto 0 auto; text-align: center; } section article.signupBox .loginBox .title { font-size: 24px; line-height: 46px; } section article.signupBox .community a { display: block; margin: 10px 0; color: #fff; line-height: 52px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } section article.signupBox .community a img { width: 24px; } section article.signupBox .community a.facebook { background: #3b5997; } section article.signupBox .community a.google { background: #4485f8; } section article.signupBox .loginBox fieldset { margin: 20px 0 40px 0; text-align: left; } section article.signupBox .loginBox fieldset input[type=text], section article.signupBox .loginBox fieldset input[type=email], section article.signupBox .loginBox fieldset input[type=password] { width: 100%; text-indent: 45px; } section article.signupBox .loginBox fieldset input.mail { border-bottom: 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background: #fff url(../Content/images/icon/icon_memberMail.gif?v20170216) no-repeat 10px center; } section article.signupBox .loginBox fieldset input.password { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; background: #fff url(../Content/images/icon/icon_memberPassword.gif?v20170216) no-repeat 10px center; } section article.signupBox fieldset input[type=submit] { width: 100%; max-width: none; margin: 10px auto; color: #fff; font-size: 15px; font-weight: bold; line-height: 52px; border: 0; cursor: pointer; background: #000000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } section article.signupBox .joinBox { width: 100%; margin: 0 auto 40px auto; text-align: center; } section article.signupBox .joinBox .title { padding: 20px 0; margin: 0 0 20px 0; font-size: 29px; border-bottom: 1px #b9b9b9 solid; } section article.signupBox .joinBox .text { font-size: 12px; } section article.signupBox .joinBox fieldset input[type=submit] { max-width: none; background: #b9b9b9; } section article.shoppingBox { padding: 0 0 80px 0; background: #f4f4f4; } section article.shoppingBox:after { content: ""; display: table; clear: both; } section article.shoppingBox .main { max-width: 1440px; } section article.shoppingBox .productList { margin: 0 5% 0 5%; padding: 30px 0 0 0; } section article.shoppingBox .tabDetail { margin: 0 0 20px 0; } section article.shoppingBox .tabDetail .boxwrap { border-bottom: 1px #d7d7d7 solid; } section article.shoppingBox .tabDetail .boxtr { width: 100%; display: table; } section article.shoppingBox .tabDetail .boxth, section article.shoppingBox .tabDetail .boxtd { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; padding: 15px 0; } section article.shoppingBox .tabDetail .boxth .icon img, section article.shoppingBox .tabDetail .boxtd .icon img { max-width: 42px; } section article.shoppingBox .tabDetail .boxth .iconAdd, section article.shoppingBox .tabDetail .boxtd .iconAdd { /* position: absolute; top: 0; right: 5%; bottom: 0; margin: auto; */ display: table-cell; vertical-align: middle; padding: 0 20px 0 10px; height: 26px; } section article.shoppingBox .tabDetail .boxth .iconAdd img, section article.shoppingBox .tabDetail .boxtd .iconAdd img { max-width: 56px; } section .tabShoppingBox { background: #f4f4f4; } section .tabShoppingBox>ul { padding: 0 0 0 40px; } section .tabShoppingBox>ul li { display: inline-block; margin: 0 -2px; background: #e4e4e4; } section .tabShoppingBox>ul li.ui-tabs-active { background: #fff; } section .tabShoppingBox>ul li a { display: block; padding: 20px 40px; } section article.shoppingBox .productList .tabDetail .col1 { width: 55%; position: relative; } section article.shoppingBox .productList .tabDetail .col2 { width: 10%; text-align: center; } section article.shoppingBox .productList .tabDetail .col3 { width: 15%; text-align: center; } section article.orderConBox .returnList .tabDetail .selectboxit-container, section article.shoppingBox .productList .tabDetail .col3 .selectboxit-container { width: 80%; } section article.shoppingBox .productList .tabDetail .col4 { width: 15%; text-align: right; font-weight: bold; font-size: 16px; } section article.shoppingBox .productList .tabDetail .col4 del { font-weight: normal; font-size: 13px; } section article.shoppingBox .productList .tabDetail .col4 em { font-weight: normal; font-style: normal; } section article.shoppingBox .productList .tabDetail .col4 span { display: inline-block; } section article.shoppingBox .productList .tabDetail .col5 { width: 5%; text-align: center; } section article.shoppingBox .productList .tabDetail .btn { margin: 20px 0 0 0; text-align: right; } section article.shoppingBox .productList .tabDetail .btn input[type=submit] { color: #fff; width: 60%; max-width: 200px; text-align: center; border: 0; height: 42px; line-height: 38px; cursor: pointer; background: #000000; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; } section article.shoppingBox .productList .tabDetail .col1 b { font-size: 19px; } section article.shoppingBox .productList .tabDetail span.transit { color: #70b5f1; } section article.shoppingBox .productList .tabDetail span.price { font-size: 19px; } section article.shoppingBox .productList .tabDetail .btn a { margin: 2px; display: inline-block; padding: 2px 10px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.shoppingBox .productList .tabDetail .btn a.againBuy { margin: 2px 12px 2px 2px; display: inline-block; padding: 4px 0; text-align: center; color: #0090be; border-bottom: 1px #0090be solid; background: transparent; -webkit-border-radius: 0; border-radius: 0; } section article.shoppingBox .tabDetail .boxtd .photo, section article.shoppingBox .tabDetail .boxtd .title, section article.shoppingBox .tabDetail .total .text span.hd, section article.shoppingBox .tabDetail .total .text span.bd { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.shoppingBox .tabDetail .boxtd .title { width: 100%; } section article.shoppingBox .tabDetail .boxtd .photo { width: 100px; } section article.shoppingBox .tabDetail .boxtd .photo img { max-width: 100px; } section article.shoppingBox .tabDetail .boxtd span.hd, section article.shoppingBox .tabDetail .boxtd span.bd { display: block; font-size: 15px; color: #000; } section article.shoppingBox .tabDetail .boxtd span.bd { font-size: 20px; } section article.shoppingBox .tabDetail .boxtd span.mbd { display: none; } section article.shoppingBox .tabDetail .total { position: relative; display: block; padding: 15px 0; border-bottom: 1px #d7d7d7 solid; } section article.shoppingBox .tabDetail .total:after { content: ""; display: table; clear: both; } section article.shoppingBox .tabDetail .total .totalbox { float: right; } section article.shoppingBox .tabDetail .total .text { text-align: right; font-size: 16px; font-weight: bold; padding: 5px 0; } section article.shoppingBox .tabDetail .total .text span.hd { width: 90px; text-align: left; } section article.shoppingBox .tabDetail .total .text span.bd { width: 120px; text-align: right; } section article.shoppingBox .tabDetail .total .text.freight span.hd { width: 150px; } section article.shoppingBox .tabDetail .total .text.freight span.bd { width: 60px; } section article.shoppingBox .tabDetail .total .text.freight span.hd b { color: #f32b2b; font-weight: normal; } section article.shoppingBox .tabDetail .total .text .red { color: #f32b2b; } section article.shoppingBox .tabDetail .total .desc { position: absolute; bottom: 10px; left: 10px; font-size: 12px; } section article.shoppingBox .tabDetail .total .coupon { position: absolute; top: 10px; left: 10px; /* width: 50%; */ width: 600px; font-size: 12px; } section article.shoppingBox .tabDetail .total .coupon .fiveBox { display: none; } section article.shoppingBox .tabDetail .total .coupon .btnFive { font-size: 15px; color: #00a7e3; } section article.shoppingBox .tabDetail .total .coupon .btnFive a { display: inline-block; line-height: 24px; color: #0090be; border-bottom: 1px #0090be solid; } section article.shoppingBox .tabDetail .total .coupon.open2 { top: 35px; } section article.shoppingBox .tabDetail .total .coupon.open2 .fiveBox { display: block; } section article.shoppingBox .tabDetail .total .coupon.open2 .btnFive { display: none; } section article.shoppingBox .tabDetail .total .coupon.open2 .btnCoupon { display: none; } section article.shoppingBox .tabDetail .total .coupon .couponBox { display: none; } section article.shoppingBox .tabDetail .total .coupon .btnCoupon { color: #0090be; } section article.shoppingBox .tabDetail .total .coupon .btnCoupon a { display: inline-block; line-height: 24px; color: #0090be; border-bottom: 1px #0090be solid; } section article.shoppingBox .tabDetail .total .coupon.open { top: 35px; } section article.shoppingBox .tabDetail .total .coupon.open .couponBox { display: block; } section article.shoppingBox .tabDetail .total .coupon.open .btnCoupon { display: none; } section article.shoppingBox .tabDetail .total .coupon.open .btnFive { display: none; } section article.shoppingBox .tabDetail .total .coupon .box { position: relative; line-height: 30px; } section article.shoppingBox .tabDetail .total .coupon .box .couponTxt, section article.shoppingBox .tabDetail .total .coupon .box .couponTxt2, section article.shoppingBox .tabDetail .total .coupon .box .couponBox, section article.shoppingBox .tabDetail .total .coupon .box .fiveBox, section article.shoppingBox .tabDetail .total .coupon .box .couponBtn, section article.shoppingBox .tabDetail .total .coupon .box .couponClose, section article.shoppingBox .tabDetail .total .coupon .box .couponClose2 { position: absolute; top: 0; } section article.shoppingBox .tabDetail .total .coupon .box .fiveBox { font-size: 15px; color: #f32b2b; } section article.shoppingBox .tabDetail .total .coupon .box .fiveBox label { font-weight: bold; } section article.shoppingBox .tabDetail .total .coupon .box .couponTxt { left: 0; right: 75%; width: 100px; } section article.shoppingBox .tabDetail .total .coupon .box .couponTxt2 { left: 0; right: 75%; width: 180px; font-size: 15px; } section article.shoppingBox .tabDetail .total .coupon .box .couponBox { left: 100px; right: 42%; /*width: 51%;*/ } section article.shoppingBox .tabDetail .total .coupon .box .fiveBox { left: 180px; right: 42%; /*width: 51%;*/ } section article.shoppingBox .tabDetail .total .coupon .box .couponBtn { left: 60%; right: 100px; /*width: 20%;*/ } section article.shoppingBox .tabDetail .total .coupon .box .couponClose { right: 0%; width: 90px; } section article.shoppingBox .tabDetail .total .coupon .box .couponClose a { display: block; } section article.shoppingBox .tabDetail .total .coupon .box .couponClose a img { width: 30px; } section article.shoppingBox .tabDetail .total .coupon .box .couponClose2 { right: 20%; width: 90px; } section article.shoppingBox .tabDetail .total .coupon .box .couponClose2 a { display: block; } section article.shoppingBox .tabDetail .total .coupon .box .couponClose2 a img { width: 30px; } section article.shoppingBox .tabDetail .total .coupon fieldset input[type="text"] { height: 30px; line-height: 30px; } section article.shoppingBox .tabDetail .total .coupon fieldset input[type="button"] { line-height: 30px; } section article.shoppingBox .tabOptional { position: relative; padding-left: 120px; top: -1px; } section article.shoppingBox .tabOptional .boxth { border-bottom: 1px #d7d7d7 dotted; } section article.shoppingBox .tabOptional .boxtr { padding-left: 140px; /* width: calc(100% - 140px); */ width: 100%; } section article.shoppingBox .tabOptional .free { position: absolute; bottom: 12px; right: 5px; font-weight: bold; font-size: 16px; } section article.shoppingBox .tabOptional .boxtd { padding: 10px 0; } section article.shoppingBox .tabOptional .tag+.boxtr { border-top: 1px #d7d7d7 solid; } section article.shoppingBox .tabOptional .boxtr .boxtd.col1 { display: none; } section article.shoppingBox .tabDetail .tabOptional .col1 { width: 4%; text-align: center; } section article.shoppingBox .tabDetail .tabOptional .col2 { width: 10%; } section article.shoppingBox .tabDetail .tabOptional .col3 { width: 34%; text-align: left; } section article.shoppingBox .tabDetail .tabOptional .col4 { width: 28%; text-align: right; color: #f32b2b; } section article.orderConBox .selectboxit-btn, section article.shoppingBox .selectboxit-btn { background: #d3d3d2 url(../Content/images/icon/icon_nextArrow.png?v20170216) no-repeat right; border: 0; height: 42px; line-height: 42px; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; } section article.orderConBox .selectboxit-container span, section article.shoppingBox .selectboxit-container span { height: 42px; line-height: 42px; text-align: center; } section article.shoppingBox .selectboxit-default-arrow { width: 0; height: 0; border: 0; } section article.orderConBox .selectboxit-text, section article.shoppingBox .selectboxit-text { text-indent: -20px; overflow: hidden; text-overflow: ellipsis; float: none; } section article.orderConBox .returnList .selectboxit-text { min-width: 60px; } section article.orderConBox .returnList .tabDetail .col5 { width: 5%; text-align: center; } section article.orderConBox .returnList .tabDetail .col15 { width: 15%; } section article.orderConBox .returnList .tabDetail .col8 { width: 8%; text-align: center; } section article.orderConBox .returnList .tabDetail .col10 { width: 10%; text-align: center; } section article.orderConBox .returnList .tabDetail .col12 { width: 12%; text-align: center; } section article.orderConBox .returnList .tabDetail .col14 { width: 14%; text-align: center; } section article.orderConBox .returnList .tabDetail .col20 { width: 20%; } section article.orderConBox .returnList .tabDetail .center { text-align: center; } section article.orderConBox .returnList .tabDetail input[type="text"] { height: 30px; line-height: 30px; } section article.orderConBox .returnList .tabDetail input#other1, section article.orderConBox .returnList .tabDetail input#other2 { display: block; } section article.shoppingBox .tabOptional .tag { position: absolute; width: 100px; text-align: center; line-height: 30px; font-size: 13px; color: #fff; background: #000; } section article.shoppingBox .tabDetail .boxtd .input-group { display: inline-block; padding: 5px; background: #d2d2d0; -webkit-border-radius: 15px; border-radius: 15px; } section article.productConBox .detailBox .btn .diyful { position: absolute; top: 0; left: 38%; right: 42%; border-left: 1px #f4f4f4 solid; } section article.shoppingBox .tabDetail .boxtd .input-group>span.input-group-btn, section article.shoppingBox .tabDetail .boxtd .input-group>input { display: inline-block; width: 20px; height: 20px; border: 0; } section article.shoppingBox .tabDetail .boxtd .input-group>input { background-color: transparent; padding: 0 2px; text-align: center; } section article.shoppingBox .tabDetail .boxtd .input-group>span.input-group-btn button.btn { width: 20px; height: 20px; border: 0; margin: 0; padding: 0; color: #aca1a1; text-align: center; -webkit-border-radius: 10px; border-radius: 10px; background: #fff; cursor: pointer; } section article.shoppingBox .otherOrder { margin: 0 0 40px 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } /* paymentBox */ section article.shoppingBox .otherOrder .couponRescue { width: 100%; margin: 0 0 40px 0; } section article.shoppingBox .otherOrder .couponRescue .otherBox { width: 100%; padding: 30px 60px 30px 60px; } section article.shoppingBox .otherOrder .couponRescue .title { font-size: 16px; font-weight: 400; line-height: 1.2em; color: #23b2f4; } section article.shoppingBox .otherOrder .couponRescue .otherBox h4 { font-size: 18px; font-weight: 400; line-height: 1.4em; padding: 5px 0; margin: 0 0 20px 0; border-bottom: 1px #d7d7d7 solid; } section article.shoppingBox .otherOrder .couponRescue h4 a { font-size: 15px; font-weight: normal; color: #349ccc; text-decoration: underline; } section article.shoppingBox .otherOrder .couponRescue .couponRescue__box label { font-size: 16px; font-weight: 400; color: #000; cursor: pointer; } section article.shoppingBox .otherOrder .couponRescue .couponRescue__box label input[type="checkbox"] { position: relative; top: -2px; display: inline-block; vertical-align: middle; transform: scale(1.4); margin: 0 5px 0 0; padding: 0 5px 0 0; } section article.shoppingBox .otherOrder .couponRescue .couponRescue__box label span { margin: 0 0 0 5px; } section article.shoppingBox .otherOrder .couponRescue .couponRescue__box .desc { margin: 5px 0 0 20px; font-size: 13px; color: #949090; } /* paymentBox */ section article.shoppingBox .otherOrder .paymentBox { width: 100%; margin: 0 0 40px 0; } section article.shoppingBox .otherOrder .paymentBox .otherBox { width: 100%; padding: 30px 60px 30px 60px; } section article.shoppingBox .otherOrder .invoiceBox { width: 48%; background: #fff; } section article.shoppingBox .otherOrder .installBox { width: 48%; background: #fff; } section article.shoppingBox .otherOrder .otherBox { position: relative; padding: 30px 60px 80px 60px; } section article.shoppingBox .otherOrder .otherBox h4 { font-size: 18px; font-weight: 400; line-height: 40px; margin: 0 0 10px 0; border-bottom: 1px #d7d7d7 solid; } section article.shoppingBox .otherOrder .otherBox p { padding: 5px 0; font-size: 14px; } section article.shoppingBox .otherOrder .otherBox p span.hd, section article.shoppingBox .otherOrder .otherBox p span.bd { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.shoppingBox .otherOrder .otherBox p span.hd { width: 100px; } section article.shoppingBox .otherOrder .otherBox p.desc { font-size: 12px; } section article.shoppingBox .otherOrder .otherBox .time+p.desc { border-top: 1px #d7d7d7 solid; } section article.shoppingBox .otherOrder .otherBox .time { margin: 10px 0; padding: 20px 10px; text-align: center; font-size: 18px; color: #fff; background: #f32b2b; border-right: 2px #fff solid; border-bottom: 2px #fff solid; -webkit-box-shadow: 3px 3px #f32b2b; -moz-box-shadow: 3px 3px #f32b2b; box-shadow: 3px 3px #f32b2b; } section article.shoppingBox .otherOrder .otherBox ol { margin: 0 0 0 20px; list-style-type: disc; } section article.shoppingBox .otherOrder .otherBox ol li { padding: 4px 0; } section fieldset.invoice .box { margin: 10px 0; } section article.orderConBox .otherOrder fieldset, section article.shoppingBox .otherOrder fieldset { padding: 10px 0; } section article.shoppingBox .otherOrder fieldset.invoice { margin: 0 0 60px 0; } section article.shoppingBox .otherOrder .otherBox.left fieldset.invoice { margin: 0; } section article.orderConBox .otherOrder fieldset.invoice input[type="text"], section article.orderConBox .otherOrder fieldset.invoice input[type="email"], section article.orderConBox .otherOrder fieldset.invoice input[type="password"], section article.orderConBox .otherOrder fieldset.invoice input[type="number"] { height: 42px; line-height: 42px; } section article.shoppingBox .otherOrder fieldset .box { position: relative; padding: 10px 0; width: 100%; } section article.orderConBox .otherOrder fieldset .box { position: relative; padding: 10px 0; width: 100%; height: 42px; } section article.orderConBox .otherOrder fieldset .box.w35 { display: inline-block; vertical-align: middle; width: 35%; margin: 0 4% 0 0; } section article.orderConBox .otherOrder fieldset .box.w60 { display: inline-block; vertical-align: middle; width: 60%; margin: 0 -4px 0 0; } section article.orderConBox .otherOrder fieldset .box:after, section article.shoppingBox .otherOrder fieldset .box:after { content: ""; display: table; clear: both; } section article.shoppingBox .otherOrder fieldset .box label, section article.shoppingBox .otherOrder fieldset .box .con { position: relative; float: left; } section article.shoppingBox .otherOrder fieldset .box .con .desc { padding: 5px 0 0 0; color: #666; } section article.shoppingBox .otherOrder fieldset .box .no-float { float: none !important; } section article.shoppingBox .otherOrder fieldset .box label { width: 22%; font-size: 15px; color: #483e34; padding: 6px 0; } section article.orderConBox .otherOrder fieldset .box label { position: absolute; left: 0; width: 100px; font-size: 15px; color: #483e34; padding: 6px 0; line-height: 30px; } section article.orderConBox .otherOrder fieldset input[type="text"] { height: 30px; line-height: 30px; } section article.shoppingBox .otherOrder fieldset .box .con label { width: auto; float: none; font-size: inherit; color: inherit; padding: 0; cursor: pointer; } section article.orderConBox .otherOrder fieldset .box .con { position: absolute; top: 12px; left: 100px; right: 0; } section article.shoppingBox .otherOrder fieldset .box .con { width: 78%; min-height: 32px; } section article.shoppingBox .otherOrder fieldset .box .con a { text-decoration: underline; } section article.shoppingBox .otherOrder fieldset .box .con a.selectboxit-option-anchor { text-decoration: none; } section article.orderConBox .otherOrder fieldset .box .con span.blank, section article.shoppingBox .otherOrder fieldset .box .con span.blank { display: inline-block; width: 2%; } /** * * indent 20180817 * **/ section article.shoppingBox .otherOrder fieldset .box .title { font-size: 15px; color: #483e34; padding: 6px 0; } section article.shoppingBox .otherOrder fieldset .box .indent { padding: 20px; background-color: #f2f2f2; } section article.shoppingBox .otherOrder fieldset .box .indent hr { border: 0; height: 1px; margin: 10px 0; background-color: #ccc; } section article.shoppingBox .otherOrder fieldset .box .indent:after { content: ""; display: table; clear: both; } section article.shoppingBox .otherOrder fieldset .box .indent .con { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } section article.shoppingBox .otherOrder fieldset .box .indent .desc { padding: 5px 0 0 2px; font-size: 12px; color: #999; } section article.shoppingBox .otherOrder fieldset .box .indent2 { margin: 5px 0 0 25px; } section article.shoppingBox .otherOrder fieldset .box .indent b { color: #c5062f; font-weight: normal; } section article.shoppingBox .otherOrder fieldset .indent2 input[type="text"] { margin: 0 0 5px 0; } section article.shoppingBox .otherOrder fieldset .box .indent .address { font-size: 12px; } section article.shoppingBox .otherOrder fieldset .box .indent .addressBd { margin: 10px 0 0 0; } section article.shoppingBox .otherOrder fieldset .box .indent .address .desc { padding: 0; } section article.shoppingBox .otherOrder fieldset .box .indent .address .addressCon.edit { display: none; } section article.orderConBox .otherOrder .indent .address .btnFt, section article.shoppingBox .otherOrder .indent .address .btnFt { margin: 0; text-align: left; } section article.orderConBox .otherOrder .indent .address .btnFt input[type="submit"], section article.orderConBox .otherOrder .indent .address .btnFt input[type="button"], section article.shoppingBox .otherOrder .indent .address .btnFt input[type="submit"], section article.shoppingBox .otherOrder .indent .address .btnFt input[type="button"] { color: #fff; width: auto; max-width: inherit; max-width: initial; padding: 0 20px; text-align: center; border: 0; height: 32px; line-height: 30px; cursor: pointer; background: #aaa; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 12px; font-weight: normal; } section article.shoppingBox .otherOrder .indent span.error { display: block; margin: 10px 0 0 0; } section article.shoppingBox .otherOrder fieldset .btnDIY { margin: 0 0 0 25px; } section article.shoppingBox .otherOrder fieldset .btnDIY a { display: inline-block; padding: 5px 20px; color: #0090be; border: 1px #0090be solid; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore { position: relative; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore, section article.shoppingBox .otherOrder fieldset .btnDIY.open>a { display: none; } section article.shoppingBox .otherOrder fieldset .btnDIY.open>.textDIYStore { display: block; font-size: 15px; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore>a { font-size: 13px; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 0 15px 0; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore ul li label { display: inline-block; width: 90px; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore .storeErrorMsg { position: absolute; top: 0; left: 0; bottom: 50px; right: 0; max-width: 400px; display: flex; align-items: center; justify-content: flex-start; display: none; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore.error .storeErrorMsg { display: flex; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore .storeErrorMsg>div { position: relative; padding: 20px 20px; font-size: 16px; color: #fff; background: #e66b53; box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2) } section article.shoppingBox .otherOrder fieldset span.txt { line-height: 32px; } section article.shoppingBox .otherOrder fieldset span.error { position: relative; top: -4px; padding: 0 0 0 20px; margin: 0 0 0 22%; font-size: 14px; color: #d92e00; background: url(../Content/images/icon/icon_error.png?v20170216) no-repeat left top; } section article.shoppingBox .otherOrder fieldset input[type="text"] { height: 30px; line-height: 30px; } section article.shoppingBox .otherOrder fieldset input[type="button"] { line-height: 30px; } section article.shoppingBox .otherOrder .paymentBox fieldset .box .con { min-height: inherit; } section article.shoppingBox .otherOrder .paymentBox fieldset .box .con .con { margin: 5px 0 0 20px; } section article.shoppingBox .otherOrder .paymentBox fieldset .box .con .con .red { color: #c5062f; } section article.shoppingBox .otherOrder .paymentBox fieldset .box .con .con a { color: #0090d3; } section article.shoppingBox .otherOrder fieldset .box .con .areabox, section article.shoppingBox .otherOrder fieldset .box .con .birbox, section article.shoppingBox .otherOrder fieldset .box .con .twzipcode, section article.shoppingBox .otherOrder fieldset .box .con .twzipcode2 { position: relative; min-height: 42px; } section article.shoppingBox .otherOrder select, section article.shoppingBox .otherOrder .twzipcode .county, section article.shoppingBox .otherOrder .twzipcode .district, section article.shoppingBox .otherOrder .twzipcode2 .county, section article.shoppingBox .otherOrder .twzipcode2 .district { height: 32px; } section article.shoppingBox .otherOrder .twzipcode .zipcode, section article.shoppingBox .otherOrder .twzipcode2 .zipcode { height: 30px; } section article.shoppingBox .notebox { margin: 0 0 20px 0; } section article.shoppingBox .notebox h4 { font-size: 13px; margin: 0 0 10px 0; } section article.shoppingBox .notebox p { font-size: 12px; font-weight: 100; } section article.shoppingBox .notebox p span { display: block; margin: 0 0 0 1em; } section article.orderConBox .otherOrder .btnFt, section article.shoppingBox .otherOrder .btnFt { margin: 20px 0 0 0; text-align: right; } section article.orderConBox .otherOrder .btnFt input[type=submit], section article.orderConBox .otherOrder .btnFt input[type=button], section article.shoppingBox .otherOrder .btnFt input[type=submit] { color: #fff; max-width: 200px; padding: 0 30px; text-align: center; border: 0; height: 42px; line-height: 38px; cursor: pointer; background: #000000; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; } section article.shoppingBox .otherOrder .btnFt input[type=submit]:enabled { background: #000000; cursor: pointer; } section article.shoppingBox .otherOrder .btnFt input[type=submit]:disabled { background: #ccc; cursor: default; } section article.shoppingBox .otherOrder .btnFt span.txt { margin: 0 10px 0 0; } section article.shoppingBox .otherOrder .btnFt span.txt label { cursor: pointer; *color: #0090be; font-size: 15px; line-height: 24px; *border-bottom: 1px #0090be solid; } .color-blue { color: #0090be !important; } .color-blue:hover { color: #000 !important; } .underLine { text-decoration: underline !important; } section article.locationConBox, section article.qaConBox { background: #f4f4f4; } section article.locationConBox:after, section article.qaConBox:after { content: ""; display: table; clear: both; } section article.locationConBox .main, section article.qaConBox .main { max-width: 1440px; } section article.locationConBox .locationList, section article.qaConBox .qaList { width: 90%; max-width: 880px; margin: 0 auto; padding: 30px 0 30px 0; } section article.locationConBox .locationList h3, section article.qaConBox .qaList h3 { font-size: 27px; padding: 80px 0; border-bottom: 1px #c3c3c3 solid; } section article.locationConBox .locationList .item, section article.qaConBox .qaList .item { padding: 20px 0; border-bottom: 1px #c3c3c3 solid; } section article.locationConBox .locationList .item .boxHd, section article.qaConBox .qaList .item .boxHd { padding: 0 30px 0 0; background: url(../Content/images/icon/icon_location_open.gif?v20170216) no-repeat right center; } section article.locationConBox .locationList .item .boxHd.open, section article.qaConBox .qaList .item .boxHd.open { background: url(../Content/images/icon/icon_location_close.gif?v20170216) no-repeat right center; } section article.locationConBox .locationList .item .boxHd { position: relative; } section article.locationConBox .locationList .item .boxHd .label { position: absolute; top: -10px; right: 40px; } section article.locationConBox .locationList .item .boxHd .label img { width: 60px; } section article.locationConBox .locationList .item .boxHd span, section article.qaConBox .qaList .item .boxHd span { display: block; } section article.locationConBox .locationList .item .boxHd span.hd, section article.qaConBox .qaList .item .boxHd span.hd { font-size: 14px; } section article.locationConBox .locationList .item .boxBd { display: none; padding: 20px 0 0 0; } section article.locationConBox .locationList a.back { display: inline-block; padding: 0 40px; margin: 20px 5px 40px 0; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; text-decoration: none; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.qaConBox .qaList .item .boxBd { display: none; padding: 20px 0 0 15px; } section article.locationConBox .locationList .item .boxBd ul { width: 100%; display: table; } section article.locationConBox .locationList .item .boxBd ul li .hd:after { content: ""; display: table; clear: both; } section article.locationConBox .locationList .item .boxBd ul li { /*float: left;*/ display: table-cell; *display: inline; zoom: 1; vertical-align: top; width: 32%; padding: 0 1.5% 0 0; } section article.locationConBox .locationList .item .boxBd ul li:last-child { width: 33%; padding: 0; } section article.locationConBox .locationList.companies .item .boxFt { width: 100%; display: table; } section article.locationConBox .locationList.companies .msgbox, section article.locationConBox .locationList.companies .googleMap { margin: 0; display: table-cell; *display: inline; zoom: 1; vertical-align: bottom; } section article.locationConBox .locationList.companies .msgbox { width: 52%; padding: 0 1% 0 0; } section article.locationConBox .locationList.companies .googleMap { width: 47%; } section article.locationConBox .locationList.companies .item .boxBd ul li, section article.locationConBox .locationList.companies .item .boxBd ul li:last-child { width: 49%; margin: 0 1% 0 0; } section article.locationConBox .locationList.companies .googleMap iframe, section article.locationConBox .locationList.companies .googleMap img { margin: -20px 0 0 0; } section article.locationConBox .locationList .item .boxBd ul li p { padding: 0 5px; line-height: 24px; } section article.locationConBox .locationList .item .boxBd ul li .hd { border-bottom: 1px #c3c3c3 solid; margin: 0 0 10px 0; } section article.locationConBox .locationList .item .boxBd ul li .hd span { float: left; padding: 2px 10px; color: #fff; background: #000; } section article.locationConBox .locationList .googleMap { width: 100%; margin: 20px 0 0 0; } section article.locationConBox .locationList .googleMap iframe, section article.locationConBox .locationList .googleMap img { width: 100%; border: 1px #c3c3c3 solid; } section article.qaConBox .qaList .item .boxBd p { color: #848484; } section article.qaConBox .qaList .subitem { padding: 5px 0; } section article.qaConBox .qaList .subitem .hd { cursor: pointer; } section article.qaConBox .qaList .subitem .hd.open { color: #02328d; } section article.qaConBox .qaList .subitem .bd { display: none; padding: 10px 0 20px 0; } section article.qaConBox .qaList .item .boxBd p.bd { color: #505050; } section article.otherBox { padding: 60px 0; } section article.otherBox.home { background: #fff; } section article.otherBox.busines { background: #3f3f3f; } section article.otherBox.tabforProCon { background: #f4f4f4; margin-bottom: 20px; } section article.otherBox .owl-carousel { width: 80%; max-width: 1200px; margin: 0 auto; } /* section article.otherBox .owl-carousel .item {} */ section article.otherBox.home .owl-carousel .item { background: #fff; } section article.otherBox.busines .owl-carousel .item { background: #3f3f3f; } section article.otherBox .owl-carousel .item .title { position: relative; /*display: inline-block;*/ padding: 5px 0; text-align: center; color: #6c6c6c; } section article.otherBox .owl-carousel .item .title>a { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } section article.otherBox.home .owl-carousel .item .title.on, section article.otherBox.home .owl-carousel .item .title:hover { color: #cacaca; } section article.otherBox.busines .owl-carousel .item .title.on, section article.otherBox.busines .owl-carousel .item .title:hover { color: #fff; } section article.otherBox.tabforProCon .owl-carousel .item .title { color: #aaa; } section article.otherBox.tabforProCon .owl-carousel .item.on .title { color: #000; } /* section article.otherBox .owl-carousel .item .title a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }*/ section article.otherBox .owl-carousel .item .title .ser, section article.otherBox .owl-carousel .item .title .sercon { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.otherBox .owl-carousel .item .title .ser { padding: 0 4px 0 20px; font-size: 38px; font-weight: 100; white-space: nowrap; } section article.otherBox .owl-carousel .item .title .ser.double { font-size: 22px; } section article.otherBox .owl-carousel .item .title .ser.tw { font-size: 32px; } section article.otherBox .owl-carousel .item .title .en { font-size: 18px; line-height: 18px; font-weight: 300; text-align: left; } section article.otherBox .owl-carousel .item .title .en.min { font-size: 13px; line-height: 15px; } section article.otherBox .owl-carousel .item .title .ch { font-size: 15px; line-height: 15px; font-weight: 200; text-align: left; } section article.otherBox .owl-theme .owl-nav { position: absolute; top: 50%; left: 0; right: 0; width: 100%; height: 30px; margin: -15px 0 0 0; display: inline-block; zoom: 1; *display: inline; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } section article.otherBox .owl-theme .owl-nav div { position: absolute; width: 30px; height: 30px; font-size: 0; } section article.otherBox .owl-theme .owl-nav .owl-prev { left: -60px; background: url(../Content/images/icon/icon_productArrow_L.png?v20170216) no-repeat center; } section article.otherBox .owl-theme .owl-nav .owl-next { right: -60px; background: url(../Content/images/icon/icon_productArrow_R.png?v20170216) no-repeat center; } section article.otherBox.busines .owl-theme .owl-nav .owl-prev { background: url(../Content/images/icon/icon_productArrow_L_w.png?v20170216) no-repeat center; } section article.otherBox.busines .owl-theme .owl-nav .owl-next { background: url(../Content/images/icon/icon_productArrow_R_w.png?v20170216) no-repeat center; } section article.otherBox.busines .owl-theme .owl-nav .owl-prev, section article.otherBox.busines .owl-theme .owl-nav .owl-next { filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; } .homePage article.howChoose { position: relative; z-index: 6 } article.howChoose, article.btnHowChooseDown { position: relative; width: 100%; background: #f4f4f4; } article.howChoose.search .howChooseBd .chooseBox.moreSpace { padding-bottom: 120px; } article.howChoose .howChooseHd, article.btnHowChooseDown .btnHowChooseDownHd { max-width: 1440px; margin: 0 auto; padding: 40px 0 0 0; } article.howChoose .howChooseHd .btn, article.btnHowChooseDown .btnHowChooseDownHd .btn { margin: 0 40px; line-height: 64px; overflow: hidden; height: 64px; } article.howChoose .howChooseHd .btn a, article.btnHowChooseDown .btnHowChooseDownHd .btn a { padding: 20px 30px; text-align: center; font-size: 18px; color: #fff; font-weight: 500; vertical-align: bottom; background: rgb(47, 139, 224); background: -moz-linear-gradient(top, rgba(47, 139, 224, 1) 0%, rgba(35, 126, 210, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(47, 139, 224, 1)), color-stop(100%, rgba(35, 126, 210, 1))); background: -webkit-linear-gradient(top, rgba(47, 139, 224, 1) 0%, rgba(35, 126, 210, 1) 100%); background: -o-linear-gradient(top, rgba(47, 139, 224, 1) 0%, rgba(35, 126, 210, 1) 100%); background: -ms-linear-gradient(top, rgba(47, 139, 224, 1) 0%, rgba(35, 126, 210, 1) 100%); background: linear-gradient(to bottom, rgba(47, 139, 224, 1) 0%, rgba(35, 126, 210, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f8be0', endColorstr='#237ed2', GradientType=0); } article.howChoose .howChooseHd .btn span, article.btnHowChooseDown .btnHowChooseDownHd .btn span { padding: 0 0 0 10px; font-size: 12px; font-weight: 200; color: #676767; } article.howChoose .howChooseHd_grey { width: 90%; max-width: 1440px; margin: 0 auto; padding-bottom: 15px; } article.howChoose .howChooseHd_grey .btn { width: 90%; max-width: 1440px; margin: 0 auto; text-align: right; } article.howChoose .howChooseHd_grey .btn a { position: relative; display: inline-block; width: 170px; height: 30px; margin-right: 40px; background: #676767; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #fff; line-height: 30px; text-align: center; } article.howChoose .howChooseHd_grey .btn a img { position: absolute; left: 10px; top: 6px; width: 20px; height: 20px; } .bannerBox article.howChoose { background: none; } .bannerBox article.howChoose .howChooseHd { margin: -64px auto 0 auto; padding: 0; } .bannerBox article.howChoose .howChooseHd .btn span { color: #fff; } .bannerBox article.howChoose .howChooseBd .chooseBox { position: relative; background: #f4f4f4; } article.howChoose .howChooseBd { position: relative; width: 100%; display: none; } article.howChoose.productListArea .howChooseBd { display: table; } article.howChoose.productListArea .howChooseHd { display: none; } article.howChoose.productListArea .howChooseBd a.close { display: none } article.howChoose.search .howChooseBd { display: block; } article.howChoose .howChooseBd a.close { position: absolute; top: 10px; right: 26px; display: block; width: 22px; height: 22px; background: url(../Content/images/icon/icon_howChooseClose.png?v20170216) no-repeat right center; z-index: 1; } article.howChoose .howChooseBd .chooseBox, article.howChoose .howChooseBd .explainBox { padding: 0 20px; display: table-cell; *display: inline; zoom: 1; vertical-align: top; } article.howChoose .howChooseBd .main { position: initial; width: 90%; /*max-width: 530px;*/ min-height: 630px; margin: 0 auto; padding: 60px 10px 80px 10px; } article.howChoose .howChooseBd .main.moreSpace { padding-bottom: 100px; } article.howChoose.search .howChooseBd .main { width: 90%; padding: 60px 20px 80px 20px; max-width: 636px; min-height: 380px; } article.howChoose .howChooseBd .chooseBox { width: 50%; background: #e2e2e2; } article.howChoose.search .howChooseBd .chooseBox { position: relative; top: 0; left: 0; display: block; width: 100%; padding: 0 0 20px 0; background: #55a8f1; display: none; } article.howChoose .howChooseBd .chooseBoxHd { max-width: 500px; margin: 0 auto; } article.howChoose .howChooseBd h3 { font-size: 40px; font-weight: 200; line-height: 46px; } article.howChoose.search .howChooseBd h3 { color: #fff; font-size: 30px; line-height: 36px; text-align: center; margin: 0 0 40px 0; } article.howChoose .howChooseBd h3.en { font-size: 50px; line-height: 50px; margin: 0 0 20px 0; } article.howChoose .howChooseBd .text { margin: 0 0 60px 0; } article.howChoose .howChooseBd .chooseBox .selectBox { position: relative; } article.howChoose .howChooseBd .chooseBox .selectBox .step1, article.howChoose .howChooseBd .chooseBox .selectBox .step2, article.howChoose .howChooseBd .chooseBox .selectBox .step3, article.howChoose .howChooseBd .chooseBox .selectBox .step4 { position: relative; top: 0; left: 0; width: 100%; } article.howChoose .howChooseBd .chooseBox .selectBox .step2, article.howChoose .howChooseBd .chooseBox .selectBox .step3, article.howChoose .howChooseBd .chooseBox .selectBox .step4 { display: none; } article.howChoose .howChooseBd .chooseBox .selectBox .selectboxit-arrow-container { right: auto; left: 0; width: 65px; background: #000; } article.howChoose .howChooseBd .chooseBox .selectBox .selectboxit-default-arrow { margin: -8px auto 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 16px solid #fff; } article.howChoose .howChooseBd .chooseBox .selectBox .selectboxit-text { text-indent: 75px; } article.howChoose .howChooseBd .chooseBox .selectBox .selectboxit-btn { background: #fff; border: 0; } article.howChoose .howChooseBd .chooseBox ol.stepBox { margin: 0 0 60px 0; height: 90px; border: 2px #76d1f2 solid; background: #fff; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; } article.howChoose .howChooseBd .chooseBox.Kseries ol.stepBox { border: 2px #f8c54c solid; } article.howChoose .howChooseBd .chooseBox.Cseries ol.stepBox { border: 2px #eaaa7a solid; } article.howChoose .howChooseBd .chooseBox.DHseries ol.stepBox { border: 2px #a8cdd7 solid; } article.howChoose .howChooseBd .chooseBox.DCseries ol.stepBox { border: 2px #56cbba solid; } article.howChoose .howChooseBd .chooseBox.Hseries ol.stepBox { border: 2px #c3ce68 solid; } article.howChoose .howChooseBd .chooseBox.EFseries ol.stepBox { border: 2px #9097e6 solid; } article.howChoose .howChooseBd .chooseBox.HLseries ol.stepBox { border: 2px #8ad69e solid; } article.howChoose .howChooseBd .chooseBox.PBSseries ol.stepBox { border: 2px #548bef solid; } article.howChoose .howChooseBd .chooseBox ol.stepBox:after, article.howChoose .howChooseBd .resultBox ol.stepBox:after { content: ""; display: table; clear: both; } article.howChoose .howChooseBd .chooseBox ol.stepBox li { float: left; /* width: 25%; */ width: 33.3%; text-align: center; font-size: 14px; height: 86px; line-height: 20px; } article.howChoose .howChooseBd .chooseBox ol.stepBox li span.br { display: block; } article.howChoose .howChooseBd .chooseBox ol.stepBox li span.iconBox { display: block; width: 35px; margin: 0 auto; height: 35px; } article.howChoose .howChooseBd .chooseBox ol.stepBox li span.iconBox img { max-width: 100%; } article.howChoose .howChooseBd .chooseBox ol.stepBox li.on { background: #e6e6e6; -webkit-border-radius: 43px; -moz-border-radius: 43px; border-radius: 43px; } /* article.howChoose .howChooseBd .chooseBox ol.stepBox li span { padding: 4px 10px; margin: 0 10px; line-height: 36px; color: #227999; background: #fff; -webkit-border-radius: 43px; -moz-border-radius: 43px; border-radius: 43px; } */ article.howChoose .howChooseBd .chooseBox .selectBox fieldset { position: relative; } article.howChoose .howChooseBd .chooseBox .selectBox fieldset input[type=button] { position: absolute; top: 18px; right: 20px; max-width: 120px; line-height: 36px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; z-index: 2; } article.howChoose .howChooseBd .desc { position: absolute; left: 20px; bottom: 20px; font-size: 11px; color: #656565; } article.howChoose.search .howChooseBd .desc { color: #fff; } article.howChoose .howChooseBd .explainBox { position: relative; width: 50%; color: #fff; background: #76d1f2; } article.howChoose .howChooseBd .explainBox .text {} article.howChoose .howChooseBd .explainBox .icon { text-align: center; margin: 0 0 60px 0; } article.howChoose .howChooseBd .explainBox .icon img { width: 100%; max-width: 440px; } article.howChoose .howChooseBd .explainBox .desc { color: #fff; } article.howChoose .howChooseBd .resultBox { /*padding-top: 91px;*/ color: #fff; background: #55a8f1; overflow: hidden; } article.howChoose .howChooseBd .resultBox ol.stepBox { display: table; text-align: center; margin: 0 0 40px 0; } article.howChoose .howChooseBd .resultBox ol.stepBox li { display: inline-block; float: none; min-height: 48px; margin: 10px auto; text-align: center; font-size: 15px; font-weight: 400; } article.howChoose .howChooseBd .resultBox ol.need_List { list-style-type: decimal; } article.howChoose .howChooseBd .resultBox ol.need_List li { display: inline-block; float: left; line-height: 24px; min-height: 24px; width: 100%; margin: 0px; text-align: left; font-size: 14px; font-weight: 400; white-space: normal; } article.howChoose .howChooseBd .resultBox ol.need_List li+li { margin-top: 1em; } article.howChoose .howChooseBd .resultBox ol.stepBox li:nth-child(4) .hd, article.howChoose .howChooseBd .resultBox ol.stepBox li:nth-child(4) .ft { vertical-align: top; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd, article.howChoose .howChooseBd .resultBox ol.stepBox li .ft { display: table-cell; *display: inline; zoom: 1; /* vertical-align: middle; */ vertical-align: top; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd { width: 40%; width: 100%; height: auto; padding: 5px; border: 1px #fff solid; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd { position: relative; width: 400px; width: 100%; height: auto; padding: 5px; border: 1px #fff solid; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd::after { position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; content: ""; background: #80bef5; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd .bd { position: relative; z-index: 1; width: 243px; padding: 10px 10px; line-height: 48px; background: #80bef5; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd .bd img { max-width: 40px; } article.howChoose .howChooseBd .resultBox ol.stepBox li:nth-child(4) .hd { position: relative; } article.howChoose .howChooseBd .resultBox ol.stepBox li:nth-child(4) .hd .bd { position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd .bd span { display: inline-block; padding: 0 0 0 10px; } article.howChoose .howChooseBd .resultBox ol.stepBox li .ft { width: 60%; padding: 0; line-height: 50px; } article.howChoose .howChooseBd .resultBox ol.stepBox li .ft .bd { padding: 5px; border: 1px #fff solid; border-left: 0; width: 300px; text-align: left; } article.howChoose .howChooseBd .resultBox ol.stepBox li .ft .bd span, article.howChoose .howChooseBd .resultBox ol.stepBox li .ft .bd div { display: block; padding: 10px 30px 10px 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #80bef5 url(../Content/images/icon/icon_hook.png?v20170216) no-repeat 96% center; } article.howChoose .howChooseBd .resultBox ol.stepBox li .ft .bd #Step4 { padding: 22px 30px 22px 30px; } article.howChoose .howChooseBd .resultBox ol.stepBox li:nth-child(4) .ft .bd div { display: block; padding: 10px 30px 10px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #80bef5 url(../Content/images/icon/icon_hook.png?v20170216) no-repeat 96% 50%; } article.howChoose .howChooseBd .resultBox a.againSearch { display: block; width: 100%; max-width: 180px; margin: 0 auto; text-align: center; font-size: 15px; vertical-align: middle; line-height: 36px; background: #d3d3d2; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; } article.howChoose .howChooseBd .resultBox a.againSearch span { float: right; display: block; margin: 7px 8px 0 0; width: 22px; height: 22px; background: #fff url(../Content/images/icon/icon_search_bk.png?v20170216) no-repeat center; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; -moz-background-size: 16px auto; -webkit-background-size: 16px auto; -o-background-size: 16px auto; background-size: 16px auto; } article.howChoose .howChooseBd .selectBox .choice ul li { color: #000; display: block; position: relative; float: left; width: 50%; } article.howChoose .howChooseBd .selectBox .choice ul li input[type="checkbox"] { position: absolute; position: absolute; visibility: visible; opacity: 0; z-index: 6; } article.howChoose .howChooseBd .selectBox .choice ul li label { display: block; position: relative; font-weight: 300; font-size: 12px; line-height: 22px; padding-left: 20px; } article.howChoose .howChooseBd .selectBox .choice ul li .check { display: block; position: absolute; border: 1px solid #000; border-radius: 100%; height: 12px; width: 12px; top: 2px; left: 2px; z-index: 5; } article.howChoose .howChooseBd .selectBox .choice ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 8px; width: 8px; top: 2px; left: 2px; margin: auto; /*background: #000;*/ z-index: 6; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } article.howChoose .howChooseBd .selectBox .choice ul li input[type="checkbox"]:checked~.check::before { background: #000; } article.howChoose .howChooseBd .selectBox .choice { background: #fff; margin-top: 1%; width: 100%; padding: 2% 4%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* 首頁searchBox 調整 */ .idx-howChoose .howChooseHd { display: none } article.howChoose .explainBox.Oseries { background: #54b2ef; } article.howChoose .explainBox.Kseries { background: #f8b617; } article.howChoose .explainBox.Cseries { background: #ea904d; } article.howChoose .explainBox.DHseries { background: #86c5d7; } article.howChoose .explainBox.CUseries { background: #96b865; } article.howChoose .explainBox.Hseries { background: #c3ce68; } article.howChoose .explainBox.DCseries { background: #56cbba; } article.howChoose .explainBox.WHseries { background: #94d6de; } article.howChoose .explainBox.EFseries { background: #9097e6; } article.howChoose .explainBox.HLseries { background: #8ad69e; } article.howChoose .explainBox.PBSseries { background: #548bef; } article.staffBox { padding: 40px 0; text-align: center; background: #f4f4f4; } article.staffBox .btn { width: 136px; margin: 0 auto; } article.staffBox .btn a { display: block; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #515151; background: #d3d3d2; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .homePage article.contactBox { position: relative; background: #fff; } article.contactBox { width: 100%; padding: 10px 0; display: flex; align-items: center; justify-content: center; } article.contactBox>div { position: relative; width: 50%; display: flex; align-items: center; justify-content: center; padding: 50px 0; font-weight: 400; font-size: 18px; color: #7a7a7a; } article.contactBox>div>a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } article.contactBox>div span { font-size: 13px; font-weight: normal; } article.contactBox>div img { margin: 0 5px 0 0; } article.contactBox .tel { font-size: 18px; border-right: 1px #d0d0d0 solid; } article.contactBox .mail { font-size: 16px; } article.contactBox a { padding: 50px 0; font-size: 16px; font-weight: 400; color: #7a7a7a; display: block; } @media only screen and (max-width : 768px) { article.contactBox a { padding: 0 0; display: inline; } } article.contactBox .tel a span { font-size: 13px; font-weight: normal; } section article.proList .boxHd { position: relative; } section article.proList.List .boxHd { cursor: pointer; } section article.proList .boxHd .icon { margin: 0 0 10px 0; } section article.proList .boxHd .title { position: absolute; top: 50%; width: 90%; margin: -70px 5% 0 5%; text-align: center; z-index: 1; } section article.proList .boxHd .title a { color: #000; } section article.proList .boxHd .title.we a { color: #fff; } section article.proList .boxHd .title .scripts { padding: 20px 0; margin: 0 0 20px 0; color: #000; font-size: 36px; line-height: 38px; font-weight: 100; background: url(../Content/images/icon/line_title.gif?v20170216) no-repeat bottom center; } section article.proList .boxHd .title .mainTitle { font-size: 20px; font-weight: 400; } section article.proList .boxHd .title.we .scripts { color: #fff; background: url(../Content/images/icon/line_title_we.gif?v20170216) no-repeat bottom center; } section article.proList .boxHd .title.we .mainTitle { color: #fff; } section article.proList .boxHd .subtitle { position: absolute; top: 50%; width: 90%; margin: -70px 5% 0 5%; color: #fff; text-align: center; z-index: 1; } section article.proList .boxHd .subtitle h3 { margin: 0 0 5px 0; font-size: 42px; line-height: 42px; font-weight: 100; } section article.proList .boxHd .subtitle h4 { font-size: 18px; font-weight: 400; } section article.proList .boxHd .photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } section article.proList .boxHd .detail { position: relative; } section article.proList .boxHd .detail img { position: relative; width: 100%; min-width: 720px; vertical-align: bottom; } section article.proList .boxBd { position: relative; max-width: 1360px; margin: 0 auto; padding: 50px 40px 30px 40px; } section article.proList.examplesList .boxBd { padding: 100px 40px 50px 40px; } section article.proList .boxBd .proBox a { color: black; } section article.proList .boxBd .proBox h3, section article.proList .boxBd .proBox h2, section article.proList .boxBd .proBox h1 { margin: 0 0 60px 0; font-size: 30px; line-height: 32px; font-weight: 100; } section article.proList .boxBd .proBox h3 b, section article.proList .boxBd .proBox h2 b, section article.proList .boxBd .proBox h1 b { font-weight: 400; } section article.proList .boxBd .proBox p { line-height: 24px; color: #797979; } section article.proList .boxBd .btn { position: absolute; top: 50%; right: 40px; width: 340px; margin: -40px 0 0 0; } section article.proList .boxBd .btn a { color: #fff; display: block; width: 136px; margin: 0 auto; font-size: 14px; height: 30px; line-height: 30px; text-align: center; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.proList .boxBd .msgBox { position: absolute; bottom: 40px; right: 40px; } section article.proList .boxBd .msgBox:after { content: ""; display: table; clear: both; } section article.proList .boxBd .msgBox a { padding: 5px 0 5px 28px; margin: 0 0 0 15px; color: #000; } section article.proList .boxBd .msgBox a.date { background: url(../Content/images/icon/icon_date.png?v20170216) no-repeat 0 0; } section article.proList .boxBd .msgBox a.text { background: url(../Content/images/icon/icon_text.png?v20170216) no-repeat 0 0; } section article.proList .boxBd .msgBox a.photo { background: url(../Content/images/icon/icon_photo.png?v20170216) no-repeat 0 0; } section article.proList .boxBd .msgBox a.shop { background: url(../Content/images/icon/icon_shop.png?v20170216) no-repeat 0 0; } section article.logoBox .container { margin: 0 auto; max-width: 1440px; } section article.logoBox .container.odd .item { margin: 30px auto; } section article.logoBox .container .item { text-align: center; margin: 30px 0; width: 25%; } section article.logoBox .container .item a { position: relative; display: block; width: 150px; height: 150px; margin: 0 auto; } section article.logoBox .container .item img { filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } section article.logoBox .container .item.opacity img { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } section article.proList .conBd, section article.proList .conFt { min-height: 160px; background: #f4f4f4; } section article.proList .conBd.even, section article.proList .conFt.even { background: #fff; } section article.proList .conBd .main { max-width: 1440px; min-height: 160px; margin: 0 auto; } section article.proList .conBd .photo, section article.proList .conBd .text { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.proList .conBd .photo { width: 60%; } section article.proList .conBd .photo .photobr { margin: -50px 0; } section article.proList .conBd .photo .photobd { width: 835px; height: 600px; display: table-cell; *display: inline; vertical-align: middle; text-align: center; overflow: hidden; } section article.proList .conBd.seoBox { margin: 200px 0 0; } section article.proList .conBd.seoBox .main { background: #f4f4f4; } section article.proList .conBd.seoBox .photo .photobd { height: 0; } section article.proList .conBd.seoBox .text .textbd { padding: 0px 55px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.proList .conBd.seoBox .text .textbd .txtTtl { font-size: 36px; line-height: 44px; color: #000; } section article.proList .conBd.seoBox .text .textbd .txtCon { width: 100%; height: 7em; margin-top: 26px; font-size: 18px; line-height: 30px; color: #515151; overflow: hidden; } section article.proList .conBd.seoBox .text .textbd .proBtn { width: 188px; height: 30px; margin-top: 26px; line-height: 27px; font-size: 13px; color: #fff; background: #7f7f7f; border-radius: 20px; text-align: center; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } section article.proList .conBd .photo .photobd img { max-width: 835px; max-height: 600px; } section article.proList .conBd .photo .photobd span { height: 100%; *display: inline-block; } section article.proList .conBd .photo .photobd * { vertical-align: middle; } section article.proList .conBd .text { width: 40%; } section article.proList .conBd .text .textbd { padding: 60px; line-height: 24px; color: #797979; } section article.proList .conBd .title { position: absolute; left: 40px; top: 50%; margin: -12px 0 0 0; font-size: 24px; font-weight: 400; } section article.proList .conBd .title.right { left: auto; right: 40px; } section article.proList .conBd .title span { font-size: 18px; font-weight: 200; } section article.proList .conBd .shop { padding: 0 40px; font-size: 12px; line-height: 120px; } section article.proList .conFt { text-align: center; } section article.proList .conFt .main { max-width: 1345px; min-height: 160px; margin: 0 auto; padding: 160px 0 0 0; } section article.proList .conFt .photo img { width: 100%; max-width: 1345px; } section article.proList .conFt .text { position: relative; margin: 0 0 -150px 0; min-height: 150px; background: #f4f4f4; z-index: 1; } section article.proList .conFt .textBox { position: absolute; top: 40px; width: 100%; text-align: center; } section article.proList .conFt .text h4 { font-size: 16px; font-weight: 600; margin: 0 0 20px 0; } section article.proList .conFt .text a.btn { display: block; width: 136px; height: 30px; line-height: 30px; margin: 0 auto; color: #fff; font-size: 14px; text-align: center; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.proList .conFt .text .shopInfo { padding: 2px 2px 12px 2px; text-align: left; background: #f4f4f4; display: none; } section article.proList .conFt .text .shopInfo .box { float: left; width: 50%; } section article.proList .conFt .text .shopInfo .boxtr { margin: 1px; padding: 10px 10px; background: #dfdfdf; } section article.proList .conFt .text .shopInfo .boxtdl, section article.proList .conFt .text .shopInfo .boxtdr { font-weight: 600; display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } section article.proList .conFt .text .shopInfo .boxtdl { width: 80px; } section article.proList .conFt .text .shopInfo a.close { position: absolute; bottom: 10px; right: 10px; width: 15px; height: 15px; text-indent: -10000px; background: url(../Content/images/icon/icon_shopInfoClose.gif?v20170216) no-repeat; } section article.proList .conFt .text .shopInfo .boxcon { padding: 15px 10px; } section article.proList .conFt h3 { margin: 20px 0 40px 0; padding: 0 20px; font-size: 16px; line-height: 28px; font-weight: 200; color: #000; } section article.proList .conFt .tel { width: 320px; margin: 0 auto 60px auto; text-align: center; font-size: 18px; background: #fff; border-right: 2px #fff solid; border-bottom: 2px #fff solid; -webkit-box-shadow: 3px 3px #000; -moz-box-shadow: 3px 3px #000; box-shadow: 3px 3px #000; } section article.proList .conFt .tel span { display: block; padding: 20px 10px; border: 1px #000 solid; } section article.proList .conFt .tel span samp { font-size: 13px; } section article.proList .taskBox, section article.proList .taskBoxbd { position: relative; max-width: 1360px; margin: 0 auto; padding: 80px 40px 40px 40px; } section article.proList .taskBoxbd { padding: 80px 40px 120px 40px; } section article.proList .taskBox .subtitle, section article.proList .taskBoxbd .subtitle { text-align: center; font-size: 20px; } section article.proList .taskBox .subtitle .en, section article.proList .taskBoxbd .subtitle .en { padding: 0 0 10px 0; margin: 0 0 10px 0; background: url(../Content/images/icon/line_title.gif?v20170216) no-repeat bottom center; } section article.proList .taskBox ul { width: 480px; margin: 40px auto 60px auto; } section article.proList .taskBox ul:after { content: ""; display: table; clear: both; } section article.proList .taskBox ul li { float: left; width: 42%; margin: 5px 4%; font-size: 15px; font-weight: 200; } section article.proList .taskBox ul li span { color: #000; font-weight: 400; } section article.proList .taskBox .desc { position: absolute; bottom: 20px; right: 40px; font-size: 12px; color: #797979; } section article.proList .taskBoxbd .subtitle .txt { color: #fff; display: block; width: 156px; margin: 10px auto 0 auto; font-size: 14px; font-weight: 400; height: 30px; line-height: 30px; text-align: center; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.proList .taskBoxbd .explainbox { position: relative; width: 590px; margin: -40px auto 80px auto; font-size: 12px; color: #797979; } section article.proList .taskBoxbd .explainbox .bg img { width: 100%; } section article.proList .taskBoxbd .explainbox .product { position: absolute; top: 0; left: 0; width: 590px; height: 590px; background: url(../Content/images/example/bg_exampleDetail.png?v20170216) no-repeat; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } section article.proList .taskBoxbd .explainbox .explain .reach { position: absolute; width: 310px; font-size: 14px; font-weight: 200; line-height: 26px; } section article.proList .taskBoxbd .explainbox .explain .reach span { color: #000; font-weight: 400; } section article.proList .taskBoxbd .explainbox .explain .reach1 { top: 80px; left: -300px; } section article.proList .taskBoxbd .explainbox .explain .reach2 { top: 340px; left: -300px; } section article.proList .taskBoxbd .explainbox .explain .reach3 { top: 80px; right: -330px; } section article.proList .taskBoxbd .explainbox .explain .reach4 { top: 340px; right: -330px; } section article.proList .taskBoxbd .explainbox .explain .reach5 { top: 560px; left: 120px; width: 400px; } section article.proList .taskBoxbd .explainbox .product .icon { position: absolute; padding: 45px 0 0 0; width: 130px; text-align: center; background: url(../Content/images/icon/icon_examplePoint.png?v20170216) no-repeat top center; z-index: 1; } section article.proList .taskBoxbd .explainbox .product .icon1 { top: 150px; left: 0; } section article.proList .taskBoxbd .explainbox .product .icon2 { top: 400px; left: 60px; } section article.proList .taskBoxbd .explainbox .product .icon3 { top: 30px; left: 345px; } section article.proList .taskBoxbd .explainbox .product .icon4 { top: 310px; left: 450px; } section article.proList .taskBoxbd .explainbox .product .icon5 { top: 455px; left: 340px; } /* listformQA *----------------------------------------------------------------------------*/ section article.formBox.listFormBox .bg.ADV { width: 100%; background: #303030 url(../Content/images/service/serviceListFormQA_1920960.jpg?v20170216) no-repeat center; background-size: cover; } section article.formBox.listFormBox .wrap { position: relative; max-width: 1360px; margin: 0 auto; padding: 90px 120px 60px 260px; } section article.formBox.listFormBox .wrap .title { width: 100%; padding-left: 0; } section article.formBox.listFormBox .wrap .form { width: 350px; margin-top: 5%; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*----------------------------------------------------------------------------*/ section article.formBox { width: 100%; background: #303030 url(../Content/images/service/formQA_BG.jpg?v20170216) no-repeat; background-size: cover; } /*article.formBox.listFormBox .bg.ADV {background: #303030 url(../Content/images/service/listFormQA_BG.jpg?v20170216) no-repeat left center;} */ section article.formBox .wrap { max-width: 1440px; width: 100%; margin: 0 auto; padding: 170px 120px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.formBox .wrap .title { width: 70%; padding-left: 10%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.formBox .wrap .form { width: 30%; float: left; } section article.formBox .wrap .title h2, section article.formBox .wrap .title h1 { font-size: 54px; line-height: 60px; color: #fff; } section article.formBox .wrap .title h2 span, section article.formBox .wrap .title h1 span { display: block; } section article.formBox .wrap .stepBox { min-height: 600px; } section article.formBox .wrap .step2 { color: #bbb; text-align: left; } section article.formBox .wrap .step2 p { margin-top: 50px; display: inline-block; font-size: 24px; line-height: 32px; } section article.formBox .wrap .step2 p span { display: block; } section article.formBox .wrap .title p { padding-top: 10px; font-size: 13px; line-height: 24px; color: #fff; } section article.formBox .wrap .title p span { display: block; } section article.formBox .wrap .form fieldset input[type=text] { padding: 0; margin: 0 -1px; height: 30px; line-height: 30px; font-size: 15px; text-indent: 10px; vertical-align: middle; color: #000; background: #fff; } section article.formBox .wrap .form fieldset input[type=submit], section article.formBox .wrap .form fieldset input[type=button] { border-radius: 20px; width: 100%; max-width: 500px; font-size: 13px; line-height: 30px; color: #fff; background: #2f8be0; vertical-align: middle; } section article.formBox .wrap .form .box { display: table; width: 100%; margin: 0 0 16px 0; line-height: 30px; } section article.formBox .wrap .form .box span.txt label { color: #fff; } section article.formBox .wrap .form .box:nth-child(4) { margin: 25px 0 30px 0; } section article.formBox .wrap .form .box>label { width: 30%; display: table-cell; font-size: 15px; color: #fff; } section article.formBox .wrap .form .box.max>label { width: 100%; padding: 0 0 5px 0; line-height: 20px; display: block; } section article.formBox .wrap .form .box.max>div { width: 100%; display: block; } section article.formBox .wrap .form .box>div { width: 70%; display: table-cell; *display: inline; zoom: 1; vertical-align: middle; font-size: 15px; } section article.formBox .wrap .form .box img { width: 100% } section article.formBox .box.verifiCodeBox>label, section article.formBox .box.verifiCodeBox>.con { display: block !important; ; width: 100% !important; ; } section article.formBox .box .verifiCode-note-box { color: #dedede; line-height: 1.6em; font-size: 13px; display: block; margin: 5px 0 0 0; } section article.formBox .wrap .form .box .selectboxit-btn, section article.formBox .wrap .form .box .county { background: #d3d3d2 url(../Content/images/icon/icon_nextArrow.png?v20170216) no-repeat right; border: 0; height: 32px; line-height: 32px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; padding: 0 35px; font-size: 15px; -moz-appearance: none; -webkit-appearance: none; appearance: none; } .customForm2 .selectboxit-container span { /*background: #d3d3d2 url(../Content/images/icon/icon_nextArrow.png?v20170216) no-repeat right;*/ background: transparent; border: 0; height: 32px; line-height: 32px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; font-size: 15px; -moz-appearance: none; -webkit-appearance: none; appearance: none; } section article.formBox .wrap .form .box textarea { line-height: 20px; font-size: 15px; } section article.formFeature .wrap { max-width: 680px; width: 100%; margin: 0 auto; padding: 25px 0 70px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.formFeature .wrap ul li { display: block; float: left; width: 33.3%; } section article.formFeature .wrap ul li span:nth-child(2) { width: 60%; height: 1px; background: #000; margin: 10px auto 26px; } section article.formFeature .wrap ul li span { display: block; text-align: center; } section article.formFeature .bgGray { height: 67px; background: #f4f4f4; } /* searchpage *----------------------------------------------------------------------------*/ section article.searchpgConBox { background: #f4f4f4; } section article.searchpgConBox_notFind { background: #fff; } section article.searchpgConBox:after, section article.searchpgConBox_notFind:after { content: ""; display: table; clear: both; } section article.searchpgConBox .main, section article.article.searchpgConBox_notFind .main { max-width: 1440px; } section article.searchpgConBox .searchpgList, section article.searchpgConBox_notFind .searchpgList { width: 90%; max-width: 880px; margin: 0 auto; padding: 30px 0 30px 0; } section article.searchpgConBox .searchpgList h3 { font-size: 27px; padding: 80px 0; border-bottom: 1px #c3c3c3 solid; } section article.searchpgConBox .searchpgList .item { border-bottom: 1px #c3c3c3 solid; } section article.searchpgConBox .searchpgList .item .boxHd { padding: 5px 0; } section article.searchpgConBox .searchpgList .item:hover .boxHd { background: #e9e9e9; } section article.searchpgConBox .searchpgList .item .boxHd.open { background: url(../Content/images/icon/icon_searchpg_close.gif?v20170216) no-repeat right center; } section article.searchpgConBox .searchpgList .item .boxHd>a { display: block; width: 100%; } section article.searchpgConBox .searchpgList .item .boxHd span { display: block; } section article.searchpgConBox .searchpgList .item .boxHd span.img { width: 80px; height: 80px; background-size: cover !important; border: 1px solid #c3c3c3; } section article.searchpgConBox .searchpgList .item .boxHd span.hd { font-size: 14px; display: table-cell; width: 100%; vertical-align: middle; height: 80px; padding-right: 5px; } section article.searchpgConBox .searchpgList .item .boxHd span.hd:before { content: "●"; position: relative; margin-right: 5px; } section article.searchpgConBox .searchpgList .item .boxHd span.hd u { text-decoration: underline; } section article.searchpgConBox .searchpgList .item .boxHd span.hd small { font-size: 13px; display: inline-block; margin-left: 18px; } section article.searchpgConBox .searchpgList .item .hilit .highlight { color: #c81313; font-weight: normal; } section article.searchpgConBox .searchpgList .item .boxHd span.photo { width: 80px; height: 80px; display: table-cell; vertical-align: middle; } section article.searchpgConBox .searchpgList .item .boxHd span.photo img { max-width: 80px; max-height: 80px; } section article.searchpgConBox .searchpgList .item .boxBd { display: none; padding: 20px 0 0 0; } section article.searchpgConBox .searchpgList a.back { display: inline-block; padding: 0 40px; margin: 20px 5px 40px 0; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; text-decoration: none; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } section article.qaConBox .qaList .item .boxBd { display: none; padding: 20px 0 0 15px; } section article.searchpgConBox .searchpgList .item .boxBd ul { width: 100%; display: table; } section article.searchpgConBox .searchpgList .item .boxBd ul li .hd:after { content: ""; display: table; clear: both; } section article.searchpgConBox .searchpgList .item .boxBd ul li { /*float: left;*/ display: table-cell; *display: inline; zoom: 1; vertical-align: top; width: 32%; padding: 0 1.5% 0 0; } section article.searchpgConBox .searchpgList .item .boxBd ul li:last-child { width: 33%; padding: 0; } section article.searchpgConBox .searchpgList.companies .item .boxFt { width: 100%; display: table; } section article.searchpgConBox .searchpgList.companies .msgbox, section article.searchpgConBox .searchpgList.companies .googleMap { margin: 0; display: table-cell; *display: inline; zoom: 1; vertical-align: bottom; } section article.searchpgConBox .searchpgList.companies .msgbox { width: 52%; padding: 0 1% 0 0; } section article.searchpgConBox .searchpgList.companies .item .boxBd ul li, section article.searchpgConBox .searchpgList.companies .item .boxBd ul li:last-child { width: 49%; margin: 0 1% 0 0; } section article.searchpgConBox .searchpgList .item .boxBd ul li p { padding: 0 5px; line-height: 24px; } section article.searchpgConBox .searchpgList .item .boxBd ul li .hd { border-bottom: 1px #c3c3c3 solid; margin: 0 0 10px 0; } section article.searchpgConBox .searchpgList .item .boxBd ul li .hd span { float: left; padding: 2px 10px; color: #fff; background: #000; } /** result no find **/ section article.searchpgConBox_notFind .searchpgList .item.stopSell .boxHd { border-bottom: 1px solid #c3c3c3; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searResult { padding: 15px 0; display: block; font-size: 13px; color: #000; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searResult span { display: inline; font-size: 22px; color: #000; } section article.searchpgConBox_notFind .searchpgList .item.stopSell { border: none; } section article.searchpgConBox_notFind .searchpgList .item.stopSell a { color: #000; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve { margin: 35px 0; display: flex; flex-direction: row; justify-content: space-between; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .contact { width: 65%; font-size: 13px; line-height: 1.8em; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .contact ul { padding: 4px 0 4px 20px; list-style: disc; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .underLine { text-decoration: underline; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .contact .ttl { margin-bottom: 14px; font-size: 20px; font-weight: bold; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .tip { width: 30%; font-size: 12px; line-height: 1.8em; background: #ececec; border: 1px solid #c3c3c3; padding: 12px 16px; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .tip .ttl { margin-bottom: 4px; font-size: 14px; font-weight: bold; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .tip ul { padding: 0px 0 0px 18px; list-style: disc; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .tip .info { margin-top: 20px; } section article.unitTitle .searchpgBox { width: 90%; max-width: 880px; min-height: 65px; margin: 0 auto; border-left: 1px #9f9f9f solid; vertical-align: middle; } section article.unitTitle .searchpgBox { position: relative; min-height: 80px; border-left: 0; } section article.unitTitle .searchpgBox input[type=submit] { height: 66px; padding: 0; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } section article.unitTitle .searchpgBox input[type=submit]:hover { background: #000; } section article.unitTitle .searchpgBox .buyText { width: 80%; position: absolute; left: 0; right: 200px; } section article.unitTitle .searchpgBox input[type=text] { background: #f4f4f4; border: 1px solid #c6c6c6; } section article.unitTitle .searchpgBox .buyBtn { width: 20%; position: absolute; right: 0px; width: 200px; } /* aboutus *----------------------------------------------------------------------------*/ article.aboutusBox { background: #f4f4f4; } article.aboutusBox .aboutus { width: 90%; max-width: 880px; margin: 0 auto; padding: 20px 0 80px 0; } article.aboutusBox .aboutus h3 { padding: 30px 0; margin: 0 0 40px 0; font-size: 27px; font-weight: 400; line-height: 30px; text-align: center; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } article.aboutusBox .aboutus p { line-height: 28px; font-weight: 200; } /* termsofuse *----------------------------------------------------------------------------*/ article.provisionBox { background: #f4f4f4; } article.provisionBox .provision { width: 90%; max-width: 880px; margin: 0 auto; padding: 20px 0 100px 0; } article.provisionBox .provision h2 { margin: 0 0 40px 0; padding: 20px 0; font-weight: 400; font-size: 15px; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } article.provisionBox .provision h3 { font-size: 20px; font-weight: 400; margin: 35px 0 15px 0; /*border-bottom: 1px #c3c3c3 solid;*/ } article.provisionBox .provision p, article.provisionBox .provision li { line-height: 28px; font-weight: 200; } article.provisionBox .provision ol { list-style: decimal outside; padding: 10px 0 0 20px; } article.provisionBox .provision ul { list-style: decimal outside; padding: 0 0 0 15px; margin: 0 0 40px 0; } article.provisionBox .provision ul.disc { list-style: disc; padding: 0 0 0 20px; } article.provisionBox .provision .desc { margin: 40px 0 0 0; padding: 10px 0 0 0; font-size: 15px; border-top: 1px #c3c3c3 solid; } article.provisionBox .provision .desc a { color: #000; text-decoration: underline; } article.provisionBox .provision table.tabBankStaging { float: left; width: 49%; margin: 0 1% 1% 0; } article.provisionBox .provision table.tabBankStaging th, article.provisionBox .provision table.tabBankStaging td { font-size: 13px; line-height: 30px; text-align: center; border: 1px #c3c3c3 solid; } article.provisionBox .provision table.tabBankStaging td { line-height: 24px; width: 25%; } article.provisionBox .provision table.tabBankStaging tr:nth-child(odd) { background: #fff; } /* termsofuse *----------------------------------------------------------------------------*/ article.processingBox { text-align: center; background: #f4f4f4; } article.processingBox img { width: 90%; margin: 0 auto; max-width: 420px; padding: 190px 0 140px 0; } /* termsofuse *----------------------------------------------------------------------------*/ article.errorBox { padding: 100px 0; text-align: center; background: #f4f4f4; } article.errorBox h2 { color: #333333; font-size: 100px; font-weight: 200; line-height: 100px; } article.errorBox h3 { display: inline-block; padding: 20px 40px; margin: 0 20px; color: #333333; font-size: 22px; font-weight: 400; line-height: 24px; background: #fff; -webkit-border-radius: 40px; border-radius: 40px; } article.errorBox ol { width: 360px; padding: 20px; margin: 0 auto 40px auto; list-style-type: decimal; } article.errorBox ol li { text-align: left; padding: 5px 0; font-size: 15px; font-weight: 400; color: #666; } article.errorBox ol li a { color: #000; text-decoration: underline; } article.errorBox .btnHome { display: inline-block; vertical-align: middle; padding: 5px 40px 5px 40px; font-size: 13px; font-weight: 400; background: #000; -webkit-border-radius: 40px; border-radius: 40px; } article.errorBox .btnHome a { color: #fff; } /* link -------------------------------------------------------- */ .main .PrdlikeBox { box-sizing: border-box; width: 180px; position: absolute; right: 0px; top: 20px; } .main .PrdlikeBox .fbBox { display: table-cell; } .main .PrdlikeBox .gBox { display: table-cell; top: 5px; position: relative; left: 5px; } /* company Service *----------------------------------------------------------------------------*/ article.companyService .scrollNav { position: fixed; top: 50%; left: 16px; z-index: 1; } article.companyService .scrollNav ul li { position: relative; list-style: none; display: block; width: 20px; height: 25px; line-height: 25px; color: #fff; text-align: center; cursor: pointer; } article.companyService .scrollNav ul li a { color: #fff; } article.companyService .scrollNav ul li:after { content: ''; position: absolute; bottom: 0; left: 0; width: 20px; height: 1px; background: #fff; } article.companyService .scrollNav ul li:first-child.active, article.companyService .scrollNav ul li:first-child:hover { background: rgba(0, 0, 0, 0); } article.companyService .scrollNav li.active, article.companyService .scrollNav ul li:hover { background: #fff; } article.companyService .scrollNav li.active a, article.companyService .scrollNav ul li:hover a { color: #4aa5bd; } article.companyService .firstBanner { position: relative; padding: 12px 28px 0px; background: -webkit-linear-gradient(#8bcee2, #5eb2c9); background: -o-linear-gradient(#8bcee2, #5eb2c9); background: -moz-linear-gradient(#8bcee2, #5eb2c9); background: linear-gradient(#8bcee2, #5eb2c9); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 2; } article.companyService .firstBG { position: relative; width: 100%; min-height: 650px; text-align: center; } article.companyService .firstBG .kvSlideBox { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; min-height: 700px; /*height: 800px;*/ } article.companyService .firstBG .kvSlideBox div img { width: 100%; min-width: 1366px; } article.companyService .firstBG .kvSlideBox .kvSlide_M { display: none; } article.companyService .firstBanner .moreLine { position: absolute; top: 22px; right: 75px; font-size: 12px; color: #195d92; z-index: 2; cursor: pointer; } article.companyService .firstBanner .moreLine span { position: relative; } article.companyService .firstBanner .moreLine span:before { content: ''; position: absolute; top: 8px; right: -104px; display: block; width: 50px; height: 3px; background: #195d92; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transition: 150ms ease-in-out; -moz-transition: 150ms ease-in-out; -o-transition: 150ms ease-in-out; -ms-transition: 150ms ease-in-out; transition: 150ms ease-in-out; } article.companyService .firstBanner .moreLine:hover span:before { width: 70px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } article.companyService .firstBanner .title { position: absolute; top: 50%; margin-left: -370px; left: 50%; width: 740px; font-size: 80px; line-height: 50px; color: #fff; z-index: 2; } article.companyService .firstBanner .title span.water { font-size: 24px; line-height: 24px; letter-spacing: 20px; /* border-bottom: 1px solid #fff; */ display: inline-block; padding-left: 3px; padding-right: 3px; } article.companyService .firstBanner .title span.water:after { content: ""; border-bottom: 1px solid #fff; display: block; height: 1px; width: 100%; margin-top: 12px; margin-left: -10px; } article.companyService .firstBanner .title span.subTitle { margin-top: 12px; font-size: 18px; line-height: 24px; letter-spacing: 3px; display: block; margin-right: 10px; } /* article.companyService .firstBanner .subTitle { position: absolute; bottom: 5%; left: 50%; width: 224px; margin-left: -112px; font-size: 18px; line-height: 30px; color: #fff; z-index: 2; } */ article.scienceKv .scrollDown, article.companyService .firstBanner .scrollDown { position: absolute; bottom: 2%; margin-bottom: 10px; left: 50%; margin-left: -22px; text-align: center; z-index: 9; } article.scienceKv .scrollDown>span, article.companyService .firstBanner .scrollDown>span { display: block; color: #fff; font-size: 12px; line-height: 20px; font-weight: 200; } article.scienceKv .scrollDown .mouse, article.companyService .firstBanner .scrollDown .mouse { position: relative; width: 26px; height: 50px; margin: 0 auto; border-radius: 30px; border: 1px solid #fff; } article.scienceKv .scrollDown .mouse span, article.companyService .firstBanner .scrollDown .mouse span { display: block; width: 2px; height: 8px; position: absolute; top: 23%; left: 50%; margin-left: -1px; background: #fff; transform: translateY(0px); animation: scrollLine 1500ms linear infinite; -moz-animation: scrollLine 1500ms linear infinite; /* Firefox */ -webkit-animation: scrollLine 1500ms linear infinite; /* Safari 和 Chrome */ -o-animation: scrollLine 1500ms linear infinite; /* Opera */ } article.scienceKv .scrollDown .scrollTxt, article.companyService .firstBanner .scrollDown .scrollTxt { margin-top: 10px; } @keyframes scrollLine { 0% { transform: translateY(0); } 100% { transform: translateY(190%); } } /* two */ article.companyService .secondPlanning { background: -webkit-linear-gradient(#5eb2c9, #3c98b2); background: -o-linear-gradient(#5eb2c9, #3c98b2); background: -moz-linear-gradient(#5eb2c9, #3c98b2); background: linear-gradient(#5eb2c9, #3c98b2); } article.companyService .secondPlanning .sectionWrap { position: relative; padding: 10% 5.5% 6% 11%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.companyService .secondPlanning .sectionWrap .content { position: relative; margin-left: 10%; padding-bottom: 56%; } article.companyService .secondPlanning .sectionWrap .content .part1 { position: absolute; width: 100%; padding-bottom: 56%; background: url(../Content/images/service/compService_plan.jpg?v20170216) no-repeat; background-size: cover; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); z-index: 1; /* -webkit-transition: all 600ms cubic-bezier(0,.78,1,1); -moz-transition: all 600ms cubic-bezier(0,.78,1,1); transition: all 600ms cubic-bezier(0,.78,1,1); */ } article.companyService .secondPlanning .sectionWrap .content .part2 { position: absolute; width: 100%; padding-bottom: 56%; background: url(../Content/images/service/compService_plan2.jpg?v20170216) no-repeat; background-size: cover; /* -webkit-transform: translateX(110%); -moz-transform: translateX(110%); transform: translateX(110%); -webkit-transition: all 600ms cubic-bezier(0,.78,1,1); -moz-transition: all 600ms cubic-bezier(0,.78,1,1); transition: all 600ms cubic-bezier(0,.78,1,1); */ } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt { /* -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); */ -webkit-transform: translateY(102%); -moz-transform: translateY(102%); transform: translateY(102%); position: absolute; top: 0px; bottom: -50px; right: 0; max-width: 350px; background: #fff; z-index: 2; /* -webkit-transition: all 600ms cubic-bezier(0,.78,1,1) 500ms; -moz-transition: all 600ms cubic-bezier(0,.78,1,1) 500ms; transition: all 600ms cubic-bezier(0,.78,1,1) 500ms;*/ } article.companyService .secondPlanning .sectionWrap .content .sliderBox_M, article.companyService .thirdManagement .sectionWrap .content .sliderBox_M { display: none; } article.companyService .secondPlanning .content .part2 .txtWrap { position: relative; padding: 23% 15%; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.companyService .secondPlanning .sectionWrap .content .part2 .focusLine { position: absolute; top: 16px; left: 44px; font-size: 12px; color: #195d92; z-index: 2; } article.companyService .sectionWrap .content .part2 .focusLine span { position: relative; } article.companyService .secondPlanning .sectionWrap .content .part2 .focusLine span:before { content: ''; position: absolute; top: 7px; left: -112px; display: block; width: 100px; height: 3px; background: #195d92; } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt .txtTitle { margin-bottom: 20px; font-size: 22px; line-height: 28px; } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt .txtBox { font-size: 13px; line-height: 23px; } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt .paragraph { margin-bottom: 20%; } article.companyService .secondPlanning .sectionWrap .content .part1 img { width: 100%; } article.companyService .headlineBox { position: absolute; z-index: 4; margin-top: 11%; } article.companyService .headlineBox .series { position: absolute; font-size: 38px; line-height: 50px; width: 40px; height: 45px; color: #fff; padding: 4px 0; text-align: center; } article.companyService .headlineBox .series:before { position: absolute; content: ''; top: 0; left: 0; display: block; width: 38px; height: 52px; border: 1px solid #fff; } article.companyService .headlineBox .series .txt { display: block; font-size: 12px; line-height: 28px; } article.companyService .headlineBox .headline { margin-top: 56%; font-size: 60px; font-weight: 300; color: #fff; } article.companyService .headlineBox .headline div:first-child { margin-left: -5px; } article.companyService .headlineBox .headline:after { position: absolute; content: ''; left: 0; bottom: -14px; width: 234px; height: 2px; background: #fff; } article.companyService .headlineBox .headline .subtxt { display: block; padding-top: 33px; font-size: 30px; line-height: 36px; } /* three */ article.companyService .thirdManagement { background: -webkit-linear-gradient(#3c98b2, #2a7394); background: -o-linear-gradient(#3c98b2, #2a7394); background: -moz-linear-gradient(#3c98b2, #2a7394); background: linear-gradient(#3c98b2, #2a7394); } article.companyService .thirdManagement .sectionWrap { position: relative; padding: 10% 5.5% 6% 11%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.companyService .thirdManagement .sectionWrap .content { position: relative; margin-left: 10%; padding-bottom: 56%; } article.companyService .thirdManagement .sectionWrap .content .part1 { position: absolute; width: 100%; padding-bottom: 56%; background: url(../Content/images/service/compService_management2.jpg?v20170216) no-repeat; background-size: cover; z-index: 1; } article.companyService .thirdManagement .sectionWrap .content .part2 { position: absolute; width: 100%; padding-bottom: 56%; background: url(../Content/images/service/compService_management.jpg?v20170216) no-repeat; background-size: cover; /* -webkit-transform: translateX(110%); -moz-transform: translateX(110%); transform: translateX(110%); */ /* -webkit-transition: all 600ms cubic-bezier(0,.78,1,1); -moz-transition: all 600ms cubic-bezier(0,.78,1,1); transition: all 600ms cubic-bezier(0,.78,1,1); */ } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt { position: absolute; top: 46%; left: 162px; right: -80px; bottom: 15%; background: #fff; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } article.companyService .thirdManagement .content .part2 .txtWrap { position: relative; width: 100%; height: 100%; padding: 5% 6% 5% 10%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt .txtTitle { margin-bottom: 16px; font-size: 22px; line-height: 28px; } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt .txtBox { font-size: 13px; line-height: 24px; } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt .paragraph { display: inline-block; width: 29%; margin-right: 5%; vertical-align: top; } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt .paragraph:last-child { margin-right: 0; } article.companyService .thirdManagement .sectionWrap .content .part2 .focusLine { position: absolute; top: 14px; left: 60px; font-size: 12px; color: #195d92; z-index: 2; } article.companyService .thirdManagement .sectionWrap .content .part2 .focusLine span:before { content: ''; position: absolute; top: 7px; left: -115px; display: block; width: 100px; height: 3px; background: #195d92; } article.companyService .thirdManagement .sectionWrap .content .part1 img { width: 100%; } article.companyService .thirdManagement .headlineBox { position: absolute; margin-top: 21%; } /* four */ article.companyService .fourSolution { background: -webkit-linear-gradient(#2a7394, #23537b); background: -o-linear-gradient(#2a7394, #23537b); background: -moz-linear-gradient(#2a7394, #23537b); background: linear-gradient(#2a7394, #23537b); } article.companyService .fourSolution .sectionWrap { position: relative; padding: 10% 2% 6% 11%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.companyService .fourSolution .content { /*display: table;*/ width: 100%; /*max-width: 1305px;*/ margin: 0 auto 0 -5%; /*background: #fff;*/ } article.companyService .fourSolution .content .contentBox { position: relative; } article.companyService .fourSolution .content .contentBox .boxLeft { position: absolute; top: 0; bottom: 0; right: 55%; left: 0; } article.companyService .fourSolution .content .contentBox .boxLeft .imgBG { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #87cbdf url(../Content/images/service/compService_solution_L.jpg?v20170216) no-repeat; background-size: cover; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag { position: absolute; bottom: 5%; left: 9%; z-index: 9; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag ul li { display: block; list-style: none; margin-bottom: 36px; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag ul li a { font-size: 16px; color: #fff; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag ul li.ui-tabs-active a { border-bottom: 1px solid #fff; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag ul li.ui-tabs-active span.squar:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -14px; width: 26px; height: 26px; border: 1px solid #33acd0; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag ul li span.squar { position: relative; display: inline-block; margin-right: 28px; width: 6px; height: 6px; background: #fff; vertical-align: middle; } article.companyService .fourSolution .content .contentBox .boxRight { position: relative; width: 55%; float: right; } article.companyService .fourSolution .content .contentBox .boxRight #tabs-1:before, article.companyService .fourSolution .content .contentBox .boxRight #tabs-2:before, article.companyService .fourSolution .content .contentBox .boxRight #tabs-1:after, article.companyService .fourSolution .content .contentBox .boxRight #tabs-2:after { content: ''; display: table; clear: both; } article.companyService .fourSolution .content .contentBox .boxRight .productShow { position: absolute; top: 28%; right: 95%; max-width: 400px; height: 450px; width: 100%; background: #33acd0; z-index: 3; } article.companyService .fourSolution .content .contentBox .boxRight .productShow .box .productImg { position: absolute; right: -66px; top: 26px; max-width: 380px; transform: translateY(-30px); transition: all 400ms cubic-bezier(.02, .02, .4, 1) 200ms; } article.companyService .fourSolution .content .contentBox .boxRight .productShow .box .productImg.jumpDown { transform: translateY(0); } /* article.companyService .fourSolution .content .contentBox #tabs-2 .productShow .box .productImg { width: 352px; right: -28%; } */ article.companyService .fourSolution .content .contentBox .boxRight .productShow .box .productImg img { width: 100% } article.companyService .fourSolution .content .contentBox .boxRight .productShow .name { position: absolute; left: 25px; bottom: 25px; font-size: 15px; color: #fff; font-weight: 200; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox .slide-count-wrap, article.companyService .fourSolution .content .contentBox .boxRight .slideBox .slide-count-wrap2 { position: absolute; bottom: 14px; right: 14px; font-size: 16px; color: #fff; background: #f0f; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt { padding: 8% 10% 8% 18%; background-color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow-y: auto; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt.zindex4 { z-index: 4; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt h4 { font-size: 15px; line-height: 20px; padding: 5px 0; font-weight: 200; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt .contentTxt { /*margin-top: 34px;*/ margin-top: -8px; font-size: 13px; line-height: 24px; font-weight: normal; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt .contentTxt span { display: block; color: #666; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt .contentTxt span strong { font-size: 15px; color: #000; display: block; margin-top: 10px; } article.companyService .fourSolution .content .contentBox img { width: 100%; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt span { display: inline-block; min-width: 135px; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt span.txtB { padding-right: 5px; color: #1c679a; display: table-cell; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt span.contentB { display: table-cell; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox_M_wrap { position: relative; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox_M_wrap .moreLine { display: none; position: absolute; top: -60px; right: 28px; z-index: 3; font-size: 12px; color: #195d92; cursor: pointer; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox_M_wrap .moreLine span { position: relative; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox_M_wrap .moreLine span:before { content: ''; position: absolute; top: 25px; right: -17px; display: block; width: 3px; height: 36px; background: #195d92; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox_M, article.companyService .fourSolution .content .contentBox .boxRight .slideBox2_M { display: none; } article.companyService .firstBanner button.slick-next { position: absolute; background: none; z-index: 3; top: 31px; right: 81px; } article.companyService .firstBanner button.slick-prev { position: absolute; background: none; z-index: 1; } article.companyService .slick-dots { position: absolute; bottom: -20px; left: 80%; display: block; width: 100%; padding: 0; list-style: none; text-align: left; } article.companyService .slick-dots li button::before { font-size: 38px; line-height: 28px; position: absolute; top: 0px; left: 0px; width: 8px; height: 8px; content: ""; text-align: center; opacity: 1; background: #ccc; -webkit-font-smoothing: antialiased; } article.companyService .slick-dots li.slick-active button::before { background: #5ab0c7 } article.companyService .slick-dots li { position: relative; display: inline-block; width: 8px; height: 8px; margin: 0 5px; padding: 0; cursor: pointer; vertical-align: middle; } article.companyService .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 8px; height: 8px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } article.companyService .slideBox .slick-dots, article.companyService .slideBox2 .slick-dots, article.companyService .slideBox_M .slick-dots, article.companyService .slideBox2_M .slick-dots { position: absolute; bottom: 6px; left: 122px; display: block; width: 100%; padding: 0; list-style: none; text-align: left; } article.companyService .slideBox .slick-dots li button::before, article.companyService .slideBox2 .slick-dots li button::before, article.companyService .slideBox_M .slick-dots li button::before, article.companyService .slideBox2_M .slick-dots li button::before { font-size: 38px; line-height: 28px; position: absolute; top: 0px; left: 0px; width: 8px; height: 8px; content: ""; text-align: center; opacity: 1; background: #ccc; -webkit-font-smoothing: antialiased; } article.companyService .slideBox .slick-dots li.slick-active button::before, article.companyService .slideBox2 .slick-dots li.slick-active button::before, article.companyService .slideBox_M .slick-dots li.slick-active button::before, article.companyService .slideBox2_M .slick-dots li.slick-active button::before { background: #5ab0c7 } article.companyService .slideBox .slick-dots li, article.companyService .slideBox2 .slick-dots li, article.companyService .slideBox_M .slick-dots li, article.companyService .slideBox2_M .slick-dots li { position: relative; display: inline-block; width: 8px; height: 8px; margin: 0 5px; padding: 0; cursor: pointer; vertical-align: middle; } article.companyService .slideBox .slick-dots li button, article.companyService .slideBox2 .slick-dots li button, article.companyService .slideBox_M .slick-dots li button, article.companyService .slideBox2_M .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 8px; height: 8px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } article.companyService.contactBox { position: relative; z-index: 2; } /** * * filterTableBox * **/ article.filterTableBox .tabforProHd { padding: 40px 0; margin: 0 0 60px 0; background: #f4f4f4; } article.filterTableBox .tabforProHd .slickHd { position: relative; max-width: 1200px; padding: 20px 50px; margin: 0 auto; } article.filterTableBox .tabforProHd .slickHd:before, article.filterTableBox .tabforProHd .slickHd:after { position: absolute; top: 0; bottom: 0; width: 80px; content: ""; z-index: 1; } article.filterTableBox .tabforProHd .slickHd:before { left: 0; background: url(../Content/images/icon/bg_tabforProHd_L.png) repeat-y; } article.filterTableBox .tabforProHd .slickHd:after { right: 0; background: url(../Content/images/icon/bg_tabforProHd_R.png) repeat-y; } article.filterTableBox .tabforProHd .slickHd .title { position: relative; /*display: inline-block;*/ padding: 5px 0; text-align: center; color: #aaa; } article.filterTableBox .tabforProHd .slickHd .title:hover { color: #666; } /* article.filterTableBox .tabforProHd .slickHd .slick-center .title { color: #000; } */ article.filterTableBox .tabforProHd .slickHd .slick-center.slick-current .title { color: #000; } article.filterTableBox .tabforProHd .slickHd .title>a { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } article.filterTableBox .tabforProHd .slickHd .title .ser, article.filterTableBox .tabforProHd .slickHd .title .sercon { display: table-cell; vertical-align: middle; } article.filterTableBox .tabforProHd .slickHd .title .ser { padding: 0 4px 0 20px; font-size: 40px; line-height: 1em; font-weight: 100; white-space: nowrap; } article.filterTableBox .tabforProHd .slickHd .title .en { font-size: 18px; line-height: 18px; font-weight: 300; text-align: left; } article.filterTableBox .tabforProHd .slickHd .title .ch { font-size: 15px; line-height: 15px; font-weight: 200; text-align: left; } article.filterTableBox .tabforProHd .slickHd .slickLi { display: flex; align-items: center; justify-content: center; } article.filterTableBox .tabforProHd .slickHd .slick-track { margin: 0 auto; } article.filterTableBox .tabforProHd .slickHd .slick-prev, article.filterTableBox .tabforProHd .slickHd .slick-next { width: 30px; height: 30px; margin-top: -15px; z-index: 9; } article.filterTableBox .tabforProHd .slickHd .slick-prev { left: 0; background: url(../Content/images/icon/icon_productArrow_L.png) no-repeat center; } article.filterTableBox .tabforProHd .slickHd .slick-next { right: 0; background: url(../Content/images/icon/icon_productArrow_R.png) no-repeat center; } /** * * filterTableBox * **/ article.filterTableBox .tabforProBd { margin: 0 auto; max-width: 1040px; padding: 0 20px; width: 90%; } article.filterTableBox .tabforProBd .tabsBoxOh { border-bottom: 1px solid #9f9f9f; margin: 0 0 20px; max-height: 300px; overflow: hidden; position: relative; } article.filterTableBox .tabforProBd .tabsBoxOh.open { max-height: 30000px; -webkit-transition: all 1.5s; transition: all 1.5s; } article.filterTableBox .tabforProBd .tabsBoxOh .tabsBoxMask { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; margin: 0; padding: 0; background: url(../Content/images/icon/bg_filterTableBox.png) repeat-x bottom; z-index: 1; } article.filterTableBox .tabforProBd .tabsBoxOh.open .tabsBoxMask { bottom: -160px; -webkit-transition: all .5s; transition: all .5s; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreBd { position: relative; padding: 0 0 0 120px; margin: 0; min-height: 80px; /*border-left: 1px solid #105eae;*/ display: flex; align-items: center; justify-content: center; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreBd.max { margin: 0; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreBd:before { position: absolute; top: 10px; bottom: 10px; left: 120px; content: ""; width: 1px; margin: 0 0 0 0; background-color: #105eae; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreBd:after { position: absolute; top: 50%; left: 115px; content: ""; height: 10px; width: 10px; margin: -5px 0 0 0; background-color: #105eae; -webkit-border-radius: 50%; border-radius: 50%; } article.filterTableBox .tabforProBd .tabsBoxOh .numeral { position: absolute; top: 50%; left: 0; width: 100px; height: 100px; padding: 0 0 0 6px; margin: -50px 0 0 0; line-height: 100px; text-align: center; color: #105eae; border: 2px solid #105eae; font-size: 40px; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; } article.filterTableBox .tabforProBd .tabsBoxOh.forPVC .numeral { font-size: 24px; line-height: 24px; padding: 36px 0 0; } article.filterTableBox .tabforProBd .tabsBoxOh .numeral:before { position: absolute; top: 50%; right: -20px; content: ""; height: 2px; width: 20px; margin: -1px 0 0 0; background-color: #105eae; } article.filterTableBox .tabforProBd .tabsBoxOh .numeral span { font-size: 14px; } article.filterTableBox .tabforProBd .tabsBoxOh .numeral span.arrow { position: relative; top: -4px; font-size: 16px; } article.filterTableBox .tabforProBd .tabsBoxOh .numeral .title { position: absolute; top: 15px; left: 0; right: 0; line-height: 20px; text-align: center; color: #9f9f9f; font-size: 12px; display: none; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStore { border-collapse: separate; border-spacing: 10px; font-size: 13px; width: 100%; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStore th, article.filterTableBox .tabforProBd .tabsBoxOh .tabStore td { vertical-align: middle; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStore td.typesLine { position: relative; width: 50%; padding: 0 20px 0 0; text-align: right; color: #105eae; border-right: 1px solid #9f9f9f; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStore td.typesLine:before { position: absolute; top: 50%; right: 0; content: ""; height: 1px; width: 15px; background-color: #9f9f9f; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStore td.typesNl { padding: 0 0 0 0; text-align: right; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreHd { width: 100%; margin: 0 0 20px 0; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreHd th, article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreHd td { color: #9f9f9f; padding: 5px 0; border-bottom: 1px solid #9f9f9f; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreHd th { padding: 5px 5px; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreHd th:nth-child(1) { width: 120px; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreHd th:nth-child(2) { width: 43%; text-align: right; padding: 5px 15px 5px 5px; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreHd th:nth-child(3) { text-align: left; padding: 5px 5px 5px 15px; } article.filterTableBox .tabforProBd .btnMore { position: relative; width: 134px; height: 30px; margin: 0 auto; } article.filterTableBox .tabforProBd .btnMore a { position: absolute; top: 0; left: 50%; display: block; margin: 0 0 0 -67px; width: 135px; height: 30px; line-height: 30px; text-align: center; font-size: 13px; color: #000; background: #e9e9e9; -webkit-border-radius: 40px; border-radius: 40px; } article.filterTableBox .tabforProBd .btnMore a.close { display: none; } article.filterTableBox .tabforProBd .btnMore a img { display: inline-block; width: 12px; margin: 0 0 0 3px; } article.filterTableBox .tabforProBd .slickBd.slick-slider { margin-bottom: 30px; } article.filterTableBox .tabforProBd .inspect-box { font-size: 12px; color: #7a7a7a; text-align: right } /*---------------------------------------- 圖表 -----------------------------------------*/ article.filterTableBox .tabforProHd { /* padding: 40px 0; margin: 0 0 60px; */ } article.filterTableBox .tabforProHd .chart-Title { margin: 0 0 10px; font-size: 36px; line-height: 1.2em; color: #000; text-align: center; } article.filterTableBox .chart-Subtitle { padding: 0 0 30px; margin: 0 0 30px; font-size: 22px; line-height: 1.2em; color: #666; text-align: center; border-bottom: 1px #eee solid; } .jconfirm article.filterTableBox .chart-Subtitle { font-size: 15px; padding: 0; margin: 0; border-bottom: 0; } .chart-display { text-align: center; } .chart-display .chart-item { display: block; float: left; width: calc(50% - 20px); margin-bottom: 30px; } .chart-display .chart-item img { max-width: 500px; } .chart-display .chart-item.fullWidth img { max-width: 100%; } .chart-display .chart-item:nth-child(even) { float: right; } .chart-display :only-child { width: 100%; margin: 0 auto 30px; float: none; } .chart-display :only-child img { max-width: 500px; margin: 0 auto; } .chart-display.max :only-child img { max-width: 500px; } article.filterTableBox .tabforProBd { margin: 20px auto 56px; } /* lightbox */ article.filterTableBox .lightbox-chart-section .tabforProHd.bg-White { background: #fff } article.filterTableBox .lightbox-chart-section .tabforProHd { padding: 20px 0; margin: 0 0; } /** * * purchaseDetailsBox * **/ .purchaseDetailsBox { position: relative; background: #f4f4f4; } .purchaseDetailsBox .purchaseBox { width: 90%; max-width: 880px; margin: 0 auto; padding: 0 0 100px 0; } /* .purchaseDetailsBox .purchaseBox > h1 { margin: 20px 0 0 0; } */ .purchaseDetailsBox .purchaseBox .titleSub { text-align: right; font-size: 13px; line-height: 1.4em; /* color: #999; */ color: #483e34; } .purchaseDetailsBox .purchaseBox .titleSub a { color: #65a6e0; text-decoration: underline; } .purchaseDetailsBox .purchaseBox .box { display: table; width: 100%; padding: 15px 0; } .purchaseDetailsBox .purchaseBox .box label, .purchaseDetailsBox .purchaseBox .box .con { display: table-cell; vertical-align: middle; } .purchaseDetailsBox .purchaseBox .box label { width: 120px; font-size: 18px; line-height: 1.4em; color: #483e34; } .purchaseDetailsBox .purchaseBox span.text { position: relative; top: -8px; display: block; font-size: 14px; line-height: 1.4em; color: #999; margin: 0 0 0 120px; } .purchaseDetailsBox .purchaseBox span.text>span { display: block; } .purchaseDetailsBox .purchaseBox span.error { position: relative; top: -8px; padding: 0 0 0 20px; margin: 0 0 0 120px; font-size: 14px; line-height: 1.4em; color: #d92e00; background: url(../Content/images/icon/icon_error.png?v20170216) no-repeat left top; } .purchaseDetailsBox .purchaseBox span.text+span.error { top: -4px; } .purchaseDetailsBox .purchaseBox .btnBox { position: relative; margin: 40px 40px; min-height: 62px; } .purchaseDetailsBox .purchaseBox .btnBox .btnBoxLeft { position: absolute; top: 0; left: 0; right: 51%; } .purchaseDetailsBox .purchaseBox .btnBox .btnBoxRight { position: absolute; top: 0; left: 51%; right: 0; } .purchaseDetailsBox .purchaseBox .btnBox input { width: 100%; max-width: inherit; max-width: initial; } .purchaseDetailsBox .purchaseBox .box h2 { margin: 0 0 40px 0; padding: 40px 0; font-weight: 400; font-size: 15px; line-height: 1.4em; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; text-align: center; } .purchaseDetailsBox .purchaseBox .step2 .btnBox { margin: 40px 0 0 0; } .purchaseDetailsBox .purchaseBox .step2 span.text { text-align: center; margin: 0; } /** * * purviveBox * **/ article.purviveBox { position: relative; padding: 0 0 0 0; /*min-height: 660px;*/ background: #e9e9e9 url(../Content/images/purvive/spotlight.png) no-repeat 50% 0; /*overflow: hidden;*/ } article.purviveBox .kvContainer { position: relative; height: calc(100vh - 60px - 91px + 120px); min-height: 760px; } /* article.purviveBox.am_02 { height: auto !important; }*/ article.purviveBox .maxTitle { position: relative; top: calc(50% - 140px); -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); width: 80%; max-width: 783px; margin: 0 auto 60px auto; -webkit-transition: top 1.5s; transition: top 1.5s; } article.purviveBox.am_01 .maxTitle { top: calc(50% - 240px); -webkit-transition: top 1.5s; transition: top 1.5s; } /* article.purviveBox.am_02 .maxTitle, article.purviveBox.am_02 .subTitle, article.purviveBox.am_01.am_02 .purviveMore { position: relative; top: auto !important; left: auto; right: auto; margin: 0 auto 80px auto; -webkit-transition: all .5s; transition: all .5s; }*/ article.purviveBox .maxTitle span { position: relative; float: left; padding-bottom: 29%; } article.purviveBox .maxTitle span:nth-child(1) { width: 13.8%; } article.purviveBox .maxTitle span:nth-child(2) { width: 15%; } article.purviveBox .maxTitle span:nth-child(3) { width: 15.2%; } article.purviveBox .maxTitle span:nth-child(4) { width: 16.4%; } article.purviveBox .maxTitle span:nth-child(5) { width: 4.6%; } article.purviveBox .maxTitle span:nth-child(6) { width: 17%; } article.purviveBox .maxTitle span:nth-child(7) { width: 14%; } article.purviveBox .maxTitle span:nth-child(8) { width: 4%; } article.purviveBox .maxTitle span img { max-width: 100%; position: absolute; top: 0; left: 0; } article.purviveBox .maxTitle span img.odd { display: none; } article.purviveBox .subTitle { position: absolute; top: calc(50% + 120px); left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; max-width: 470px; text-align: center; -webkit-transition: opacity 1.5s, top 1.5s; transition: opacity 1.5s, top 1.5s; } article.purviveBox.am_01 .subTitle { top: calc(50% + 20px); -webkit-transition: top 1.5s; transition: top 1.5s; } article.purviveBox .subTitle .ttl { margin: 0 0 20px 0; font-size: 28px; font-weight: normal; line-height: 32px; color: #000000; vertical-align: middle; } article.purviveBox .subTitle .ttl img { width: 100%; max-width: 88px; } article.purviveBox .subTitle p { position: relative; top: 20px; opacity: 0; -webkit-transition: opacity 1.5s, top 1.5s; transition: opacity 1.5s, top 1.5s; } article.purviveBox.am_01 .subTitle p { top: 0; opacity: 1; -webkit-transition: opacity 1.5s, top 1.5s; transition: opacity 1.5s, top 1.5s; } article.purviveBox .subTitle p span { font-size: 13px; line-height: 28px; color: #464646; display: inline-block; } article.purviveBox .purviveMore { position: absolute; left: 50%; bottom: 6%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); width: 80%; max-width: 450px; margin: 0 auto 60px auto; text-align: center; opacity: 0; -webkit-transition: opacity 1.5s, bottom 1.5s; transition: opacity 1.5s, bottom 1.5s; } article.purviveBox.am_01 .purviveMore { bottom: 12%; opacity: 1; -webkit-transition: opacity 1.5s, bottom 1.5s; transition: opacity 1.5s, bottom 1.5s; -webkit-transition-delay: 1s; transition-delay: 1s; } article.purviveBox .purviveMore .title { max-width: 380px; margin: 0 auto; } article.purviveBox .purviveMore .icon { max-width: 198px; margin: -20px auto 0 auto; } article.purviveBox .fittingBoxTitle { position: relative; padding-bottom: 100px; } article.purviveBox .purviveMore .title img, article.purviveBox .purviveMore .icon img, article.purviveBox .fittingBox .fitting img, article.purviveBox .purviveLineBox .main img { max-width: 100%; } article.purviveBox .purviveMore a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: none; } article.purviveBox .purviveMore a.open { display: block; } article.purviveBox .purviveMore span.txt { position: relative; display: inline-block; padding: 10px 0 0 0; font-size: 15px; line-height: 30px; color: #000; } article.purviveBox .purviveMore span.txt:after { position: absolute; right: 0; left: 0; top: 40px; content: ''; display: block; width: 100%; height: 1px; background: #000; } article.purviveBox .purviveMore span>.arw { position: absolute; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); content: ""; display: block; margin: 0 auto; height: 13px; width: 1px; background: #000; -webkit-transition: height .2s ease; transition: height .2s ease; } article.purviveBox .purviveMore span>.arw:after { position: absolute; bottom: 0; left: 0%; content: ""; height: 9px; width: 1px; display: block; background: #000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } article.purviveBox .purviveMore span>.arw:before { position: absolute; bottom: 0px; left: 0%; content: ""; height: 9px; width: 1px; display: block; background: #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } article.purviveBox .purviveMore.on span>.arw { height: 23px; } article.purviveBox .fittingBox { position: relative; top: 400px; width: 90%; max-width: 1100px; margin: 40px auto 0px auto; padding-bottom: 60px; text-align: center; -webkit-transition: top 1.5s; transition: top 1.5s; } article.purviveBox .fittingBox.fittingBox2 { margin: 120px auto 0px auto; } article.purviveBox.am_01 .fittingBox { top: 0; -webkit-transition: top 1.5s; transition: top 1.5s; } article.purviveBox .fittingBox .title { font-size: 28px; line-height: 32px; color: #000; margin: 0 0 20px 0; padding: 0 40px; display: none; } article.purviveBox .fittingBox .title img { width: 100%; max-width: 88px; } article.purviveBox .fittingBox .title img.pro { max-width: 130px; } article.purviveBox .fittingBox .fitting img { width: 100%; } article.purviveBox .fittingBox .fitting { position: relative; /*top: -40px;*/ -webkit-transition: top 1s; transition: top 1s; } article.purviveBox.am_02 .fittingBox .fitting { top: 0; -webkit-transition: top 1s; transition: top 1s; } article.purviveBox .fittingBox .fitting a { position: absolute; width: 50px; height: 50px; background: url(../Content/images/purvive/icon_open.png) no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; display: block; opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; z-index: 2; } article.purviveBox.am_02 .fittingBox .fitting a { opacity: 1; -webkit-transition: opacity 1s; transition: opacity 1s; } article.purviveBox.am_02 .fittingBox .fitting a.open { z-index: 3; } article.purviveBox .fittingBox .fitting a:hover { background: url(../Content/images/purvive/icon_open_hover.png) no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; } article.purviveBox .fittingBox .fitting a.fitting_01 { top: 20%; left: 4%; transition-delay: 1.2s; } article.purviveBox .fittingBox .fitting a.fitting_02 { top: 5%; left: 24%; transition-delay: 1.4s; } article.purviveBox .fittingBox .fitting a.fitting_03 { top: 18%; left: 37.6%; transition-delay: 1.6s; } article.purviveBox .fittingBox .fitting a.fitting_04 { top: 43%; left: 39%; transition-delay: 1.7s; } article.purviveBox .fittingBox .fitting a.fitting_05 { top: 70%; left: 39%; transition-delay: 1.5s; } article.purviveBox .fittingBox .fitting a.fitting_06 { top: 20%; left: 52%; transition-delay: 1.3s; } article.purviveBox .fittingBox .fitting a.fitting_07 { top: 45%; left: 51.5%; transition-delay: 1.8s; } article.purviveBox .fittingBox .fitting a.fitting_08 { top: 8%; left: 87%; transition-delay: 1.4s; } article.purviveBox .fittingBox.fittingBox2 .fitting a.fitting_01 { top: 63%; left: 60%; } article.purviveBox .fittingBox.fittingBox2 .fitting a.fitting_02 { top: 63%; left: 12%; } article.purviveBox .fittingBox.fittingBox2 .fitting a.fitting_03 { top: 15%; left: 30%; } article.purviveBox .fittingBox .fitting a span { display: block; position: absolute; top: 55px; left: 50%; width: 180px; padding: 15px 10px; margin: 0 0 0 -90px; border: 1px #b7b7b7 solid; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.8s; transition: opacity 0.8s; z-index: 5; } article.purviveBox .fittingBox .fitting a.open span { visibility: visible; opacity: 1; -webkit-transition: opacity 0.8s; transition: opacity 0.8s; } article.purviveBox .fittingBox .fitting img.monitor { display: block; } article.purviveBox .fittingBox .fitting img.mobile { display: none; } @media only screen and (max-width : 767px) { article.purviveBox .fittingBox { width: 100%; margin-top: 0px; padding-bottom: 0; margin-bottom: 80px; } article.purviveBox .maxTitle { width: 88%; top: calc(50% - 50px); right: -6px; } article.purviveBox.am_01 .maxTitle { top: calc(50% - 180px); } article.purviveBox .purviveMore { bottom: 6%; } article.purviveBox.am_01 .purviveMore { bottom: 12%; } article.purviveBox .fittingBox .fitting img { position: relative; right: -12px; } article.purviveBox .fittingBox .fitting img.monitor { display: none; } article.purviveBox .fittingBox .fitting img.mobile { display: block; } article.purviveBox .fittingBox .fitting a, article.purviveBox .fittingBox .fitting a:hover { background: url(../Content/images/purvive/icon_open.png) no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; } article.purviveBox .fittingBox .fitting a.fitting_01 { top: 50%; left: 12%; } article.purviveBox .fittingBox .fitting a.fitting_02 { top: 36%; left: 34%; } article.purviveBox .fittingBox .fitting a.fitting_03 { top: 45%; left: 54%; } article.purviveBox .fittingBox .fitting a.fitting_04 { top: 65%; left: 54%; } article.purviveBox .fittingBox .fitting a.fitting_05 { top: 86%; left: 54%; } article.purviveBox .fittingBox .fitting a.fitting_06 { top: 42%; left: 77%; } article.purviveBox .fittingBox .fitting a.fitting_07 { top: 62%; left: 77%; } article.purviveBox .fittingBox .fitting a.fitting_08 { top: 0; left: 46%; } article.purviveBox .fittingBox.fittingBox2 { margin: 120px auto 60px auto; } article.purviveBox .fittingBox.fittingBox2 .fitting a.fitting_01 { top: 25%; left: 25%; } article.purviveBox .fittingBox.fittingBox2 .fitting a.fitting_02 { top: 3%; left: 25%; } article.purviveBox .fittingBox.fittingBox2 .fitting a.fitting_03 { top: 0; left: 66%; } } @media only screen and (max-width : 560px) { article.purviveBox .fittingBox .fitting a, article.purviveBox .fittingBox .fitting a:hover { width: 30px; height: 30px; background: url(../Content/images/purvive/icon_open.png) no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; } article.purviveBox .fittingBox .fitting a span { top: 35px; width: 160px; padding: 10px 5px; margin: 0 0 0 -80px; } article.purviveBox .fittingBox .fitting a.fitting_01 span, article.purviveBox .fittingBox .fitting a.fitting_06 span, article.purviveBox .fittingBox .fitting a.fitting_07 span { width: 100px; margin-left: -50px; } article.purviveBox .subTitle .ttl { font-size: 22px; line-height: 28px; } article.purviveBox .subTitle .ttl img { max-width: 72px; } article.purviveBox .fittingBox .title { font-size: 18px; line-height: 22px; } article.purviveBox .fittingBox .title img { max-width: 60px; } article.purviveBox .fittingBox .title img.pro { max-width: 90px; } article.purviveBox .subTitle p span { display: inline; } } /* article.purviveBox .purviveLineBox { position: relative; } article.purviveBox .purviveLineBox .main { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; z-index: 2; } article.purviveBox .purviveLineBox:after { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; content:""; background: #000; } */ /* water treatment solution *----------------------------------------------------------------------------*/ article.wts { position: relative; padding: 0px; background-color: #323232; } article.wts .fading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: rgba(0, 0, 0, 0); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(8, 8, 8, 0) 12%, rgba(36, 34, 33, 1) 51%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(8, 8, 8, 0)), color-stop(51%, rgba(36, 34, 33, 1))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(8, 8, 8, 0) 12%, rgba(36, 34, 33, 1) 51%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(8, 8, 8, 0) 12%, rgba(36, 34, 33, 1) 51%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(8, 8, 8, 0) 12%, rgba(36, 34, 33, 1) 51%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(8, 8, 8, 0) 12%, rgba(36, 34, 33, 1) 51%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#242221', GradientType=0); } article.wts .titleBox { padding-top: 42px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 3; } article.wts .layout { position: absolute; bottom: 0; left: 0; right: 0; top: 0; /* FF3.6-15 */ background: -webkit-linear-gradient(rgba(7, 7, 7, 0) 0%, rgba(7, 7, 7, 0) 70%, rgba(7, 7, 7, 0.76) 92%, rgba(7, 7, 7, 1) 99%, rgba(7, 7, 7, 1) 100%); background: -o-linear-gradient(rgba(7, 7, 7, 0) 0%, rgba(7, 7, 7, 0) 70%, rgba(7, 7, 7, 0.76) 92%, rgba(7, 7, 7, 1) 99%, rgba(7, 7, 7, 1) 100%); background: linear-gradient(rgba(7, 7, 7, 0) 0%, rgba(7, 7, 7, 0) 70%, rgba(7, 7, 7, 0.76) 92%, rgba(7, 7, 7, 1) 99%, rgba(7, 7, 7, 1) 100%); /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00070707', endColorstr='#070707', GradientType=0); /* IE6-9 */ } article.wts .titleBox .proIconBox { position: relative; height: 80px; } article.wts .titleBox .proIconBox:after { position: absolute; bottom: 0; left: 50%; margin-left: -13px; content: ''; width: 26px; height: 2px; background: #fff; } article.wts .titleBox h1 { max-width: 1070px; padding: 36px 0 34px; font-size: 48px; line-height: 54px; color: #fff; font-weight: normal; } article.wts .titleBox p { width: 400px; font-size: 13px; line-height: 26px; color: #878787; } article.wts .btn { margin: 26px auto 28px; text-align: center; font-size: 14px; color: #3b3b3b; cursor: pointer; } article.wts .btn a { padding: 8px 60px; color: #fff; font-weight: 400; background: #000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; cursor: pointer; } article.wts .imgBG-3d { position: relative; margin-top: -16%; width: 100%; padding-bottom: 100%; background: url(../Content/images/wts/evt_wts_bg_main.png) no-repeat center center; background-size: cover; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } /* article.wts .imgBG-3d.mgTop0{ margin-top: -12%; } */ article.wts .imgBG-3d .spot { opacity: 0; position: absolute; bottom: -16px; width: 33px; height: 33px; background-color: rgba(255, 255, 255, .7); border-radius: 50%; z-index: 3; cursor: pointer; } article.wts .notice { display: none; } .showSPOTS { opacity: 1 !important; } article.wts .imgBG-3d .spot:before { content: ''; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; width: 10px; height: 10px; background-color: #42b5de; border-radius: 50%; z-index: 3 } article.wts .imgBG-3d .spot:after { content: ''; position: absolute; top: 50%; left: 50%; margin: -21.5px 0 0 -21.5px; width: 43px; height: 43px; background-color: rgba(255, 255, 255, .4); border-radius: 50%; z-index: 3 } article.wts .imgBG-3d .line { width: 1px; height: 106px; background: #fff; } article.wts .imgBG-3d .proBox { width: 186px; height: 186px; border-radius: 50%; background-color: #fff; } article.wts .imgBG-3d .box { position: absolute; /*z-index: 3;*/ } article.wts .imgBG-3d .box .boxIn { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center } article.wts .imgBG-3d .box .boxIn .boxInWrap { opacity: 0; z-index: 0; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; -webkit-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } article.wts .imgBG-3d .box .boxIn .boxInWrap.showUp { opacity: 0; z-index: -1 } article.wts .imgBG-3d .box .boxIn .boxInWrap.showUp.yaRealSHOW { opacity: 1; z-index: 3 } article.wts .imgBG-3d .box .boxIn .boxInWrap.addAnimated { opacity: 1; -webkit-animation-name: bounceInV; animation-name: bounceInV; -webkit-animation-duration: 400ms; animation-duration: 400ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceInV { 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 bounceInV { 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% { -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% { -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 { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } article.wts .imgBG-3d .box_1 { bottom: 79%; left: 28%; } article.wts .imgBG-3d .box_2 { left: 17%; bottom: 70%; } article.wts .imgBG-3d .box_3 { right: 10%; bottom: 66%; } article.wts .imgBG-3d .box_4 { left: 21%; bottom: 61%; } article.wts .imgBG-3d .box_5 { left: 49%; bottom: 58%; } article.wts .imgBG-3d .box_6 { left: 9%; bottom: 46%; } article.wts .imgBG-3d .box_7 { right: 36%; bottom: 29%; } article.wts .imgBG-3d .box_8 { right: 21%; bottom: 23%; } article.wts .imgBG-3d .box_9 { right: 10%; bottom: 18%; } article.wts .notice { display: none; } .lb-probox { display: none; } article.wts .proBox { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } article.wts .proBox .img { max-width: 180px; margin-bottom: 5px; } article.wts .proBox .img img { max-width: 100%; } article.wts .proBox .ttl { font-size: 12px; line-height: 18px; font-weight: bold; color: #008ed3; } article.wts .proBox .cont { margin-bottom: 6px; font-size: 12px; line-height: 18px; font-weight: normal; color: #221815; } /****** ******* ******* table ******* ******/ article.wts article.productConBox { position: relative; z-index: 4; } article.wts h3.tabHead { font-size: 40px; line-height: 40px; font-weight: 100; text-align: center; width: 100%; } article.wts h3.tabHead span { position: relative; top: -65px; width: auto; display: inline-block; margin: 0 auto; padding: 25px 50px 0 50px; background: #fff; } article.wts .tabConBox ul { width: 100%; padding-bottom: 20px; display: flex; align-items: center; justify-content: center; } article.wts .tabConBox ul li.tabttl { padding: 0 55px; } article.wts .tabConBox ul li.tabttl:first-child { border-right: 1px #d8d8d8 solid; } article.wts .tabConBox ul li.tabttl a { text-align: center; font-size: 18px; font-weight: 100; color: #a3a3a3; height: 40px; line-height: 40px; } article.wts .tabConBox ul li.tabttl a span { font-size: 24px; color: #80c2fe; margin-right: 4px; } article.wts .tabConBox ul li.tabttl.active a { color: #000; } article.wts .tabConBox ul li.tabttl.active a span { color: #55a7f2; } article.wts .textboxWrapper { position: relative; background: #fff; min-height: 500px; } article.wts .textbox.max { position: absolute; top: 0; right: 0; left: 0; width: 100%; } article.wts .tabConBox .note { height: 30px; margin-top: -45px; padding-bottom: 15px; } article.wts .tabConBox .note p { line-height: 12px; color: #808080; font-size: 12px; padding-top: 18px; } article.wts article.productConBox .tabFilter dl dd { white-space: nowrap; overflow: hidden; } article.wts article.productConBox .tabFilter dl dd sup { line-height: 9px; font-size: 9px; margin-left: 2px; } article.wts article.productConBox .tabFilter dl dd.c-bl { color: #55a7f2; } article.wts article.productConBox .tabFilter dl dd br { display: none; } @media only screen and (max-width : 767px) { article.wts h3.tabHead { font-size: 30px; line-height: 30px; } article.wts h3.tabHead span { top: -40px; padding: 12px 30px 0 30px; } article.wts .tabConBox ul li.tabttl { padding: 0 25px; } article.wts article.productConBox .textbox+.textbox { padding: 40px 20px; } article.wts article.productConBox .tabFilter dl dd:nth-child(2) { display: flex; align-items: center; justify-content: center; height: 60px; line-height: 1.4em; white-space: initial; } article.wts article.productConBox .tabFilter dl dd br { display: block; } } /* articles *----------------------------------------------------------------------------*/ section article.articleList { padding: 45px 0 60px; background: #fff; } section article.articleList .container { max-width: 1280px; padding: 0 40px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; } section article.articleList .item { display: inline-flex; width: 46%; margin: 40px 0 60px; } section article.articleList .item .inner { width: 440px; margin: 0 auto; } section article.articleList .item .photo { position: relative; margin-bottom: 26px; height: 408px; overflow: hidden; } @media only screen and (max-width : 1280px) { section article.articleList .item .inner { width: 340px; } section article.articleList .item .photo { height: 260px; } } @media only screen and (max-width : 960px) { section article.articleList .item .inner { width: 300px; } section article.articleList .item .photo { height: 220px; } } @media only screen and (max-width : 767px) { section article.articleList .container { padding: 0 20px; } section article.articleList .item { width: 100%; margin: 20px 0 60px; } section article.articleList .item .inner { width: 100%; } section article.articleList .item .photo { height: auto; } section article.articleList .item .photo img { width: 100%; } } section article.articleList .item img { max-width: 100% } section article.articleList .topSubttl { font-size: 22px; line-height: 1.2em; color: #000; font-weight: 300; } section article.articleList .topSubttl .line { display: inline-block; width: 50px; height: 1px; background: #000; vertical-align: 30%; } section article.articleList .title { margin: 20px 0 40px; font-size: 30px; line-height: 1.333em; color: #000; font-weight: 400; } section article.articleList .cont { font-size: 15px; line-height: 1.74em; color: #666; font-weight: 400; } section article.articleList .font15 { font-size: 15px; line-height: 1.74em; } section article.articleList .button { position: relative; width: 254px; margin: 42px auto 0; height: 52px; text-align: center; cursor: pointer; } section article.articleList .button a { display: block; font-size: 18px; line-height: 52px; color: #fff; } section article.articleList .button .icn { position: absolute; right: 11px; top: 10px; width: 30px; height: 30px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } section article.articleList .button .icn img { width: 18px; margin-left: 2px; } /* blog *----------------------------------------------------------------------------*/ section article.blogList { padding: 45px 0 60px; background: #fff; } section article.blogList .blogList-title { width: 90%; max-width: 1100px; font-size: 20px; line-height: 1.4; font-weight: 400; margin: 2% auto 4%; text-align: center; } section article.blogList .container { width: 90%; max-width: 1100px; margin: 0 auto; } section article.blogList .item { width: 32%; margin: 0 0 80px; } section article.blogList .item .inner { width: 300px; margin: 0 auto; } section article.blogList .item .photo { position: relative; margin-bottom: 26px; height: 408px; overflow: hidden; } section article.blogList .item img { max-width: 100% } section article.blogList .item .photo.text { padding: 24px 16px; font-size: 26px; line-height: 36px; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.blogList .item .text.bgPupl { background-color: #9abae1; } section article.blogList .item .text.bgGren { background-color: #9addcd; } section article.blogList .item .text.bgOrang { background-color: #eec9ab; } section article.blogList .item h3.name { height: 1.3em; font-size: 16px; font-weight: 400; color: #000; margin: 0 0 30px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } section article.blogList .item .line { margin: -19px 0 16px 0; width: 16px; height: 2px; background-color: #000; } section article.blogList .item p { height: 6em; color: #515151; overflow: hidden; } section article.blogList .btn { width: 136px; margin: 3.5em auto 0 } section article.blogList .btn a { display: block; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } /* science *----------------------------------------------------------------------------*/ section article.scienceKv { position: relative; } section article.scienceKv .title { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; } section article.scienceKv .title>div { padding: 0 0 80px 0; } section article.scienceKv .title .icon img { max-width: 52px; } section article.scienceKv .title h3, section article.scienceKv .title h1 { position: relative; font-size: 36px; line-height: 1.2em; padding: 0 0 12px 0; margin: 20px 0 20px 0; } section article.scienceKv .title h3::after, section article.scienceKv .title h1::after { position: absolute; left: 50%; bottom: 0; width: 76px; height: 1px; margin: 0 0 0 -38px; background-color: #000; content: ""; } section article.scienceKv .title p { font-size: 20px; line-height: 1.2em; } section article.scienceKv .banner img { width: 100%; } section article.scienceHd .main, section article.scienceBd .main { max-width: 1350px; padding: 0 3%; -webkit-box-sizing: border-box; box-sizing: border-box; } section article.scienceHd { padding: 60px 0; } section article.scienceHd .photo, section article.scienceHd .box { display: table-cell; vertical-align: middle; width: 50%; } section article.scienceHd .photo { text-align: center; } section article.scienceHd .photo span { position: relative; overflow: hidden; display: inline-block; } section article.scienceHd .photo span>img { width: 100%; max-width: 600px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 300ms linear; transition: all 300ms linear; } section article.scienceHd .photo:hover span>img { -webkit-transform: scale(1.06); transform: scale(1.06); -webkit-transition: all 300ms linear; transition: all 300ms linear; } section article.scienceHd .photo a.pinterestIcon { position: absolute; top: 10px; right: 10px; width: 60px; height: 28px; cursor: pointer; z-index: 5; display: none; } section article.scienceHd .photo a.pinterestIcon img { width: 100%; } #wrapper:not(.devices) section article.scienceHd .photo:hover a.pinterestIcon { display: block; } section article.scienceHd .photo span:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: rgba(0, 0, 0, 0); -webkit-transition: all 200ms linear; transition: all 200ms linear; } section article.scienceHd .photo:hover span:after { background: rgba(0, 0, 0, .4); -webkit-transition: all 200ms linear; transition: all 200ms linear; } section article.scienceList .item .photo img { width: 100%; max-width: 380px; } section article.scienceHd .box { padding: 0 0 60px 60px; color: #333; } section article.scienceHd .box .title, section article.scienceBd .box .title { font-size: 24px; line-height: 1.2em; margin: 0 0 20px 0; } section article.scienceBd .box .cont, section article.scienceHd .box .cont { font-size: 13px; line-height: 1.6em; padding: 25px 0; border-top: 1px #d3d3d2 solid; border-bottom: 1px #d3d3d2 solid; } section article.scienceBd .box .cont h2, section article.scienceBd .box .cont h3, section article.scienceHd .box .cont h2, section article.scienceHd .box .cont h3 { display: inline-block; font-size: 13px; font-weight: normal; line-height: 1.6em; } section article.scienceBd .box .cont p, section article.scienceHd .box .cont p { margin-top: 5px; } section article.scienceBd .box .cont ol, section article.scienceHd .box .cont ol { margin-top: 5px; list-style: decimal; padding-left: 20px; } section article.scienceBd .box .cont ol li h2, section article.scienceHd .box .cont ol li h2 { display: inline; } section article.scienceBd .box .cont ul, section article.scienceHd .box .cont ul { margin-top: 5px; list-style: disc; padding-left: 20px; } section article.scienceHd .box .share, section article.scienceBd .box .share { position: absolute; right: 3%; bottom: 0; } section article.scienceHd .box .share>div, section article.scienceBd .box .share>div, section article.scienceList .item .share>div { display: inline-block; vertical-align: bottom; margin: 0 5px; } section article.scienceList .item .share>div { position: relative; z-index: 4; } section article.scienceHd .box .share .fb img, section article.scienceHd .box .share .line img, section article.scienceHd .box .share .pinterest img, section article.scienceBd .box .share .fb img, section article.scienceBd .box .share .line img, section article.scienceBd .box .share .pinterest img, section article.scienceList .item .share .fb img, section article.scienceList .item .share .line img, section article.scienceList .item .share .pinterest img { max-width: 24px; } section article.scienceBd .box .knowledge-title { font-weight: 400; line-height: 1.2em; margin: 0 0 20px 0; background: none; height: auto; text-align: left; } section article.scienceBd { background-color: #f4f4f4; } section article.scienceBd .topSpace { height: 20vw; max-height: 160px; } section article.scienceBd .bottomSpace { height: 10vw; max-height: 100px; } section article.scienceBd .photo { position: relative; display: inline-block; vertical-align: middle; width: 48%; max-width: 600px; z-index: 1; } section article.scienceBd .photo span { position: relative; overflow: hidden; display: inline-block; } section article.scienceBd .photo a.pinterestIcon { position: absolute; top: 10px; right: 10px; width: 60px; height: 28px; cursor: pointer; z-index: 5; display: none; } section article.scienceBd .photo a.pinterestIcon img { width: 100%; } section article.scienceBd .photo:hover a.pinterestIcon { display: block; } section article.scienceBd .photo span>img { width: 100%; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 300ms linear; transition: all 300ms linear; } section article.scienceBd .photo:hover span>img { -webkit-transform: scale(1.06); transform: scale(1.06); -webkit-transition: all 300ms linear; transition: all 300ms linear; } section article.scienceBd .photo span:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: rgba(0, 0, 0, 0); -webkit-transition: all 200ms linear; transition: all 200ms linear; } section article.scienceBd .photo:hover span:after { background: rgba(0, 0, 0, .4); -webkit-transition: all 200ms linear; transition: all 200ms linear; } section article.scienceBd .box { position: relative; padding: 0 0 0 60px; /*margin: 0 0 60px 0;*/ width: 50%; min-height: 320px; display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box; /*display: flex; align-items: center; justify-content: center;*/ } section article.scienceBd .box .inner { position: relative; padding: 100px 0 100px 0; background-color: #fff; } section article.scienceBd .box .share { right: 0; bottom: -60px; } section article.scienceBd .box .inner:before, section article.scienceBd .box .inner:after { position: absolute; top: 0; bottom: 0; width: 1920px; content: ""; background-color: #fff; } section article.scienceBd .box .inner:before { left: -1920px; } section article.scienceBd .box .inner:after { right: -1920px; } section article.scienceBd .loadMore { position: absolute; left: 0; bottom: -60px; } section article.scienceBd .loadMore a { display: inline-block; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; -webkit-border-radius: 15px; border-radius: 15px; } section article.scienceList { padding: 60px 0 0 0; background-color: #f4f4f4; } section article.scienceList .container { width: 90%; max-width: 1350px; margin: 0 auto; } section article.scienceList .item { position: relative; width: 27%; margin: 0 3% 80px; opacity: 1; /*transform: translateY(80px); -webkit-transition: opacity .6s ease-out .6s, transform .6s ease-out .6s; transition: opacity .6s ease-out .6s, transform .6s ease-out .6s;*/ } section article.scienceList .item.tranStart { opacity: 1; transform: translateY(0); -webkit-transition: opacity .6s ease-out .6s, transform .6s ease-out .6s; transition: opacity .6s ease-out .6s, transform .6s ease-out .6s; } section article.scienceList .item>a.url { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 3; } section article.scienceList .item>a.pinterestIcon { position: absolute; top: 10px; right: 10px; width: 60px; height: 28px; cursor: pointer; z-index: 5; display: none; } #wrapper:not(.devices) section article.scienceList .item>a.pinterestIcon img { width: 100%; } #wrapper:not(.devices) section article.scienceList .item:hover>a.pinterestIcon { display: block; } section article.scienceList .item .photo { position: relative; overflow: hidden; } section article.scienceList .item .photo:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: rgba(0, 0, 0, 0); -webkit-transition: all 200ms linear; transition: all 200ms linear; } section article.scienceList .item:hover .photo:after { background: rgba(0, 0, 0, .4); -webkit-transition: all 200ms linear; transition: all 200ms linear; } section article.scienceList .item .photo img { width: 100%; max-width: 380px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 300ms linear; transition: all 300ms linear; } section article.scienceList .item:hover .photo img { -webkit-transform: scale(1.06); transform: scale(1.06); -webkit-transition: all 300ms linear; transition: all 300ms linear; } section article.scienceList .item .title { padding: 20px; font-size: 16px; color: #000; text-align: center; background-color: #fff; } section article.scienceList .item .share { position: relative; right: auto; bottom: auto; padding: 15px 0; text-align: center; background-color: #fff; } section article.scienceList .item .share:after { position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background-color: #ccc; content: ""; } section article.scienceList .loadMore { text-align: center; height: 80px; } section article.scienceList .loadMore a { display: inline-block; width: 136px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #7f7f7f; -webkit-border-radius: 15px; border-radius: 15px; } /** * * realBox * **/ section article.realBox * { font-family: "Kozuka Gothic Pr6N", "Noto Sans TC", sans-serif; font-weight: 100; line-height: 2em; } section article.realBox .item { position: relative; width: 100%; overflow: hidden; } section article.realBox .item.unit1 .realBanner { background-image: url(../Content/images/real/unit_1.jpg); } section article.realBox .item.unit2 .realBanner { background-image: url(../Content/images/real/unit_2.jpg); } section article.realBox .item.unit3 .realBanner { background-image: url(../Content/images/real/unit_3.jpg); } section article.realBox .item.unit4 .realBanner { background-image: url(../Content/images/real/unit_4.jpg); } section article.realBox .item.unit5 .realBanner { background-image: url(../Content/images/real/unit_5.jpg); } section article.realBox .item.unit6 .realBanner { background-image: url(../Content/images/real/unit_6.jpg); } section article.realBox .item .realBanner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } section article.realBox .item .realTitle { position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 2; } section article.realBox .item.unit3 .realTitle { margin: 0 0 0 -60%; } section article.realBox .item.unit4 .realTitle { margin: 0 0 0 60%; } section article.realBox .item .realTitle h2 { font-size: 55px; line-height: 1.3em; } section article.realBox .item .realTitle .text { font-size: 45px } section article.realBox .item .realTitle h3, section article.realBox .item .realTitle .txt { font-size: 28px; } section article.realBox .item .realTitle .txt { margin: 2.4em 0 0 0; } section article.realBox .item.unit2 .realTitle h3 { font-size: 38px; } section article.realBox .item .realTitle h2, section article.realBox .item .realTitle h3, section article.realBox .item .realTitle .text, section article.realBox .item .realTitle .txt { position: relative; top: 30px; opacity: 0; } section article.realBox .item.on .realTitle h2, section article.realBox .item.on .realTitle h3, section article.realBox .item.on .realTitle .text, section article.realBox .item.on .realTitle .txt { position: relative; top: 0; opacity: 1; } section article.realBox .item.unit1 .realBanner { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 20000ms linear; transition: all 20000ms linear; } section article.realBox .item.unit1.on .realBanner { -webkit-transform: scale(1.1); transform: scale(1.1); } section article.realBox .item.unit1 .realTitle h2, section article.realBox .item.unit1 .realTitle .text, section article.realBox .item.unit2 .realTitle h3, section article.realBox .item.unit3 .realTitle h3, section article.realBox .item.unit4 .realTitle h3, section article.realBox .item.unit5 .realTitle h3, section article.realBox .item.unit6 .realTitle h2, section article.realBox .item.unit6 .realTitle .text { -webkit-transition: top 2000ms 100ms linear, opacity 2000ms 100ms linear; transition: top 2000ms 100ms linear, opacity 2000ms 100ms linear; } section article.realBox .item.unit1 .realTitle .txt { -webkit-transition: top 2000ms 2000ms linear, opacity 2000ms 2000ms linear; transition: top 2000ms 2000ms linear, opacity 2000ms 2000ms linear; } /* section article.realBox .item.unit1 .realTitle .txt { -webkit-transition: top 2000ms 4000ms linear, opacity 2000ms 4000ms linear; transition: top 2000ms 4000ms linear, opacity 2000ms 4000ms linear; } */ section article.realBox .item.unit6 .logoBox { position: absolute; bottom: -106px; width: 100%; height: 106px; background: #fff; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-transition: bottom 1000ms 2000ms linear; transition: bottom 1000ms 2000ms linear; } section article.realBox .item.unit6 .logoBox .logo { width: 120px; } section article.realBox .item.unit6 .logoBox .logo img { width: 100%; } section article.realBox .item.on .logoBox { bottom: 0; } /* 電子發票 *----------------------------------------------------------------------------*/ article.eReceiptBox { background: #f4f4f4; } article.eReceiptBox .eReceipt { width: 90%; max-width: 880px; margin: 0 auto; padding: 20px 0 80px 0; } article.eReceiptBox .eReceipt h2 { margin: 0 0 40px 0; padding: 20px 0; font-weight: 400; font-size: 15px; border-top: 1px #c3c3c3 solid; border-bottom: 1px #c3c3c3 solid; } article.eReceiptBox .stepsBox { margin: 30px 0 40px; } article.eReceiptBox .stepsBox .ttl { margin: 10px 0; } article.eReceiptBox .stepsBox img { width: 100% } article.eReceiptBox .faqBox .item { padding: 20px 0; border-bottom: 1px #c3c3c3 solid; } article.eReceiptBox .faqBox .item .boxHd { padding: 0 30px 0 0; background: url(../Content/images/icon/icon_location_open.gif) no-repeat right center; } article.eReceiptBox .faqBox .item .boxHd.open { background: url(../Content/images/icon/icon_location_close.gif) no-repeat right center; } article.eReceiptBox .faqBox .item .boxHd { font-size: 16px; line-height: 1.4em; font-weight: bold; } article.eReceiptBox .faqBox .item .boxHd a { color: #000; } article.eReceiptBox .faqBox .item .boxBd { display: none; padding: 20px 30px 0 30px; } article.eReceiptBox .faqBox .item .boxHd.open+.boxBd { display: block; } article.eReceiptBox .faqBox .item .boxBd a { color: #02328d; } article.eReceiptBox .faqBox .item ul.decimal { list-style: decimal; padding: 0 0 0 16px; } /* 蕊芯 SEO page *----------------------------------------------------------------------------*/ article.carcridges-seo-wrapper { padding: 120px 0; } article.carcridges-seo-wrapper .bestView { max-width: 1100px; margin: 0 auto; padding: 0 20px; } article.carcridges-seo-wrapper .serise-cont .box { width: 100%; margin-bottom: 142px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } /* article.carcridges-seo-wrapper .serise-cont .box.flex-row-reverse{ -ms-flex-direction: row-reverse; flex-direction: row-reverse } article.claris-seo-wrapper .serise-cont .box.flex-row-reverse{ -ms-flex-direction: row-reverse; flex-direction: row-reverse } */ article.carcridges-seo-wrapper .serise-cont .box:last-child { margin-bottom: 0; } article.carcridges-seo-wrapper .serise-cont .box>div { position: relative; width: calc(50% - 30px); overflow: hidden; } article.carcridges-seo-wrapper .serise-cont .box.max>div { width: 100%; } article.carcridges-seo-wrapper .serise-cont .img-box .photo { -webkit-transition: all 250ms linear; -moz-transition: all 250ms linear; transition: all 250ms linear; } article.carcridges-seo-wrapper .serise-cont .img-box:hover .photo { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); transform: scale(1.08); } /* img */ article.carcridges-seo-wrapper .serise-cont .img-box { position: relative; cursor: pointer; } article.carcridges-seo-wrapper .serise-cont .img-box>a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } article.carcridges-seo-wrapper .serise-cont .img-box img { width: 100%; } article.carcridges-seo-wrapper .serise-cont .img-box .logoTag { position: absolute; left: 30px; top: 0; width: 106px; } article.carcridges-seo-wrapper .serise-cont .img-box .textbox { position: absolute; left: 0; bottom: 0; padding: 30px 12px 0 0; background: #fff; } article.carcridges-seo-wrapper .serise-cont .img-box .textbox .title { margin-bottom: 26px; font-size: 29px; line-height: 1.2em; color: #000; } article.carcridges-seo-wrapper .serise-cont .img-box .textbox .subTtl { margin-bottom: 10px; font-size: 23px; line-height: 1.2em; color: #000; } article.carcridges-seo-wrapper .serise-cont .img-box .textbox .subTtl small { font-size: 17px; line-height: 1.2em; } article.carcridges-seo-wrapper .serise-cont .img-box .textbox .checkTxt { font-size: 14px; line-height: 1.2em; color: #818181; } /* txt */ article.carcridges-seo-wrapper .serise-cont .paddingLeft .txt-cont { padding-left: 8%; box-sizing: border-box; } article.carcridges-seo-wrapper .serise-cont .paddingRight .txt-cont { padding-right: 8%; /* padding-right: 0; */ box-sizing: border-box; } @media only screen and (max-width : 767px) { article.carcridges-seo-wrapper .serise-cont .paddingRight .txt-cont { padding-right: 20px; } } article.carcridges-seo-wrapper .serise-cont .paddingRight.max .txt-cont { padding-right: 0; } @media only screen and (max-width : 767px) { article.carcridges-seo-wrapper .serise-cont .paddingRight.max .txt-cont { padding: 40px 20px 40px 24px; } } article.carcridges-seo-wrapper .serise-cont .paddingRight .img-box { display: none; } article.carcridges-seo-wrapper .serise-cont .paddingRight.box>div { width: 100%; /* padding-right: 0; */ } article.carcridges-seo-wrapper .serise-cont .txt-cont .topSubttl { font-size: 24px; line-height: 1.2em; color: #000; font-weight: 300; } article.carcridges-seo-wrapper .serise-cont .txt-cont .topSubttl .line { display: inline-block; width: 50px; height: 1px; background: #000; vertical-align: 30%; } article.carcridges-seo-wrapper .serise-cont .txt-cont .title { margin: 24px 0 60px; font-size: 45px; line-height: 1.333em; color: #000; font-weight: 300; } article.carcridges-seo-wrapper .serise-cont .txt-cont .cont { font-size: 15px; line-height: 1.74em; color: #666; font-weight: 400; } article.carcridges-seo-wrapper .serise-cont .txt-cont .font15 { font-size: 15px; line-height: 1.74em; } article.carcridges-seo-wrapper .serise-cont .txt-cont .button { position: relative; width: 254px; margin: 42px auto 0; height: 52px; text-align: center; cursor: pointer; } article.carcridges-seo-wrapper .serise-cont .txt-cont .button a { display: block; font-size: 18px; line-height: 52px; color: #fff; } article.carcridges-seo-wrapper .serise-cont .txt-cont .button .icn { position: absolute; right: 11px; top: 10px; width: 30px; height: 30px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } article.carcridges-seo-wrapper .serise-cont .txt-cont .button .icn img { width: 18px; margin-left: 2px; } /* active */ article.carcridges-seo-wrapper .serise-cont .box .toDown { opacity: 0; transform: translateY(-40px); transition: all 400ms linear; } article.carcridges-seo-wrapper .serise-cont .box.active .toDown { opacity: 1; transform: translateY(0) } article.carcridges-seo-wrapper .serise-cont .box .toUp { opacity: 0; transform: translateY(40px); transition: all 400ms linear; } article.carcridges-seo-wrapper .serise-cont .box.active .toUp { opacity: 1; transform: translateY(0) } .replace-claris article.bannerClaris .howChoose { display: none; } article.bannerBox .bannerBd.replace { display: none; } article.carcridges-pro-intro .kv-box { position: relative; width: 100%; height: 660px; background: url(../Content/images/home/productHomePBS_1920908_1.jpg) no-repeat center -20px; background-size: 100% auto; } article.carcridges-pro-intro .kv-title-box { position: absolute; left: 0; bottom: 0; padding: 55px 76px 0 20px; background: #fff; } article.carcridges-pro-intro .kv-title-box .title { margin-bottom: 24px; font-size: 29px; line-height: 1.2em; color: #000; } article.carcridges-pro-intro .kv-title-box .subTttl { font-size: 23px; line-height: 1.2em; color: #000; } article.carcridges-pro-intro .kv-title-box .subTttl small { font-size: 17px; line-height: 1.2em; color: #000; } article.carcridges-pro-intro .prod-list-box { width: 100%; max-width: 1100px; margin: 0 auto; padding: 105px 20px 122px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } article.carcridges-pro-intro .prod-list-box .item { width: calc(50% - 30px) } article.carcridges-pro-intro .prod-list-box .item .num { margin-bottom: 38px; font-size: 17px; line-height: 1.2em; color: #000; } article.carcridges-pro-intro .prod-list-box .item .ttl { margin-bottom: 38px; font-size: 45px; line-height: 1.2em; color: #000; font-weight: 300; } article.carcridges-pro-intro .prod-list-box .item .cont { font-size: 15px; line-height: 1.73em; color: #666; } article.carcridges-change { padding: 0 20px; background: #f4f4f4; } article.carcridges-change .bestView { max-width: 1100px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; } article.carcridges-change .bestView>*:not(h2) { width: calc(50% - 30px) } article.carcridges-change .ttl { font-size: 45px; line-height: 1.2em; color: #000; font-weight: 300; } article.carcridges-change .cont { font-size: 15px; line-height: 1.73em; color: #666; } /* 軟水器 SEO page *----------------------------------------------------------------------------*/ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap&subset=chinese-traditional'); article.bannerClaris {} article.bannerClaris .bannerClaris__body { position: relative; } article.bannerClaris .bannerClaris__body .title { position: absolute; top: 55%; left: 50%; width: 90%; /* height: 105px; */ color: #fff; /* color: #648892; */ /* margin: -52px 0 0 0; */ z-index: 9; line-height: inherit; background: transparent; /* transition: color .2s linear .35s; */ transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } article.bannerClaris .bannerClaris__body .title .icon { width: 116px; padding: 0 20px 0 0; border-right: 2px #fff solid; } article.bannerClaris.bannerFiltrationSystemSelection03 .bannerClaris__body .title .icon { border-right: 2px #838144 solid; } @media only screen and (max-width: 767px) { article.bannerClaris.bannerFiltrationSystemSelection03 .bannerClaris__body .title .icon { border: 0; border-bottom: 2px #838144 solid; } } article.bannerClaris .bannerClaris__body .title .icon img { width: 100%; } article.bannerClaris .bannerClaris__body .title .ser { padding: 0 4px 0 20px; font-size: 95px; font-weight: 100; } article.bannerClaris .bannerClaris__body .sercon, article.bannerClaris .bannerClaris__body .title .ser, article.bannerClaris .bannerClaris__body .title .icon, section article.bannerBox .bannerHd .title .sercon { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } article.bannerClaris .bannerClaris__body .title .en { display: block; font-size: 46px; line-height: 45px; font-weight: 400; text-align: left; } article.bannerClaris .bannerClaris__body .title .ch { font-size: 30px; line-height: 40px; font-weight: 300; text-align: left; font-family: "Noto Sans TC"; } article.bannerClaris.bannerFiltrationSystemSelection03 .bannerClaris__body .title .en, article.bannerClaris.bannerFiltrationSystemSelection03 .bannerClaris__body .title .ch { color: #363526; } /* article.bannerClaris .bannerClaris__body .title .ch span { display: block; } */ article.bannerClaris .bannerClaris__body .bgMask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; } article.bannerClaris .bannerClaris__body .photo { width: 100%; padding-bottom: 36%; background-color: #356e87; } article.bannerClaris.bannerEndTheOdorOfTapWater .bannerClaris__body .photo { background-color: #1397a3; } article.bannerClaris.bannerBabyDrinkWater .bannerClaris__body .photo { background-color: #c99e7b; } article.bannerClaris.bannerHowMuchWater .bannerClaris__body .photo { background-color: #3f4134; } article.bannerClaris.bannerCoffeeShopIsWater .bannerClaris__body .photo { background-color: #3899c9; } article.bannerClaris.bannerThreeFiltersSatisfyingService .bannerClaris__body .photo { /* background-color: #0388cd; */ background: rgb(3, 136, 205); background: -moz-linear-gradient(top, rgba(3, 136, 205, 1) 0%, rgba(114, 174, 204, 1) 100%); background: -webkit-linear-gradient(top, rgba(3, 136, 205, 1) 0%, rgba(114, 174, 204, 1) 100%); background: linear-gradient(to bottom, rgba(3, 136, 205, 1) 0%, rgba(114, 174, 204, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0388cd', endColorstr='#72aecc', GradientType=0); } article.bannerClaris.bannerOriPrincipleFunction .bannerClaris__body .photo { background: #f2f2f2 url(../Content/images/articles/articles_8_4.png) no-repeat center center; background-size: cover; } article.bannerClaris.bannerSoftener .bannerClaris__body .photo { background-color: #6fb332; } article.bannerClaris.bannerFilterInstallation .bannerClaris__body .photo { background-color: #937334; } article.bannerClaris.bannerFilterInstallation2 .bannerClaris__body .photo { background-color: #57b38c; } article.bannerClaris.bannerFilterFaq .bannerClaris__body .photo { background-color: #6f6cad; } article.bannerClaris.bannerFilterFaq02 .bannerClaris__body .photo { background-color: #a39c6e; } article.bannerClaris.bannerFilterFaq03 .bannerClaris__body .photo { background-color: #2592cb; } article.bannerClaris.bannerFiltrationSystemSelection02 .bannerClaris__body .photo { background-color: #2eb2e3; } article.bannerClaris.bannerFiltrationSystemSelection03 .bannerClaris__body .photo { background-color: #dbd771; } article.bannerClaris.bannerFilterPP .bannerClaris__body .photo { background-color: #917eb5; } article.bannerClaris.bannerFilterRO .bannerClaris__body .photo { background-color: #f0d473; } article.bannerClaris.bannerFilterScale .bannerClaris__body .photo { background-color: #5b7ab1; } article.bannerClaris.bannerFilterSDGs6 .bannerClaris__body .photo { background-color: #81b972; } article.bannerClaris.bannerFilterOri .bannerClaris__body .photo { background-color: #9c642d; } article.bannerClaris.bannerGuideline .bannerClaris__body .photo { background-color: #b19a63; } article.bannerClaris.bannerGuideline01 .bannerClaris__body .photo { background-color: #91acb7; } article.bannerClaris.bannerAgion .bannerClaris__body .photo { background-color: #8cbda3; } article.bannerClaris.bannerActivated .bannerClaris__body .photo { background-color: #85b692; } article.bannerClaris.bannerSoftHardWater .bannerClaris__body .photo { background-color: #2d529e; } article.bannerClaris.bannerWaterFillingStation .bannerClaris__body .photo { background-color: #6699cc; } article.bannerClaris.bannerfilerDuration .bannerClaris__body .photo { background-color: #99cc99; } article.bannerClaris.bannerRO_intro .bannerClaris__body .photo { background-color: #d9be62; } article.bannerClaris.bannerDispenser_intro .bannerClaris__body .photo { background-color: #cf8888; } article.bannerClaris.bannerOriPrincipleFunction .bannerClaris__body .title { color: #333; } article.bannerClaris.bannerOriPrincipleFunction .bannerClaris__body .title .icon { border-right: 2px #333 solid; } .bannerBox.bannerOriPrincipleFunction article.howChoose .howChooseHd .btn span { color: rgb(47, 139, 224); } @media only screen and (max-width : 767px) { article.bannerClaris.bannerOriPrincipleFunction .bannerClaris__body .photo { background: #f2f2f2 url(../Content/images/articles/articles_8_4_m.png) no-repeat center center; background-size: cover; } article.bannerClaris.bannerOriPrincipleFunction .bannerClaris__body .title .icon { border: 0; border-bottom: 2px #333 solid; } } article.bannerClaris.bannerVita01 .bannerClaris__body .photo { background-color: #83dae0; } article.bannerClaris.bannerVita02 .bannerClaris__body .photo { background-color: #666; } article.bannerClaris.bannerDechlorination .bannerClaris__body .photo { background-color: #f9c545; } article.bannerClaris.bannerVita03 .bannerClaris__body .photo { background-color: #93d6de; } article.bannerClaris .bannerClaris__body .photo img { position: relative; min-width: 720px; width: 100%; vertical-align: bottom; } article.claris-seo-wrapper { padding: 120px 0; } article.claris-seo-wrapper .bestView { max-width: 1100px; margin: 0 auto; padding: 0 20px; } article.claris-seo-wrapper .serise-cont .box { width: 100%; margin-bottom: 142px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } article.claris-seo-wrapper .serise-cont .preface { font-size: 24px; line-height: 1.6em; color: #000; margin-bottom: 80px; } article.claris-seo-wrapper .serise-cont .preface .title { font-size: 30px; line-height: 1.4em; } article.claris-seo-wrapper .serise-cont .preface .text { font-size: 18px; line-height: 1.6em; } article.claris-seo-wrapper .serise-cont .preface .title+.text { margin-top: 20px; } /* @media only screen and (max-width : 767px) { article.claris-seo-wrapper .serise-cont .box.flex-row-reverse{ -ms-flex-direction: column; flex-direction: column } } */ article.claris-seo-wrapper .serise-cont .box:last-child { margin-bottom: 0; } article.claris-seo-wrapper .serise-cont .box>div { position: relative; width: calc(50% - 30px); overflow: hidden; } article.claris-seo-wrapper .serise-cont .box.max>div { width: 100%; } article.claris-seo-wrapper .serise-cont .img-box .photo { position: relative; overflow: hidden; /* -webkit-transition: all 250ms linear; -moz-transition: all 250ms linear; transition: all 250ms linear; */ padding-bottom: 124%; background-color: #356e87; } article.claris-seo-wrapper.babyDrinkWater-seo-wrapper .serise-cont .img-box .photo { background-color: #ca9f7c; } article.claris-seo-wrapper.howMuchWater-seo-wrapper .serise-cont .img-box .photo { background-color: #c5cd77; } article.claris-seo-wrapper.EndTheOdorOfTapWater-seo-wrapper .serise-cont .img-box .photo { background-color: #1397a3; } article.claris-seo-wrapper.CoffeeShopIsWater-seo-wrapper .serise-cont .img-box .photo { background-color: #3899c9; } article.claris-seo-wrapper.ThreeFiltersSatisfyingService-seo-wrapper .serise-cont .img-box .photo { background-color: #0388cd; } article.claris-seo-wrapper.OriPrincipleFunction-seo-wrapper .serise-cont .img-box .photo { background-color: #f2f2f2; } article.claris-seo-wrapper.Vita01-seo-wrapper .serise-cont .img-box .photo { background-color: #83dae0; } article.claris-seo-wrapper.Vita02-seo-wrapper .serise-cont .img-box .photo { background-color: #84a2ac; } article.claris-seo-wrapper.Dechlorination-seo-wrapper .serise-cont .img-box .photo { background-color: #f9c545; } article.claris-seo-wrapper.softener-seo-wrapper .serise-cont .img-box .photo { background-color: #bddba1; } article.claris-seo-wrapper.filterInstallation-seo-wrapper .serise-cont .img-box .photo { background-color: #c4ac7e; } article.claris-seo-wrapper.filterInstallation2-seo-wrapper .serise-cont .img-box .photo { background-color: #57b38c; } article.claris-seo-wrapper.filterFaq-seo-wrapper .serise-cont .img-box .photo { background-color: #6f6cad; } article.claris-seo-wrapper.filterFaq02-seo-wrapper .serise-cont .img-box .photo { background-color: #a39c6e; } article.claris-seo-wrapper.filterFaq03-seo-wrapper .serise-cont .img-box .photo { background-color: #2592cb; } article.claris-seo-wrapper.FiltrationSystemSelection02-seo-wrapper .serise-cont .img-box .photo { background-color: #2eb2e3; } article.claris-seo-wrapper.FiltrationSystemSelection03-seo-wrapper .serise-cont .img-box .photo { background-color: #dbd771; } article.claris-seo-wrapper.Vita03-seo-wrapper .serise-cont .img-box .photo { background-color: #93d6de; } article.claris-seo-wrapper.filterPP-seo-wrapper .serise-cont .img-box .photo { background-color: #917eb5; } article.claris-seo-wrapper.filterRO-seo-wrapper .serise-cont .img-box .photo { background-color: #f0d473; } article.claris-seo-wrapper.filterScale-seo-wrapper .serise-cont .img-box .photo { background-color: #5b7ab1; } article.claris-seo-wrapper.filterSDGs6-seo-wrapper .serise-cont .img-box .photo { background-color: #81b972; } article.claris-seo-wrapper.filterOri-seo-wrapper .serise-cont .img-box .photo { background-color: #9c642d; } article.claris-seo-wrapper.guideline-seo-wrapper .serise-cont .img-box .photo { background-color: #b19a63; } article.claris-seo-wrapper.guideline01-seo-wrapper .serise-cont .img-box .photo { background-color: #91acb7; } article.claris-seo-wrapper.agion-seo-wrapper .serise-cont .img-box .photo { background-color: #8cbda3; } article.claris-seo-wrapper.activated-seo-wrapper .serise-cont .img-box .photo { background-color: #85b692; } article.claris-seo-wrapper.softHardWater-seo-wrapper .serise-cont .img-box .photo { background-color: #2d529e; } article.claris-seo-wrapper.WaterFillingStation-seo-wrapper .serise-cont .img-box .photo { background-color: #6699cc; } article.claris-seo-wrapper.Filter_Duration-seo-wrapper .serise-cont .img-box .photo { background-color: #2d529e; } article.claris-seo-wrapper.RO_intro-seo-wrapper .serise-cont .img-box .photo { background-color: #d9be62; } article.claris-seo-wrapper.Dispenser_intro-seo-wrapper .serise-cont .img-box .photo { background-color: #cf8888; } article.claris-seo-wrapper .serise-cont .img-box .photo .demo { position: absolute; left: -15%; right: -15%; width: 130%; padding: 50% 0 0 0; } article.claris-seo-wrapper.softHardWater-seo-wrapper .serise-cont .img-box .photo .demo { padding: 20% 0 0 0; } /* article.claris-seo-wrapper .serise-cont .img-box:hover .photo{ -webkit-transform: scale(1.08); -moz-transform: scale(1.08); transform: scale(1.08); } */ /* img */ article.claris-seo-wrapper .serise-cont .img-box { position: relative; cursor: pointer; } article.claris-seo-wrapper .serise-cont .img-box>a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } article.claris-seo-wrapper .serise-cont .img-box img { width: 100%; } article.claris-seo-wrapper .serise-cont .img-box .logoTag { position: absolute; left: 30px; top: 0; width: 106px; } article.claris-seo-wrapper .serise-cont .img-box .textbox { position: absolute; left: 0; bottom: 0; padding: 30px 12px 0 0; background: #fff; } article.claris-seo-wrapper .serise-cont .img-box .textbox .title { margin-bottom: 26px; font-size: 29px; line-height: 1.2em; color: #000; } article.claris-seo-wrapper .serise-cont .img-box .textbox .subTtl { margin-bottom: 10px; font-size: 23px; line-height: 1.2em; color: #000; } article.claris-seo-wrapper .serise-cont .img-box .textbox .subTtl small { font-size: 17px; line-height: 1.2em; } article.claris-seo-wrapper .serise-cont .img-box .textbox .checkTxt { font-size: 14px; line-height: 1.2em; color: #818181; } /* txt */ article.claris-seo-wrapper .serise-cont .paddingLeft .txt-cont { padding-left: 8%; box-sizing: border-box; } article.claris-seo-wrapper.RO_intro-seo-wrapper.RO_intro-seo-wrapper-last .serise-cont .paddingLeft .txt-cont { padding-left: 4%; } @media only screen and (max-width: 767px) { article.claris-seo-wrapper.RO_intro-seo-wrapper.RO_intro-seo-wrapper-last { margin-bottom: 40px; } article.claris-seo-wrapper.RO_intro-seo-wrapper.RO_intro-seo-wrapper-last .serise-cont .paddingLeft .txt-cont { padding-left: 30px; } } article.claris-seo-wrapper .serise-cont .paddingRight .txt-cont { padding-right: 8%; box-sizing: border-box; } article.claris-seo-wrapper .serise-cont .txt-cont { /* padding-right: 8%; */ padding-right: 0; box-sizing: border-box; } article.claris-pro-intro .prod-list-box .item .cont .moreArticles b, article.claris-seo-wrapper .serise-cont .txt-cont .moreArticles b { display: block; } /* article.claris-pro-intro .prod-list-box .item .cont .moreArticles a, article.claris-seo-wrapper .serise-cont .txt-cont .moreArticles a { } */ article.claris-pro-intro .prod-list-box .item .cont .moreArticles p, article.claris-seo-wrapper .serise-cont .txt-cont .moreArticles p { margin: 3px 0 0 0; } article.claris-seo-wrapper .serise-cont .paddingRight.max .txt-cont { padding-right: 0; } @media only screen and (max-width : 767px) { article.claris-seo-wrapper .serise-cont .paddingRight.max .txt-cont { padding-right: 30px; } } article.claris-seo-wrapper .serise-cont .paddingRight .img-box { display: none; } article.claris-seo-wrapper .serise-cont .paddingRight.box>div { /* width: 100%; 20220713 */ /* padding-right: 8%; */ } /* article.claris-seo-wrapper .serise-cont .paddingRight.box.max > div { padding-right: 0; } */ article.claris-seo-wrapper .serise-cont .txt-cont .topSubttl { font-size: 24px; line-height: 1.2em; color: #000; font-weight: 300; } article.claris-seo-wrapper .serise-cont .txt-cont .topSubttl .line { display: inline-block; width: 50px; height: 1px; background: #000; vertical-align: 30%; } article.claris-seo-wrapper .serise-cont .txt-cont .title { margin: 24px 0 60px; font-size: 30px; font-weight: 400; line-height: 1.333em; color: #000; } article.claris-seo-wrapper .serise-cont .txt-cont .cont { font-size: 15px; line-height: 1.74em; color: #666; font-weight: 400; } article.claris-seo-wrapper .serise-cont .txt-cont .cont.displayFlex { display: flex; align-items: flex-start; justify-content: center; } article.claris-seo-wrapper .serise-cont .txt-cont .cont.displayFlex .displayFlexLeft { width: 45%; margin: 0 5% 0 0; } article.claris-seo-wrapper .serise-cont .txt-cont .cont.displayFlex .displayFlexRight { width: 45%; margin: 0 0 0 5%; } article.claris-seo-wrapper .serise-cont .txt-cont .cont ul { margin: .5em 0 0 20px; list-style-type: decimal; } article.claris-seo-wrapper.filterFaq03-seo-wrapper .serise-cont .txt-cont .cont ul { margin: .5em 0 0 0; list-style-type: none; } article.claris-seo-wrapper.guideline-seo-wrapper .serise-cont .txt-cont .cont ul { margin: .5em 0 0 0; list-style-type: none; } article.claris-seo-wrapper.FiltrationSystemSelection03-seo-wrapper .serise-cont .txt-cont .cont ul { margin: .5em 0 0 0; list-style-type: none; } article.claris-seo-wrapper.FiltrationSystemSelection03-seo-wrapper .serise-cont .txt-cont .cont ul li h3 { font-size: 19px; color: #000; line-height: 1.8em; } article.claris-seo-wrapper.FiltrationSystemSelection03-seo-wrapper .serise-cont .txt-cont .cont ul li+li, article.claris-seo-wrapper.filterFaq03-seo-wrapper .serise-cont .txt-cont .cont ul li+li, article.claris-seo-wrapper.guideline-seo-wrapper .serise-cont .txt-cont .cont ul li+li { margin: 10px 0 0 0; } article.claris-seo-wrapper .serise-cont .txt-cont .cont ol { margin: .5em 0 0 20px; list-style-type: disc; } article.claris-seo-wrapper.EndTheOdorOfTapWater-seo-wrapper .serise-cont .txt-cont .cont a { color: #1397a3; } article.claris-seo-wrapper.babyDrinkWater-seo-wrapper .serise-cont .txt-cont .cont a { color: #ca9f7c; } article.claris-seo-wrapper.howMuchWater-seo-wrapper .serise-cont .txt-cont .cont a { color: #c5cd77; } article.claris-seo-wrapper.CoffeeShopIsWater-seo-wrapper .serise-cont .txt-cont .cont a { color: #3899c9; } article.claris-seo-wrapper.ThreeFiltersSatisfyingService-seo-wrapper .serise-cont .txt-cont .cont ol { list-style-type: disc; margin: 10px 0 0 20px; } article.claris-seo-wrapper.OriPrincipleFunction-seo-wrapper .serise-cont .txt-cont .cont a { color: #318bfb; } article.claris-seo-wrapper.Dechlorination-seo-wrapper .serise-cont .txt-cont .cont ol { color: #f9c545; } article.claris-seo-wrapper.softener-seo-wrapper .serise-cont .txt-cont .cont a { color: #6fb332; } article.claris-seo-wrapper.filterInstallation-seo-wrapper .serise-cont .txt-cont .cont a { color: #937334; } article.claris-seo-wrapper.filterInstallation2-seo-wrapper .serise-cont .txt-cont .cont a { color: #57b38c; } article.claris-seo-wrapper.filterFaq-seo-wrapper .serise-cont .txt-cont .cont a { color: #6f6cad; } article.claris-seo-wrapper.filterFaq02-seo-wrapper .serise-cont .txt-cont .cont a { color: #a39c6e; } article.claris-seo-wrapper.filterFaq03-seo-wrapper .serise-cont .txt-cont .cont a { color: #2592cb; } article.claris-seo-wrapper.FiltrationSystemSelection02-seo-wrapper .serise-cont .txt-cont .cont a { color: #2eb2e3; } article.claris-seo-wrapper.FiltrationSystemSelection03-seo-wrapper .serise-cont .txt-cont .cont a { color: #afab4f; border-bottom: 1px #afab4f solid; } article.claris-seo-wrapper.filterPP-seo-wrapper .serise-cont .txt-cont .cont a { color: #917eb5; } article.claris-seo-wrapper.filterRO-seo-wrapper .serise-cont .txt-cont .cont a { color: #907f45; } article.claris-seo-wrapper.filterScale-seo-wrapper .serise-cont .txt-cont .cont a { color: #5b7ab1; } article.claris-seo-wrapper.filterSDGs6-seo-wrapper .serise-cont .txt-cont .cont a { color: #81b972; } article.claris-seo-wrapper.filterOri-seo-wrapper .serise-cont .txt-cont .cont a { color: #9c642d; border-bottom: 1px #9c642d solid; } article.claris-seo-wrapper.guideline-seo-wrapper .serise-cont .txt-cont .cont a { color: #b19a63; border-bottom: 1px #b19a63 solid; } article.claris-seo-wrapper.guideline01-seo-wrapper .serise-cont .txt-cont .cont a { color: #91acb7; border-bottom: 1px #91acb7 solid; } article.claris-seo-wrapper.agion-seo-wrapper .serise-cont .txt-cont .cont a { color: #8cbda3; border-bottom: 1px #8cbda3 solid; } article.claris-seo-wrapper.activated-seo-wrapper .serise-cont .txt-cont .cont a { color: #85b692; border-bottom: 1px #85b692 solid; } article.claris-seo-wrapper.softHardWater-seo-wrapper .serise-cont .txt-cont .cont a { color: #2d529e; border-bottom: 1px #2d529e solid; } article.claris-seo-wrapper.WaterFillingStation-seo-wrapper .serise-cont .txt-cont .cont a { color: #6699cc; border-bottom: 1px #6699cc solid; } article.claris-seo-wrapper.Duration-seo-wrapper .serise-cont .txt-cont .cont a { color: #66cc99; border-bottom: 1px #66cc99 solid; } article.claris-seo-wrapper.RO_intro-seo-wrapper .serise-cont .txt-cont .cont a { color: #d9be62; border-bottom: 1px #d9be62 solid; } article.claris-seo-wrapper.Dispenser_intro-seo-wrapper .serise-cont .txt-cont .cont a { color: #cf8888; border-bottom: 1px #cf8888 solid; } article.claris-seo-wrapper .serise-cont .txt-cont p+p { margin: 1.2em 0 0 0; } article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging { width: 100%; /* max-width: 500px; */ margin: 1.2em 0 0 0; border: 1px #c3c3c3 solid; } article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging.monitor { display: table; } article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging.mobile { display: none; } @media only screen and (max-width : 767px) { article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging.monitor { display: none; } article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging.mobile { display: table; } } article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging tr:nth-child(even) { background-color: #f2f2f2; } article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging th { padding: 5px 10px; border: 1px #c3c3c3 solid; color: #fff; background-color: #6f6cad; } article.claris-seo-wrapper.guideline-seo-wrapper .serise-cont .txt-cont .tabBankStaging th { background-color: #b19a63; } article.claris-seo-wrapper.guideline01-seo-wrapper .serise-cont .txt-cont .tabBankStaging th { background-color: #91acb7; } article.claris-seo-wrapper.FiltrationSystemSelection02-seo-wrapper .serise-cont .txt-cont .tabBankStaging th { background-color: #2eb2e3; } article.claris-seo-wrapper.softHardWater-seo-wrapper .serise-cont .txt-cont .tabBankStaging th { background-color: #2d529e; } article.claris-seo-wrapper.softHardWater-seo-wrapper .serise-cont .txt-cont .tabBankStaging td { width: 16.6%; text-align: center; } article.claris-seo-wrapper.softHardWater-seo-wrapper .serise-cont .txt-cont .tabBankStaging td:nth-child(3n+1) { color: #2d529e; } article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging td { padding: 5px 10px; border: 1px #c3c3c3 solid; } article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging td.tdbg { background-color: #ffffff; } article.claris-seo-wrapper .serise-cont .txt-cont .tabBankStaging.monitor td.tdTxt { color: #6f6cad; } article.claris-seo-wrapper.FiltrationSystemSelection02-seo-wrapper .serise-cont .txt-cont .tabBankStaging.monitor td.tdTxt { color: #2eb2e3; } article.claris-seo-wrapper .serise-cont .txt-cont .font15 { font-size: 15px; line-height: 1.74em; } article.claris-seo-wrapper .serise-cont .txt-cont .button { position: relative; width: 254px; margin: 42px auto 0; height: 52px; text-align: center; cursor: pointer; } article.claris-seo-wrapper .serise-cont .txt-cont .button a { display: block; font-size: 18px; line-height: 52px; color: #fff; } article.claris-seo-wrapper .serise-cont .txt-cont .button .icn { position: absolute; right: 11px; top: 10px; width: 30px; height: 30px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } article.claris-seo-wrapper .serise-cont .txt-cont .button .icn img { width: 18px; margin-left: 2px; } .backList.button { position: relative; width: 136px; margin: -20px auto 80px; height: 30px; text-align: center; cursor: pointer; color: #fff; background: #000; border-radius: 15px; } .backList.button a { display: block; font-size: 13px; line-height: 30px; color: #fff; } @media only screen and (max-width : 767px) { .backList.button { margin: 0 auto 40px; } } /* active */ article.claris-seo-wrapper .serise-cont .box .toDown { opacity: 0; transform: translateY(-40px); transition: all 400ms linear; } article.claris-seo-wrapper .serise-cont .box.active .toDown { opacity: 1; transform: translateY(0) } article.claris-seo-wrapper .serise-cont .box .toUp { opacity: 0; transform: translateY(40px); transition: all 400ms linear; } article.claris-seo-wrapper .serise-cont .box.active .toUp { opacity: 1; transform: translateY(0) } /* article.claris-seo-wrapper.babyDrinkWater-seo-wrapper .serise-cont .box.active .toUp{ opacity: 1; transform: translateY(0) } article.claris-seo-wrapper.howMuchWater-seo-wrapper .serise-cont .box.active .toUp{ opacity: 1; transform: translateY(0) } */ article.claris-pro-intro .kv-box { position: relative; width: 100%; height: 460px; background: #333333 url(../Content/images/articles/productBusinessSoft_1920908.jpg) no-repeat center bottom; background-size: 58% auto; } article.claris-pro-intro.howMuchWater .kv-box { background: #c5cd77 url(../Content/images/articles/articles_4_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.babyDrinkWater .kv-box { background: #ca9f7c url(../Content/images/articles/articles_3_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.EndTheOdorOfTapWater .kv-box { background: #c5cd77 url(../Content/images/articles/articles_5_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.CoffeeShopIsWater .kv-box { background: #c5cd77 url(../Content/images/articles/articles_6_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.ThreeFiltersSatisfyingService .kv-box { background: #f9c545 url(../Content/images/articles/articles_7_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.OriPrincipleFunction .kv-box { background: #c5cd77 url(../Content/images/articles/articles_8_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.Vita01 .kv-box { background: #83dae0 url(../Content/images/articles/articles_9_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.Vita02 .kv-box { background: #84a2ac url(../Content/images/articles/articles_10_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.Dechlorination .kv-box { background: #0388cd url(../Content/images/articles/articles_11_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.softener .kv-box { background: #6fb332 url(../Content/images/articles/articles_14_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterInstallation .kv-box { background: #937334 url(../Content/images/articles/articles_15_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterInstallation2 .kv-box { background: #937334 url(../Content/images/articles/articles_19_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterFaq .kv-box { background: #6f6cad url(../Content/images/articles/articles_16_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterFaq02 .kv-box { background: #a39c6e url(../Content/images/articles/articles_21_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterFaq03 .kv-box { background: #a39c6e url(../Content/images/articles/articles_23_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.FiltrationSystemSelection02 .kv-box { background: #2eb2e3 url(../Content/images/articles/articles_17_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.FiltrationSystemSelection03 .kv-box { background: #2eb2e3 url(../Content/images/articles/articles_20_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.Vita03 .kv-box { background: #93d6de url(../Content/images/articles/articles_18_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterPP .kv-box { background: #917eb5 url(../Content/images/articles/articles_22_3.jpg) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterRO .kv-box { background: #f0d473 url(../Content/images/articles/articles_27_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterScale .kv-box { background: #f0d473 url(../Content/images/articles/articles_30_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterSDGs6 .kv-box { background: #81b972 url(../Content/images/articles/articles_31_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterOri .kv-box { background: #9c642d url(../Content/images/articles/articles_29_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.guideline .kv-box { background: #b19a63 url(../Content/images/articles/articles_24_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.guideline01 .kv-box { background: #91acb7 url(../Content/images/articles/articles_25_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.agion .kv-box { background: #8cbda3 url(../Content/images/articles/articles_26_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.activated .kv-box { background: #85b692 url(../Content/images/articles/articles_28_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.softHardWater .kv-box { background: #2d529e url(../Content/images/articles/articles_32_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.filterWaterFillingStation .kv-box { background: #6699cc url(../Content/images/articles/articles_33_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.Duration .kv-box { background: #99cc99 url(../Content/images/articles/articles_34_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.RO_intro .kv-box { background: #d9be62 url(../Content/images/articles/articles_35_3.png) no-repeat center center; background-size: 100% auto; } article.claris-pro-intro.Dispenser_intro .kv-box { background: #cf8888 url(../Content/images/articles/articles_36_3.png) no-repeat center center; background-size: 100% auto; } @media only screen and (max-width : 767px) { article.carcridges-pro-intro .kv-box { height: 80vw; background: url(../Content/images/home/productHomePBS_1920908_1.jpg) no-repeat left center; background-size: auto 100%; } article.claris-pro-intro .kv-box { height: 80vw; background: #333333 url(../Content/images/articles/productBusinessSoft_1920908.jpg) no-repeat 78% bottom; background-size: auto 100%; } article.claris-pro-intro.howMuchWater .kv-box { height: 80vw; background: #356e87 url(../Content/images/articles/articles_4_3.png) no-repeat left bottom; background-size: auto 100%; } article.claris-pro-intro.babyDrinkWater .kv-box { height: 80vw; background: #ca9f7c url(../Content/images/articles/articles_3_3.png) no-repeat right center; background-size: auto 100%; } article.claris-pro-intro.EndTheOdorOfTapWater .kv-box { height: 80vw; background: #ca9f7c url(../Content/images/articles/articles_5_3.png) no-repeat right center; background-size: auto 100%; } article.claris-pro-intro.CoffeeShopIsWater .kv-box { height: 80vw; background: #ca9f7c url(../Content/images/articles/articles_6_3.png) no-repeat right center; background-size: auto 100%; } article.claris-pro-intro.ThreeFiltersSatisfyingService .kv-box { height: 80vw; background: #0388cd url(../Content/images/articles/articles_7_3.png) no-repeat right center; background-size: auto 100%; } article.claris-pro-intro.OriPrincipleFunction .kv-box { height: 80vw; background: #ca9f7c url(../Content/images/articles/articles_8_3.png) no-repeat right center; background-size: auto 100%; } article.claris-pro-intro.Vita01 .kv-box { height: 80vw; background: #83dae0 url(../Content/images/articles/articles_9_3.png) no-repeat right center; background-size: auto 100%; } article.claris-pro-intro.Vita02 .kv-box { height: 80vw; background: #84a2ac url(../Content/images/articles/articles_10_3.png) no-repeat right center; background-size: auto 100%; } article.claris-pro-intro.Dechlorination .kv-box { height: 80vw; background: #0388cd url(../Content/images/articles/articles_11_3.png) no-repeat right center; background-size: auto 100%; } article.claris-pro-intro.softener .kv-box { height: 80vw; background: #6fb332 url(../Content/images/articles/articles_14_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterInstallation .kv-box { height: 80vw; background: #937334 url(../Content/images/articles/articles_15_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterInstallation2 .kv-box { height: 80vw; background: #937334 url(../Content/images/articles/articles_19_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterFaq .kv-box { height: 80vw; background: #6f6cad url(../Content/images/articles/articles_16_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterFaq02 .kv-box { height: 80vw; background: #a39c6e url(../Content/images/articles/articles_21_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterFaq03 .kv-box { height: 80vw; background: #2592cb url(../Content/images/articles/articles_23_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.FiltrationSystemSelection02 .kv-box { height: 80vw; background: #2eb2e3 url(../Content/images/articles/articles_17_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.FiltrationSystemSelection03 .kv-box { height: 80vw; background: #2eb2e3 url(../Content/images/articles/articles_20_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.Vita03 .kv-box { height: 80vw; background: #93d6de url(../Content/images/articles/articles_18_3.png) no-repeat right center; background-size: auto 100%; } article.claris-pro-intro.filterPP .kv-box { height: 80vw; background: #917eb5 url(../Content/images/articles/articles_22_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterRO .kv-box { height: 80vw; background: #f0d473 url(../Content/images/articles/articles_27_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterScale .kv-box { height: 80vw; background: #f0d473 url(../Content/images/articles/articles_30_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterSDGs6 .kv-box { height: 80vw; background: #81b972 url(../Content/images/articles/articles_31_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterOri .kv-box { height: 80vw; background: #9c642d url(../Content/images/articles/articles_29_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.guideline .kv-box { height: 80vw; background: #b19a63 url(../Content/images/articles/articles_24_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.guideline01 .kv-box { height: 80vw; background: #91acb7 url(../Content/images/articles/articles_25_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.agion .kv-box { height: 80vw; background: #8cbda3 url(../Content/images/articles/articles_26_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.activated .kv-box { height: 80vw; background: #85b692 url(../Content/images/articles/articles_28_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.softHardWater .kv-box { height: 80vw; background: #2d529e url(../Content/images/articles/articles_32_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.filterWaterFillingStation .kv-box { height: 80vw; background: #6699cc url(../Content/images/articles/articles_33_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.Duration .kv-box { height: 80vw; background: #99cc99 url(../Content/images/articles/articles_34_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.RO_intro .kv-box { height: 80vw; background: #d9be62 url(../Content/images/articles/articles_35_3.png) no-repeat center center; background-size: auto 100%; } article.claris-pro-intro.Dispenser_intro .kv-box { height: 80vw; background: #cf8888 url(../Content/images/articles/articles_36_3.png) no-repeat center center; background-size: auto 100%; } /* article.carcridges-seo-wrapper .serise-cont .txt-cont .button { margin: 42px auto 0 0; } */ } article.claris-pro-intro .kv-title-box { position: absolute; left: 0; bottom: 0; padding: 55px 76px 0 20px; background: #fff; } article.claris-pro-intro .kv-title-box .title { margin-bottom: 24px; font-size: 29px; line-height: 1.2em; color: #000; } article.claris-pro-intro .kv-title-box .subTttl { font-size: 23px; line-height: 1.2em; color: #000; } article.claris-pro-intro .kv-title-box .subTttl small { font-size: 17px; line-height: 1.2em; color: #000; } article.claris-pro-intro .prod-list-box { width: 100%; max-width: 1100px; margin: 0 auto; padding: 105px 20px 122px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } article.claris-pro-intro .prod-list-box+.prod-list-box { padding: 0 20px 122px; } @media only screen and (max-width : 767px) { article.claris-pro-intro .prod-list-box+.prod-list-box { padding: 20px 20px 80px; } } article.claris-pro-intro .prod-list-box .item { width: calc(50% - 30px) } article.claris-pro-intro .prod-list-box.max .item { width: calc(100% - 30px) } article.claris-pro-intro .prod-list-box .item .photo { margin: 0 0 40px 0; } article.claris-pro-intro .prod-list-box .item .photo, article.claris-pro-intro .prod-list-box .item .photo img { width: 100%; } article.claris-pro-intro .prod-list-box .item .num { margin-bottom: 38px; font-size: 17px; line-height: 1.2em; color: #000; } article.claris-pro-intro .prod-list-box .item .ttl { margin-bottom: 38px; font-size: 30px; line-height: 1.2em; min-height: 3.6em; color: #000; font-weight: 400; text-align: justify; } article.claris-pro-intro .prod-list-box .item .cont { font-size: 15px; line-height: 1.73em; color: #666; } article.claris-pro-intro .prod-list-box .item .cont ul { margin: .5em 0 0 20px; list-style-type: decimal; } article.claris-pro-intro .prod-list-box .item .cont ul li p, article.claris-pro-intro .prod-list-box .item .cont ul li p+p { margin: .6em 0 0 0; } article.claris-pro-intro .prod-list-box .item .cont .cont-item { margin-bottom: 10px; } article.claris-pro-intro .prod-list-box .item .cont h4 { margin-top: 10px; } article.claris-pro-intro .prod-list-box .item .cont .ml-20 { margin-left: 30px; } article.claris-pro-intro.filterInstallation .prod-list-box .item .cont ul li+li, article.claris-pro-intro.filterInstallation2 .prod-list-box .item .cont ul li+li, article.claris-pro-intro.filterFaq .prod-list-box .item .cont ul li+li, article.claris-pro-intro.filterFaq02 .prod-list-box .item .cont ul li+li, article.claris-pro-intro.filterPP .prod-list-box .item .cont ul li+li, article.claris-pro-intro.filterRO .prod-list-box .item .cont ul li+li, article.claris-pro-intro.filterScale .prod-list-box .item .cont ul li+li, article.claris-pro-intro.filterSDGs6 .prod-list-box .item .cont ul li+li, article.claris-pro-intro.filterOri .prod-list-box .item .cont ul li+li, article.claris-pro-intro.guideline .prod-list-box .item .cont ul li+li, article.claris-pro-intro.activated .prod-list-box .item .cont ul li+li { margin: 20px 0 0 0; } article.claris-pro-intro.filterInstallation .prod-list-box .item .cont ul ul li+li, article.claris-pro-intro.filterInstallation2 .prod-list-box .item .cont ul ul li+li { margin: 0 0 0 0; } article.claris-pro-intro .prod-list-box .item .cont ol { margin: .5em 0 0 20px; list-style-type: disc; } article.claris-pro-intro .prod-list-box .item .cont p+p { margin: 1.2em 0 0 0; } article.claris-pro-intro .prod-list-box .item .cont a { color: #356e87; border-bottom: 1px #356e87 solid; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont a { color: #93d6de; border-bottom: 1px #93d6de solid; } article.claris-pro-intro.FiltrationSystemSelection03 .prod-list-box .item .cont a { color: #afab4f; border-bottom: 1px #afab4f solid; } article.claris-seo-wrapper.Vita03-seo-wrapper .serise-cont .txt-cont .cont a, article.claris-pro-intro.Vita03 .prod-list-box .item .cont a { color: #2eb2e3; border-bottom: 1px #2eb2e3 solid; } article.claris-pro-intro.filterFaq03 .prod-list-box .item .cont a { color: #2592cb; border-bottom: 1px #2592cb solid; } article.claris-pro-intro.guideline .prod-list-box .item .cont a { color: #b19a63; border-bottom: 1px #b19a63 solid; } article.claris-pro-intro.guideline01 .prod-list-box .item .cont a { color: #91acb7; border-bottom: 1px #91acb7 solid; } article.claris-pro-intro.agion .prod-list-box .item .cont a { color: #8cbda3; border-bottom: 1px #8cbda3 solid; } article.claris-pro-intro.filterRO .prod-list-box .item .cont a { color: #907f45; border-bottom: 1px #907f45 solid; } article.claris-pro-intro.filterScale .prod-list-box .item .cont a { color: #5b7ab1; border-bottom: 1px #5b7ab1 solid; } article.claris-pro-intro.filterSDGs6 .prod-list-box .item .cont a { color: #81b972; border-bottom: 1px #81b972 solid; } article.claris-pro-intro.filterOri .prod-list-box .item .cont a { color: #9c642d; border-bottom: 1px #9c642d solid; } article.claris-pro-intro.activated .prod-list-box .item .cont a { color: #85b692; border-bottom: 1px #85b692 solid; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .ttl { min-height: inherit; min-height: initial; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item+.item { margin: 120px 0 0 0; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont .FSS02__ul { list-style-type: none; display: flex; align-items: stretch; justify-content: space-between; margin: 40px -20px 80px -20px; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont .FSS02__ul>li { position: relative; width: 33.3%; padding: 0 20px; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont .FSS02__ul>li+li { margin: 0 0 0 0; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont .FSS02__ul>li .title { font-size: 20px; color: #2eb2e3; font-weight: bold; margin: 0 0 5px 0; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont ul li+li, article.claris-pro-intro.FiltrationSystemSelection03 .prod-list-box .item .cont ul li+li { margin: 10px 0 0 0; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont .FSS02__ul>li>a { position: absolute; top: 0; left: 10px; right: 10px; bottom: 0; z-index: 1; border: 0; /* background-color: rgba(0, 0, 0, .4) */ } article.claris-pro-intro.filterInstallation2 .prod-list-box .item .cont a { color: #57b38c; border-bottom: 1px #57b38c solid; } @media only screen and (max-width : 767px) { article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item+.item { margin: 60px 0 0 0; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont .FSS02__ul { flex-direction: column; margin: 40px -20px 50px -20px; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont .FSS02__ul>li { width: 100%; } article.claris-pro-intro.FiltrationSystemSelection02 .prod-list-box .item .cont .FSS02__ul>li+li { margin: 20px 0 0 0; } } article.claris-seo-wrapper .bestView .descView { width: 100%; } article.claris-pro-intro .descView { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px 0 20px; } article.claris-seo-wrapper .bestView .descView a, article.claris-pro-intro .descView a { color: #356e87; border-bottom: 1px #356e87 solid; } article.claris-pro-intro.FiltrationSystemSelection02 .descView a { color: #2eb2e3; border-bottom: 1px #2eb2e3 solid; } article.claris-pro-intro.FiltrationSystemSelection03 .descView a { color: #afab4f; border-bottom: 1px #afab4f solid; } article.claris-pro-intro.softener .descView a { color: #6fb332; border-bottom: 1px #6fb332 solid; } article.claris-pro-intro.filterInstallation .descView a { color: #937334; border-bottom: 1px #937334 solid; } article.claris-pro-intro.filterInstallation2 .descView a { color: #57b38c; border-bottom: 1px #57b38c solid; } article.claris-pro-intro.filterFaq03 .descView a { color: #2592cb; border-bottom: 1px #2592cb solid; } article.claris-seo-wrapper .bestView .descView .descView__body { max-width: 1100px; margin: 0 auto; } article.claris-pro-intro .descView .descView__body { padding: 0 20px 122px; } article.claris-pro-intro .bestView>*:not(h2) { width: calc(50% - 30px) } article.claris-seo-wrapper .bestView .descView .cont, article.claris-pro-intro .descView .cont { font-size: 16px; line-height: 1.6em; color: #666; } article.claris-seo-wrapper .bestView .descView .cont b, article.claris-pro-intro .descView .cont b { /* color: #000; */ font-weight: normal; } article.bannerClaris~.btnHowChooseDown .btnHowChooseDownHd { opacity: 0; } @media only screen and (max-width : 767px) { .bannerClaris .bannerBd.replace { position: relative; display: block; padding: 20px 60px 40px; text-align: center; background: #fff; } .bannerClaris .bannerBd.replace .title { width: 160px; margin: 0 auto; padding: 50px 0 0 0; background: url(../Content/images/home/icon_homeSEO.png) no-repeat top center; } article.claris-seo-wrapper { padding: 0 0 40px 0; background: #f4f4f4; } article.claris-seo-wrapper .bestView { padding: 0 0; } article.claris-seo-wrapper .serise-cont .preface { font-size: 18px; padding: 40px 30px 40px 30px; margin: 0 0 0 0; } article.claris-seo-wrapper .serise-cont .box { width: 100%; margin-bottom: 54px; display: flex; flex-direction: column; justify-content: center; } article.claris-seo-wrapper .serise-cont .box .toUp, article.claris-seo-wrapper .serise-cont .box.active .toUp, article.claris-seo-wrapper .serise-cont .box .toDown, article.claris-seo-wrapper .serise-cont .box.active .toDown { opacity: 1; transform: translateY(0); } article.claris-seo-wrapper .serise-cont .box>div { width: 100%; } article.bannerClaris .bannerClaris__body .title { top: 45%; left: 30px; right: 30px; width: auto; transform: translate(0%, -50%); } article.bannerClaris .bannerClaris__body .photo { padding-bottom: 120%; } article.bannerClaris .bannerClaris__body .title .icon { display: block; width: 76px; padding: 0 0 30px 0; margin: 0 auto 30px auto; border: 0; border-bottom: 2px #fff solid; /* border-bottom: 2px #648892 solid; */ } article.claris-seo-wrapper .serise-cont .img-box .photo { padding-bottom: 100%; } article.claris-seo-wrapper .serise-cont .img-box .photo .demo { padding: 30% 0 0 0; } article.claris-seo-wrapper.softener-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterInstallation-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterInstallation2-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterFaq-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterFaq02-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.FiltrationSystemSelection02-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.FiltrationSystemSelection03-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.Vita03-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterPP-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterRO-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterScale-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterSDGs6-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterOri-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.filterFaq03-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.guideline-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.guideline01-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.agion-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.activated-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.softHardWater-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.WaterFillingStation-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.Duration-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.RO_intro-seo-wrapper .serise-cont .img-box .photo .demo, article.claris-seo-wrapper.Dispenser_intro-seo-wrapper .serise-cont .img-box .photo .demo { padding: 0 0 0 0; } article.claris-seo-wrapper.Vita03-seo-wrapper .serise-cont .img-box .photo .demo { top: 0; width: 100%; left: 0; right: 0; } article.bannerClaris .bannerClaris__body .title .en { font-size: 36px; line-height: 45px; } article.bannerClaris.bannerSoftHardWater .bannerClaris__body .title .en { font-size: 34px; line-height: 40px; } article.bannerClaris .bannerClaris__body .title .ch { font-size: 24px; } article.claris-pro-intro .prod-list-box .item .ttl { min-height: inherit; min-height: initial; } article.claris-seo-wrapper .serise-cont .paddingLeft .txt-cont { padding: 40px 30px 40px 30px; box-sizing: border-box; } article.claris-seo-wrapper .serise-cont .paddingLeft.max .txt-cont { padding: 40px 30px 0 30px; box-sizing: border-box; } article.claris-seo-wrapper .serise-cont .paddingRight .txt-cont { padding: 40px 30px 40px 30px; box-sizing: border-box; } article.claris-seo-wrapper.softener-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterInstallation-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterInstallation2-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterFaq-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterFaq02-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterFaq03-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.FiltrationSystemSelection02-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterPP-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterRO-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterScale-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterSDGs6-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.filterOri-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.guideline-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.guideline01-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.agion-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.activated-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.softHardWater-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.WaterFillingStation-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.Duration-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.RO_intro-seo-wrapper .serise-cont .paddingRight .img-box, article.claris-seo-wrapper.Dispenser_intro-seo-wrapper .serise-cont .paddingRight .img-box { order: 1; } article.claris-seo-wrapper.softener-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterInstallation-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterInstallation2-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterFaq-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterFaq02-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterFaq03-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.FiltrationSystemSelection02-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterPP-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterRO-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterScale-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterSDGs6-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.filterOri-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.guideline-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.guidelin01-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.activated-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.softHardWater-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.WaterFillingStation-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.Duration-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.RO_intro-seo-wrapper .serise-cont .paddingRight .txt-cont, article.claris-seo-wrapper.Dispenser_intro-seo-wrapper .serise-cont .paddingRight .txt-cont { order: 2; } article.claris-seo-wrapper .serise-cont .paddingRight.max .txt-cont { padding: 40px 30px 0 30px; box-sizing: border-box; } article.bannerClaris .bannerClaris__body .title .ser { display: none; } article.claris-seo-wrapper .serise-cont .txt-cont .title { font-size: 36px; margin: 24px 0 40px; } article.claris-seo-wrapper .serise-cont .txt-cont .cont.displayFlex { flex-direction: column; } article.claris-seo-wrapper .serise-cont .txt-cont .cont.displayFlex .displayFlexLeft, article.claris-seo-wrapper .serise-cont .txt-cont .cont.displayFlex .displayFlexRight { width: 100%; margin: 0 0 0 0; } article.claris-seo-wrapper .serise-cont .txt-cont .cont.displayFlex .displayFlexRight { margin: 20px 0 0 0; } article.claris-pro-intro .prod-list-box { padding: 40px 30px 40px; flex-direction: column; } article.claris-pro-intro .prod-list-box .item, article.claris-pro-intro .prod-list-box.max .item { width: 100%; } article.claris-pro-intro .prod-list-box .item+.item { margin: 60px 0 0 0; } article.claris-seo-wrapper .bestView .descView, article.claris-pro-intro .descView { padding: 0 30px 0 30px; } article.claris-seo-wrapper.filterFaq-seo-wrapper .bestView .descView, article.claris-seo-wrapper.filterFaq02-seo-wrapper .bestView .descView, article.claris-seo-wrapper.filterFaq03-seo-wrapper .bestView .descView, article.claris-seo-wrapper.filterPP-seo-wrapper .bestView .descView, article.claris-seo-wrapper.filterRO-seo-wrapper .bestView .descView, article.claris-seo-wrapper.filterScale-seo-wrapper .bestView .descView, article.claris-seo-wrapper.filterSDGs6-seo-wrapper .bestView .descView, article.claris-seo-wrapper.filterOri-seo-wrapper .bestView .descView, article.claris-seo-wrapper.guideline-seo-wrapper .bestView .descView, article.claris-seo-wrapper.guideline01-seo-wrapper .bestView .descView, article.claris-seo-wrapper.agion-seo-wrapper .bestView .descView, article.claris-seo-wrapper.activated-seo-wrapper .bestView .descView, article.claris-seo-wrapper.softHardWater-seo-wrapper .bestView .descView, article.claris-seo-wrapper.WaterFillingStation-seo-wrapper .bestView .descView, article.claris-seo-wrapper.Duration-seo-wrapper .bestView .descView, article.claris-seo-wrapper.RO_intro-seo-wrapper .bestView .descView, article.claris-seo-wrapper.Dispenser_intro-seo-wrapper .bestView .descView { padding: 0 0 0 0; } article.claris-seo-wrapper.FiltrationSystemSelection02-seo-wrapper .bestView .descView { padding: 0 0 0 0; } article.claris-seo-wrapper .bestView .descView .descView__body, article.claris-pro-intro .descView .descView__body { padding: 0 0 40px 0; } } @media only screen and (max-width : 414px) { article.claris-pro-intro .prod-list-box .item .ttl { font-size: 30px; text-align: left; min-height: inherit; min-height: initial; margin-bottom: 20px; } } @media only screen and (max-width : 375px) { article.bannerClaris .bannerClaris__body .title .en { font-size: 30px; line-height: 35px; } article.bannerClaris .bannerClaris__body .title .ch { font-size: 22px; line-height: 30px; } article.claris-seo-wrapper .serise-cont .preface { font-size: 17px; padding: 40px 20px 40px 20px; } article.claris-seo-wrapper .serise-cont .txt-cont .topSubttl { font-size: 20px; } article.claris-seo-wrapper .serise-cont .txt-cont .title { font-size: 30px; margin: 24px 0 30px; } article.claris-seo-wrapper .serise-cont .paddingLeft .txt-cont, article.claris-seo-wrapper .serise-cont .paddingRight .txt-cont { padding: 30px 20px 30px 20px; } article.claris-seo-wrapper .serise-cont .paddingLeft.max .txt-cont, article.claris-seo-wrapper .serise-cont .paddingRight.max .txt-cont { padding: 30px 20px 0 20px; } article.claris-pro-intro .prod-list-box { padding: 30px 20px 30px; } article.claris-pro-intro .prod-list-box .item .ttl { margin-bottom: 20px; } article.claris-seo-wrapper .bestView .descView, article.claris-pro-intro .descView { padding: 0 20px 0 20px; } article.bannerClaris~.btnHowChooseDown .btnHowChooseDownHd { padding: 0 0 0 0; } article.bannerClaris .bannerClaris__body .title .icon { padding: 0 0 15px 0; margin: 0 auto 15px auto; } article.bannerClaris .bannerClaris__body .title { top: 40%; left: 20px; right: 20px; } } @media only screen and (max-width : 320px) { article.claris-pro-intro .prod-list-box .item+.item { margin: 40px 0 0 0; } } /* footer *----------------------------------------------------------------------------*/ footer { position: relative; z-index: 4; color: #fff; background: rgb(34, 78, 119); background: -moz-linear-gradient(left, rgba(34, 78, 119, 1) 0%, rgba(60, 156, 181, 1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(34, 78, 119, 1)), color-stop(100%, rgba(60, 156, 181, 1))); background: -webkit-linear-gradient(left, rgba(34, 78, 119, 1) 0%, rgba(60, 156, 181, 1) 100%); background: -o-linear-gradient(left, rgba(34, 78, 119, 1) 0%, rgba(60, 156, 181, 1) 100%); background: -ms-linear-gradient(left, rgba(34, 78, 119, 1) 0%, rgba(60, 156, 181, 1) 100%); background: linear-gradient(to right, rgba(34, 78, 119, 1) 0%, rgba(60, 156, 181, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#224e77', endColorstr='#3c9cb5', GradientType=1); } footer .main { max-width: 1440px; } footer .footerHd { padding: 40px 40px 60px 40px; } footer .footerHd ul { /* width: 150px; */ display: inline-block; vertical-align: top; } footer .footerHd ul:nth-child(1) { padding: 0 50px 0 0; } footer .footerHd ul.max { max-width: 300px; } footer .footerHd ul li { padding: 10px 0; font-size: 13px; } footer .footerHd ul.max li { float: left; /* width: 50%; */ padding: 10px 50px 10px 0; } footer .footerHd ul li.title { width: 100%; margin: 0 0 10px 0; } footer .footerHd ul li a { color: #9cd0fd; } footer .footerHd .shareBox { position: absolute; top: 10px; right: 40px; width: 200px; padding-bottom: 5px; } footer .footerHd .shareBox .shareSocial { height: 40px; border-bottom: 1px #f4f4f4 dashed; margin-bottom: 10px; } footer .footerHd .shareBox .likeBox { position: absolute; display: block; top: 100px; } footer .footerHd .shareBox .fbBox, footer .footerHd .shareBox .gBox { position: absolute; } footer .footerHd .shareBox .gBox { left: 90px; } footer .footerHd .shareBox:after { content: ""; display: table; clear: both; } footer .footerHd .shareBox span { display: block; font-size: 13px; margin: 0 0 27px 0; } footer .footerHd .shareBox a, footer .footerHd .shareBox samp { /*display: table-cell; *display: inline; zoom: 1; vertical-align: middle;*/ } footer .footerHd .shareBox a { position: relative; display: block; float: left; height: 30px; width: 30px; margin: 0 30px 0 0; background: #424242; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } footer .footerHd .shareBox samp { font-size: 14px; font-family: monospace; font-family: "source-han-sans-traditional", "Kozuka Gothic Pro", "Myriad Pro", Helvetica, sans-serif; line-height: 22px; color: #fff; padding: 0 0 0 15px; border-left: 1px #fff dotted; } footer .footerHd .shareBox a:hover { background: #f5d335; } footer .footerHd .shareBox a.instagram { background: url(../Content/images/icon/icon_instagram.png?v20170216) no-repeat; } footer .footerHd .shareBox a.facebook { background: url(../Content/images/icon/icon_facebook.png?v20170216) no-repeat; } footer .footerHd .shareBox a.youtube { background: url(../Content/images/icon/icon_youtube.png?v20170216) no-repeat; } footer .footerHd .shareBox a.twitter { background: url(../Content/images/icon/icon_twitter.png?v20170216) no-repeat; } footer .footerHd .shareBox a.google { background: url(../Content/images/icon/icon_google.png?v20170216) no-repeat; margin-top: -2px; } footer .footerHd .shareBox a.instagram, footer .footerHd .shareBox a.facebook, footer .footerHd .shareBox a.youtube, footer .footerHd .shareBox a.twitter { -moz-background-size: 22px auto; -webkit-background-size: 22px auto; -o-background-size: 22px auto; background-size: 22px auto; } footer .footerHd .shareBox a:hover.facebook { background: #fff url(../Content/images/icon/icon_facebook_bu.png?v20170216) no-repeat; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-background-size: 22px auto; -webkit-background-size: 22px auto; -o-background-size: 22px auto; background-size: 22px auto; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } footer .footerHd .rewardBox { width: 100%; margin: 20px -55px; text-align: right; } footer .footerHd .rewardBox span { display: inline-block; padding-left: 20px; } footer .footerHd .rewardBox span img { max-width: 140px; } footer .footerHd .pureBox { position: absolute; bottom: -146px; right: 40px; } footer .footerFt { padding: 20px 40px 48px 40px; border-top: 1px rgba(255, 255, 255, 0.3) solid; } footer .footerFt .logo, footer .footerFt .copyright { display: table-cell; *display: inline; zoom: 1; vertical-align: middle; } footer .footerFt .logo a { display: block; width: 90px; margin: 0 20px 0 0; } footer .footerFt .logo a img { width: 100%; } footer .footerFt .copyright { font-size: 11px; font-weight: 100; line-height: 16px; } footer .footerFt .copyright a { color: #fff; text-decoration: underline; } /* Product List Top Ver 2016*/ .backshoplist { position: fixed; left: 12px; top: 100px; height: 27px; border: 1px #cacaca solid; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; z-index: 120; padding: auto 20px; padding: 0px 10px; display: none; } .ProductTop { position: absolute; top: 20px; left: -15%; background: #fff; /*margin-left: -15%;*/ padding: 0 16px 0 16px; min-height: calc(100% - 60px); z-index: 2; max-width: 226px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ProductTop .mainTitle { margin: 12px 0px; font-size: 13px; } .ProductTop .box { border-top: 1px solid #c6c6c6; /* padding-top: 10px; */ } .ProductTop .box .boxList { border-bottom: 1px solid #c6c6c6; } .ProductTop .box .boxList .series:before { content: " + "; position: absolute; left: 0px; top: 0px; } .ProductTop .box .boxList.active .series:before { content: " - "; } .ProductTop .box .boxList .series { position: relative; margin: 5px 0px; padding-left: 15px; cursor: pointer; } .ProductTop .box .boxList.active ul { display: block; } .ProductTop .box .boxList ul { margin-left: 10px; display: none; } .ProductTop .box .boxList ul li { line-height: 18px; color: #c6c6c6; cursor: pointer; margin-bottom: 5px; font-size: 12px; } .ProductTop .box .boxList ul li.active>* { color: #000; text-decoration: underline; } /* Product List Top Ver 2016 End*/ /*---------------------------------------------------------------------------- * BxSlider v4.1.2 * http://bxslider.com *---------------------------------------------------------------------------*/ .bx-wrapper { position: relative; margin: 0 auto; padding: 0; *zoom: 1; width: 100%; } .bx-wrapper img { max-width: 100%; display: block; margin: 0 auto; } .bx-wrapper .bx-viewport { left: 0; /*-webkit-transform: translatez(0);-moz-transform: translatez(0);-ms-transform: translatez(0);-o-transform: translatez(0);transform: translatez(0);*/ } .bx-wrapper .bx-controls-auto { position: absolute; bottom: 15px; width: 40%; right: 20px; z-index: 9; } /*.bx-wrapper .bx-pager {position: absolute; bottom: 15px; width:40%; left: 20px; text-align: left;font-size: 0;padding-top: 20px; z-index: 1;}*/ .bx-wrapper .bx-pager { position: absolute; width: 100%; text-align: left; font-size: 0; z-index: 1; text-align: center; } .bx-wrapper .bx-loading { min-height: 50px; background: url(../Content/images/loading.gif?v20170216) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager .bx-pager-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { background: #d3d3d2; text-indent: -9999px; display: block; width: 8px; height: 8px; margin: 0 5px; outline: 0; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover { background: #000; } .bx-wrapper .bx-prev { left: 10px; background: url(../Content/images/icon/icon_productArrow_L.png?v20170216) no-repeat center; } .bx-wrapper .bx-next { right: 10px; background: url(../Content/images/icon/icon_productArrow_R.png?v20170216) no-repeat center; } .bx-wrapper .bx-controls-direction { position: relative; width: 80%; margin: 0 auto; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 100%; margin-top: -25px; outline: 0; width: 27px; height: 50px; text-indent: -9999px; z-index: 8; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; } /*----------------------------------------------------------------------------- superslides jQuery Plugin -----------------------------------------------------------------------------*/ #slides { position: relative; } #slides .slides-container { display: none; } #slides .scrollable { *zoom: 1; position: relative; top: 0; left: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; } #slides .scrollable:after { content: ""; display: table; clear: both; } .slides-navigation { margin: 0 auto; position: absolute; z-index: 3; top: 46%; width: 100%; } .slides-navigation a { position: absolute; display: block; } .slides-navigation a.next, .slides-navigation a.prev { position: absolute; top: 50%; margin-top: -36px; outline: 0; width: 32px; height: 72px; text-indent: -9999px; z-index: 9; display: none; } .slides-navigation a.prev { left: 0; background: #f5d335 url(../Content/images/icon_bannerArrow_l.gif?v20170216) no-repeat center; } .slides-navigation a.next { right: 0; background: #f5d335 url(../Content/images/icon_bannerArrow_r.gif?v20170216) no-repeat center; } .slides-pagination { position: absolute; right: 20px; bottom: 20px; text-align: right; z-index: 9; } .slides-pagination a { margin: 0 5px; outline: 0; font-size: 0; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; width: 8px; height: 8px; display: -moz-inline-stack; display: inline-block; *vertical-align: auto; zoom: 1; *display: inline; overflow: hidden; background: #f5d335; } .slides-pagination a.current { background: #6c6c6c; } /*----------------------------------------------------------------------------- Checkator jQuery Plugin -----------------------------------------------------------------------------*/ /* input[type=checkbox] {width: 19px;height: 19px;margin-bottom: -4px;} input[type=radio] {width: 19px;height: 19px;margin-bottom: -4px;} .checkator_source {position: relative;z-index: 2;display: block;} .checkator_holder {display: inline-block;position: relative;} .checkator {border: 2px solid #483e34;background-color: #fff;display: block;position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;} .checkator_source:checked+.checkator:after {background-color: #483e34;display: block;content: '';top: 20%;right: 20%;bottom: 20%;left: 20%;position: absolute;} .checkator_source:focus+.checkator {} .checkator_source:hover+.checkator {background-color: #eee;} .checkator.radio {border-radius: 50%;} .checkator.radio:after {border-radius: 50%;} .checkator.checkbox {border: 2px solid #483e34;}*/ /*----------------------------------------------------------------------------- selectBoxIt jQuery Plugin -----------------------------------------------------------------------------*/ .selectboxit-container { position: relative; display: inline-block; vertical-align: middle; width: 100%; /*z-index: 1;*/ } .selectboxit-container * { font-size: 14px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; -o-user-select: none; user-select: none; outline: none; white-space: nowrap; } .selectboxit-container .selectboxit { width: auto !important; cursor: pointer; border-radius: 0; overflow: hidden; display: block; position: relative; } .selectboxit-container .selectboxit-options a { height: 30px; line-height: 30px; display: block; } .selectboxit-container span { height: 72px; line-height: 72px; display: block; } .selectboxit-container .selectboxit:focus { outline: 0; } .selectboxit-options .selectboxit-disabled, .selectboxit.selectboxit-disabled { opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; cursor: default; } .selectboxit-text { text-indent: 5px; overflow: hidden; text-overflow: ellipsis; float: left; } .selectboxit .selectboxit-option-icon-container { margin-left: 5px; } .selectboxit-container .selectboxit-options { min-width: 100% !important; *width: 100%; list-style: none; position: absolute; overflow-x: hidden; overflow-y: auto; cursor: pointer; display: none; z-index: 99999999999; border-radius: 0; text-align: left; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .selectboxit-option .selectboxit-option-anchor { padding: 0 2px; } .selectboxit-option .selectboxit-option-anchor:hover { text-decoration: none; } .selectboxit-optgroup-header { text-indent: 5px; margin: 0; list-style-type: none; } .selectboxit-option { text-indent: 5px; margin: 0; list-style-type: none; float: left; width: 100%; height: 30px; } .selectboxit-option-first {} .selectboxit-optgroup-header+.selectboxit-option-first { border-top-right-radius: 0px; border-top-left-radius: 0px; } .selectboxit-option-last {} .selectboxit-optgroup-header { font-weight: bold; } .selectboxit-optgroup-header:hover { cursor: default; } .selectboxit-arrow-container { width: 30px; position: absolute; right: 0; } .selectboxit .selectboxit-arrow-container .selectboxit-arrow { margin: 0 auto; position: absolute; top: 50%; right: 0; left: 0; margin-top: -2px; } .selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon { top: 30%; } .selectboxit-option-icon-container { float: left; } .selectboxit-container .selectboxit-option-icon { margin: 0; padding: 0; vertical-align: middle; } .selectboxit-option-icon-url { width: 18px; background-size: 18px 18px; background-repeat: no-repeat; height: 100%; background-position: center; float: left; } .selectboxit-rendering { display: inline-block !important; *display: inline !important; zoom: 1 !important; visibility: visible !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } .jqueryui .ui-icon { background-color: inherit; } .jqueryui .ui-icon-triangle-1-s { background-position: -64px -16px; } .selectboxit-btn { background: #f4f4f4; border: 1px solid #c6c6c6; } .selectboxit-btn.selectboxit-enabled:active, .selectboxit-btn.selectboxit-enabled:focus, .selectboxit-btn.selectboxit-enabled:hover {} .selectboxit-btn.selectboxit-enabled:focus, .selectboxit-btn.selectboxit-enabled:hover {} .selectboxit-default-arrow { width: 0; height: 0; border-top: 4px solid transparent; border-right: 4px solid transparent; border-left: 4px solid transparent; } .selectboxit-list { line-height: normal; height: auto; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .selectboxit-list .selectboxit-option-anchor { color: #333; } .selectboxit-list>.selectboxit-focus>.selectboxit-option-anchor { color: #fff; background-color: #59a6d6; text-decoration: none; } .selectboxit-list>.selectboxit-disabled>.selectboxit-option-anchor { color: #999; } /*---------------------------------------------------------------------------- * Core Owl 2.0.0-beta.3 * http://owlcarousel.owlgraphic.com/ *---------------------------------------------------------------------------*/ .owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .owl-height { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel { width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; } .owl-carousel:not(.noDisplayNOT) { display: none; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px); z-index: 1; } .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel .owl-refresh .owl-item { display: none; } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } .no-js .owl-carousel { display: block; } .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item img { transform-style: preserve-3d; } .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png?v20170216") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; -moz-transition: scale 100ms ease; -ms-transition: scale 100ms ease; -o-transition: scale 100ms ease; transition: scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); -moz-transition: scale(1.3, 1.3); -ms-transition: scale(1.3, 1.3); -o-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; } .owl-theme .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #a9a9a9; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #000; } .owl-theme .owl-nav { position: absolute; top: 50%; right: 0; width: 70px; height: 30px; margin: -45px 0 0 0; display: inline-block; zoom: 1; *display: inline; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .owl-theme .owl-nav div { position: absolute; width: 30px; height: 30px; font-size: 0; } .owl-theme .owl-nav .owl-prev { left: 0; background: url(../Content/images/icon/icon_productArrow_L.png?v20170216) no-repeat center; } .owl-theme .owl-nav .owl-next { right: 0; background: url(../Content/images/icon/icon_productArrow_R.png?v20170216) no-repeat center; } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } /*---------------------------------------------------------------------------- * jquery-confirm v1.7.8 * http://craftpip.github.io/jquery-confirm/ *---------------------------------------------------------------------------*/ body.jconfirm-noscroll { overflow: hidden !important; } @-webkit-keyframes jconfirm-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes jconfirm-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .jconfirm { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999999; font-family: inherit; overflow: hidden; } .jconfirm .jconfirm-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; -webkit-transition: all .4s; transition: all .4s; } .jconfirm .jconfirm-bg.seen { opacity: 1; } .jconfirm .jconfirm-scrollpane { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .jconfirm .jconfirm-scrollpane>.container { margin: auto; } .jconfirm .jconfirm-box-container { width: 90%; margin: 0 auto; max-width: 360px; } .jconfirm.SVBox .jconfirm-box-container { max-width: 410px; } .jconfirm.lightboxHomeBox .jconfirm-box-container, .jconfirm.lightboxBusinessBox .jconfirm-box-container, .jconfirm.ReadBox .jconfirm-box-container { max-width: 680px; } .jconfirm.ReadAgainBox .jconfirm-box-container { max-width: 880px; } .jconfirm.MsgBoxW1000 .jconfirm-box-container { max-width: 1000px; } .jconfirm.MsgBoxW1280 .jconfirm-box-container { max-width: 1280px; } .jconfirm.uniform .jconfirm-box-container { max-width: 660px; } .jconfirm.uniform .jconfirm-scrollpane { overflow-y: hidden; display: flex; align-items: center; justify-content: center; } .jconfirm.uniform .jconfirm-box { margin-top: auto !important; } .jconfirm.uniform .jconfirm-box-container .explainBox img { max-width: 100%; } .jconfirm .jconfirm-box { background: white; border-radius: 4px; position: relative; } .jconfirm .jconfirm-box div.closeIcon { height: 20px; width: 20px; position: absolute; top: 12px; right: 12px; cursor: pointer; opacity: .6; text-align: center; display: none; } .jconfirm .jconfirm-box div.closeIcon:hover { opacity: 1; } .jconfirm .jconfirm-box div.title { font-size: 24px; color: #999; padding: 15px 15px 5px; display: none; } .jconfirm .jconfirm-box div.content { padding: 25px 25px 25px; padding-top: 40px; } .jconfirm .jconfirm-box div.content span { color: #55a8f1; } .jconfirm .jconfirm-box div.content:empty { height: 40px; position: relative; opacity: 0.6; } .jconfirm .jconfirm-box div.content:empty:before { content: ''; height: 20px; width: 20px; border: solid 2px #aaa; position: absolute; left: 50%; margin-left: -45px; border-radius: 20%; -webkit-animation: jconfirm-rotate 1s infinite; animation: jconfirm-rotate 1s infinite; } .jconfirm .jconfirm-box div.content:empty:after { content: 'loading..'; position: absolute; left: 50%; margin-left: -15px; } .jconfirm .jconfirm-box div.content { padding: 25px 25px 25px; padding-top: 40px; } .jconfirm .jconfirm-box .buttons {} .jconfirm .jconfirm-box .buttons button+button { margin-left: 5px; } .jconfirm .jquery-clear { clear: both; } .jconfirm.rtl { direction: rtl; } .jconfirm.rtl div.closeIcon { left: 12px; right: auto; } .jconfirm.white .jconfirm-bg { background-color: rgba(0, 0, 0, 0.5); } .jconfirm.white .jconfirm-box { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); border-radius: 5px; } .jconfirm.white .jconfirm-box .buttons { position: absolute; top: 5px; right: 5px; } .jconfirm.white .jconfirm-box .buttons button { border: none; text-transform: uppercase; text-shadow: none; -webkit-transition: background .1s; transition: background .1s; color: #000; font-size: 18px; font-weight: 400; background: none; line-height: 30px; vertical-align: middle; cursor: pointer; } .jconfirm.white .jconfirm-box .buttons button.btn-default { box-shadow: none; color: #333; } .jconfirm.white .jconfirm-box .buttons button.btn-default:hover { background: #ddd; } .jconfirm .jconfirm-box.hilight { box-shadow: 0 0 20px #55a8f1; } /*---------------------------------------------------------------------------- * jquery-confirm v1.7.8 * http://craftpip.github.io/jquery-confirm/ *---------------------------------------------------------------------------*/ .cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cycle-slideshow { width: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 1; } .cycle-slideshow img { position: absolute; top: 0; left: 0; width: 100%; padding: 0; display: block; } .cycle-slideshow img:first-child { position: static; z-index: 100; } .cycle-pager { text-align: center; width: 100%; z-index: 99; position: absolute; top: 10px; overflow: hidden; } .cycle-pager span { font-family: arial; font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; cursor: pointer; } .cycle-pager span.cycle-pager-active { color: #D69746; } .cycle-pager>* { cursor: pointer; } .cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; } .cycle-overlay { font-family: tahoma, arial; position: absolute; bottom: 0; width: 100%; z-index: 600; background: black; color: white; padding: 15px; opacity: .5; } .cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; } .cycle-prev { left: 0; } .cycle-next { right: 0; } .cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) } .disabled { opacity: .5; filter: alpha(opacity=50); cursor: not-allowed; } .disabled>* { cursor: not-allowed; } .cycle-paused:after { content: 'Paused'; color: white; background: black; padding: 10px; z-index: 500; position: absolute; top: 10px; right: 10px; border-radius: 10px; opacity: .5; filter: alpha(opacity=50); } @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .cycle-slideshow { width: 200px; } .cycle-overlay { padding: 4px } .cycle-caption { bottom: 4px; right: 4px } .jconfirm .jconfirm-box div.content { padding: 15px; } } /*---------------------------------------------------------------------------- * jquery Featherlight 1.7.7 * http://noelboss.github.io/featherlight/ *---------------------------------------------------------------------------*/ @media all { .featherlight { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483647; text-align: center; white-space: nowrap; cursor: pointer; background: #333; background: rgba(0, 0, 0, 0.8); } .featherlight:last-of-type { background: rgba(0, 0, 0, 0.8); } .featherlight:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .featherlight .featherlight-content { position: relative; text-align: left; vertical-align: middle; display: inline-block; overflow: auto; /* padding: 25px 25px 0; border-bottom: 25px solid transparent;*/ margin-left: 5%; margin-right: 5%; max-height: 95%; background: #fff; cursor: auto; white-space: normal; } .featherlight .featherlight-inner { display: block; } .featherlight script.featherlight-inner, .featherlight link.featherlight-inner, .featherlight style.featherlight-inner { display: none; } .featherlight .featherlight-close-icon { position: absolute; z-index: 9999; top: 0; right: 0; line-height: 50px; width: 50px; cursor: pointer; text-align: center; font-family: Arial, sans-serif; background: #fff; background: rgba(255, 255, 255, 0.3); color: #000; border: none; padding: 0; font-size: 50px; } .featherlight .featherlight-close-icon::-moz-focus-inner { border: 0; padding: 0; } .featherlight .featherlight-image { width: 100%; } .featherlight-iframe .featherlight-content { border-bottom: 0; padding: 0; -webkit-overflow-scrolling: touch; overflow-y: scroll; } .featherlight iframe { border: none; } .featherlight * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } /* Youtube 嵌入 */ .jconfirm .jconfirm-box-container.product-video-wrapper { max-width: 65%; } .jconfirm .jconfirm-box-container.product-video-wrapper .jconfirm-box div.content { padding: 35px; } .bxslider-video { position: relative; z-index: 2; } .bxslider-video:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 90px; height: 90px; background: url(../Content/images/icon/icon_player.png) no-repeat center center; background-size: 100% auto; cursor: pointer; } .video-container { position: relative; padding-bottom: 56%; height: 0; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0%; left: 0; width: 100%; height: 100%; } @media only screen and (max-width : 767px) { .jconfirm .jconfirm-box-container.product-video-wrapper { max-width: 90%; } .jconfirm .jconfirm-box-container.product-video-wrapper .jconfirm-box div.content { padding: 15px; } .jconfirm.white .jconfirm-box .buttons { top: -40px; } .jconfirm.white .jconfirm-box .buttons button { font-size: 30px; color: #fff; padding: 0; } } /** =========================================================================== Last edited: 2017-01-18, editor: 夯 =============================================================================== **/ @charset "utf-8"; /*----------------------------------------------------------------------------- [TABLE OF CONTENTS] +media -----------------------------------------------------------------------------*/ /* media *----------------------------------------------------------------------------*/ /** * * Desktops * **/ @media only screen and (min-width : 1500px) { /*產品說明2019/11*/ section article.bannerBox .bannerFt img.bgFull { -webkit-transform: translateX(-50%) translateY(0%); -moz-transform: translateX(-50%) translateY(0%); transform: translateX(-50%) translateY(0%); } section article.bannerBox.DHseries .bannerFt.home img.bgFull { -webkit-transform: translateX(-50%) translateY(0%) scale(1); -moz-transform: translateX(-50%) translateY(0%) scale(1); transform: translateX(-50%) translateY(0%) scale(1); } /*商用*/ section article.bannerBox .bannerFt .conbox { max-height: 1460px; } } @media only screen and (max-width : 1500px) { section article.bannerBox .bannerFt.busines .con .title { margin-top: 160px; } section article.formBox .wrap .title { padding-left: 25%; } article.companyService .thirdManagement .headlineBox { margin-top: 16%; } article.companyService .fourSolution .content .contentBox .boxRight .productShow { height: 380px; } article.companyService .fourSolution .content .contentBox .boxRight .productShow .box .productImg { right: -72px; top: 56px; max-width: 300px; } article.companyService .thirdManagement .content .part2 .txtWrap { overflow-x: scroll; } /*company Service*/ article.companyService .firstBanner .title { top: 50%; margin-left: -300px; width: 600px; font-size: 68px; line-height: 40px; } } @media only screen and (max-width : 1400px) and (min-width : 1141px) { section article.bannerBox .bannerFt.busines .con { width: 43%; } section article.bannerBox.MRSseries .bannerFt.busines .con .title, section article.bannerBox.Softseries .bannerFt.busines .con .title { letter-spacing: -2px; } } @media only screen and (max-width : 1440px) { section article.bannerBox .bannerFt.home .con .title span section article.bannerBox .bannerFt.busines .con .title span { display: block; } section article.bannerBox.Cseries .bannerFt.home .con .title span { display: inline; } /* section article.bannerBox .bannerFt.home .conboxbd { width: 60%; }*/ article.seriesList .item .conBox .title, article.seriesList .item .conBoxMin .title, article.serviceList .item .conBox .title { height: 166px; } section article.proList .boxBd { padding: 35px 40px 25px 40px; } section article.proList.examplesList .boxBd { padding: 91px 40px 41px 40px; } section article.proList .boxBd .proBox h3, section article.proList .boxBd .proBox h2, section article.proList .boxBd .proBox h1 { margin: 0 0 50px; } section article.proList .boxBd .msgBox { bottom: 30px; } article.serviceContent .bg.RE, article.serviceContent .bg.SV, article.serviceContent .bg.OLR, article.serviceContent .bg.DIY, article.serviceContent .bg.FAQ, article.serviceContent .bg.US, article.serviceContent .bg.CD, article.serviceContent .bg.WC, article.serviceContent .bg.HM, article.serviceContent .bg.INST, article.serviceContent .bg.RR, article.serviceContent .bg.ReP, article.serviceContent .bg.IMPO { -moz-background-size: 1440px auto; -webkit-background-size: 1440px auto; -o-background-size: 1440px auto; background-size: 1440px auto; /* -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; background-size:cover;*/ } section article.formBox.listFormBox .bg.ADV { width: 100%; background: #303030 url(../Content/images/service/serviceListFormQA_1920960.jpg?v=20170216) no-repeat center; background-size: 1950px auto; } section article.formFeature .wrap { max-width: 680px; margin: 0 auto; } section article.formBox .wrap .title, section article.formBox .wrap .form { text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.formBox .wrap .title .titleBox { max-width: 450px; } section article.formBox.listFormBox .wrap .title .titleBox { max-width: 100%; margin: 0 auto; } section article.formBox .wrap .title h2, section article.formBox .wrap .title h1 { font-size: 40px; line-height: 40px; } section article.unitMainList .partBox.part1 .model .bacteriaBox { position: absolute; width: 1440px; height: auto; } section.bacteriaBanner article.unitMainList .partBox.part3 .product { width: 1440px; height: auto; background-size: 90%; } article.companyService .fourSolution .content .contentBox .boxRight .productShow { max-width: 390px; height: 336px; } article.companyService .thirdManagement .content .part2 .txtWrap .txtWrapBox { width: 1500px; } article.companyService .thirdManagement .content .part2 .txtWrap { padding: 8% 6% 5% 10%; } article.companyService .firstBanner .scrollDown { /* bottom: -43px;*/ } .lightbox article.otherBoxEF .tabFilter { max-width: 500px; } .lightbox article.otherBoxEF .tabFilter .tabFilterL { float: left; width: 50%; } .lightbox article.otherBoxEF .tabFilter .tabFilterR { float: left; width: 50%; } .splitUnit .lightbox article.otherBoxEF.bgSoft3 .tabFilter .tabFilterL { width: 150px; } .splitUnit .lightbox article.otherBoxEF.bgSoft3 .tabFilter .tabFilterR { width: calc(100% - 150px); } } @media only screen and (max-width : 1360px) { section article.bannerBox .bannerFt.home .con .title, section article.bannerBox .bannerFt.busines .con .title { font-size: 42px; } article.companyService .secondPlanning .content .part2 .txtWrap { overflow-y: scroll; } section article.productConBox .detailBox .tabDetail .price, section article.productConBox .detailBox .tabDetail .default { display: block; } section article.productConBox .detailBox .tabDetail .default span.box img, section article.productConBox .detailBox .tabDetail .price span.box img, section article.productConBox .detailBox .tabDetail .DIYprice span.box img { position: relative; top: auto; left: auto; } section article.productConBox .detailBox .btn { padding: 52px 0 0; } section article.productConBox .detailBox .btn .number { right: 40%; } section article.productConBox .detailBox .btn .diyful { left: 60%; right: 0; } section article.productConBox .detailBox .btn input.buy[type="submit"] { width: 100%; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .btn { padding: 0 0 0; } } @media only screen and (max-width : 1360px) { article.howChoose .howChooseBd a.close { background: url(../Content/images/icon/icon_howChooseClose_bk.png?v=20170216) no-repeat right center; } article.howChoose .howChooseBd .chooseBox, article.howChoose .howChooseBd .explainBox { width: 100%; padding: 0; display: block; *display: block; } article.howChoose .howChooseBd .main { position: relative; } section article.unitMainList .bxslider .textLr { left: 5%; right: 65%; } section article.unitMainList .bxslider .textRl { left: 65%; right: 5%; } article.seriesList .item .photo .title, section article.bannerBox .bannerHd .title { right: 5%; } article.seriesList .item .photo .title .icon, section article.bannerBox .bannerHd .title .icon { width: 85px; } article.seriesList .item .photo .title .ser, section article.bannerBox .bannerHd .title .ser { font-size: 70px; } article.seriesList .item .photo .title .ser.tw, section article.bannerBox .bannerHd .title .ser.tw { font-size: 62px; } article.seriesList .item .photo .title .en, section article.bannerBox .bannerHd .title .en { font-size: 30px; line-height: 32px; } article.seriesList .item .photo .title .ch, section article.bannerBox .bannerHd .title .ch { font-size: 26px; line-height: 30px; } article.serviceList .item .photo .box.odd { background-position: left center; /* -moz-background-size: 1440px auto; -webkit-background-size: 1440px auto; -o-background-size: 1440px auto; background-size: 1440px auto; */ } section article.clientsMap .title h2 { font-size: 25px; } section article.productConBox .detailBox .tabDetail .boxtdl.type { width: 44%; } section article.productConBox .detailBox .tabDetail .boxtdr.price { width: 56%; } section article.productConBox .detailBox .tabDetail .boxtdl.type { width: 44%; } section article.productConBox .detailBox .tabDetail .boxtdr.price { width: 56%; } section article.unitMainList .partBox.part3 .right, section.bacteriaBanner article.unitMainList .partBox.part3 .right.text2 { float: left; } section.bacteriaBanner article.unitMainList .partBox.part3 .product { background-size: 85%; background-position: bottom right; } .lightbox article.otherBoxEF .tabFilter { max-width: 480px; } } @media only screen and (max-width : 1280px) { section article.formBox { background-position: 30% 0%; } section article.formBox .wrap .title, section article.formBox .wrap .step2 { padding-left: 15%; } section article.proList .conBd .photo { width: 50%; } section article.proList .conBd .text { width: 50%; } section article.proList .conBd .photo .photobd { width: 570px; height: 410px; } section article.proList .conBd .photo .photobd img { max-width: 570px; max-height: 410px; } section article.proList .taskBoxbd .explainbox { margin: -40px auto 40px auto; } section article.proList .conBd.seoBox .text .textbd { padding: 0px 74px; } section article.proList .conBd.seoBox .text .textbd .txtTtl { font-size: 20px; line-height: 20px; } section article.proList .conBd.seoBox .text .textbd .txtCon { height: 6em; margin-top: 20px; font-size: 14px; line-height: 20px; } section article.proList .conBd.seoBox .text .textbd .proBtn { margin-top: 15px; } section article.proList .taskBoxbd .explainbox .explain { width: auto; margin: 0 auto; height: auto; } section article.proList .taskBoxbd .explainbox .explain .reach { position: relative; top: auto; left: auto; right: auto; width: auto; margin: 20px 0 0 0; } section article.clientsList .container .item { width: 25%; } article.serviceList .item .photo .title { left: 5%; width: 90%; margin: -120px 0 0 0; } section article.productConBox .detailBox .tabDetail .boxtdl.type .txt span { display: inline-block; } article.companyService .fourSolution .content .contentBox .boxRight .productShow { max-width: 324px; height: 304px; } article.companyService .fourSolution .content .contentBox .boxRight .productShow .box .productImg { max-width: 214px; } .lightbox article.otherBoxEF .tabFilter { max-width: 420px; } .lightbox article.otherBoxEF.bgSoft2 .photo, .lightbox article.otherBoxEF.bgSoft2 ul { display: block; width: auto; padding: 0 10px; } .lightbox article.otherBoxEF.bgSoft2 .photo { margin: 0 0 20px 0; } article.seriesList .item .conBoxMin { width: 25%; } } @media only screen and (max-width : 1200px) { section article.productList .container .item { width: 33.3%; } section article.productList .container.max .item { width: 50%; } section article.otherBox.home .container .item { width: 33.3%; } /* section article.bannerBox .bannerFt.home .conboxbd { width: 70%; }*/ /*company Service*/ article.companyService .firstBanner .title { margin-left: -300px; width: 600px; font-size: 68px; line-height: 40px; } /* article.companyService .firstBanner .title span { font-size: 24px; line-height: 30px; font-weight: 200; letter-spacing: 20px; } article.companyService .firstBanner .subTitle { font-size: 15px; line-height: 26px; } */ article.companyService .firstBanner .title span.water { font-size: 24px; line-height: 24px; letter-spacing: 20px; display: inline-block; } article.companyService .firstBanner .title span.subTitle { font-size: 18px; line-height: 24px; display: block; } article.companyService .firstBanner .scrollDown { /*bottom: -8%;*/ margin-left: -14px; } article.companyService .firstBanner .scrollDown .mouse { width: 20px; height: 38px; } article.companyService .firstBanner .scrollDown .scrollTxt { margin-top: 2px; } article.companyService .secondPlanning .content .part2 .txtWrap { max-width: 280px; } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt .txtTitle, article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt .txtTitle { margin-bottom: 16px; font-size: 20px; line-height: 28px; } /* article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt { bottom: 6%; } */ article.companyService .fourSolution .content .contentBox .boxRight .productShow { max-width: 342px; top: 22%; } article.companyService .fourSolution .content .contentBox .boxRight .productShow .box .productImg { top: 56px; right: -66px; max-width: 230px; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt span.contentB { display: inline-block; } /** 產品頁 ---------------------------------------------------*/ section article.productConBox .otherChooseBox .item .infoBox span { right: 16px; bottom: -2px; } /** lightbox ---------------------------------------------------*/ .jconfirm.testReport .jconfirm-box-container, .jconfirm.otherProduct .jconfirm-box-container { max-width: inherit; width: 90vw; } .jconfirm.otherProduct .jconfirm-box { border-radius: 0 !important; } .jconfirm.otherProduct .jconfirm-box div.content { padding: 24px 20px 46px; } .otherProductBox { flex-direction: column; } .otherProductBox .bx-wrapper { width: 100% } .jconfirm.testReport iframe { height: 80vh; } .otherProductBox .lightDetails { width: 100%; margin: 60px 0 0 0; } .otherProductBox .lightDetails .box { margin-top: 8px; } .sml_ProductBox { padding: 0; } .sml_ProductBox .sml_Ttl { font-size: 20px; } .sml_ProductBox .sml_icn_close { top: 7px; right: 0px; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto, section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody { display: block; width: auto; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto img { max-width: 240px; } } @media only screen and (max-width : 1190px) { section article.productConBox.first .main { padding: 60px 0 150px; padding: 60px 0 60px; } } @media only screen and (max-width : 1140px) { section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi { /* display: inline; */ } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi a { display: inline-block; vertical-align: top; margin: 0 -2px; /* width: 25%; */ padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } section article.orderConBox .otherOrder fieldset .box.w35, section article.orderConBox .otherOrder fieldset .box.w60 { display: block; vertical-align: middle; width: 100%; margin: 0; } /**product home + business**/ section article.bannerBox .bannerFt.home .con, section article.bannerBox .bannerFt.busines .con { width: 100%; display: block; *display: block; } section article.bannerBox .bannerFt.home .banner, section article.bannerBox .bannerFt.busines .banner { display: none; } section article.bannerBox .bannerFt.home .con .title, section article.bannerBox .bannerFt.busines .con .title { font-size: 70px; } section article.bannerBox .bannerFt .conbox1 { position: relative; height: auto !important; } section article.bannerBox .bannerFt .con.end .conbox, section article.bannerBox .bannerFt .conbox { height: 70px !important; background-image: none; min-height: initial; min-height: auto; } section article.bannerBox .bannerFt .con.start .conboxMain { left: 0; } section article.bannerBox .bannerFt2.home .photo img, section article.bannerBox .bannerFt2.busines .photo img { filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; } section article.bannerBox .bannerFt.home .con img.product, section article.bannerBox .bannerFt.busines .con img.product { display: none; } section article.bannerBox .bannerFt .conbox1 p { font-size: 22px; } section article.bannerBox .bannerFt .conbox a.more { left: 17%; } /**product home**/ section article.bannerBox .bannerFt.home .con img.product { top: 260px !important; width: 80%; margin: 0 10%; margin-top: 180px; } section article.bannerBox .bannerFt2.home .photo { background: #e5e7f3; } section article.bannerBox.Oseries .bannerFt.home .con .title, section article.bannerBox.Kseries .bannerFt.home .con .title, section article.bannerBox.Cseries .bannerFt.home .con .title, section article.bannerBox.DHseries .bannerFt.home .con .title, section article.bannerBox.CUseries .bannerFt.home .con .title, section article.bannerBox.Hseries .bannerFt.home .con .title, section article.bannerBox.DCseries .bannerFt.home .con .title, section article.bannerBox.WHseries .bannerFt.home .con .title, section article.bannerBox.EFseries .bannerFt.home .con .title, section article.bannerBox.HLseries .bannerFt.home .con .title, section article.bannerBox.PBSseries .bannerFt.home .con .title { width: 66%; min-width: 66%; margin: 0 auto; padding: 120px 0 0 0; text-align: left; } section article.bannerBox .bannerFt.home .conboxbd { width: 66%; min-width: 66%; padding: 40px 0 180px 0; } /**product busines**/ section article.bannerBox .bannerFt.busines .con img.product { top: 40px !important; width: 80%; margin: 0 10%; } section article.bannerBox .bannerFt2.busines .photo { background: #323232; } section article.bannerBox.ICEseries .bannerFt.busines .con .title, section article.bannerBox.MRSseries .bannerFt.busines .con .title, section article.bannerBox.HOTseries .bannerFt.busines .con .title, section article.bannerBox.Centralseries .bannerFt.busines .con .title, section article.bannerBox.Softseries .bannerFt.busines .con .title { width: 66%; margin: 0 auto; padding: 120px 0 0 0; } section article.bannerBox .bannerFt.busines .conboxbd { width: 66%; padding: 40px 0 180px 0; } /* section article.formBox .wrap .form .box > label { width: 40%; } */ section article.formBox .wrap .form .box>div { width: 60%; } section article.formBox .wrap .form .box { margin: 0 0 10px 0; } section article.formBox .wrap .form .box:nth-child(4) { margin: 15px 0 15px 0; } /** blog **/ section article.blogList .item { width: 49%; } /** science **/ section article.scienceList .container { max-width: 860px; } section article.scienceList .item { width: 44%; margin: 0 0 60px; } article.seriesList .item .conBoxMin { width: 33.33%; } } @media only screen and (min-width : 1100px) { article.carcridges-pro-intro .kv-title-box { position: absolute; right: calc(50% + (1100px/5)); left: 0; bottom: 0; padding: 55px 76px 0 0px; background: #fff; text-align: right; } } @media only screen and (max-width : 1080px) { article.companyService .headlineBox .headline { margin-top: 76%; font-size: 40px; } article.companyService .headlineBox .headline .subtxt { padding-top: 26px; font-size: 22px; line-height: 28px; } article.companyService .headlineBox .headline:after { bottom: -8px; width: 170px; } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt { left: 162px; right: -24px; } article.companyService .fourSolution .content .contentBox .boxRight .productShow { max-width: 296px; height: 280px; } /* productList banner title */ .bannerHd .seriesTtl { position: absolute; top: 50%; right: 8%; height: 105px; color: #fff; margin: -52px 0 0 0; z-index: 9; } .bannerHd .seriesTtl .titleSub { font-size: 40px; line-height: 50px; } .bannerHd .seriesTtl .btn-howChoose { margin: 20px auto 0; width: 160px; height: 38px; border-radius: 30px; } .bannerHd .seriesTtl .btn-howChoose a { font-size: 18px; line-height: 38px; } section article.bannerBox .bannerFt .banner .desc, section article.unitTitle .icon { display: none; } section article.unitTitle .main { -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 50px 10px; } section article.unitTitle .default, section article.unitTitle .infoBox, section article.unitTitle .infoDIYreturn { width: 100% } } @media only screen and (max-width : 1040px) { section article aside.subnav, section article.recordBox .productList, section article.orderConBox .productList, section article.orderConBox .orderList, section article.personalBox .memberPersonal, section article.orderConBox .testReportList { float: none; width: auto; margin: 0 5% 0 0; } section article aside.subnav { padding: 60px 0 0 0; margin: 0 5%; } section article.orderConBox .productList, section article.orderConBox .orderList, section article.personalBox .memberPersonal, section article.orderConBox .testReportList { /*margin: 60px 0 0 0;*/ margin: 0 5%; padding: 60px 0 0 0; } section article.personalBox .memberPersonal { padding: 20px 0 0 0; } section article.proList .boxBd .btn { position: relative; top: auto; right: auto; width: auto; margin: 20px 0 0 0; } section article.proList .boxBd .btn a { margin: 0; } section article.proList .boxBd .msgBox { position: relative; bottom: auto; right: auto; margin: 20px 0 0 0; } section article.proList .boxBd .msgBox a { margin: 0 15px 0 0; } /*粉絲團*/ .mainPushWrapper { position: relative; width: 100%; margin: -8% auto 0; padding: 0 20px 30px; display: flex; align-items: flex-start; background: #fff; z-index: 5; } section article.newsList { width: 100%; } section article.socialLinkBox, section article.newsList .newsBox h2:after { display: none; } section article.socialLinkBox_M .container { padding: 0 20px; width: 400px; margin: 0 auto; } section article.socialLinkBox_M { display: block; padding: 20px 0 50px; border-bottom: 1px solid #d0d0d0; } } @media only screen and (max-width : 1024px) { section article.filtrationList .filtrationBox ul.filtrationItem { padding: 0 5px; } section article.filtrationList .filtrationBox ul.filtrationItem>li { padding: 5px; } section article.filtrationList .filtrationBox ul.filtrationItem>li .filtrationMenu { left: 0px; right: 0px; margin-top: -34px; } section article.filtrationList .filtrationBox ul.filtrationItem>li .filtrationMenu .filtrationMenuBox { padding: 10px; } section article.filtrationList .filtrationBox ul.filtrationItem>li .filtrationMenu a.btnMenu { width: 50px; line-height: 30px; } section article.filtrationList .filtrationBox ul.filtrationItem>li .filtrationMenu a.btnMenu img { max-width: 16px; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi a { padding: 5px; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi span.seriesHd { font-size: 14px; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi span.seriesHd+span.seriesBd { margin: 0; } section article.filtrationList .filtrationBox .title { top: 40px; } section article.filtrationList .filtrationBox .title:after { top: -16px; width: 30px; margin: 0 0 0 -15px; } section article.filtrationList .filtrationBox .title .titleSub { margin: 0 0 5px 0; font-size: 24px; line-height: 30px; } section article.filtrationList .filtrationBox .title .text { font-size: 15px; line-height: 20px; } .lineBox { display: none; } .swiper-button-next { right: 0px !important; } .swiper-button-prev { left: 0px !important; } article.howChoose .howChooseBd a.close { right: 10px; } footer .footerFt { padding: 20px 40px 20px; } /** product home + bussiness **/ section article.bannerBox .bannerFt .conbox { background: url(../Content/images/icon/icon_info_s.gif?v=20170216) no-repeat right 90px; } section article.bannerBox .bannerFt .con.end .conbox { background-position: right top; background-attachment: scroll; } section article.bannerBox .bannerFt .conbox h2, section article.bannerBox .bannerFt .conbox p { opacity: 1; } /****/ .page section, .homePage section, .homePageW section { margin: 60px 0 0 0; } section.bacteriaBanner { margin: -90px 0 0; } /** formQA**/ section article.formBox.listFormBox .wrap .form { width: 100%; max-width: 350px; float: left; } section article.formBox .wrap .form fieldset { width: 100%; margin: 0 auto; } section article.formBox .wrap { width: 100%; padding: 100px 90px 120px 180px; } article.formBox.listFormBox .wrap { width: 100%; padding: 100px 20px 120px 20px; } section article.formBox .wrap .title, section article.formBox .wrap .step2 { padding-left: 0%; } section article.promotList .promotBox ul span.titleBox .subTitle { display: none; } section article.promotList .promotBox ul li a img { width: 100%; } /* company service */ article.companyService .firstBanner { padding: 12px 12px 0; } article.companyService .scrollNav { left: -21px; } article.companyService .secondPlanning .sectionWrap { padding: 13% 5.5% 6% 11%; } article.companyService .firstBG { width: 100%; } article.companyService .thirdManagement .sectionWrap .content .part2 .focusLine { left: 36px; } article.companyService .thirdManagement .sectionWrap .content .part2 .focusLine span:before { left: -94px; width: 80px; } article.companyService .secondPlanning .sectionWrap .content .part2 .focusLine span:before { left: -92px; width: 80px; } article.companyService .secondPlanning .sectionWrap .content .part2 .focusLine { left: 28px; } article.companyService .thirdManagement .headlineBox { margin-top: 11%; } section article.promotList .promotBox ul li { padding-bottom: 21%; } section article.promotList .promotBox ul li.w40 { width: 50%; } section article.promotList .promotBox ul li.w20 { width: 50%; } section article.promotList .promotBox ul li.w20 .smallImg { display: none; } section article.promotList .promotBox ul li.w20 .bigImg { display: block; } section article.promotList .promotBox ul li.w40 .smallImg { display: none; } section article.promotList .promotBox ul li.w40 .bigImg { display: block; } section article.scienceBd .topSpace { height: 10vw; } section article.scienceBd .photo { display: block; width: 90%; margin: 0 auto; /*padding: 0 0 6vw;*/ } section article.scienceBd .box { display: block; width: auto; max-width: 600px; padding: 30px 20px 30px 20px; margin: 0 auto 40px auto; min-height: initial; } section article.scienceBd .box .inner { padding: 60px 0; } section article.scienceBd .loadMore { position: absolute; bottom: -60px; } section article.scienceBd .box .share { right: 3%; } } @media only screen and (max-width : 1020px) { .lightbox article.otherBoxEF.tableCell { display: block; width: 100%; } .lightbox article.otherBoxEF.bgSoft .tabFilter { max-width: initial; } section article.productConBox .detailBox .btn { padding: 0; } section article.productConBox .detailBox .btn .number { right: 62%; } section article.productConBox .detailBox .btn .diyful { left: 38%; right: 42%; } section article.productConBox .detailBox .btn input.buy[type="submit"] { width: 40%; } section article.productConBox .productlist, section article.productConBox .detailBox { display: block; *display: block; float: inherit; width: 80%; padding: 0; margin: 0 auto; } section article.productConBox.first .main { padding: 60px 0; } section article.productConBox.first .main { margin-left: auto; } .ProductTop { display: none; } .backshoplist { display: block; } section article.productConBox .detailBox {} section article.productConBox .detailBox .posBox { position: relative; top: inherit; right: inherit; transform: none; -moz-transform: none; -webkit-transform: none; -o-transform: none; width: 75%; margin: 40px auto 0 auto; } section article.productConBox .detailBox .tabDetail { padding-top: 5%; } section article.productConBox .detailBox .tabDetail .price, section article.productConBox .detailBox .tabDetail .default { display: table-cell; } section article.productConBox .detailBox .tabDetail .default span.box img, section article.productConBox .detailBox .tabDetail .price span.box img, section article.productConBox .detailBox .tabDetail .DIYprice span.box img { position: absolute; top: -20px; left: -15px; } section article.otherBox.busines .container .item { width: 50%; } section article.clientsList .container .item { width: 33.3%; } section article.proList .conBd .photo, section article.proList .conBd .text { display: block; *display: block; width: 100%; } section article.proList .conBd .photo .photobr { margin: 0; padding: 40px 0; } section article.proList .conBd .text .textbd { padding: 40px; } section article.proList .conBd .photo .photobd { display: block; margin: 0 auto; height: auto; width: auto; } section article.proList .conBd .photo .photobd img { width: 100%; max-width: 570px; max-height: none; } section article.proList .conBd.seoBox .photo .photobd { height: auto; } section article.proList .conBd.seoBox .text { max-width: 570px; margin: 0 auto; } section article.proList .conBd.seoBox .text .textbd { padding: 40px 0px; } section article.proList .conBd.seoBox .text .textbd .txtCon { width: 100%; height: auto; margin-top: 20px; font-size: 14px; line-height: 20px; } section article.proList .conBd.seoBox { margin: 70px 0 0; padding-top: 40px; } section article.unitMainList .bxslider h2 span.green, section article.unitMainList .bxslider h2 em { font-size: 24px; } section article.unitMainList .bxslider h2 span.blue { font-size: 80px; } section article.unitMainList.home .bxslider .part1 .bg_img, section article.unitMainList.home .bxslider .part2 .bg_img { top: 280px !important; -webkit-background-size: 200px auto !important; -o-background-size: 200px auto !important; background-size: 200px auto !important; } section article.unitMainList.home .bxslider .part3 .bg_img { top: 100px !important; background: url(../Content/images/banner/index_home_part3_m_1920.png?v=20170216) no-repeat 35% center !important; -moz-background-size: cover !important; -webkit-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } /* section article.unitMainList.business .bxslider .part1 .bg_img { top: 120px !important; background: url(../Content/images/banner/businessProduct.png?v=20170216) no-repeat center; -webkit-background-size: 150% auto !important; -o-background-size: 150% auto !important; background-size: 150% auto !important; }*/ section article.unitMainList .bxslider .textCe { left: 15%; right: 15%; } section article.unitMainList .bxslider li.part3 .textRl { display: none; } section article.unitMainList .bxslider li.part3 .icon1, section article.unitMainList .bxslider li.part3 .icon2 { left: 30%; display: none !important; } section article.unitMainList .bxslider li.part3 .icon1 { top: 460px; margin: 0 0 0 -100px; } section article.unitMainList .bxslider li.part3 .icon2 { top: 420px; margin: 0 0 0 180px; } .lightbox article.discontinued .discontinuedL, .lightbox article.discontinued .discontinuedR { display: block; width: auto; margin: 0; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto, section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody { display: table-cell; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto { width: 38%; padding: 0 4% 0 0; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody { width: 58%; padding: 20px 0 0 0; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto img { max-width: inherit; max-width: initial; } } @media only screen and (max-width : 960px) { section article.productList .groupBox { padding: 0; } section article.productList .groupBox .photo, section article.productList .groupBox .item { display: block; } section article.productList .groupBox .photo { text-align: center; width: auto; padding: 0; margin: 0 0 40px 0; } section article.productList .groupBox .item { width: 80%; margin: 0 auto; padding: 0; } section article.bannerBox .bannerFt.home .banner { display: none; } section article.bannerBox .bannerFt.home .con { width: 100%; } section article.bannerBox .bannerFt.home .con, section article.bannerBox .bannerFt2.busines { /*display: none;*/ } section article.productList .container .item { width: 50%; } section article.shoppingBox .otherOrder .invoiceBox, section article.shoppingBox .otherOrder .installBox { width: 100%; margin: 20px 0 0 0; } section article.shoppingBox .otherOrder .otherBox { padding: 30px 60px 30px 60px; } section article.otherBox .owl-carousel { width: 70%; } /* section article.bannerBox .bannerFt.home .conboxbd { width: 60%; padding: 80px 60px; } */ /*formQA*/ section article.formBox .wrap .title { width: 100%; float: none; } section article.formBox .wrap .form { width: 100%; max-width: 300px; float: none; margin-top: 5%; } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt { max-width: 236px; } article.companyService .secondPlanning .sectionWrap .content .part2 .focusLine { top: 16px; left: 28px; } article.companyService .secondPlanning .sectionWrap .content .part2 .focusLine span:before { top: 7px; left: -78px; width: 70px; } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt .txtTitle, article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt .txtTitle { margin-bottom: 6px; font-size: 16px; line-height: 24px; } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt .txtBox { font-size: 12px; line-height: 20px; } article.companyService .thirdManagement .sectionWrap .content .part2 .focusLine { top: 6px; } article.companyService .thirdManagement .headlineBox { margin-top: 12%; } article.companyService .fourSolution .content .contentBox .boxRight .productShow { top: 24%; max-width: 256px; height: 256px; } article.companyService .fourSolution .content .contentBox .boxRight .productShow .box .productImg { top: 30px; right: -57px; max-width: 190px; } article.companyService .thirdManagement .content .part2 .txtWrap .txtWrapBox { width: 1200px; } section article.productList .descBox .iconBox, section article.productConBox .descBox .iconBox, section article.orderConBox .returnList .descBox .iconBox, section article.orderConBox .productList .descBox .iconBox { position: relative; top: auto; margin: 40px 0 0 0; } section article.productList .descBox .iconBox span, section article.productConBox .descBox .iconBox span, section article.orderConBox .returnList .descBox .iconBox span, section article.orderConBox .productList .descBox .iconBox span { margin: 0 5px; } section article.scienceHd .photo, section article.scienceHd .box { display: block; width: auto; } section article.scienceHd .box { padding: 60px 5% 60px 5%; } section article.scienceHd .box .share { right: 7%; } /* invoiceLightbox */ .invoiceLightbox .invoiceDetailBox .invoiceDetailHd>div { display: block; } .invoiceLightbox .invoiceDetailBox .invoiceDetailFt { display: block; } .invoiceLightbox .invoiceDetailBox .invoiceDetailFt>div:nth-child(1) .box { display: flex; align-items: start; justify-content: space-between; } /* invoiceLightbox */ .invoiceLightbox .invoiceDetailBox .invoiceDetailHd>div { display: block; } .invoiceLightbox .invoiceDetailBox .invoiceDetailFt { display: block; } .invoiceLightbox .invoiceDetailBox .invoiceDetailFt>div:nth-child(1) .box { display: flex; align-items: start; justify-content: space-between; } } @media only screen and (max-width : 900px) { section article.shoppingBox .tabDetail .total .coupon { position: inherit; left: auto; top: auto; width: 100%; } section article.shoppingBox .tabDetail .total .coupon.open { top: 0; } section article.shoppingBox .tabDetail .total .coupon.open2 { top: 0; } section article.shoppingBox .tabDetail .total .coupon .box { height: 50px; margin: 0 10px 0 0; } section article.orderConBox .otherOrder { flex-direction: column; } section article.orderConBox .otherOrder .payerBox, section article.orderConBox .otherOrder .installBox { width: auto; margin: 20px 0 0 0; } section article.unitTitle .main>.register, section article.unitTitle .main>.msgBox, section article.unitTitle .main>.title { /* width: 100%; */ width: auto; margin: 0; padding: 0; } section article.proList .conFt .text .shopInfo .box { width: 100%; } section article.newsList .newsBox .owl-theme .owl-nav .owl-prev { left: 0; } section article.newsList .newsBox .owl-theme .owl-nav .owl-next { right: 0; } article.serviceContent .title h2, article.serviceContent .title h1, article.serviceContent .title .ttl { font-size: 42px; line-height: 48px; } article.filterTableBox .tabsRoleBox ul { text-align: center; margin: 0 0 20px 0; } section article.unitTitle .register { padding: 0 40px 0 40px; } section article.unitTitle .msgBox { padding: 0 40px 0 40px; display: block; } section article.unitTitle .clock { position: relative; top: auto; right: auto; text-align: left; margin: 20px 0 0 0; padding: 0 0 0 40px; } section article.unitTitle .clock span { display: inline; padding: 0 0 0 10px; } section article.unitTitle .btn { position: relative; top: auto; right: auto; display: block; text-align: left; margin: 20px 0 0 0; padding: 0 0 0 40px; } section article.unitTitle .btn span { display: block; margin: 0 0 40px 0; } section article.unitTitle .btn span.date, section article.unitTitle .btn span.invoiceNumber { display: block; margin: 0 10px 0 0; } section article.unitTitle .btn .invoiceDetail { /* margin: 18px 0 0 0; */ text-align: left; } section article.unitTitle .btn .invoiceDetail a { display: inline-block; } section article.unitTitle .btn>div .btn-wrap { display: flex; } section article.unitTitle .btn>div { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } section article.unitTitle .btn a { display: inline-block; margin: 0 5px 0 0; } section article.unitTitle .default, section article.unitTitle .infoBox, section article.unitTitle .infoDIYreturn { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; padding: 0; } section article.unitTitle .infoBox .btn { top: auto; } section article.unitTitle .msgBox ul.surveyBox li { display: block; } section article.unitTitle .msgBox ul.surveyBox li .boxtr { margin: 0; } .homePage button.slick-next { right: 0px; } .homePage button.slick-prev { left: 0px; } footer .footerHd { padding: 40px 0 30px 0; } footer .footerHd .subnav { padding: 0 40px 40px 40px; } footer .footerHd .shareBox { position: relative; top: auto; right: auto; width: auto; padding: 40px 40px 40px 40px; border-top: 1px rgba(255, 255, 255, 0.3) solid; } footer .footerHd .rewardBox { width: 100%; margin: 10px 30px 30px; text-align: left; } footer .footerHd .pureBox { position: relative; bottom: auto; right: auto; width: auto; padding: 30px 40px 0 40px; border-top: 1px rgba(255, 255, 255, 0.3) solid; } footer .footerHd .shareBox span { float: left; display: block; margin: 0 27px 0 0; } article.serviceContent .title .versionBox .explainBox { width: auto; } /* 雙溫 SEO lightbox */ .howChoose-filtration .howChoose-header .subTtl { font-size: 16px; } .howChoose-filtration .howChoose-header .ttl { font-size: 24px; } .jconfirm.choose-filtration .cont { font-size: 15px; } .howChoose-filtration .howChoose-header .cont { margin-top: 10px; } .howChoose-filtration .howChoose-good { padding: 60px 0 45px; } .howChoose-filtration .howChoose-good .view, .howChoose-filtration .howChoose-products, .howChoose-filtration .howChoose-question .view { flex-direction: column; } .howChoose-filtration .howChoose-good .howChoose-good-txt, .howChoose-filtration .howChoose-good .howChoose-good-img { width: 100%; max-width: 100%; padding: 0; } .howChoose-filtration .howChoose-good .howChoose-good-img { margin-top: 20px; } .howChoose-filtration .howChoose-good .howChoose-good-txt .ttl { margin-bottom: 24px; font-size: 22px; } .howChoose-filtration .howChoose-products .howChoose-products-item { width: 100%; margin-bottom: 60px; } .howChoose-filtration .howChoose-products { padding: 60px 0 0; } .howChoose-filtration .howChoose-products .howChoose-products-item .ttl { margin-bottom: 24px; margin-top: 8px; font-size: 20px; } .howChoose-filtration .howChoose-products .howChoose-products-item .ttl .smTxt { font-size: 14px; } .howChoose-filtration .howChoose-question .txt { width: 100% } .howChoose-filtration .howChoose-question .ttl { font-size: 22px; margin-bottom: 24px; } .howChoose-filtration .howChoose-header .ttl { font-size: 24px; } .jconfirm.choose-filtration .cont { font-size: 15px; } .howChoose-filtration .howChoose-header .cont { margin-top: 10px; } .howChoose-filtration .howChoose-good { padding: 60px 0 45px; } .howChoose-filtration .howChoose-good .view, .howChoose-filtration .howChoose-products, .howChoose-filtration .howChoose-question .view { flex-direction: column; } .howChoose-filtration .howChoose-good .howChoose-good-txt, .howChoose-filtration .howChoose-good .howChoose-good-img { width: 100%; max-width: 100%; padding: 0; } .howChoose-filtration .howChoose-good .howChoose-good-img { margin-top: 20px; } .howChoose-filtration .howChoose-good .howChoose-good-txt .ttl { margin-bottom: 24px; font-size: 22px; } .howChoose-filtration .howChoose-products .howChoose-products-item { width: 100%; margin-bottom: 60px; } .howChoose-filtration .howChoose-products { padding: 60px 0 0; } .howChoose-filtration .howChoose-products .howChoose-products-item .ttl { margin-bottom: 24px; margin-top: 8px; font-size: 20px; } .howChoose-filtration .howChoose-products .howChoose-products-item .ttl .smTxt { font-size: 14px; } .howChoose-filtration .howChoose-question .txt { width: 100% } .howChoose-filtration .howChoose-question .ttl { font-size: 22px; margin-bottom: 24px; } } @media only screen and (max-width : 840px) { section article.consumerList .container .item, section article.professionalList .container .item { margin-right: 0px; } section article.productList .container.max .item { width: 100%; } section article.productList .item .introBox { display: block !important; } section article.productList .introBox.min { display: none !important; } /* article.seriesList .item { float: none; width: 100%; }*/ section article.bannerBox .bannerFt.busines .title { font-size: 45px; } section article.locationConBox .locationList .item .boxBd ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } section article.locationConBox .locationList .item .boxBd ul li.date { width: 100%; } section article.locationConBox .locationList .item .boxBd ul li, section article.locationConBox .locationList .item .boxBd ul li:last-child { float: none; width: 50%; margin: 0 0 10px 0; } section article.logoBox .container .item { width: 50%; } article.serviceList .item .photo .title h2, article.serviceList .item .photo .title h1 { font-size: 42px; line-height: 46px; } article.serviceList .item .conBox { padding: 40px 0; } article.serviceList .item .conBox .title { width: 100%; margin: 0 auto; height: auto; text-align: left; } article.serviceList .item .conBox .title .en { font-size: 24px; line-height: 30px; } article.serviceList .item .conBox .title .ch { font-size: 22px; line-height: 30px; } article.serviceList .item .conBox .title .icon { width: 55px; } article.serviceList .item .conBox .title .icon img { width: 100%; } article.serviceList .item .conBox .btn { width: 100%; text-align: center; } section article.personalBox .memberSurvey fieldset .box label, section article.personalBox .memberSurvey fieldset .box .con { float: none; width: 100%; } section article.personalBox .memberSurvey fieldset .box.max label { display: block; margin: 0 0 2% 0; } /* article.serviceContent .title .versionBox { width: 92%; padding: 15px; margin: 0 0 20px 0; } article.serviceContent .title .versionBox .boxtr { display: block; *display: block; width: auto; } article.serviceContent .title .versionBox .boxtr:first-child { margin: 0 0 15px 0; } */ .bx-wrapper .bx-viewport ul li { /*width: 100% !important;*/ } article.howChoose .howChooseHd_grey .btn a { margin-right: 0; } .lightbox article.otherBoxEF ul li { font-size: 13px; padding: 8px 0 8px 26px; } .lightbox article.otherBoxEF ul li:nth-child(1), .lightbox article.otherBoxEF ul li:nth-child(2), .lightbox article.otherBoxEF ul li:nth-child(3), .lightbox article.otherBoxEF ul li:nth-child(4), .lightbox article.otherBoxEF ul li:nth-child(5), .lightbox article.otherBoxEF ul li:nth-child(6), .lightbox article.otherBoxEF ul li:nth-child(7), .lightbox article.otherBoxEF ul li:nth-child(8), .lightbox article.otherBoxEF ul li:nth-child(9), .lightbox article.otherBoxEF ul li:nth-child(10) { background-size: 16px auto; background-position: 0 8px; } } @media only screen and (max-width : 790px) { article.companyService .fourSolution .content .contentBox .boxRight .productShow { top: 21%; max-width: 192px; height: 260px; } article.companyService .fourSolution .content .contentBox .boxRight .productShow .name { left: 15px; bottom: 8px; font-size: 13px; } } @media only screen and (min-width: 768px) { section article.bannerBox.WHseries .bannerFt2 .titleBoxs .title .ser { font-size: 66px; } } @media only screen and (max-width : 768px) { footer .footerHd ul:nth-child(1) { padding: 0 20px 0 0; max-width: 125px; } footer .footerHd ul.max { max-width: 164px; } footer .footerHd ul.max li { padding: 10px 22px 10px 0; } section article.rewardList .rewardBox ul li { padding: 0 10px; width: calc((100% / 3) - 10px); } section article.rewardList .rewardBox ul li img { width: 100%; } footer .footerHd .rewardBox span { padding: 0 10px; width: calc((100% / 3) - 20px); } footer .footerHd .rewardBox span img { width: 100%; } .backshoplist { top: 70px; } section h1.title, section .series-title { padding: 5%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1.4em; text-align: left; } section article.unitTitle .btnHowChoose, section article.unitTitle .btnLocation { padding: 0; } section h1.title span, section .series-title span { padding: 0px 5px 5px; } section h1.title.EFseries span { margin: 0 10px; } /* search page *----------------------------------------------------------------------------*/ section article.searchpgConBox_notFind .searchpgList .item.stopSell {} section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve { margin: 30px 0; flex-direction: column; justify-content: flex-start; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .contact { width: 100%; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .tip { width: calc(100% - 32px); margin-top: 17px; padding: 12px 16px; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore .storeErrorMsg { max-width: inherit; max-width: initial; justify-content: center; } section article.searchpgConBox_notFind .searchpgList .item.stopSell .searchSolve .tip { width: calc(100% - 32px); margin-top: 17px; padding: 12px 16px; } section article.shoppingBox .otherOrder fieldset .btnDIY .textDIYStore .storeErrorMsg { max-width: inherit; max-width: initial; justify-content: center; } article.wts .titleBox h1 { max-width: 90%; padding: 18px 0 17px; font-size: 30px; line-height: 40px; } article.wts .titleBox h1 span { display: block; margin-top: 10px; font-size: 18px; line-height: 24px; } article.wts .titleBox p { width: 90%; font-size: 15px; line-height: 26px; color: #878787; } article.wts .fading { z-index: 3; background: rgba(0, 0, 0, 0); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(51%, rgba(0, 0, 0, 0)), color-stop(99%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 1))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 1) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 1) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); } article.wts .imgBG-3d .spot { width: 26px; height: 26px; cursor: pointer; } article.wts .imgBG-3d .spot:after { margin: -20px 0 0 -20px; width: 40px; height: 40px; } article.wts .imgBG-3d .proBox, article.wts .imgBG-3d .line { display: none; } article.wts .imgBG-3d .box_1 { bottom: 82%; left: 36%; } article.wts .imgBG-3d .box_2 { left: 20%; bottom: 73%; } article.wts .imgBG-3d .box_3 { right: 15%; bottom: 68%; } article.wts .imgBG-3d .box_4 { left: 20%; bottom: 62%; } article.wts .imgBG-3d .box_5 { left: 52%; bottom: 58%; } article.wts .imgBG-3d .box_6 { left: 15%; bottom: 45%; } article.wts .imgBG-3d .box_7 { left: 53%; bottom: 31%; } article.wts .imgBG-3d .box_8 { right: 28%; bottom: 26%; } article.wts .notice { display: block; position: absolute; top: 15%; left: 50%; margin-left: -90px; width: 180px; text-align: center; font-size: 15px; color: #676767; } .lightBox-all { margin-top: 20px; } .lb-probox { position: relative; display: none; width: 200px; height: 200px; margin: 0 auto; z-index: 2; } .lb-probox:before { position: absolute; top: 98%; right: 50%; margin-right: -1px; content: ''; width: 2px; height: 36px; background: #fff url(../Content/images/wts/line.jpg) no-repeat center 100%; background-size: 100% auto; z-index: 0; } article.wts .imgBG-3d { position: relative; margin-top: 3%; } .lb-probox .proBox { width: 200px; height: 200px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; border-radius: 50%; } .lb-probox .proBox .img { max-width: 182px; margin-bottom: 6px; } .lb-probox .proBox .img img { max-width: 100%; } .lb-probox .proBox .ttl { font-size: 14px; line-height: 20px; font-weight: bold; color: #008ed3; } .lb-probox .proBox .cont { font-size: 12px; line-height: 18px; font-weight: normal; color: #221815; } article.wts .notice { display: block; } /* productList banner title */ .bannerHd .seriesTtl { position: absolute; top: 50%; left: 50%; right: 0; transform: translate(-50%, -50%); margin: 0; } .bannerHd .seriesTtl .titleSub { font-size: 26px; line-height: 30px; } .bannerHd .seriesTtl .btn-howChoose { margin: 20px auto 0; width: 130px; height: 34px; border-radius: 30px; } .bannerHd .seriesTtl .btn-howChoose a { font-size: 14px; line-height: 34px; } section article.filtrationList .filtrationBox { padding: 0; } section article.filtrationList .filtrationBox .title, section article.filtrationList .filtrationBox .seriesTtl { width: 100%; position: absolute; top: 50%; left: 50%; right: 0; margin: 0 auto 0 auto; -webkit-transform: translate(-50%, -120%); transform: translate(-50%, -120%); } section article.filtrationList .filtrationBox .seriesTtl .titleSub .name { font-size: 38px; line-height: 40px; } section article.filtrationList .filtrationBox .seriesTtl .titleSub .cont { font-size: 18px; line-height: 20px; } section article.filtrationList .filtrationBox .seriesTtl .titleSub>span { padding-right: 8px; } section article.filtrationList .filtrationBox .allSeries { top: 50%; margin: 0 auto 0; width: 100px; height: 26px; line-height: 26px; border-radius: 20px; border: 1px solid #fff; text-align: center; -webkit-transform: translate(0, -10%); transform: translate(0, -10%); } section article.filtrationList .filtrationBox .allSeries a { line-height: 26px; } } @media only screen and (max-width: 767px) and (min-width: 521px) { section article.bannerBox.WHseries .bannerFt2 .titleBoxs .title .ser { font-size: 58px; } } @media only screen and (max-width : 767px) { article.carcridges-change .bestView>*:not(h2) { width: calc(100% - 30px) } .purchaseDetailsBox .purchaseBox { padding: 20px 0 60px 0; } .purchaseDetailsBox .purchaseBox .box label, .purchaseDetailsBox .purchaseBox .box .con { display: block; } .purchaseDetailsBox .purchaseBox span.text, .purchaseDetailsBox .purchaseBox span.error { margin: 0; } .purchaseDetailsBox .purchaseBox .btnBox { margin: 40px 0 0 0; } .purchaseDetailsBox .purchaseBox .btnBox .btnBoxLeft, .purchaseDetailsBox .purchaseBox .btnBox .btnBoxRight { position: relative; top: auto; left: auto; right: auto; } .purchaseDetailsBox .purchaseBox .btnBox .btnBoxLeft, .purchaseDetailsBox .purchaseBox .box h2 { margin: 0 0 20px 0; } section article.personalBox .userSelf { padding: 0 20px; } section article.personalBox .userSelf fieldset .box label, section article.personalBox .userSelf fieldset .box .con, section article.personalBox .userSelf fieldset .box .btn { display: block; } section article.personalBox .userSelf fieldset .box .con { padding: 15px 0; } section article.personalBox .userSelf fieldset .box .btn { width: auto; } section article.personalBox .memberPersonal fieldset .btnBox .btnBoxLeft input, section article.personalBox .memberPersonal fieldset .btnBox .btnBoxRight input, section article.personalBox .memberSurvey fieldset .btnBox .btnBoxLeft input, section article.personalBox .memberSurvey fieldset .btnBox .btnBoxRight input, section article.personalBox .userSelf fieldset input[type="button"] { max-width: inherit; max-width: initial; } .invoiceLightbox.details-page .wrap { padding: 20px 0; } section article.personalBox .optionBox+.optionBox { padding: 40px 20px 20px 20px; } section article.personalBox .memberSurvey { width: 90%; padding: 20px 0 0 0; } section article.personalBox .memberSurvey fieldset hr { margin: 15px 0; } .invoiceLightbox.details-page .wrap+.optionBox { margin: 20px auto; } section article.personalBox .userSelf fieldset .box label { width: 100% } .invoiceLightbox .backPage { margin: 40px auto 0px; } section article.shoppingBox .tabDetail .total .coupon.open2 { border-bottom: 1px #d7d7d7 solid; } section article.shoppingBox .tabDetail .total .coupon { margin: 0 0 30px 0; } /** 產品頁 ---------------------------------------------------*/ section article.productConBox .otherChooseBox .item .infoBox span { right: 25px; bottom: 1px; } /** * * show / hide * **/ .pc-show { display: none; } .mb-show { display: block; } .purchaseDetailsBox .purchaseBox { padding: 20px 0 60px 0; } .purchaseDetailsBox .purchaseBox .box label, .purchaseDetailsBox .purchaseBox .box .con { display: block; } .purchaseDetailsBox .purchaseBox span.text, .purchaseDetailsBox .purchaseBox span.error { margin: 0; } .purchaseDetailsBox .purchaseBox .btnBox { margin: 40px 0 0 0; } .purchaseDetailsBox .purchaseBox .btnBox .btnBoxLeft, .purchaseDetailsBox .purchaseBox .btnBox .btnBoxRight { position: relative; top: auto; left: auto; right: auto; } .purchaseDetailsBox .purchaseBox .btnBox .btnBoxLeft, .purchaseDetailsBox .purchaseBox .box h2 { margin: 0 0 20px 0; } section article.personalBox .userSelf { padding: 0 20px; } section article.personalBox .userSelf fieldset .box label, section article.personalBox .userSelf fieldset .box .con, section article.personalBox .userSelf fieldset .box .btn { display: block; } section article.personalBox .userSelf fieldset .box .con { padding: 15px 0; } section article.personalBox .userSelf fieldset .box .btn { width: auto; } section article.personalBox .memberPersonal fieldset .btnBox .btnBoxLeft input, section article.personalBox .memberPersonal fieldset .btnBox .btnBoxRight input, section article.personalBox .memberSurvey fieldset .btnBox .btnBoxLeft input, section article.personalBox .memberSurvey fieldset .btnBox .btnBoxRight input, section article.personalBox .userSelf fieldset input[type="button"] { max-width: inherit; max-width: initial; } .invoiceLightbox.details-page .wrap { padding: 20px 0; } section article.personalBox .optionBox+.optionBox { padding: 40px 20px 20px 20px; } section article.personalBox .memberSurvey { width: 90%; padding: 20px 0 0 0; } section article.personalBox .memberSurvey fieldset hr { margin: 15px 0; } .invoiceLightbox.details-page .wrap+.optionBox { margin: 20px auto; } section article.personalBox .userSelf fieldset .box label { width: 100% } .invoiceLightbox .backPage { margin: 40px auto 0px; } /** * * show / hide * **/ .pc-show { display: none; } .mb-show { display: block; } section article.filtrationList .filtrationBox .menuBoxBd { overflow-x: auto; } section article.filtrationList .filtrationBox ul.filtrationItem { padding: 0 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .menuBoxBd-inner { display: block; width: 1250px; } section article.filtrationList .filtrationBox ul.filtrationItem>li { width: 100%; } section article.filtrationList .filtrationBox ul.filtrationItem>li .photo, section article.filtrationList .filtrationBox ul.filtrationItem>li.max .photo, section article.filtrationList .filtrationBox ul.filtrationItem>li.max.first .photo { width: 100%; padding-bottom: 66%; } section article.filtrationList .filtrationBox ul.filtrationItem>li { padding: 5px; width: 100%; } section article.filtrationList .filtrationBox ul.filtrationItem>li .filtrationMenu { margin-top: -38px; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxHd { padding: 0 0 4px 0; margin: 0 0 4px 0; } section article.filtrationList .filtrationBox ul.filtrationItem>li .filtrationMenu .filtrationMenuBox { padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section article.filtrationList .filtrationBox ul.filtrationItem>li .filtrationMenu a.btnMenu { width: 50px; line-height: 30px; } section article.filtrationList .filtrationBox ul.filtrationItem>li .filtrationMenu a.btnMenu img { max-width: 16px; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi a { width: 19%; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi span.seriesHd { font-size: 14px; } section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi span.seriesHd+span.seriesBd { margin: 0; } section article.filtrationList .filtrationBox ul.filtrationItem>li.first .title, section article.filtrationList .filtrationBox .title { top: 150px; } section article.filtrationList .filtrationBox .title:after { top: -16px; width: 30px; margin: 0 0 0 -15px; } section article.filtrationList .filtrationBox .title .titleSub { margin: 0 auto 5px; font-size: 24px; line-height: 30px; width: 80%; } section article.filtrationList .filtrationBox .title .text { font-size: 15px; line-height: 20px; } section article.filtrationList .filtrationBox .title .howChoose a { display: inline-block; width: 150px; height: 36px; font-size: 15px; line-height: 36px; color: #fff; border: 2px #fff solid; -webkit-border-radius: 22px; border-radius: 22px; } .lightbox article.otherBoxEF .tabSoftCom.monitor, section article.otherBoxEF .otherBoxEFBd .monitor, /*.lightbox article.otherBoxEF.bgCentral .monitor, .lightbox article.otherBoxEF.bgMRS .monitor,*/ .ReadAgainBox .form-read .monitor { display: none; } section article.otherBoxEF .otherBoxEFBd .mobile, /*.lightbox article.otherBoxEF.bgCentral .mobile, .lightbox article.otherBoxEF.bgMRS .mobile,*/ .ReadAgainBox .form-read .mobile, section article.otherBoxEF .icon, section article.otherBoxEF .textCon { display: block; } .lightbox article.otherBoxEF .tabSoftCom.mobile { display: table; margin: 0 0 10px 0; } .lightbox article.otherBoxEF .tabSoftCom.mobile:last-child { margin: 0; } .lightbox article.otherBoxEF .photo, .lightbox article.otherBoxEF ul { display: block; padding: 0 10px; width: auto; } .lightbox article.otherBoxEF .photo { margin: 0 0 20px 0; } section article.otherBoxEF .icon { margin: 0 -5.5% 20px -5.5%; } section article.otherBoxEF .icon img { max-width: 640px; min-width: initial; } section article.clientsNumber .numberBox { width: 90%; } section article.clientsNumber .jumping { width: 330px; text-align: center; line-height: 80px; } section article.clientsNumber .jumping span { display: block; } section article.clientsNumber .jumping span:nth-child(3) { text-align: right; margin-top: -15px; } section article.clientsNumber .jumping span:nth-child(1) { text-align: left; } /* section article.clientsNumber .jumping span:nth-child(2) { font-size: 80px; }*/ section article.clientsNumber .clientstype ul li { width: 50%; } section article.promotList .promotBox ul li { padding-bottom: 46%; } section article.promotList .promotBox ul li.w40 { width: 100%; } section article.promotList .promotBox ul li.w20 { width: 100%; } section article.productList .groupBox .itemBox { display: block; width: auto; padding: 0; } section article.productList .groupBox .itemBox.last { padding: 0; } section article.newsList .newsBox h2 {} section article.newsList .newsBox h2 span { width: 100%; display: block; margin-bottom: 5px; } section article.unitList .adBox /*, section article.unitList a.eventBox*/ { display: none; } section article.unitList .titleLr, section article.unitList .titleRl { width: 100%; } section article.unitList .titleLr { left: -100%; } section article.unitList .titleRl { right: -100%; } section article.unitList a.scrollDownNews, section article.unitList a.scrollDownClients, section article.unitList a.eventBox { padding: 0 15px; } section article.unitList a.scrollDownNews { left: 10px; } section article.unitList a.scrollDownClients { right: 10px; } section article.unitList a.eventBox { left: 80px; padding: 0 15px 0 25px; z-index: 1; background: #f4f4f4 url(../Content/images/icon/bg_event_tab.gif?v=20170216) repeat-y; } section article.unitList a.eventBox img { display: none; } /* section article.unitList .titleLr .conBox .title, section article.unitList .titleRl .conBox .title { left: 20px; right: 20px; } section article.unitList .conBox span.btnBusiness, section article.unitList .conBox span.btnHome { top: 65%; } */ section article.clientsList .container .item { width: 50%; } section article.productConBox .setupbox .mainbox>div { margin: 0 0 40px 0; width: 100%; display: block; *display: block; } section article.productConBox .textbox { width: auto; padding: 60px 40px; display: block; *display: block; } section article.productConBox .textbox+.textbox { padding: 0 40px 60px 40px; } section article.productConBox .iconbox, section article.productConBox .conbox { display: block; *display: block; } section article.productConBox .iconbox { color: #000; line-height: 40px; padding: 0 0 0 40px; } section article.personalBox .memberPersonal fieldset .box label, section article.personalBox .memberPersonal fieldset .box .con { float: none; } section article.personalBox .memberPersonal fieldset .box label { display: block; width: 100%; padding: 0 0 10px 0; } section article.personalBox .memberPersonal fieldset .box label.max { padding: 0 0 10px 0; } section article.personalBox .memberPersonal fieldset .box label span { display: inline; } section article.personalBox .memberPersonal fieldset .box .con { width: 100%; } section article.personalBox .memberPersonal fieldset span.error, section article.shoppingBox .otherOrder fieldset span.error { margin: 0; } section article.personalBox .memberPersonal fieldset .btnBox .btnBoxLeft, section article.personalBox .memberPersonal fieldset .btnBox .btnBoxRight, section article.personalBox .memberSurvey fieldset .btnBox .btnBoxLeft, section article.personalBox .memberSurvey fieldset .btnBox .btnBoxRight { float: none; width: 100%; } section article.personalBox .memberSurvey fieldset .btnBox .btnBoxLeft, section article.personalBox .memberPersonal fieldset .btnBox .btnBoxLeft { margin: 0 0 20px 0; } section article.personalBox .memberPersonal fieldset .box .con label { display: inline; } section article.personalBox .memberPersonal fieldset .box.min label { float: left; display: inline; padding: 24px 0; width: 20%; min-width: 60px; } section article.personalBox .memberPersonal fieldset .box.min .con { width: 100%; } section article.shoppingBox .otherOrder fieldset .box label, section article.shoppingBox .otherOrder fieldset .box .con { float: none; } section article.shoppingBox .otherOrder fieldset .box label { display: block; width: 100%; padding: 0 0 10px 0; } section article.shoppingBox .otherOrder fieldset .box .con { width: 100%; } section article.shoppingBox .otherOrder fieldset .box .con label { display: inline; } /* section article.shoppingBox .otherOrder fieldset .box.min label { float: left; display: inline; padding: 24px 0; width: 20%; min-width: 60px; } section article.shoppingBox .otherOrder fieldset .box.min .con { width: 100%; } */ section article.proList .taskBoxbd .explainbox { width: 480px; } section article.proList .taskBoxbd .explainbox .product { position: absolute; width: 480px; height: 480px; } section article.proList .taskBoxbd .explainbox .product .icon1 { top: 120px; left: -20px; } section article.proList .taskBoxbd .explainbox .product .icon2 { top: 340px; left: 40px; } section article.proList .taskBoxbd .explainbox .product .icon3 { top: 30px; left: 300px; } section article.proList .taskBoxbd .explainbox .product .icon4 { top: 260px; left: 360px; } section article.proList .taskBoxbd .explainbox .product .icon5 { top: 360px; left: 270px; } article.serviceContent .serviceNav, article.formBox.listFormBox .serviceNav, article.companyService .serviceNav { display: none; } article.serviceContent .bg.CD .title { padding: 90px 120px 260px 40px; } article.serviceContent .title { padding: 90px 40px 60px 40px; color: #fff; } article.serviceContent .stepBox .step1, article.serviceContent .stepBox .step2, article.serviceContent .stepBox .step3, article.serviceContent .stepBox .step4, article.serviceContent fieldset .box { width: auto; } article.seriesList .item .photo .title, section article.bannerBox .bannerHd .title { display: none; } article.serviceContent .stepBox {} section article.unitMainList .icon { display: none; } section article.unitMainList .bx-wrapper .bx-pager { top: 120px; } section article.unitMainList .bxslider h2 { top: 160px; font-size: 30px; line-height: 34px; } section article.unitMainList .bxslider h2 em { font-size: 24px; } section article.unitMainList .bxslider h2 span.blue { font-size: 32px; } section article.unitMainList.home .bxslider .part1 .bg_img, section article.unitMainList.home .bxslider .part2 .bg_img { top: -160px !important; -webkit-background-size: 100px auto !important; -o-background-size: 100px auto !important; background-size: 100px auto !important; } section article.unitMainList.home .bxslider .part3 .bg_img { top: -100px !important; background: url(../Content/images/banner/index_home_part3_m_1920.png?v=20170216) no-repeat 35% 30% !important; -webkit-background-size: 270% auto !important; -o-background-size: 270% auto !important; background-size: 270% auto !important; } section article.unitMainList.business .bxslider .part1 .bg_img { top: 120px !important; background: url(../Content/images/banner/businessProduct.png?v=20170216) no-repeat center 30% !important; -webkit-background-size: 150% auto !important; -o-background-size: 150% auto !important; background-size: 150% auto !important; } section article.unitMainList.business .bxslider .part2 { background: url(../Content/images/banner/businessProduct2_m.png?v=20170216) no-repeat 48% 180px !important; -webkit-background-size: 160% auto !important; -o-background-size: 160% auto !important; background-size: 160% auto !important; } section article.unitMainList .bxslider .form, section article.unitMainList .bxslider .textCe { display: none; } section article.unitMainList .bxslider .model { min-height: 640px; } section article.unitMainList .bxslider li.part3 .icon1, section article.unitMainList .bxslider li.part3 .icon2 { left: 60%; font-size: 12px; line-height: 16px; } section article.unitMainList .bxslider li.part3 .icon1 { top: 220px; width: 150px; height: 140px; margin: 0 0 0 -180px; background: url(../Content/images/banner/icon_home_part3-1.png?v=20170216) no-repeat bottom; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } section article.unitMainList .bxslider li.part3 .icon2 { top: 270px; width: 120px; height: 130px; margin: 0 0 0 -30px; padding: 0 0 0 20px; text-align: right; background: url(../Content/images/banner/icon_home_part3-2.png?v=20170216) no-repeat bottom; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } section article.unitMainList .bxslider li.part3 .icon1 b, section article.unitMainList .bxslider li.part3 .icon2 b { font-size: 14px; } section article.bannerBox .bannerFt.home .con .title, section article.bannerBox .bannerFt.busines .con .title { font-size: 52px; } section article.bannerBox .bannerFt.home .con img.product, section article.bannerBox .bannerFt.busines .con img.product { top: 180px !important; display: none; } section article.bannerBox.DHseries .bannerFt.home .con img.product { top: 40px !important; } section article.unitTitle .locationBox { min-height: 160px; } section article.unitTitle .locationBox .buyArea { left: 0; right: 51%; width: auto; } section article.unitTitle .locationBox .buyClass { left: 51%; right: 0; width: auto; } section article.unitTitle .locationBox .buyText { left: 0; right: 100px; top: 80px; } section article.unitTitle .locationBox .buyBtn { right: 0; width: 100px; top: 80px; } section article.unitTitle .locationBox .reset { top: 150px; } /* 2019/11/05 */ section article.unitTitle.busines .title .sercon { display: block; } section article.formBox.listFormBox .wrap { padding: 90px 120px 60px 40px; } section article.formBox .wrap .title p { padding-top: 20px; } section article.formBox.listForm .wrap { padding: 100px 40px 120px 190px; } article.serviceContent .bg.RR { padding-bottom: 0; } /*company Service*/ article.companyService .scrollNav { display: none; } article.companyService .firstBG { position: relative; width: 100%; min-height: auto; padding-bottom: 134%; } article.companyService .firstBG .kvSlideBox .kvSlide { display: none; } article.companyService .firstBG .kvSlideBox .kvSlide_M { display: block; } article.companyService .firstBanner .title { /* margin-left: -165px; width: 330px; font-size: 34px; line-height: 36px; */ top: 47%; font-size: 75px; line-height: 36px; } article.companyService .firstBG .kvSlideBox div img { min-width: auto; } article.companyService .firstBanner .title span.water { margin-top: 8%; font-size: 36px; line-height: 24px; letter-spacing: 20px; } article.companyService .firstBanner .title span.subTitle { letter-spacing: 7px; } article.companyService .firstBanner .scrollDown .mouse { width: 20px; height: 38px; } article.companyService .firstBanner .scrollDown { /*bottom: -34px;*/ } article.companyService .firstBanner .subTitle { font-size: 12px; line-height: 18px; } article.companyService .headlineBox>div { display: inline-block; } article.companyService .headlineBox .headline { margin-top: 8px; margin-left: 90px; font-size: 36px; } article.companyService .thirdManagement .headlineBox { margin-top: 0; } article.companyService .headlineBox .headline .subtxt { padding-top: 13px; font-size: 18px; line-height: 20px; } article.companyService .headlineBox .headline:after { bottom: -8px; width: 142px; left: 86px; } article.companyService .headlineBox { margin-top: 0; } article.companyService .secondPlanning .sectionWrap, article.companyService .thirdManagement .sectionWrap { padding: 18% 0 68% 11%; } article.companyService .headlineBox .series:before { width: 26px; height: 36px; } article.companyService .headlineBox .series { font-size: 20px; line-height: 36px; width: 28px; height: 36px; padding: 2px 0; } article.companyService .secondPlanning .sectionWrap .content, article.companyService .thirdManagement .sectionWrap .content { position: relative; margin-left: 0; margin-top: 76px; padding-bottom: 0; } article.companyService .secondPlanning .sectionWrap .content .part1, article.companyService .secondPlanning .sectionWrap .content .part2, article.companyService .thirdManagement .sectionWrap .content .part1, article.companyService .thirdManagement .sectionWrap .content .part2 { position: relative; width: 105%; margin: -10% 0 0 -5%; opacity: 1; background: none; padding-bottom: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } .scrollmagic-pin-spacer { min-height: auto !important; padding-bottom: 0px !important; padding-top: 0px !important; } article.companyService .secondPlanning .sectionWrap .content .part1, article.companyService .thirdManagement .sectionWrap .content .part1 { display: none; } /* slider mobile */ article.companyService .secondPlanning .sectionWrap .content .sliderBox_M, article.companyService .thirdManagement .sectionWrap .content .sliderBox_M { display: block; position: relative; width: 105%; margin-left: -5%; overflow: hidden; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } article.companyService .secondPlanning .sectionWrap .content .sliderBox_M figure, article.companyService .thirdManagement .sectionWrap .content .sliderBox_M figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 20s slidy infinite; } article.companyService .secondPlanning .sectionWrap .content .sliderBox_M figure img, article.companyService .thirdManagement .sectionWrap .content .sliderBox_M figure img { width: 20%; float: left; } @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt { position: absolute; opacity: 1; top: 88%; bottom: 0; right: 0; left: 0; margin-top: 0; width: 90%; min-height: 220px; max-width: 560px; background: #fff; -webkit-transform: translateY(0%) !important; -moz-transform: translateY(0%) !important; transform: translateY(0%) !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt { position: absolute; opacity: 1; top: 88%; bottom: 0; right: 0; left: 0; margin-top: 0; width: 90%; min-height: 220px; max-width: 560px; background: #fff; z-index: 2; -webkit-transform: translateX(0%) !important; -moz-transform: translateX(0%) !important; transform: translateX(0%) !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt .paragraph { margin-bottom: 0; } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt .txtTitle { margin-bottom: 10px; font-size: 18px; line-height: 24px; } article.companyService .secondPlanning .sectionWrap .content .part2 .part2_Txt .txtBox { font-size: 12px; line-height: 18px; } article.companyService .secondPlanning .sectionWrap .content .part2 .focusLine, article.companyService .thirdManagement .sectionWrap .content .part2 .focusLine { top: 13px; right: 0; left: 7%; } article.companyService .secondPlanning .sectionWrap .content .part2 .focusLine span:before, article.companyService .thirdManagement .sectionWrap .content .part2 .focusLine span:before { top: 7px; left: -92px; width: 80px; } article.companyService .secondPlanning .content .part2 .txtWrap, article.companyService .thirdManagement .content .part2 .txtWrap { position: relative; max-width: 560px; padding: 9% 12%; width: 100%; height: 100%; overflow: inherit; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.companyService .fourSolution .content .contentBox .boxLeft .imgBG { z-index: 2; } article.companyService .fourSolution .content .contentBox .boxRight .productShow .box .productImg { top: 14%; right: -75px; max-width: 236px; } article.companyService .fourSolution .headlineBox { margin-top: 10%; margin-left: 11%; } article.companyService .fourSolution .sectionWrap { padding: 20% 0 0 0; } article.companyService .fourSolution .content { width: 100%; margin: 0 auto; } article.companyService .fourSolution .content .contentBox .boxLeft { position: relative; width: 100%; padding-bottom: 60%; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag { position: absolute; top: 80%; left: 13%; } article.companyService .fourSolution .content .contentBox .boxRight { position: relative; width: 100%; float: none; } article.companyService .fourSolution .content .contentBox .boxRight .productShow { position: relative; float: left; top: 0; left: 0; width: 35%; padding-bottom: 65%; max-width: 270px; height: auto; z-index: 5; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt { position: absolute; right: 0; top: 0; bottom: 0; float: right; width: 65%; max-width: 500px; padding: 8% 10% 8% 13%; background-color: #fff; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 3; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt.zindex4 { z-index: 4; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox, article.companyService .fourSolution .content .contentBox .boxRight .slideBox2 { display: none; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox_M, article.companyService .fourSolution .content .contentBox .boxRight .slideBox2_M { display: block; position: relative; width: 100%; max-width: 766px; z-index: 3; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox, article.companyService .fourSolution .content .contentBox .boxRight .slideBox2 { position: relative; width: 100%; float: right; z-index: 4; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag ul li { display: inline-block; list-style: none; margin-bottom: 0; margin-right: 30px; } .contactBox.companyService { display: none; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox_M_wrap .moreLine { display: block; } article.companyService .thirdManagement .content .part2 .txtWrap .txtWrapBox { width: 100%; height: 100%; } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt .paragraph { margin-right: 0; } article.provisionBox .provision table.tabBankStaging { float: none; width: 96%; margin: 0 0 1% 0; } article.provisionBox .provision table.tabBankStaging:first-child { margin: 0; } article.provisionBox .provision table.tabBankStaging th, article.provisionBox .provision table.tabBankStaging td { font-size: 13px; line-height: 30px; text-align: center; border: 1px #c3c3c3 solid; } article.provisionBox .provision table.tabBankStaging td { line-height: 24px; } article.provisionBox .provision table.tabBankStaging tr.noMobile { display: none; } article.provisionBox .provision table.tabBankStaging td.noLine { border-bottom: 0; } article.serviceContent .title .versionBox .explainBox { max-width: 510px; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreBd { padding: 120px 0 0 0; margin: 16px 0; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreBd:before { top: 120px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreBd:after { top: 115px; left: 50%; right: 0; margin: 0 0 0 -5px; } article.filterTableBox .tabforProBd .tabsBoxOh .numeral { position: absolute; top: 0; left: 50%; margin: 0 0 0 -50px; padding: 5px 0 0 10px; } article.filterTableBox .tabforProBd .tabsBoxOh .numeral:before { position: absolute; top: auto; left: 50%; right: auto; bottom: -20px; height: 20px; width: 2px; margin: 0 0 0 -1px; } article.filterTableBox .tabforProBd .tabsBoxOh .numeral .title { display: block; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStore td.typesLine { width: 50.8%; } article.filterTableBox .tabforProBd .tabsBoxOh .tabStoreHd { display: none; } article.wts .imgBG-3d.mgTop0 { margin-top: 2%; } article.filterTableBox .tabforProBd .inspect-box { margin-bottom: 10px; } /*---------------------------------------- 圖表 -----------------------------------------*/ article.filterTableBox .tabforProHd .chart-Title { padding: 0 20px; margin-bottom: 10px; font-size: 30px; line-height: 1.2em; } article.filterTableBox .chart-Subtitle { font-size: 16px; } .jconfirm article.filterTableBox .chart-Subtitle { font-size: 14px; } article.filterTableBox .tabforProHd { margin: 0 0 0px 0; } .chart-display .chart-item { float: none; width: 100%; margin-bottom: 20px; text-align: center; } .chart-display .chart-item img { max-width: 500px; margin: 0 auto; } article.filterTableBox .tabforProBd { padding: 20px 0; } article.filterTableBox .tabforProHd { padding: 30px 0 40px; } article.filterTableBox .tabforProHd .chart-Title { margin-bottom: 6px; padding: 0; font-size: 24px; line-height: 1.2em; } article.filterTableBox .tabforProHd .chart-Subtitle { padding: 0; font-size: 14px; line-height: 1.4em; } /* lightbox */ article.filterTableBox .lightbox-chart-section .tabforProHd { padding: 20px 10px; } article.filterTableBox .lightbox-chart-section .tabforProBd { margin-top: 10px; padding: 0; } /** blog **/ section article.blogList .item { width: 99%; } section article.blogList .item p { height: auto; } section article.productBlogBox .main { padding: 0 40px; } section article.productBlogBox button.slick-next { right: -30px; } section article.productBlogBox button.slick-prev { left: -30px; } section article.productBlogBox .table, section article.productBlogBox .cont { display: block; width: 100%; overflow: hidden; } section article.productBlogBox .photo { display: block; margin: 0 auto; } section article.productBlogBox .photo.text { font-size: 18px; line-height: 30px; } section article.productBlogBox .text .photoInner { overflow: hidden; } section article.productBlogBox .cont { padding: 0 } section article.productBlogBox .blogSlick { padding: 0; border-top: none; border-bottom: none; } section article.productBlogBox .cont .ttl { margin: 16px 0; font-size: 18px; line-height: 1.4em; } section article.productBlogBox .cont .name { margin-bottom: 8px; font-size: 16px; } section article.productBlogBox .cont .line { margin-bottom: 14px; } section article.productBlogBox .cont .context { font-size: 14px; } section article.productBlogBox .btn { margin: 20px auto 0 auto; } section article.productBlogBox .slick-dots { bottom: -45px; } .lightbox article.discontinued .discontinuedL { padding: 30px 30px 90px 30px; } .lightbox article.discontinued .discontinuedR { padding: 20px 30px 20px 30px; } .lightbox article.discontinued .productList { width: auto; } .lightbox article.discontinued .box { display: block; width: 200px; margin: 0 auto; } .lightbox article.discontinued .discontinuedL .title { font-size: 18px; } .lightbox article.discontinued .discontinuedL .link { padding: 0 20px; font-size: 16px; height: 60px; line-height: 60px; } .lightbox article.discontinued .discontinuedL .link img { max-height: 18px; vertical-align: middle; } /** science **/ section article.scienceHd .box { padding: 30px 5% 60px 5%; } section article.scienceList .container { max-width: 360px; } section article.scienceList .item { width: 94%; margin: 0 0 30px; } section article.scienceKv .banner { margin: 0 -20%; } section article.scienceKv .title .icon img { max-width: 30px; } section article.scienceKv .title>div { padding: 0 0 40px 0; } section article.scienceKv .title h3, section article.scienceKv .title h1 { font-size: 20px; padding: 0 0 7px 0; margin: 10px 0 10px 0; } section article.scienceKv .title p { font-size: 15px; } section article.scienceHd { padding: 30px 0; } section article.scienceBd .box .cont, section article.scienceHd .box .cont { padding: 20px 0; } section article.formBox .wrap .form .box.verifiCode>label, section article.formBox .wrap .form .box.verifiCode>.con { display: block; width: 100%; } /** * * realBox * **/ section article.realBox .item .realTitle h2 { font-size: 8vw; } section article.realBox .item .realTitle h3, section article.realBox .item .realTitle .txt, section article.realBox .item.unit2 .realTitle h3 { font-size: 5.5vw; } section article.realBox .item .realTitle .text { font-size: 7.5vw } section article.realBox .item.unit2 .realTitle { margin: 0 0 80% 0; } section article.realBox .item.unit3 .realTitle { margin: 0; } section article.realBox .item.unit4 .realTitle { margin: 0 0 110% 0; } section article.realBox .item.unit2 .realBanner { background-position: 100% center; } section article.realBox .item.unit4 .realBanner { background-position: 30% center; } section article.realBox .item.unit5 .realBanner { background-position: 80% center; } section article.realBox .item.unit6 .logoBox { height: 80px; } /*---------------------------------------- 產品系列一頁 -----------------------------------------*/ section article.productConBox .relatedProBox { width: 60%; margin: 50px auto 0; } section article.productConBox .relatedProBox ul li { display: block; min-width: 100%; margin: 0 0 10% 0; } section article.productConBox .otherChooseBox .item { position: relative; width: calc(100% - 10px); /* height: 110px; */ margin: 0 5px 15px; } section article.productConBox .otherChooseBox .item .infoBox { right: 10px; bottom: 6px; width: 22px; height: 22px; } /* invoiceLightbox */ .invoiceLightbox .invoiceBox, .invoiceLightbox .invoiceDetailBox { display: block; } .invoiceLightbox .invoiceDetailBox { padding: 0; margin: 20px 0 0 0; } .invoiceLightbox .invoiceBox { border: 1px #ccc solid; } .invoiceLightbox.details-page .invoiceBox { border: 1px solid #bbb; } .invoiceLightbox .invoiceDetailBox .invoiceMainBox { padding: 10px 0 10px 0; border: 1px #ccc solid; } .invoiceLightbox .invoiceDetailBox .invoiceMainBox:before, .invoiceLightbox .invoiceDetailBox .invoiceMainBox:after { display: none; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(2), .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(3), .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(4) { min-width: 40px; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd { min-height: inherit; min-height: initial; } .invoiceLightbox .invoiceDetailBox .invoiceMainBox .desc { position: relative; left: auto; right: auto; bottom: auto; padding: 10px 10px 0 10px; } .invoiceLightbox .invoiceDetailBox .detailTitle { margin: 10px 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px #eee solid; } section article.personalBox { margin: -40px 0 0 0; } /*---------------------------------------- 蕊芯系列一頁 -----------------------------------------*/ article.carcridges-seo-wrapper .bestView { padding: 0; } article.carcridges-seo-wrapper .serise-cont .box { width: 100%; margin-bottom: 54px; display: flex; flex-direction: column; justify-content: center; } article.carcridges-seo-wrapper .serise-cont .box:last-child { margin-bottom: 54px; } article.carcridges-seo-wrapper .serise-cont .box>div { width: 100%; } article.carcridges-seo-wrapper .serise-cont .paddingLeft .txt-cont, article.carcridges-seo-wrapper .serise-cont .paddingRight .txt-cont { padding: 40px 20px 0 24px; margin: 0; } article.carcridges-seo-wrapper { padding: 0px; } article.carcridges-seo-wrapper .serise-cont .box.flex-row-reverse { -ms-flex-direction: column; flex-direction: column; } article.carcridges-pro-intro .prod-list-box { flex-direction: column; padding: 0; } article.carcridges-pro-intro .prod-list-box .item { width: 100%; padding-top: 42px; } article.carcridges-change { padding: 0; } article.carcridges-change .bestView { flex-direction: column; justify-content: center; } article.carcridges-change .bestView>* { width: 100%; } article.carcridges-seo-wrapper .serise-cont .txt-cont { margin-top: 30px; } /*icon*/ article.bannerBox .bannerBd.replace { position: relative; display: block; padding: 20px 60px 40px; text-align: center; background: #fff; } article.bannerBox .bannerBd.replace:after { content: ''; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 24px; height: 1px; background: #999; } article.bannerBox .bannerBd.replace .title { width: 160px; margin: 0 auto; padding: 50px 0 0 0; } article.bannerBox.SEOseries .bannerBd.replace .title { background: url(../Content/images/home/icon_homeSEO.png) no-repeat top center; } article.bannerBox .bannerBd.home .title span { font-size: 18px; font-weight: 200; margin: 0 0 20px 0; padding: 0 0 20px 0; } article.carcridges-seo-wrapper .serise-cont .img-box .textbox { display: none; } article.carcridges-seo-wrapper .serise-cont .txt-cont .topSubttl { font-size: 24px; } article.carcridges-seo-wrapper .serise-cont .txt-cont .title { margin: 24px 0 50px; } article.carcridges-pro-intro .kv-box { height: 338px; } article.carcridges-pro-intro .kv-title-box { position: relative; } article.carcridges-pro-intro .prod-list-box { padding: 0 20px 68px 24px; } article.carcridges-pro-intro .kv-title-box .title { margin-bottom: 10px; } article.carcridges-pro-intro .kv-title-box { padding: 42px 20px 0 24px; } article.carcridges-change { padding: 38px 20px 0 24px; } article.carcridges-change .ttl { margin-bottom: 46px; } /* active */ article.carcridges-seo-wrapper .serise-cont .box .toUp, article.carcridges-seo-wrapper .serise-cont .box.active .toUp, article.carcridges-seo-wrapper .serise-cont .box .toDown, article.carcridges-seo-wrapper .serise-cont .box.active .toDown { opacity: 1; transform: translateY(0) } article.carcridges-seo-wrapper .serise-cont .img-box .logoTag { left: 20px; } section article.productConBox.first .main { padding: 40px 0; } article.bannerBox .bannerBd.home .title span { font-size: 18px; font-weight: 200; margin: 0 0 20px 0; padding: 0 0 20px 0; } article.carcridges-seo-wrapper .serise-cont .img-box .textbox { display: none; } article.carcridges-seo-wrapper .serise-cont .txt-cont .topSubttl { font-size: 24px; } article.carcridges-seo-wrapper .serise-cont .txt-cont .title { margin: 24px 0 50px; } article.carcridges-pro-intro .kv-title-box { position: relative; } article.carcridges-pro-intro .prod-list-box { padding: 0 20px 68px 24px; } article.carcridges-pro-intro .kv-title-box .title { margin-bottom: 10px; } article.carcridges-pro-intro .kv-title-box { padding: 42px 20px 0 24px; } article.carcridges-change { padding: 38px 20px 0 24px; } article.carcridges-change .ttl { margin-bottom: 46px; } section article.locationConBox .locationList.companies .item .boxFt { display: block; } section article.locationConBox .locationList.companies .msgbox, section article.locationConBox .locationList.companies .googleMap { display: block; } section article.locationConBox .locationList.companies .msgbox { width: 100%; padding: 0 0 0 0; } section article.locationConBox .locationList.companies .googleMap { width: 100%; margin-top: 35px; } } @media only screen and (max-width : 720px) { section article.proList .boxHd .title { margin: -80px 5% 0; } section article.proList .boxHd .title h3 { font-size: 28px; line-height: 32px; padding: 10px 0; margin: 0 0 10px; } article.serviceList .item .conBox .title, article.serviceList .item .conBox .btn { display: block; *display: block; } article.serviceList .item .conBox .title { margin: 0 auto 20px auto; } article.serviceList .item .conBox .title .titleBd { display: block; max-width: 300px; margin: 0 auto; } section article.clientsMap { width: 100%; padding-bottom: 71%; background: #fff url(../Content/images/home/clientsNumber_BG_M.gif?v=20170220) no-repeat; background-size: cover; } section article.clientsMap .pinBox .pin img.pindesk { display: none; } section article.clientsMap .pinBox .pin img.pinmobile { display: inline-block; } article.seriesList .item.seriesEF .photo .box { background-position: 30%; } article.seriesList .item.seriesDH .photo .box { background-position: 28% 50%; } article.seriesList .item.seriesDC .photo .box { background-position: 73% 50%; } } @media only screen and (max-width : 680px) { article.howChoose .howChooseBd .chooseBox ol.stepBox li { width: 100%; } article.howChoose .howChooseBd .chooseBoxHd { max-width: initial; } article.howChoose .howChooseBd .main { min-width: initial; min-height: initial; width: auto; } article.howChoose.search .howChooseBd .chooseBox.moreSpace { padding-bottom: 0px; } article.howChoose .howChooseBd h3, article.howChoose .howChooseBd h3.en { font-size: 24px; line-height: 28px; } article.howChoose .howChooseBd .text { margin: 0 0 40px 0; } article.howChoose .howChooseBd .chooseBox .selectBox { min-height: 240px; } article.howChoose .howChooseBd .chooseBox ol.stepBox { margin: 0 0 20px 0; height: 60px; } article.howChoose .howChooseBd .chooseBox ol.stepBox li { line-height: 20px; height: 56px; } article.howChoose .howChooseBd .chooseBox ol.stepBox li span.br { display: inline-block; } article.howChoose .howChooseBd .chooseBox .selectBox fieldset .resultBtn { max-width: 120px; margin: 3% auto 0; } article.howChoose .howChooseBd .chooseBox .selectBox fieldset input[type=button] { position: relative; top: 0; right: 0; } article.howChoose .howChooseBd .chooseBox .selectBox .selectboxit-container span { height: 55px; line-height: 55px; } article.howChoose .howChooseBd .chooseBox .selectBox .selectboxit-arrow-container { right: auto; left: 0; width: 34px; background: #000; } article.howChoose .howChooseBd .chooseBox .selectBox .selectboxit-default-arrow { margin: -4px auto 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; } article.howChoose .howChooseBd .chooseBox .selectBox .selectboxit-text { text-indent: 35px; font-size: 12px; } section article.unitTitle .title { padding: 0 0 0 20px; text-align: left; } section article.unitTitle .main { padding: 50px 15px; justify-content: space-around; } article.seriesList .item .conBox .title, article.seriesList .item .conBox .btn { height: auto; display: block; *display: block; margin: 0 auto 20px auto; text-align: center; } article.seriesList .item .conBox .title { width: auto; } article.seriesList .item .conBox .title .titleBd { display: block; margin: 0 auto; max-width: 300px; } article.seriesList .item .conBox { padding: 40px 0; } article.seriesList .item .title .ser, article.seriesList .item .title .sercon, article.seriesList .item .conBoxMin { display: block; *display: block; } article.seriesList .item .minList .title .ser, article.seriesList .item .minList .title .sercon { display: table-cell; *display: inline; } article.seriesList .item .minList { padding: 0; } article.seriesList .item .conBoxMin { width: 100%; padding: 20px 0; border-bottom: 1px #ccc solid; } article.seriesList .item .conBoxMin:last-child { border-bottom: 0; } article.seriesList .item .conBoxMin .title { position: relative; top: -30px; height: 140px; } article.seriesList .item .conBoxMin .btn { margin: 15px 0 0 -68px; } article.seriesList .item .conBox .btn { width: auto; margin: 0 auto; } article.seriesList .item .conBox .title .ser { padding: 0 0 4px 0; } article.serviceList .item .photo .box { background-position: left center; } /* section article.productConBox .detailBox .btn input[type=submit].buy { width: 100%; margin-top: 50px; } section article.productConBox .detailBox .btn .number { right: 0; width: 100%; } */ section article.productConBox .detailBox .posBox { width: 100%; } .bx-wrapper .bx-controls-direction { width: 100%; } .bx-wrapper .bx-prev { left: 0; } .bx-wrapper .bx-next { right: 0; } .photoSwitch-tab .switchNav { height: 50px; bottom: -50px; line-height: 50px; } .photoSwitch-tab .css3-tab-nav li { width: 50px; line-height: 50px; } .photoSwitch-tab .photoTitle { padding: 0 0 0 10px; } .photoSwitch-tab .tab_ttl { font-size: 14px; } .photoSwitch-tab .css3-tab-nav li a { font-size: 14px; } .lightbox article.otherBoxEF { padding: 20px 0; } .lightbox article.otherBoxEF .producttitle { font-size: 24px; margin: 0 auto 15px; } .lightbox article.otherBoxEF .otherBoxEFBd { padding: 0 20px; } section article.bannerBox .bannerFt2 .titleBoxs .btn a { margin: 0 10px 10px 0; } section article.bannerBox .bannerFt2 .titleBoxs .btn a:last-child { margin: 0; } .lightbox article.otherBoxEF .main { padding: 0 10px; } .lightbox article.otherBoxEF .photo, .lightbox article.otherBoxEF ul { padding: 0 0; } .lightbox article.otherBoxEF .otherBoxEFBd { padding: 0 10px; } } @media only screen and (max-width : 640px) { article.contactBox { flex-direction: column; } article.contactBox>div { width: 100%; } article.contactBox .tel { border: 0; border-bottom: 1px solid #d0d0d0; letter-spacing: 1px; } /* article.contactBox > div { display: block; width: 100%; } article.contactBox .tel a { border: 0; border-bottom: 1px solid #d0d0d0; } */ section article.newsList .newsBox .owl-theme .owl-nav { display: none; } section article.productList .container .item { width: 100%; } section article.otherBox.home .container .item { width: 50%; } section article.productConBox .productlist { width: 90%; } section article.productConBox .detailBox { width: 90%; margin: 40px auto 0 auto; } section article.productConBox .detailBox .tabDetail .boxtdl, section article.productConBox .detailBox .tabDetail .boxtdr { width: 50%; } section article.productList .descBox .desc .icon, section article.productList .descBox .desc .text, section article.productConBox .descBox .desc .icon, section article.productConBox .descBox .desc .text { vertical-align: middle; } section article.bannerBox .bannerFt.busines .title { font-size: 25px; } section article.productConBox .detailBox .tabDetail .DIYprice a:hover em { margin: 0 -10px 0 0; } section article.productConBox .detailBox .tabDetail .DIYprice a em>span:before { left: auto; right: 10px; margin-left: 0; } .memberBox, .cartBox { width: 100%; } section article.recordBox .productList { margin: 0; } section article.recordBox .productList .photo, section article.recordBox .productList .tabDetail { margin: 0 5%; display: block; *display: block; width: auto; } section article.recordBox .productList .photo { text-align: center; min-width: 100%; } section article.proList .taskBox, section article.proList .taskBoxbd { position: relative; max-width: 1360px; margin: 0 auto; padding: 80px 20px 40px 20px; } section article.proList .taskBox ul { width: 100%; } section article.proList .taskBox ul li { float: none; width: 100%; margin: 5px 0; text-align: center; } section article.proList .taskBox .desc { position: relative; bottom: auto; right: auto; text-align: center; } section article.proList .taskBoxbd .explainbox .bg { width: 300px; margin: 0 auto; } section article.proList .taskBoxbd .explainbox { width: 100%; } section article.proList .taskBoxbd .explainbox .product { position: absolute; left: 50%; width: 300px; height: 300px; margin: 0 0 0 -150px; } section article.proList .taskBoxbd .explainbox .product .icon { width: 100px; } section article.proList .taskBoxbd .explainbox .product .icon1 { top: 60px; left: -20px; } section article.proList .taskBoxbd .explainbox .product .icon2 { top: 210px; left: 10px; } section article.proList .taskBoxbd .explainbox .product .icon3 { top: 10px; left: 205px; } section article.proList .taskBoxbd .explainbox .product .icon4 { top: 150px; left: 210px; } section article.proList .taskBoxbd .explainbox .product .icon5 { top: 220px; left: 160px; } section article.proList .conFt .main { padding: 80px 0 0; } section article.proList .conFt.specialFor .main { padding-top: 160px; } section article.otherBox .owl-carousel { width: 60%; } section .typeNav { position: relative; top: auto; right: auto; display: table; width: 100%; padding: 0 0 40px 0; text-align: center; background: #f4f4f4; } section .typeNav .typeNavBox { display: inline-block; height: 40px; line-height: 40px; padding: 0 10px 0 10px; background: #2f7dcd; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } section .typeNav a { padding: 0 10px; color: #fff; font-size: 14px; border-left: 1px #fff solid; } section article.seriesMainList .smslider_titleBox, section article.seriesMainList .smslider_icons { display: none; } section article.seriesMainList ul.smslider li a { display: block; } .main .unitList .swiper-slide .content .title { font-size: 30px; line-height: 36px; } .crumbBox { display: none; } /*formQA*/ section article.formBox .wrap .form fieldset { width: 90%; margin: 0 auto; } section article.formFeature .wrap ul li { float: none; margin-bottom: 5%; width: 100%; } section article.formFeature .wrap ul li span:nth-child(2) { width: 25%; margin: 0px auto 20px; } section article.formBox .wrap .title h2, section article.formBox .wrap .title h1 { font-size: 35px; } section article.formBox .wrap { padding: 100px 40px 120px 60px; } article.companyService .firstBanner .title { top: 35%; margin-left: -165px; width: 330px; font-size: 36px; line-height: 36px; } article.companyService .firstBanner .title span.water { font-size: 24px; line-height: 24px; letter-spacing: 0px; } article.companyService .firstBanner .title span.subTitle { letter-spacing: 0px; } article.companyService .firstBanner .title span.subTitle span { display: block; } section article.productConBox .relatedProBox { /* width: calc(100% - 40px); */ width: 100%; margin: 50px auto 0; padding: 14px 0 0 0; } section article.productConBox .otherChooseBox .item label.radio .box .pic { width: 70px; padding: 12px 6px; } section article.productConBox .otherChooseBox .item label.radio .box .details { width: calc(100% - 70px); padding: 16px 10px 16px 10px; } section article.productConBox .otherChooseBox .item label.radio .box .details .ttl { font-size: 16px; line-height: 1.5em; /* max-height: 3em; */ } section article.productConBox .otherChooseBox .item label.radio .box .details .addPrice { font-size: 20px; line-height: 1.6em; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto, section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody { display: block; width: auto; } section article.productConBox .detailBox .addPricePro .addPriceProBd .addPricePhoto img { max-width: 240px; } /* section article.productConBox .detailBox .addPricePro .addPriceProBd .addPriceBody .addPricePlan ul li { position: relative; width: calc(100% - 10px); } */ article.serviceContent .explainBox { width: auto; } } @media only screen and (max-width : 590px) { section article.proList .conBd.seoBox .text .textbd { padding: 20px 40px 30px; } section article.proList .conBd.seoBox { padding-top: 30px; } /* article.companyService .firstBanner .scrollDown{ margin-bottom:60px; } */ article.filterTableBox .tabsRoleBox ul li .ser { font-size: 42px; } article.filterTableBox .tabsRoleBox ul li .sercon { font-size: 16px; line-height: 20px; } section article.bannerBox.EFseries .bannerFt.home .con .title .titleBoxSq>span { display: initial; } } @media only screen and (max-width : 570px) { section article.proList .conBd.seoBox { padding-top: 0px; } section article.bannerBox.EFseries .bannerHd .photo img { position: inherit; } } @media only screen and (max-width : 560px) { /* invoiceLightbox */ .invoiceLightbox .invoiceDetailBox .invoiceDetailHd { margin: 0 0 10px 0; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd { margin: 0; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd table { border: 1px #ccc solid; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd tr { border-bottom: 10px #fff solid; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd th { display: none; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td { display: block; position: relative; padding: 0 0 1px 0; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:before { content: attr(data-th)""; display: table-cell; vertical-align: middle; background: #f2f2f2; width: 60px; padding: 8px; text-align: center; } .invoiceDetailBd td span { display: table-cell; vertical-align: middle; padding: 6px 6px; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(1), .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(2), .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(3), .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(4) { min-width: inherit; min-width: initial; text-align: left; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(1) { border-top: 1px #ccc solid; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd td:nth-child(4) { padding: 0; border-bottom: 1px #ccc solid; } .invoiceLightbox .invoiceDetailBox .invoiceDetailBd tr:last-child td:nth-child(4) { padding: 0; } .invoiceLightbox .invoiceDetailBox .invoiceDetailFt { border-top: 0; padding: 10px 0; } .invoiceLightbox.details-page .invoiceDetailBox .invoiceDetailBd tr { border-bottom: 10px #f4f4f4 solid; } .invoiceLightbox.details-page .invoiceBox .invoiceMainBox { border: none } } @media only screen and (max-width : 540px) { article.howChoose .howChooseBd .selectBox .choice ul li { width: 100%; } section article.clientsMap .title h2 span { display: block; } section article.clientsMap .title { margin: -30px auto 0; height: 60px; } section article.clientsMap .title h2 { font-size: 20px; line-height: 30px; } .lightbox article.otherBoxEF .tabFilter dl dd:nth-child(12) { min-height: 60px; } .lightbox article.otherBoxEF .tabFilter dl dd br.del { display: none; } .invoiceLightbox .invoiceBox .invoiceMainBox { width: auto; } .invoiceLightbox.details-page .invoiceBox { margin: 0 20px 20px 20px; } .invoiceLightbox.details-page .invoiceDetailBox { margin: 20px; } } @media only screen and (max-width : 520px) { /*形象圖ＫＶ*/ section article.bannerBox.PBSseries .bannerHd.home .photo img, section article.bannerBox.Hseries .bannerHd.home .photo img { left: 0 !important; } section article.bannerBox.DHseries .bannerHd.home .photo img { left: -80px !important; } section article.bannerBox.HLseries .bannerHd.home .photo img { left: -60px !important; } section article.bannerBox.Oseries .bannerHd.home .photo img { left: -254px !important; } section article.bannerBox.MRSseries .bannerHd.busines .photo img { left: -120px !important; } section article.bannerBox.Centralseries .bannerHd.busines .photo img { left: -40px !important; } /*我們的榮耀*/ footer .footerHd .rewardBox .rewardWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } section article.rewardList .rewardBox ul li, footer .footerHd .rewardBox span { padding: 10px; } section article.rewardList .rewardBox .container>ul { display: flex; flex-wrap: nowrap; } section article.rewardList .rewardBox .container>ul li img { width: 100%; } .main .unitList .swiper-slide .content .mintitle { float: none; } .main .unitList .swiper-slide .content .understandMore { position: inherit; width: 100px; text-align: center; } article.howChoose .howChooseHd .btn span, article.btnHowChooseDown .btnHowChooseDownHd .btn span { position: absolute; top: 12px; left: 20px; line-height: normal; } .bannerBox article.howChoose .howChooseHd .btn span { top: -30px; } .bannerBox article.howChoose .howChooseHd { margin: -63px auto 0 auto; } article.howChoose .howChooseHd .btn span img, article.btnHowChooseDown .btnHowChooseDownHd .btn span img { transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } section article.bannerBox .bannerHd .reserveBtn span.custom { position: absolute; top: -60px; } section article.bannerBox .bannerHd .reserveBtn span.custom img { transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } section article.productConBox .compareBox .typeBox { display: block; margin: 10px 0 0 0; } section article.newsList .desc { left: 10px; width: 100%; } section article.newsList .newsBox .owl-carousel { width: 100%; } article.serviceContent .title { font-size: 32px; line-height: 38px; padding: 20px 20px 120px 20px; } article.serviceContent .bg.SV .title { padding: 20px 20px 20px 20px; } article.serviceContent fieldset .box .con a.msg { top: -42px; font-size: 13px; } article.serviceContent .successBox .boxdw { font-size: 13px; } article.serviceContent .bx-controls-direction { height: 60px; margin: 0 -100px 0 0; position: absolute; right: 50%; top: 100%; width: 200px; } article.serviceContent .bx-wrapper .bx-controls-direction a { float: left; margin: 0 20px; } article.serviceContent .bg { padding-top: 61px; min-height: initial; } article.serviceContent .stepBox .step1, article.serviceContent .stepBox .step2, article.serviceContent .stepBox .step3, article.serviceContent .stepBox .step4, article.serviceContent .successBox { width: auto; } article.serviceContent fieldset .box { width: 100%; } section article.unitTitle .btnHowChoose, section article.unitTitle .btnLocation { position: relative; top: auto; right: auto; margin: 20px 0 0 0; text-align: center; } section article.unitTitle .tel { position: relative; top: auto; right: auto; margin: 20px 0 0 40px; text-align: center; } section article.unitTitle .title { text-align: center; display: block; *display: block; padding: 0; } section article.otherBox.busines .container .item { width: 100%; border-bottom: 1px #555 solid; } section article.recordBox .productList .tabDetail .boxtdl.type, section article.recordBox .productList .tabDetail .boxtdr.grade { display: block; *display: block; width: auto; } section article.recordBox .productList .btn input[type="submit"] { width: 100%; } section article.orderConBox .tabDetail .boxtr, section article.shoppingBox .tabDetail .boxtr { margin: 0 0 40px 0; background: #fff; } /* section article.shoppingBox .tabDetail .total { margin-top: -40px; } */ section article.shoppingBox .tabDetail .total .coupon .btnCoupon { margin: 0 0 10px 0; } section article.shoppingBox .otherOrder .btnFt span.txt { display: block; text-align: left; margin: 0 0 10px 0; } section article.shoppingBox .otherOrder .btnFt input[type="submit"] { max-width: 100%; width: 100%; } section article.orderConBox .tabDetail .boxtr:first-child { margin: 0; } section article.orderConBox .tabDetail .boxth, section article.shoppingBox .tabDetail .boxth { display: none; } section article.orderConBox .productList .tabDetail .col1, section article.orderConBox .productList .tabDetail .col2, section article.orderConBox .productList .tabDetail .col3, section article.orderConBox .productList .tabDetail .col4, section article.orderConBox .productList .tabDetail .col5, section article.orderConBox .orderList .tabDetail .col1, section article.orderConBox .orderList .tabDetail .col2, section article.orderConBox .orderList .tabDetail .col3, section article.orderConBox .orderList .tabDetail .col4, section article.orderConBox .orderList .tabDetail .col5, section article.shoppingBox .productList .tabDetail .col1, section article.shoppingBox .productList .tabDetail .col2, section article.shoppingBox .productList .tabDetail .col3, section article.shoppingBox .productList .tabDetail .col4, section article.shoppingBox .productList .tabDetail .col5, section article.orderConBox .returnList .tabDetail .col5, section article.orderConBox .returnList .tabDetail .col8, section article.orderConBox .returnList .tabDetail .col10, section article.orderConBox .returnList .tabDetail .col12, section article.orderConBox .returnList .tabDetail .col15, section article.orderConBox .returnList .tabDetail .col20, section article.orderConBox .testReportList .tabDetail .col1, section article.orderConBox .testReportList .tabDetail .col2, section article.orderConBox .testReportList .tabDetail .col3 { width: auto; padding: 15px 15px; } section article.orderConBox .returnList .tabDetail .col5, section article.orderConBox .returnList .tabDetail .col8, section article.orderConBox .returnList .tabDetail .col10, section article.orderConBox .returnList .tabDetail .col12, section article.orderConBox .returnList .tabDetail .col15, section article.shoppingBox .productList .tabDetail .col2, section article.shoppingBox .productList .tabDetail .col3, section article.orderConBox .returnList .tabDetail .col20, section article.orderConBox .testReportList .tabDetail .col1, section article.orderConBox .testReportList .tabDetail .col3 { text-align: right; } section article.orderConBox .returnList .tabDetail input#other1, section article.orderConBox .returnList .tabDetail input#other2 { display: block !important; } section article.orderConBox .orderList .tabDetail .col1, section article.orderConBox .orderList .tabDetail .col2 { text-align: right; } section article.orderConBox .tabDetail .boxtd, section article.shoppingBox .tabDetail .boxtd { width: auto; text-align: right; display: block; *display: block; } section article.orderConBox .tabDetail .col1 { text-align: left; } section article.orderConBox { padding: 0 0 40px 0; } section article.orderConBox .returnList .tabDetail .selectboxit-container { width: 60%; margin-top: 0; } section article.shoppingBox .productList .tabDetail .col3 .selectboxit-container { width: 60%; margin-top: -10px; } section article.shoppingBox .tabDetail .boxth .iconAdd, section article.shoppingBox .tabDetail .boxtd .iconAdd, section article.orderConBox .tabDetail .boxtd .iconAdd { position: absolute; top: 15px; right: 15px; padding: 0 0 0 10px; } section article.shoppingBox .tabDetail .boxth .iconAdd img, section article.shoppingBox .tabDetail .boxtd .iconAdd img, section article.orderConBox .tabDetail .boxtd .iconAdd img { max-width: 46px; } section article.shoppingBox .selectboxit-container { width: 60%; } section article.shoppingBox .productList .tabDetail .col3 .selectboxit-container { width: 60%; margin-top: -10px; } section article.shoppingBox .tabDetail .boxth .iconAdd, section article.shoppingBox .tabDetail .boxtd .iconAdd, section article.orderConBox .tabDetail .boxtd .iconAdd { position: absolute; top: 15px; right: 15px; padding: 0 0 0 10px; } section article.shoppingBox .tabDetail .boxth .iconAdd img, section article.shoppingBox .tabDetail .boxtd .iconAdd img, section article.orderConBox .tabDetail .boxtd .iconAdd img { max-width: 46px; } section article.orderConBox .otherOrder .otherBox, section article.shoppingBox .otherOrder .otherBox { padding: 20px 20px 60px 20px; } section article.shoppingBox .otherOrder .paymentBox .otherBox, section article.shoppingBox .otherOrder .couponRescue .otherBox { padding: 20px; } section article.shoppingBox .otherOrder .couponRescue h4 a { display: inline-block; } section article.shoppingBox .otherOrder .paymentBox fieldset .box .con { width: 100%; } section article.orderConBox .tabDetail .boxtd span.mbd, section article.shoppingBox .tabDetail .boxtd span.mbd { display: block; float: left; width: 70px; text-align: left; } section article.orderConBox .tabDetail .total .totalbox { margin: 0 0 10px 0; } section article.orderConBox .tabDetail .total .desc { position: relative; bottom: auto; left: auto; clear: both; width: 100%; padding: 15px 0 0 0; border-top: 1px #d7d7d7 solid; } section article.shoppingBox .tabDetail .boxtd .photo { width: 30%; } section article.shoppingBox .tabDetail .boxtd .title { width: 70%; } section article.proList .boxBd .msgBox a { display: block; float: left; } section article.logoBox .container .item { width: 100%; } article.serviceList .item .photo .title h2, article.serviceList .item .photo .title h1 { font-size: 38px; line-height: 42px; } article.serviceList .item .photo img { min-width: 1024px; } section article.unitTitle .msgBox, section article.unitTitle .register { padding: 0 20px; } section article.unitTitle .btn, section article.unitTitle .clock { padding: 0 0 0 20px; } section article.unitTitle .register input[type="submit"] { float: right; width: 25%; line-height: 64px; } section article.productConBox .detailBox .tabDetail .boxtdl.type, section article.productConBox .detailBox .tabDetail .boxtdr.price { width: 100%; display: block; *display: block; border-bottom: 1px #d7d7d7 solid; } section article.productConBox .detailBox .tabDetail .boxtdl.type { font-size: 24px; } section article.productConBox .detailBox .tabDetail .boxtdr.price { margin: 15px 0 0 0; } article.howChoose .howChooseBd .resultBox ol.stepBox { display: block; } article.howChoose .howChooseBd .resultBox ol.stepBox li { display: block; width: 300px; margin: 20px auto; } article.howChoose .howChooseBd .resultBox ol.need_List li { margin: 0 auto; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd, article.howChoose .howChooseBd .resultBox ol.stepBox li .ft { width: 100%; display: block; *display: block; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd { height: auto; margin: 0 0 -1px 0; } article.howChoose .howChooseBd .resultBox ol.stepBox li .hd .bd { width: 100%; padding: 20px 0; text-align: center; } article.howChoose .howChooseBd .resultBox ol.stepBox li:nth-child(4) .hd .bd { position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; } article.howChoose .howChooseBd .resultBox ol.stepBox li .ft .bd { border: 1px #fff solid; text-align: center; } article.howChoose .howChooseBd .resultBox ol.stepBox li .ft .bd span { padding: 0 30px 0 10px; } article.howChoose .howChooseBd .desc { right: 20px; } section article.unitMainList .bxslider .textLr, section article.unitMainList .bxslider .textRl { display: none; } section article.bannerBox .bannerFt2.home .photo img, section article.bannerBox .bannerFt2.busines .photo img { height: 540px; } section article.bannerBox .bannerFt2 .titleBoxs { top: 10%; left: 10%; right: 10%; width: 80%; max-width: initial; } section article.bannerBox .bannerFt2.busines .titleBoxs .title { display: flex; } section article.bannerBox .bannerFt2 .titleBoxs .title .sercon { /* display: initial; */ /* 20210725 */ zoom: initial; } section article.bannerBox .bannerFt2 .titleBoxs .title .ser, section article.bannerBox .bannerFt2.busines .titleBoxs .title .ser { /* display: block; */ /* 20210725 */ font-size: 38px; line-height: 1.1em; } section article.bannerBox .bannerFt2 .titleBoxs .title .ser.tw, section article.bannerBox .bannerFt2.busines .titleBoxs .title .ser.tw { font-size: 38px; font-weight: 400; } section article.bannerBox .bannerFt2 .titleBoxs .title { margin: 0 0 10px 0px; } section article.unitTitle .title .ch { font-size: 20px; font-weight: 400; } section article.unitTitle .title .en { font-size: 16px; font-weight: 400; padding-left: 2px; } section article.unitTitle .title .ser { padding: 0 4px 0 0; font-size: 40px; text-align: left; font-weight: 400; } section article.bannerBox .bannerFt2 .titleBoxs .title .ser.tw.tag { font-size: 16px; font-weight: 400; } section article.unitTitle .title .sercon { /* display: block; */ /* 20210725 */ } section article.bannerBox .bannerFt2 .titleBoxs .title .en { font-size: 22px; line-height: 22px; font-weight: 400; } section article.bannerBox .bannerFt2 .titleBoxs .title .ch { font-size: 20px; line-height: 23px; font-weight: 400; } section article.bannerBox .bannerFt2 .titleBoxs .text { font-size: 18px; } /** product home + bussiness **/ section article.bannerBox .bannerFt .conbox1 p { font-size: 18px; } section article.bannerBox .bannerFt .conbox h2, section article.bannerBox .bannerFt .conbox1 h2 { font-weight: 400; } section article.bannerBox .bannerFt .conbox p, section article.bannerBox .bannerFt .conbox1 p { font-weight: 400; } section article.bannerBox .bannerFt2 .titleBoxs .text { font-weight: 400; } /** product home **/ section article.bannerBox .bannerFt.home .conbox { padding: 0; } section article.bannerBox .bannerBd.home { padding: 20px; } /* section article.bannerBox.Oseries .bannerFt.home .con .titleBoxSq { width: auto; margin: 0 20px; float: left; } */ section article.bannerBox.Oseries .bannerFt.home .con .title, section article.bannerBox.Kseries .bannerFt.home .con .title, section article.bannerBox.Cseries .bannerFt.home .con .title, section article.bannerBox.DHseries .bannerFt.home .con .title, section article.bannerBox.CUseries .bannerFt.home .con .title, section article.bannerBox.Hseries .bannerFt.home .con .title, section article.bannerBox.DCseries .bannerFt.home .con .title, section article.bannerBox.WHseries .bannerFt.home .con .title, section article.bannerBox.EFseries .bannerFt.home .con .title, section article.bannerBox.HLseries .bannerFt.home .con .title, section article.bannerBox.PBSseries .bannerFt.home .con .title { width: 80%; min-width: 80%; margin-left: 10%; margin-left: 10%; margin-top: 80px; padding: 0; font-size: 42px; } section article.bannerBox .bannerFt.home .conboxbd { width: 80%; min-width: 80%; padding: 30px 0 80px 0; margin: 0 10%; } /** product bussiness **/ section article.bannerBox .bannerFt.busines .conbox { padding: 0; } section article.bannerBox .bannerBd.busines { padding: 20px; } section article.bannerBox.ICEseries .bannerFt.busines .con .title, section article.bannerBox.MRSseries .bannerFt.busines .con .title, section article.bannerBox.HOTseries .bannerFt.busines .con .title, section article.bannerBox.Centralseries .bannerFt.busines .con .title, section article.bannerBox.Softseries .bannerFt.busines .con .title { width: 80%; min-width: 80%; margin-left: 10%; margin-left: 10%; margin-top: 80px; padding: 0; font-size: 42px; text-align: left; } section article.bannerBox .bannerFt.busines .conboxbd { width: 80%; max-width: 80%; min-width: 80%; padding: 30px 0 80px 0; margin: 0 10%; } section article.bannerBox .bannerFt .conbox a.more { left: 9%; } article.serviceList .item .photo .title h2, article.serviceList .item .photo .title h1 { font-size: 36px; line-height: 42px; } section article.unitTitle .searchpgBox .buyText { width: 70%; } section article.unitTitle .searchpgBox .buyBtn { width: 30%; } section article.newsList .container .item { margin: 0; } section article.formBox .wrap .title h2, section article.formBox .wrap .title h1 { font-size: 30px; line-height: 36px; } section article.formBox.listFormBox .wrap { padding: 20px 10px 0px 20px; } section article.formBox .wrap .title p span { display: inline; } /*---------------------------------------- shoppingCart.html -----------------------------------------*/ section article.shoppingBox .tabOptional { padding-left: 0; } section article.shoppingBox .tabOptional .boxtr { padding-left: 0; width: 100%; } section article.shoppingBox .tabOptional .tag { position: relative; } /*---------------------------------------- faq_e-Receipt.html -----------------------------------------*/ article.eReceiptBox .faqBox .item .boxBd { padding: 12px 30px 0 12px; } } @media only screen and (max-width : 480px) { section article.filtrationList .filtrationBox .filtrationMenuBox .menuBoxBd .seriesLi a { padding: 5px 5px 0; } section article.unitList .titleSlide_h1 { font-size: 32px; margin-top: -90px; } section article.unitList .titleSlide_h3 { margin-top: -35px; } section article.clientsList .container .item { width: 100%; } .memberBox .loginBox, .memberBox .joinBox, .memberBox .agreeBox, .memberBox .againAgreeBox, .cartBox .cartBoxBd { width: 85%; } section article.scienceBd .topSpace { height: 6vw; } section article.scienceBd .loadMore, section article.scienceBd .box .share { position: relative; left: auto; right: auto; bottom: auto; text-align: center; padding: 20px 0 0 0; } section article.scienceBd .loadMore { padding: 60px 0 20px 0; } section { margin: 61px 0 0; } section article.productList .container.max .item .boxHd, section article.productList .container.max .item .boxBd, section article.productList .container.max .item .boxFt { max-width: 240px; } /** product home **/ section article.bannerBox .bannerBd.home h2 { font-size: 28px; line-height: 32px; } section article.bannerBox .bannerFt.home .conbox p { line-height: 22px; } /** product busines **/ section article.bannerBox .bannerFt.busines .con .conbox p { line-height: 22px; } /**/ section article.otherBox.home .container .item { width: 100%; border-bottom: 1px #ccc solid; } section article.otherBox .container .item { padding: 0 0 40px 0; } section article.otherBox .container .item .title .ser { padding: 0 4px 0 4px; } section article.productList .descBox { margin: 40px 20px 0; } section article.bannerBox .bannerFt .banner .desc .icon, section article.bannerBox .bannerFt .banner .desc .text { display: block; *display: block; } section article.productList { padding: 40px 0; } section article.productConBox .productlist { width: 90%; } section article.productConBox .textbox { padding: 40px 20px; } section article.productConBox .textbox+.textbox { padding: 0 20px 40px 20px; } article.filterTableBox .tabforProHd .slickHd .title .ser { font-size: 34px; } article.filterTableBox .tabforProHd .slickHd .title .en { font-size: 15px; } article.filterTableBox .tabforProHd .slickHd .title .ch { font-size: 13px; } section article.proList .boxBd { padding: 40px 20px 20px; } section article.proList .boxBd .proBox h3, section article.proList .boxBd .proBox h2, section article.proList .boxBd .proBox h1 { margin: 0 0 20px; } section article.proList .conBd .title { margin: 0; position: relative; top: auto; left: auto; right: auto; text-align: center; font-size: 22px; font-weight: 400; line-height: 120px; } section article.proList .conBd .title.right { left: auto; right: auto; } section article.proList .conBd .title span { font-size: 18px; font-weight: 200; } section article.proList .conFt .main { padding: 80px 0 0; } section article.proList .conFt.specialFor .main { padding-top: 70px; } section article.proList .conFt .text { margin: 0 0 -40px; } section article.proList .conFt .tel { width: 280px; } section article.proList .conBd .shop { text-align: center; } section article.otherBox .owl-carousel { width: 50%; } section article.unitTitle .title .ch { line-height: 1.2; } section article.unitTitle.busines .main>.title { width: initial } section article.unitTitle .title { padding: 0; margin-left: 0; } section article.unitTitle .main>.title { width: 100%; } section article.unitTitle .tel { /* width: 80px; */ margin: 20px 0 0 auto; text-align: center; } /* 2019 / 11 超濾中空絲膜系列 */ section h1.title, section .series-title { padding: 30px 20px; height: auto; line-height: 2em; } section h1.title>img, section .series-title>img { display: block; margin: 0 auto; } section h1.title>span, section .series-title>span { display: block; } article.seriesList .item .conBox .title .en { font-size: 32px; line-height: 32px; } article.seriesList .item .conBox .title .ch { font-size: 28px; line-height: 32px; } section article.bannerBox .bannerFt .conbox { background: url(../Content/images/icon/icon_info_s.gif?v=20170216) no-repeat right top; } footer .footerHd .subnav { padding: 0 20px 40px 20px; } footer .footerHd .shareBox { padding: 40px 20px 40px 20px; } footer .footerHd .rewardBox { margin: 10px 15px 30px; } footer .footerHd .pureBox { padding: 30px 20px 0; } footer .footerFt { padding: 20px 20px 30px 20px; } footer .footerFt .logo, footer .footerFt .copyright { display: block; *display: block; } footer .footerFt .logo { margin: 0 0 5px 0; } section article.searchpgConBox .searchpgList .item .boxHd span.hd small { margin-left: 0; } section article.bannerBox .bannerFt .conbox a.more { left: 9%; } section article.productList h3, section article.productConBox .setupbox h3 { margin: 0; } /*formQA*/ section article.formBox .wrap { width: 100%; padding: 40px 10px 50px 10px; } section article.formBox .wrap { width: 100%; padding: 40px 20px 50px 50px; } section article.formBox .wrap .title h2, section article.formBox .wrap .title h1 { font-size: 27px; line-height: 32px; } section article.formBox .wrap .title p { padding-top: 10px; font-size: 12px; line-height: 20px; } article.companyService .fourSolution .content .contentBox .boxRight .productShow { padding-bottom: 85%; } article.companyService .fourSolution .content .contentBox .boxRight .productShow .box .productImg { top: 15%; right: -44px; width: 180px; } article.companyService .fourSolution .content .contentBox .boxRight .explainTxt { padding: 8% 10%; } article.errorBox h3 { padding: 20px 20px; margin: 0 20px; } article.errorBox ol { width: auto; padding: 20px; margin: 0 20px 40px 20px; } article.errorBox ol li { padding: 2px 0; font-size: 13px; } article.serviceContent .purviveBox { align-items: flex-start; flex-direction: column; } article.serviceContent .purviveBox .pv-img, article.serviceContent .purviveBox .pv-link { width: 100%; } } @media only screen and (max-width : 480px) { section article.clientsNumber h2 { margin: 0 0 20px 0; } section article.clientsNumber .jumping { width: 280px; } section article.clientsNumber .jumping span:nth-child(1) { font-size: 35px; } section article.clientsNumber .jumping span:nth-child(2) { font-size: 100px; } section article.clientsNumber .jumping span:nth-child(3) { font-size: 25px; } section article.clientsNumber .clientstype ul li span { width: 100px; margin: 0 auto 13px; font-size: 14px; line-height: 14px; text-align: center; } section article.clientsNumber .clientstype ul li span img { max-width: 100%; } section article.unitMainList.home .partBox.part1 .model1 .modelBox, section article.unitMainList.home .partBox.part2 .model2 .modelBox { left: 0; } section article.formBox .wrap .step2 p { font-size: 16px; line-height: 24px; } article.companyService .fourSolution .content .contentBox .boxRight #tabs-2 .productShow .box .productImg { top: 10%; right: -40px; width: 300px; } section article.productConBox .detailBox .tabDetail .price, section article.productConBox .detailBox .tabDetail .default { display: block; } section article.productConBox .detailBox .tabDetail .default span.box img, section article.productConBox .detailBox .tabDetail .price span.box img, section article.productConBox .detailBox .tabDetail .DIYprice span.box img { position: relative; top: auto; left: auto; } section article.productConBox .detailBox .btn { padding: 52px 0 0; } section article.productConBox .detailBox .btn .number { right: 40%; } section article.productConBox .detailBox .btn .diyful { left: 60%; right: 0; } section article.productConBox .detailBox .btn input.buy[type="submit"] { width: 100%; } section article.shoppingBox .tabDetail .total .coupon .box { height: 80px; margin: 0 0 0 0; } section article.shoppingBox .tabDetail .total .coupon .box .couponBox { top: 35px; left: 0; right: 42%; } section article.shoppingBox .tabDetail .total .coupon .box .fiveBox { top: 35px; left: 0; right: 42%; } section article.shoppingBox .tabDetail .total .coupon .box .couponBtn { top: 35px; left: 60%; right: 0; } } @media only screen and (max-width : 440px) { article.companyService .secondPlanning .content .part2 .txtWrap, article.companyService .thirdManagement .content .part2 .txtWrap { padding: 14% 12%; } article.companyService .fourSolution .content .contentBox .boxRight .slideBox_M_wrap .moreLine { right: 8px; } } @media only screen and (max-width : 439px) { section article.rewardList .rewardBox ul li { padding-bottom: 30px; padding-right: 15px; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag ul li span.squar { margin-right: 20px; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag ul li { margin-right: 13px; } article.companyService .fourSolution .content .contentBox .boxLeft .itemTag ul li a { font-size: 14px; } article.serviceContent .title p span { display: inline; } .SVBox .explainBox { width: 240px; padding: 30px 20px; } .SVBox .explainBox .box>div { width: auto; display: block; } .SVBox .explainBox .box .year { text-align: left; } } @media only screen and (max-width : 400px) { section article.productList .introBox { min-height: 100px; } section article.productList .introBox .btnBox a:nth-child(2) { margin: 10px 0 0 0; } .lightbox article.otherBoxEF.bgSoft .producttitle { margin: 0 auto 40px; } .owl-theme .owl-nav { margin: -35px 0 0; } section article.socialLinkBox_M .container { width: 100% } } @media only screen and (max-width : 380px) { article.serviceContent .explainBox { padding: 30px 20px; } article.serviceContent .explainBox .box>div { width: auto; display: block; text-align: left; } article.serviceContent .explainBox .box>div img { max-width: 100%; } article.serviceContent .explainBox .box>div+div { margin: 10px 0 0 0; } article.serviceContent .explainBox .box .year { text-align: left; } .jconfirm.SVBox .jconfirm-box div.content { padding: 0; } article.errorBox { padding: 60px 0; } article.errorBox h3 { font-size: 20px; } article.errorBox ol { margin: 0 20px 20px 20px; } article.serviceContent .title .successBox a.btn.white { padding: 0 20px; } .lightbox article.otherBoxEF .tabFilter dl dd:nth-child(3) { min-height: 60px; } /* 20211207 */ section article.shoppingBox .otherOrder fieldset .btnDIY { margin: 0 0 0 0; } section article.shoppingBox .otherOrder fieldset span.error { display: block; top: 5px; margin: 0 0 5px 0 !important; padding: 0 0 0 20px; } section .tabShoppingBox>ul { padding: 0 10px 0 10px; display: table; width: 90%; } section .tabShoppingBox>ul li { display: table-cell; vertical-align: middle; } section .tabShoppingBox>ul li a { display: block; padding: 20px 10px; min-width: 100px; text-align: center; } footer .footerHd ul:nth-child(1) { padding: 0 15px 0 0; max-width: 120px; } footer .footerHd ul.max { max-width: 150px; } footer .footerHd ul.max li { padding: 10px 20px 10px 0; } footer .footerHd ul.max li:nth-child(3), footer .footerHd ul.max li:nth-child(5), footer .footerHd ul.max li:nth-child(7) { padding: 10px 0 10px 0; } section article.unitTitle .main { padding: 30px 15px; flex-direction: column; } section article.unitTitle .main>.title { width: 100%; } section article.unitTitle .title .ser { font-size: 42px; } section article.bannerBox .bannerFt2 .titleBoxs .title .en { font-size: 13px; } section article.bannerBox .bannerFt2 .titleBoxs .title .ch { font-size: 16px; } section article.unitTitle .title .ch span { font-size: 12px; } section article.unitTitle .btnHowChoose { margin: 40px 0 0 0; } } /** * * iphone 5 * **/ @media only screen and (max-width : 320px) { .main .unitList .swiper-slide .content .title { font-size: 26px; line-height: 30px; letter-spacing: -1px; } section article.productConBox .detailBox .tabDetail .boxtdl { width: 40%; } section article.productConBox .detailBox .tabDetail .boxtdr { width: 60%; } } /** * * iPads * **/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { section article.clientsList .container .item img, section article.logoBox .container .item img { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } section article.unitList .adBox { display: none; } /* input, select, textarea { -webkit-appearance: none; border-radius: 0; } */ fieldset input[type=reset], fieldset input[type=submit], fieldset input[type=button], fieldset input[type=text], fieldset input[type=email], fieldset input[type=password], fieldset textarea { -webkit-appearance: none; border-radius: 0; } #wrapper.page section article.otherBox { display: none; } section article.unitList .video { display: none; } section article.unitMainList .bxslider .model { min-height: 680px; } section article.unitMainList .bxslider li.part3 .icon2 { top: 430px; } section article.unitMainList .bxslider li.part3 .textRl { left: 65%; right: 40px; bottom: 100px; } .page section, .homePage section, .homePageW section { margin: 60px 0 0 0; } section.bacteriaBanner { margin: -90px 0 0; } /* .lb-probox { width: 250px; height: 250px; }*/ .featherlight .featherlight-content { top: 12%; margin-right: -125px; } .lb-probox .proBox .img { max-width: 250px; margin-bottom: 6px; } .lb-probox .proBox .ttl { margin-bottom: 5px; font-size: 18px; line-height: 24px; } .lb-probox .proBox .cont { font-size: 15px; line-height: 20px; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { section article.unitMainList .bxslider .form { zoom: 0.9; } article.wts .imgBG-3d { position: relative; margin-top: 6%; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { section article.unitMainList .bxslider .textCe { display: none; } article.companyService .thirdManagement .sectionWrap .content .part2 .part2_Txt { top: 40%; } article.companyService .headlineBox, article.companyService .thirdManagement .headlineBox { margin-top: 6%; } } /** * * iPhones * **/ @media only screen and (min-device-width : 320px) and (max-device-width : 767px) { section article.clientsList .container .item img, section article.logoBox .container .item img { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } section article.unitList .adBox { display: none; } input, select, textarea { /*-webkit-appearance: none; border-radius: 0;*/ } fieldset input[type=reset], fieldset input[type=submit], fieldset input[type=button], fieldset input[type=text], fieldset input[type=email], fieldset input[type=password], fieldset textarea { -webkit-appearance: none; border-radius: 0; } #wrapper.page section article.otherBox { display: none; } section article.unitTitle .register input[type="submit"] { line-height: 66px; } section article.unitTitle .msgBox ul.checkbox input[type="checkbox"] { vertical-align: middle; } section article.unitMainList .bxslider .textCe, section article.unitList .video { display: none; } section article.unitMainList .bxslider .model { min-height: 540px; } .page section, .homePage section, .homePageW section { margin: 60px 0 0 0; } /* section article.productConBox .relatedProBox ul { display: flex; width: 100%; } section article.productConBox .relatedProBox ul li { display: table-cell; width: auto; margin: 0 auto; } */ } @media only screen and (min-device-width : 320px) and (max-device-width : 767px) and (orientation : portrait) {} @media only screen and (min-device-width : 320px) and (max-device-width : 767px) and (orientation : landscape) {} /** * * ratio: 1.5 * **/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {} @media only screen and (max-height : 768px) { .main .unitList .swiperbox { top: 25%; } } /******************************************************************************************/ /********************************* HEAD *************************************************/ /******************************************************************************************/ @media only screen and (max-width : 1500px) { header .main .logo { left: 3%; } header .main nav { margin-right: 3%; } } @media only screen and (max-width : 1200px) { header .main nav ul li { padding: 0 10px; } header .subnav .home .bd a { padding: 2px 8px; } header .subnav .hd a { padding-left: 10px; } } /*was 1024*/ @media only screen and (max-width : 1110px) { header .main .logo { left: 4%; top: 25px; } header .main nav { margin-right: 4%; margin-top: 35px; } header .main nav ul.nav { position: fixed; top: 60px; left: 0; width: 100%; overflow: auto; overflow-x: hidden; padding: 0; text-align: left; display: none; *display: none; background: #fff; -webkit-overflow-scrolling: touch; font-size: 16px; } header .subnav .main, header .subnav2 .main { display: block; } header .subnav.midWidth .main, header .subnav2 .main { max-width: inherit; max-width: initial; } header .subnav .main .home { display: block; width: 100%; } header .subnav .main .office, header .subnav .main .other, header .subnav .main .blog, header .subnav2 .main .prod-info, header .subnav2 .main .service { display: block; width: 100%; padding: 0; } header .subnav .tabCell { display: inline-block; width: 49%; } header .subnav2 .main .prod-info .bd, header .subnav2 .main .service .bd, header .subnav .main .home .bd, header .subnav .main .office .bd, header .subnav .main .other .bd { padding: 20px 0 20px 30px; } header .subnav.midWidth .main { padding: 10px 0 20px 0; } header .subnav .main .blog:last-child .hd { border: 0; } header .subnav .main .home .bd>.box:nth-child(1), header .subnav .main .home .bd>.box:nth-child(2) { width: 100%; float: none; } header .subnav .main .home .bd>.box:nth-child(2) { margin-left: 0px; padding-top: 30px; } header .subnav .main .home .bd .box .bgGrey { width: 96.8%; line-height: 33px; margin-left: -29px; } header .subnav .main .home .bd .box .bgGrey h4 { font-weight: 300; } header .subnav .office .bd a, header .subnav .other .bd a { display: inline-block; padding: 2px 10px 4px; text-align: left; width: 32.3%; line-height: 1.6em; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header .subnav .bd a { display: inline-block; width: 170px; padding: 0px 10px; } header .subnav .main .other .hd { border-top: 0; } header .main nav ul li { padding: 0 10px; line-height: 16px; } header .main nav ul li.cart { padding: 0 30px 0 0px; } header .main nav ul li.cart a.icon { top: -12px; left: 80% } header .cart .box { top: -6px; left: 10px; } header .cart .box { top: -5px; left: 5px; } header .main nav ul li.cart a.icon { top: -8px; } header .main nav ul.nav li { display: block; padding: 0 20px; line-height: 56px; text-align: left; border-bottom: 1px #d0d0d0 solid; } header .main nav ul li.menu { display: table-cell; } header .main nav ul li.search .deviceSearch { display: block; } header .main nav ul li.search .menuSearch { display: none; } header .main nav ul li.search input { display: none; min-width: 50%; margin-bottom: 2px; } /* header .main nav ul li.open a.product img, header .main nav ul li a.support img, header .main nav ul li a.service img { display: inline-block; } */ header .main nav ul li.open a img { display: inline-block; } header .subnav, header .subnav2 { position: relative; top: auto; height: auto; border: 0; display: block; } header .main nav ul li.loginMsg { display: block; } header .main nav ul li.loginMsg a.name { margin: 0; } header .main nav ul li.loginMsg .loginMsgsub { max-width: 600px; margin: 0 auto; } header .main nav ul li.loginMsg .loginMsgsub>a { position: relative; display: table-cell; padding: 0 20px; } header .main nav ul li.loginMsg .loginMsgsub>a:last-child { padding: 0 20px 0 100px; } header .main nav ul li.loginMsg .loginMsgsub>a:last-child:after { position: absolute; left: 40px; top: 15px; bottom: 15px; width: 1px; content: ""; background-color: #d0d0d0; } header .main nav ul li.login, header .main nav ul li.logoff { display: none; } header .neoMenu:not(.indexTop):not(.indexTop2) { min-height: 60px; } header .neoMenu:not(.indexTop):not(.indexTop2) .main .logo { top: 10px; } header .main nav ul li.buergerIcon { display: none; } header .neoMenu:not(.indexTop):not(.indexTop2) .main .tools { padding-top: 5px; } } @media only screen and (max-width : 1020px) { header .main nav ul li.loginMsg a.name { margin: 0; } } @media only screen and (max-width : 840px) { header .subnav .main>div, header .subnav2 .main>div { width: 100%; display: block; } header .subnav .main .home .hd, header .subnav .main .home .bd, header .subnav .main .office .hd, header .subnav .main .office .bd, header .subnav .main .other .hd, header .subnav .main .other .bd, header .subnav2 .main .prod-info .hd, header .subnav2 .main .prod-info .bd, header .subnav2 .main .service .hd, header .subnav2 .main .service .bd { width: 100%; margin: 0 auto; } header .subnav .main .home .bd, header .subnav .main .office .bd, header .subnav .main .other .bd, header .subnav2 .main .prod-info .bd, header .subnav2 .main .service .bd { display: none; } header .examplLayout.subnav2 .main .prod-info .bd { display: block !important; border-top: 1px #d0d0d0 solid; } header .subnav .main .home .hd, header .subnav .main .office .hd, header .subnav .main .other .hd, header .subnav .main .blog .hd, header .subnav2 .main .prod-info .hd, header .subnav2 .main .service .hd, header .subnav .main .blog:last-child .hd { margin: 0; border: 0; border-top: 1px #d0d0d0 solid; } header .subnav, header .subnav2 { margin: 0 -20px; display: block; width: auto; } header .subnav .main, header .subnav2 .main, header .subnav.midWidth .main { padding: 0; } header .subnav .hd a, header .subnav2 .hd a { line-height: 56px; text-align: left; padding: 0 20px; } header .subnav .main .box, header .subnav2 .main .box { padding: 0 20px; } header .subnav .home .bd span.first, header .subnav .office .bd span.first, header .subnav .other .bd span.first { padding: 8px 5px 4px 40px; margin: -10px -20px 10px -40px; background: #e8e8e8 url(../Content/images/icon/icon_subnavArrow.png?v20170216) no-repeat 95% 15px; border-bottom: 1px #ccc solid; } } @media only screen and (max-width : 767px) { header .mobileHide, header .main nav ul li.open a img.mobileHide, header .main nav ul li.open a img.mobileHide { display: none; } header .pcHide, header .subnav .bd a.pcHide, header .subnav2 .bd a.pcHide { display: block; } /* header .subnav .main .other .hd { border: 0; } */ header .subnav .main .hd.openSubnav img.pcHide, header .subnav2 .main .hd.openSubnav img.pcHide { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } header .subnav .main .home .bd, header .subnav .main .office .bd, header .subnav .main .other .bd, header .subnav2 .main .service .bd, header .subnav2 .main .prod-info .bd { width: auto; } header .subnav .main .home .bd, header .subnav .main .office .bd, header .subnav .main .other .bd, header .subnav2 .main .service .bd, header .subnav2 .main .prod-info .bd { padding: 10px 0 10px 20px; } header .subnav .bd, header .subnav2 .bd { background-color: #f2f9ff; background-color: #f2f2f2; } header .subnav .home .bd a, header .subnav2 .home .bd a { display: block; width: auto; } header .subnav .main .home .bd>.box:nth-child(1), header .subnav .main .home .bd>.box:nth-child(2) { width: auto; } header .main nav ul.nav li .subnav .bd a, header .subnav .bd a { display: block; width: auto; padding: 5px 8px; font-size: 14px; font-weight: 400; color: #888; height: auto; line-height: 1.4em; cursor: pointer; } header .main nav ul.nav li .subnav2 .bd a, header .subnav2 .bd a { width: calc(50% - 16px); padding: 5px 8px; font-size: 14px; font-weight: 400; color: #888; height: auto; line-height: 1.4em; cursor: pointer; } header .main nav ul.nav li .subnav .bd a:hover, header .subnav .bd a:hover, header .main nav ul.nav li .subnav2 .bd a:hover, header .subnav2 .bd a:hover { color: #000; } header .subnav .home .hd a:hover, header .subnav .office .hd a:hover, header .subnav .other .hd a:hover, header .subnav2 .service .hd a:hover, header .subnav2 .prod-info .hd a:hover { background: none; } header .subnav .home .bd span.first, header .subnav .office .bd span.first, header .subnav .other .bd span.first, header .subnav2 .service .bd span.first, header .subnav2 .prod-info .bd span.first { padding: 8px 5px 4px 40px; margin: -10px -20px 10px -40px; background: #e8e8e8 url(../Content/images/icon/icon_subnavArrow.png?v20170216) no-repeat 95% 15px; border-bottom: 1px #ccc solid; } header .main nav ul.nav li .subnav .home .bd span.first a, header .main nav ul.nav li .subnav .office .bd span.first a, header .main nav ul.nav li .subnav .other .bd span.first a, header .main nav ul.nav li .subnav2 .service .bd span.first a, header .main nav ul.nav li .subnav2 .prod-info .bd span.first a { font-size: 15px; color: #676767; } header .main nav ul.nav li .subnav .home .bd span.first a:hover, header .main nav ul.nav li .subnav .office .bd span.first a:hover, header .main nav ul.nav li .subnav .other .bd span.first a:hover, header .main nav ul.nav li .subnav2 .service .bd span.first a:hover, header .main nav ul.nav li .subnav2 .prod-info .bd span.first a:hover { color: #000; } header .subnav .main .home .box, header .subnav .main .office .box, header .subnav .main .other .box, header .subnav2 .main .service .box, header .subnav2 .main .prod-info .box { width: auto; } header .subnav .main .office .bd .box { padding-bottom: 0; } section article.productList .introBox .btnBox a { padding: 0 20px; } } @media only screen and (max-width : 560px) { header .main nav ul li.loginMsg .loginMsgsub>a { padding: 0 20px 0 0; } header .main nav ul li.loginMsg .loginMsgsub>a:last-child { padding: 0 10px 0 40px; } header .main nav ul li.loginMsg .loginMsgsub>a:last-child:after { left: 10px; } section article.productConBox .tabFilter { width: 100%; } section article.productConBox .tabFilter .tabFilterL { width: 120px; } section article.productConBox .tabFilter .tabFilterR { width: calc(100% - 120px); } } @media only screen and (max-width : 480px) { header { height: 60px; } header .main .logo { top: 10px; } header .main nav { margin-top: 18px; } header .main nav ul.nav { top: 61px; } header .main nav ul.nav li { line-height: 36px; } header .subnav .main .box { display: block; width: 100%; } header .subnav .hd a { line-height: 40px; } header .main nav ul .hd a img { margin-top: -4px; } header .main nav ul.nav li a { height: 48px; line-height: 48px; } header .subnav nav ul li.hd a { line-height: 50px; } } @media only screen and (max-width : 360px) { header .main nav ul li.loginMsg .loginMsgsub>a { padding: 0 15px 10px 0; font-size: 15px; height: 30px; line-height: 30px; } header .main nav ul li.loginMsg .loginMsgsub>a:last-child { padding: 0 0 10px 20px; } header .main nav ul li.loginMsg .loginMsgsub>a:last-child:after { left: 5px; top: 6px; bottom: 16px; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { header .main nav ul li a { font-weight: 200; } } @media only screen and (min-device-width : 320px) and (max-device-width : 767px) { header .main nav ul li a { font-weight: 200; } } @charset "utf-8"; #logoutForm { display: inherit; } .text-danger { display: block; margin: 5px 0 2px 0; color: red; } a.blue { color: #55a7f2; } .red { color: red; } .message { display: none; } .pointer { cursor: pointer } #loading #shadow_over.f4f4f4 { background: #f4f4f4; } .memberBox .conBox.forgetBox { display: block; } .memberBox .conBox.againAgreeBox { display: block; } header .main nav ul li.logoff { border-left: 1px #676767 solid; } .memberSurvey textarea { line-height: normal; text-indent: initial; } article.serviceContent fieldset .box { width: 85%; } article.serviceContent .successBox .boxtd.tdl img { max-width: 100%; } section article.proList .neoPart .boxBd .proBox p { max-height: 72px; overflow: hidden; } section article.otherBox .owl-carousel .item .title { cursor: pointer; } section article.qaConBox .qaList .item .boxBd div.bd { color: #505050; } section article.productConBox .detailBox .tabDetail .boxtdr.price { color: #000000; } section article.productConBox .detailBox .tabDetail .boxtdr.sale { color: #c81313; } section article.unitTitle .infoBox .info { margin: 5px 0 0 0; color: #d92e00; font-size: 14px; display: none; } section article.unitTitle .register input[type=button] { width: 20%; } section article.signupBox .joinBox fieldset input[type=button], .memberBox .joinBox fieldset input[type=button] { background: #b9b9b9; } section article.signupBox .joinBox fieldset input[type=button] { max-width: none; } section article.productConBox .detailBox .btn input[type=button].buy { float: right; color: #fff; width: 52%; text-align: center; border: 0; height: 42px; line-height: 42px; background: #000000 url(images/icon/icon_productCar.png) no-repeat right; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; } article.serviceContent .qaList .item .boxBd div.bd, article.serviceContent .qaList .item .boxBd div.bd p { color: #505050; } .serviceContent .step2 .district, .serviceContent .step2 .zipcode { display: none; } section article.orderConBox .productList .notebox ol>*, section article.shoppingBox .notebox ol>* { font-size: 12px; /*font-weight: 100;*/ } section article.orderConBox .productList .notebox ol .child, section article.shoppingBox .notebox ol .child { margin-left: 15px; } section article.productConBox .tabFilter dl dd span { display: block; } section article.productConBox .tabFilter dl dd span.del { /*background: #f4f4f4;*/ } fieldset input[type=reset], /*fieldset input[type=submit],*/ fieldset input[type=button] disable { background-color: #b9b9b9; } .htmlTag ol { margin: 1.33em 0; margin-left: 20px; margin-top: 0; margin-bottom: 0; list-style-type: decimal !important; } .htmlTag ol li { list-style: decimal; line-height: 2; } .htmlTag ul li { list-style: disc; line-height: 2; } .htmlTag ul { list-style-type: disc; list-style-position: inside; margin-left: 40px; } a.regain { color: #f4f4f4; } section article.searchpgConBox .searchpgList .item .boxHd span.hd small { max-height: 40px; overflow: hidden; display: block; } .hiddenfar { /* display: block; text-indent: 1000%; white-space: nowrap; height: 0px; */ text-indent: 100%; white-space: nowrap; overflow: hidden; height: 0px; display: inline-block; position: absolute; } .hiddenBox { display: none !important; } .twzipcode .zipcode { pointer-events: none; } .placardMsg { position: fixed; left: 10px; bottom: 10px; width: 380px; padding: 25px 25px 25px; margin-bottom: -100vh; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 5px; z-index: 100; -webkit-transition: all 400ms linear; transition: all 400ms linear; } .placardMsg.open { margin-bottom: 0vh; } .placardMsg .buttons { position: absolute; top: 0; right: 0; z-index: 9; } .placardMsg button { border: none; text-transform: uppercase; text-shadow: none; -webkit-transition: background .1s; transition: background .1s; color: #000; font-size: 15px; font-weight: bold; background: none; line-height: 30px; vertical-align: middle; cursor: pointer; } .placardMsg button.btn-default { box-shadow: none; color: #333; } .placardMsg button.btn-default:hover { background: #ddd; } @media only screen and (max-width : 410px) { .placardMsg { position: fixed; left: 10px; bottom: 10px; right: 10px; width: auto; } } .twzipcode .zipcode { pointer-events: none; } @charset "utf-8"; #neoImgPreload { position: absolute; z-index: -999; width: 0; height: 0; display: none; } #neoImgPreload img { width: 0; height: 0; } #loading { background: none; overflow: hidden; } #loading #shadow_over { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 1); z-index: 10; } #loading canvas { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; width: 100px; height: 100px; z-index: 20; } header .neoMenu { position: absolute; top: 0; width: 100%; min-height: 100%; border-bottom: 1px rgba(208, 208, 208, 0.8) solid; background: rgba(255, 255, 255, 1); z-index: 10; /* -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transition: background-color 0.5s; -moz-transition: background-color 0.5s; -o-transition: background-color 0.5s; transition: background-color 0.5s; -webkit-transition: border-color 0.5s; -moz-transition: border-color 0.5s; -o-transition: border-color 0.5s; transition: border-color 0.5s; webkit-transition-property: top; webkit-transition-duration: 0s; */ } header .neoMenu.indexTop { /*border-bottom: none; background: none;*/ border-bottom: 1px rgba(255, 255, 255, 0) solid; background: rgba(255, 255, 255, 0.0) url(images/icon/bg_header.png) repeat-x center top; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; /* -webkit-transition: background-color 0.5s 1s; -moz-transition: background-color 0.5s 1s; -o-transition: background-color 0.5s 1s; transition: background-color 0.5s; -webkit-transition: border-color 0.5s 1s; -moz-transition: border-color 0.5s 1s; -o-transition: border-color 0.5s 1s; transition: border-color 0.5s 1s;*/ } header .neoMenu.indexTop .main nav ul li.cart a.icon { color: #fff; } header .neoMenu.indexTop .main nav ul li.cart, header .neoMenu.indexTop .main nav ul li.login, header .neoMenu.indexTop .main nav ul li.logoff { border-left: 1px #fff solid; } header .neoMenu.indexTop .main nav ul li>a { color: #fff; } header .neoMenu.indexTop.indexOn { border-bottom: 1px rgba(255, 255, 255, 1) solid; background: rgba(255, 255, 255, 0.2) url(images/icon/bg_header.png) repeat-x center top; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } header .neoMenu.indexTop2 { /*border-bottom: none; background: none;*/ border-bottom: 1px rgba(255, 255, 255, 0) solid; background: rgba(255, 255, 255, 0.0) url(images/icon/bg_header.png) repeat-x center top; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } header .neoMenu.indexTop2.indexOn2 { border-bottom: 1px rgba(208, 208, 208, 1) solid; background: rgba(255, 255, 255, 0.2) url(images/icon/bg_header.png) repeat-x center top; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } header .indexTop .logo { background: url(images/logo_w.png) no-repeat; background-size: 100% auto; } header .indexTop .cart .box { position: absolute; background: url(images/icon/icon_car_w.png) no-repeat; width: 28px; height: 28px; } body { /*padding-top: 50px;*/ padding-bottom: 20px; } /* Set padding to keep content from hitting the edges */ .body-content { padding-left: 15px; padding-right: 15px; } /* Set width on the form input elements since they're 100% wide by default */ input, select, textarea { /*max-width: 280px;*/ } /* styles for validation helpers */ .field-validation-error { color: #b94a48; } .field-validation-valid { display: none; } input.input-validation-error { border: 1px solid #b94a48!important; } input[type="checkbox"].input-validation-error { border: 0 none; } .validation-summary-errors { color: #b94a48; } .validation-summary-valid { display: none; } .marginTop15 { margin-top: 15%; } @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 400ms; animation-duration: 400ms; -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.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .pulse { animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } } @-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 headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-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% { -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% { -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 { -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% { -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { -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 { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes fadeIn { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: none; transform: none; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 900ms; animation-duration: 900ms; animation-timing-function: cubic-bezier(0.04, 1.1, 0.88, 1); -webkit-animation-timing-function: cubic-bezier(0.04, 1.1, 0.88, 1); } @-webkit-keyframes fadeInA { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes fadeInA { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: none; transform: none; } } .fadeInA { -webkit-animation-name: fadeInA; animation-name: fadeInA; -webkit-animation-duration: 1500ms; animation-duration: 1500ms; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes fadeInB { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes fadeInB { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: none; transform: none; } } .fadeInB { -webkit-animation-name: fadeInB; animation-name: fadeInB; -webkit-animation-duration: 2000ms; animation-duration: 2000ms; animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); } @-webkit-keyframes fadeIn2 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn2 { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn2 { -webkit-animation-name: fadeIn2; animation-name: fadeIn2; } @-webkit-keyframes fadeInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { -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; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -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; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -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; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-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; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 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, -10%, 0); transform: translate3d(0, -10%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -10%, 0); transform: translate3d(0, -10%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-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; }