/* Minification failed. Returning unminified contents. (108,89): run-time error CSS1038: Expected hex color, found '#4f4f4' (536,118): run-time error CSS1038: Expected hex color, found '#fa8e0' */ @charset "utf-8"; #Baogia{width:100%;height:auto;margin:10px auto;box-shadow:0px 0px 10px 0px #c2c2c2;padding:10px 0px 0px 0px} #Head_Top{width:90%;height:auto;margin:5px auto} #Head_Top #Left_Head{width:40%;height:100%;margin:0px;float:left} #Head_Top #Left_Head img{max-height:340px; float:left; margin:5px 0px} #Head_Top #Right_Head{width:60%;height:auto;float:left;margin:0px} #Head_Top #Right_Head .hd1{font-size:26px;color:#656565;text-transform:uppercase;margin:5px;font-family:CondensedBold;text-align:right;display:block;font-weight:bold} #Head_Top #Right_Head .hd2{font-size:14px;color:#4f4f4f;margin:2px;display:block;text-align:right} #Head_Top #Right_Head .hd3{font-size:14px;color:#4f4f4f;margin:2px;display:block;text-align:right} #Head_Top #Right_Head .hd4{font-size:14px;color:#4f4f4f;margin:2px;display:block;text-align:right} #Content_Baogia{width:90%;height:auto;margin:0px auto} #Content_Baogia h1{font-size:23px;color:#000;text-transform:uppercase;text-align:center;margin:25px 5px 5px 5px} .line_bg{width:90%;height:1px;border-bottom:1px solid #d7d7d7;margin:10px auto} #Content_Baogia .date1{font-size:14px;text-align:right;display:block;margin:5px;color:#414141;font-style:italic} #Content_Baogia .kg{font-size:14px;display:block;margin:10px 5px;color:#414141;text-align:center;font-weight:bold} table{text-align:justify} table{border-right:none;border-bottom:none} table td{border-top:none;border-left:none} #Table{width:100%;height:auto;float:left;margin:10px 0px;border:1px solid #dcdcdc;border-right:none;border-bottom:none} #Table .Ord{width:5%;text-align:center} #Table .Name{width:41%;text-align:center} #Table .Code{width:12%;text-align:center} #Table .Price{width:15%;text-align:center} #Table .Wan{width:15%;text-align:center} #Table .Wans a{display:none} #Table .Quality{width:4%;text-align:center} #Table .SumPrice{width:10%;text-align:center} #Table .Image{width:12%;text-align:center} #Table .Head_tb{height:25px;text-transform:uppercase;font-size:17px} #Table td{text-indent:5px;border:1px solid #dadada;} #Table tr{line-height:normal !important} #Table .Names a{font-weight:bold;margin:3px 5px;color:#424242; padding:0px 5px; display:block; font-size:14px} #Table .Names a span{ color:#F00; -webkit-animation: dt 700ms infinite; -moz-animation: dt 700s infinite; -o-animation: dt 700ms infinite; animation: dt 700ms infinite; font-weight:normal; font-size:14px} #Table .Names .n2{font-weight:normal;margin:3px 5px;display:block;font-style:italic; font-size:14px} #Table .n3{color:#ff4f02; padding:3px 5px; display:inline-block; border:1px dashed #9d4017; margin:5px;font-size:14px; font-style:italic; font-weight:normal} #Table .n4{color:#3e3e3e; padding:3px 5px; display:inline-block; margin:5px;font-size:14px; font-style:italic; font-weight:normal} #Table .Codes{font-weight:bold;text-align:center} #Table .Codes a{margin:3px 5px;color:#424242; font-size:14px} #Table .Prices{text-align:center; padding:5px 0px; font-weight:bold; color:#F00; font-size:16px} #Table .Ords{text-align:center} #Table .Wans{text-align:center; font-size:14px} #Table .Qualitys{text-align:center} #Table .SumPrices{text-align:center} #Table .Images img{width:90%;margin:5px auto;display:block} .ghichu_bg{font-weight:bold;text-decoration:underline;margin:5px 5px 20px 5px;display:block;font-size:14px} .ghichu1{font-size:14px;font-style:italic;color:#525252;margin:5px 5px 5px 30px;display:block} .Printer{text-align:center;display:block;height:30px;color:#515151;line-height:30px;margin:10px 0px} .Printer span.icon{width:30px;height:30px;background:url(../iCon/iCon_Printer.png) no-repeat;display:inline-block} .Printer span{line-height:30px;display:inline-block} @charset "utf-8";@media screen and (max-width:768px){#Head_Top{width:97%;} #Content_Baogia{width:97%} #Head_Top #Left_Head{background-size:100%} .Printer{display:none} } @media screen and (max-width:488px){ #Head_Top{height:auto } #Table .Ord{width:5%;text-align:center; display:none} #Table .Name{width:71%;text-align:center} #Table .Code{width:19% !important;text-align:center; display:none} #Table .Wan{width:19%;text-align:center} #Table .Wans a{display:block} #Table .Wans img{max-width:100% !important; height:auto; float:left; margin:5px 0px} #Table .Price{width:10%;text-align:center} #Table .Quality{display:none} #Table .SumPrice{display:none} #Table .Image{width:12%;text-align:center;display:none} #Table .Head_tb{height:25px;text-transform:uppercase;font-weight:bold} #Table td{text-indent:5px} #Table tr{line-height:normal !important} #Table .Names a{font-weight:bold;margin:3px 5px;color:#424242} #Table .Names .n2{font-weight:normal;margin:3px 5px;display:block;font-style:italic} #Table .Codes{font-weight:bold;text-align:center; display:none} #Table .Codes a{margin:3px 5px;color:#424242} #Table .Prices{text-align:center; font-weight:bold} #Table .Ords{text-align:center;display:none} #Table .Qualitys{text-align:center;display:none} #Table .SumPrices{text-align:center;display:none} #Table .Images img{width:90%;margin:5px auto;display:block;display:none} #Content_Baogia h1{font-size:17px} .line_bg{display:none} #Head_Top #Left_Head{width:100%} #Head_Top #Left_Head img{float:none; margin:5px auto; display:block} #Head_Top #Right_Head{display:none} } @charset "utf-8";#News{width:100%;height:auto;float:left;margin:0px} #News h1{font-weight:normal;color:#464646;text-transform:uppercase;margin:5px 5px;font-size:16px} #ContentNews{width:100%;height:auto;margin:5px 0px} #ContentNews #LeftNews{width:80%;height:auto;float:left;margin:0px;border-right:1px solid #f7f4f4;text-align:justify} #ContentNews #LeftNews .TearNews{width:100%;height:auto;float:left;margin:5px 0px;border-bottom:1px dashed #e1e1e1;padding:5px 0px} #ContentNews #LeftNews .TearNews img{height:100px;width:100px;float:left;margin:2px 7px 2px 3px} #ContentNews #LeftNews .TearNews a.Name{font-size:14px;font-weight:bold;color:#3c3c3c;margin:2px 5px;display:block} #ContentNews #LeftNews .TearNews a.Name span{font-style:italic;color:#8c8c8c;font-weight:normal} #ContentNews #LeftNews .TearNews .Des{font-size:14px;color:#3c3c3c;margin:5px 3px;display:block} #RightNews{width:18%;height:auto;float:right;margin:0px} #RightNews #Content_Right{width:100%;height:auto;float:left;margin:0px} #Content_Righta{display:none;overflow:hidden} #RightNews .nVar_1{width:100%;height:auto;float:left;margin:0px} #RightNews .nVar_1 span{font-size:15px;text-align:center;text-transform:uppercase;color:#4f4f4;margin:2px 5px;display:block;line-height:20px;border-bottom:1px solid #1881bd;position:relative;padding-bottom:7px} #RightNews .nVar_1 span:before{background:#ff7200;bottom:0px;content:"";display:block;height:1px;left:0;margin:0 0 -1px;position:absolute;width:40px;} #RightNews .ListMenu{width:100%;margin:0px 0px 15px 0px;float:left} #RightNews .ListMenu a{margin:5px;color:#424242;display:block;font-size:15px;font-family:UTM_SwissCondensed} #ContentNews .Description{width:98%;height:auto;margin:10px auto 5px auto;font-size:14px;text-indent:15px;font-weight:bold;text-align:justify;line-height:20px} .Tintuclienquan{width:98%;height:auto;margin:7px auto 7px auto;font-size:14px;text-indent:15px;font-weight:bold;text-align:justify;background:#faf9f9;padding-top:5px;padding-bottom:5px} .Tintuclienquan h2{margin:0px; font-weight:normal} .Tintuclienquan a{font-weight:normal;font-size:14px;color:#999999;display:block;margin:2px 2px;font-style:italic} .ContentNew{width:98%;height:auto;margin:5px auto;font-size:14px;text-align:justify;line-height:20px} .ContentNew img{max-width:100%;height:auto !important;margin:7px 5px} .Author{width:98%;height:auto;float:left;margin:5px;} .Author span{font-style:italic;text-align:right;margin:5px;float:right} .ListNewsLienquan{width:98%;height:auto;float:left;margin:10px 0px} .name_ListNewsLienquan{font-size:14px;font-weight:bold;margin:5px 5px 15px 5px;text-transform:uppercase;display:block} .ListNewsLienquan li a{font-size:14px;margin:5px;color:#616161;display:block} .nVar_news{width:100%;height:auto;float:left;margin:5px 0px 15px 0px;border-bottom:1px dashed #ccc;padding-bottom:6px} .nVar_news .Cate{color:#989898;padding:5px 0px;padding-right:15px;vertical-align:baseline} .nVar_news .Cate span{width:14px;height:11px;background:url(../iCon/folder-icon.png) no-repeat;display:inline-block;margin-right:7px;opacity:0.5} .nVar_news .Cata{color:#989898;padding:5px 0px;padding-right:15px;vertical-align:baseline} .nVar_news .Cata span{width:13px;height:11px;background:url(../iCon/icon_calendar.png) no-repeat;display:inline-block;margin-right:7px;} .nVar_news .Account{color:#989898;padding:5px 0px;padding-right:15px;vertical-align:baseline} .nVar_news .Account span{width:14px;height:11px;background:url(../iCon/account.png) no-repeat;display:inline-block;margin-right:7px;opacity:0.6;margin-top:2px} .Tear_News .Cata{color:#989898;padding:5px 0px;padding-right:15px;vertical-align:baseline;font-size:10px} .Tear_News .Cata span{width:13px;height:11px;background:url(../iCon/icon_calendar.png) no-repeat;display:inline-block;margin-right:7px;} .Tear_News .Account{color:#989898;padding:5px 0px;padding-right:15px;vertical-align:baseline;font-size:10px} .Tear_News .Account span{width:14px;height:11px;background:url(../iCon/account.png) no-repeat;display:inline-block;margin-right:7px;opacity:0.6;margin-top:2px} #Box_MXH{width:100%;height:auto;float:left;margin:15px 0px} #Box_MXH1{width:198px !important;height:auto;float:left;margin:1px 0px;top:0px;display:none} #Box_News{width:100%;height:auto;float:left;margin:15px 0px} #Box_News h3{margin:0px; font-weight:normal} #Box_News a{font-size:14px;color:#424242;margin:6px 5px;display:block} #Box_News a::before{content:'■ ';color:#4587ff} .Tear_News{width:100%;height:auto;float:left;margin:5px 0px;border-bottom:1px dashed #e1e1e1;padding-bottom:10px} .Tear_News img{float:left;margin:3px 10px 3px 3px;width:100px;height:auto;max-height:100px} .Tear_News h2{margin:0px;font-weight:normal} .Tear_News .Name{font-size:14px;font-weight:bold;color:#424242;margin:5px 5px;display:block} .Tear_News .Date{font-weight:normal;color:#929292;font-style:italic;font-size:10px;display:block} .Tear_News .Des{font-size:14px;color:#606060;margin:10px 5px 4px 5px;display:block} .Agency_Info{width:99%; height:auto; margin:5px auto; border:1px solid #efefef; background:#ffffda; padding:10px 0px; border-radius:5px} .Agency_Info ul{width:100%; height:auto; float:left; margin:0px} .Agency_Info ul li{width:50%; float:left} .Agency_Info ul li .agen{font-size:14px; margin:2px 8px; display:inline-block } .Agency_Info ul li span span{font-weight:bold} .Agency_Info ul li span .icon{ width:14px; height:14px; float:left; margin:1px 5px; background:url(../iCon/icon_1.png); font-weight:bold} .Agency_Info img{max-width:95%; margin:5px auto; display:block} @charset "utf-8";@media screen and (max-width:768px){#ContentNews #LeftNews{width:98%;height:auto;float:left;margin:0px 5px} #RightNews{display:none} } @media screen and (max-width:488px){#ContentNews #LeftNews .TearNews img{height:60px;width:60px} #News h1{font-size:13px} #ContentNews .Description{font-size:14px} .ContentNew{font-size:14px} } @charset "utf-8";body{font:12px arial;margin:0;padding:0;} ul,li{padding:0px;margin:0px;outline:0px;vertical-align:baseline;border:0px} ul,li{list-style:none} a{text-decoration:none} a:hover{color:#fa8e00 !important} img{border:none} .Clear{clear:both} @font-face{font-family:pro-light;src:url(../Font/Proxima-Light.otf) format("OpenType");} @font-face{font-family:UTMPierre;src:url(../Font/UTMPierre.ttf)} @font-face{font-family:UTMCafeta;src:url(../Font/UTMCafeta.ttf)} @font-face{font-family:UTMSwiss;src:url(../Font/UTMSwiss.ttf)} @font-face{font-family:UTMSwissCondensed;src:url(../Font/UTMSwissCondensed.ttf)} @font-face{font-family:UTM_SwissCondensed;src:url(../Font/UTMSwissCondensed.ttf);} @font-face{font-family:UTMPenumbra;src:url(../Font/UTMPenumbra.ttf)} @font-face{font-family:UVNBaiSau;src:url(../Font/UVNBaiSau.TTF)} @font-face{font-family:SwissCondensedBold;src:url(../Font/UTMSwissCondensedBold.ttf);} @font-face{font-family:UTMSwissCondensedBold;src:url(../Font/UTMSwissCondensedBold.ttf)} @font-face{font-family:Neo;src:url(../Font/UTMNeoSanIntel.ttf)} @font-face{font-family:UTMNokiaStandard;src:url(../Font/UTMNokiaStandard.ttf)} .line{width:1100px;height:2px;margin:0px auto;background:url(../iCon/line.png) repeat-x} .line1{width:100%;height:1px;background:#0286ce;float:left;margin:5px 0px} header{width:100%;height:auto;float:left;margin:0;padding:0;background:url(../iCon/bg_registration.png)} article{width:100%;height:auto;float:left;padding:0;margin:0} #Banner{width:1100px;height:80px;margin:0px auto;} #Banner #LeftBanner{width:35%;height:100%;float:left;margin:0px} #Banner #LeftBanner #Logo{width:22%;height:100%;float:left;margin:0px;display:table;table-layout:fixed} #Banner #LeftBanner #Logo a{display:table-cell;vertical-align:middle} #Banner #LeftBanner #Logo a img{max-height:74px;margin:0px} #Banner #LeftBanner h2{font-family:UTMNokiaStandard;font-size:20px;font-weight:normal;line-height:80px;margin:auto 5px;display:block;text-transform:uppercase;color:#fff} #Banner #LeftBanner h2 span{color:#fd7800;font-size:30px} #Banner #RightBanner{height:100%;float:right;margin:0px} #Banner #RightBanner .ul1{width:100%;height:auto;margin:0px} #Banner #RightBanner .ul1 .li1{float:left;} #Banner #RightBanner .ul1 .li1:hover{border-bottom:2px solid #F00} #Banner #RightBanner .ul1 .li1 a{font-size:16px;color:#fff;margin:auto 10px;text-transform:uppercase;font-family:UTMSwissCondensed;line-height:80px} #Banner #RightBanner .ul1 .li1 .ul2{width:170px;height:auto;float:left;position:absolute;border:1px solid #0b77b4;display:none;background:#279cdd;z-index:1000;border-top:2px solid #F00} #Banner #RightBanner .ul1 .li1:hover .ul2{display:block} #Banner #RightBanner .ul1 .li1 .ul2 .li2:first-child{margin-top:10px} #Banner #RightBanner .ul1 .li1 .ul2 .li2:hover{background:#2392cf} #Banner #RightBanner .ul1 .li1 .ul2 .li2 .ul3{width:170px;height:auto;float:left;margin:-29px 0px 0px 170px;position:absolute;background:#2392cf;display:none} #Banner #RightBanner .ul1 .li1 .ul2 .li2:hover .ul3{display:block} #Banner #RightBanner .ul1 .li1 .ul2 .li2 a{text-transform:none;line-height:30px;margin:auto 10px;display:block} #Header{width:100%;height:auto;margin:0px 0px;float:left;background:url(../iCon/bg_registration.png)} #Header #ContentHeader{width:1100px;height:100%;margin:0px auto;position:relative} #Header #ContentHeader .Notes{width:700px;height:auto;margin:0px auto;position:relative;background:url(../iCon/line-width.png) repeat-x center center scroll transparent} .content_Notes{width:460px;height:auto;margin:0px auto;background:url(../iCon/bg_registration.png) repeat-x} #Header #ContentHeader .Notes span{font-size:20px;color:#8ed6ff;text-align:center;text-transform:uppercase;margin:2px auto;font-family:UTMSwissCondensed;display:block} #Header #ContentHeader .sukhacbiet{font-size:23px;color:#c2e9ff;margin:25px auto 5px auto;text-align:center;display:block;font-family:UTMSwissCondensed} #Header #ContentHeader h1{color:#FFF;text-align:center;margin:10px 5px 10px 5px;display:block;font-family:UTMNokiaStandard;font-weight:normal;font-size:35px;font-weight:normal} #Header #ContentHeader h2{color:#FFF;text-align:center;margin:10px 5px 10px 5px;display:block;font-family:UTMNokiaStandard;font-weight:normal;font-size:35px;font-weight:normal} .h11{font-size:5px; color:#FFF; font-weight:normal; margin:0px} #Header #ContentHeader img{width:100%;height:100%;float:left;margin:0px} #Info{width:100%;height:auto;margin:0px auto;background:url(../iCon/bg_app_store.png) repeat left center scroll transparent} #Info #Info_Content{margin:0px auto;height:auto;width:1100px;padding:5px} #Info #Info_Content h2{font-weight:normal;font-size:26px;color:#fff;margin:5px auto;text-align:center;display:block;font-family:UTMNokiaStandard} #Info #Info_Content span.gp{font-size:14px;text-align:center;color:#fff;font-family:UTMSwissCondensed;display:block;margin:1px auto} #Info #Info_Content p{color:#d8ff00;text-transform:uppercase;text-align:center;font-family:UTMSwissCondensed;font-size:15px;margin:4px 5px} #Info #Info_Content p span{color:#fd7800} .Tear_One{width:100%;height:auto;margin:10px 0px;float:left;background:url(../iCon/bg_app_store.png) repeat left center scroll transparent;padding:10px 0px} .Why{width:1100px;height:auto;margin:0px auto} .Why .Left{width:50%;height:auto;float:left;margin:0} .Why h2{font-size:35px;color:#FFF;margin:5px 5px 30px 5px;text-align:center} .Why .Left .Tear_1s{width:100%;height:70px;float:left;margin:2px 0px 25px 5px} .Why .Left .Tear_1s .Left_Tear1{width:70px;height:70px;float:left;margin:0px;background:url(../iCon/nuoc-tinh-khiet.png) no-repeat left center scroll transparent;background-size:100%} .Why .Left .Tear_1s .Right_Tear1{width:70%;height:100%;float:left;margin:0px} .Why .Left .Tear_1s .Right_Tear1 .name1{font-size:26px;color:#fff600;text-transform:uppercase;margin:1px 4px 2px 15px;display:block} .Why .Left .Tear_1s .Right_Tear1 .name2{font-size:14px;color:#FFF;margin:5px 5px 2px 15px;display:block} .Why .Right{width:50%;height:auto;float:left;margin:0} .Why .Left .Tear_1s .Left_Tear2{width:70px;height:70px;float:left;margin:0px;background:url(../iCon/do-ben-cao.png) no-repeat left center scroll transparent;background-size:100%} .Why .Left .Tear_1s .Left_Tear3{width:70px;height:70px;float:left;margin:0px;background:url(../iCon/suckhoe.png) no-repeat left center scroll transparent;background-size:100%} .Why .Right img{width:90%;height:270px;margin:5px auto;display:block} .Why .Note{width:90%;height:auto;margin:10px auto;border-radius:5px;border:1px solid #484b4f} .Why .Note .Content_Note{width:100%;height:100%;border:1px solid #7c828f} .Why .Note .Content_Note .Left_Content_Note{width:52px;height:65px;margin:10px;float:left;background:url(../iCon/icon_Notes.png) no-repeat left center scroll transparent} .Right_Content_Note{width:88%;float:left;margin:5px;color:#c3c3c3;padding:10px;text-align:justify;font-size:13px} .xemthem{width:170px;height:33px;background:#858b96;color:#FFF;text-transform:uppercase;display:block;text-align:center;line-height:33px;margin:5px auto;font-size:17px} .Content_Func .Note{width:78%;height:auto;border:1px dashed #acacac;border-radius:5px;margin:5px auto;padding:5px;line-height:15px} .Content_Func .Note span{color:#dedede;font-size:12px;margin:5px;text-align:center;display:block} .Content_Func .xemthem{width:330px} #when{width:1100px;height:auto;margin:5px auto} #when #Left_when{width:45%;height:auto;border:1px solid #d0d0d1;border-radius:5px;margin:15px 5px;float:left} #when #Left_when img{width:auto;height:auto;margin:5px auto;display:block} #Right_when{width:53%;height:auto;float:right;margin:5px} #Right_when h3{font-size:35px;margin:1px 8px;color:#545d6c} #Right_when .Des{font-size:13px;margin:5px 10px;color:#323232;text-align:justify} #Right_when #Content_When{width:99%;height:auto;float:left;margin:10px auto 5px auto;border:1px dashed #c4c4c4;border-left:none;border-right:none} .Tear_when{width:48%;height:auto;float:left;margin:6px 5px} .Tear_when .Left{width:57%;height:auto;float:left;margin:0px} .Tear_when .Left .when1{font-family:UTMSwissCondensed;font-size:17px;color:#6b6666;margin:1px 3px;display:block;text-align:right} .Tear_when .Left .when2{font-size:20px;text-transform:uppercase;color:#ff5d5d;font-family:UTMSwissCondensedBold;margin:1px 3px;text-align:right;display:block;line-height:22px} .Tear_when .Center{width:13%;height:auto;float:left;margin:0px;} .Tear_when .Center span{font-size:50px;font-family:UTMSwissCondensed;margin:0px 3px;text-align:center;color:#b1b1b1;line-height:45px;display:block} .Tear_when .Right{width:30%;height:auto;float:left;margin:0px} .Tear_when .Right .Top_Right{width:100%;height:auto;float:left;margin:0px} .Tear_when .Right .Top_Right p{margin:10px 5px 2px 5px;font-size:15px;text-align:center} .Tear_when .Right .Top_Right p span{border:1px solid #a1a1a1;padding:1px 6px;border-radius:4px;color:#ff5d5d;font-weight:bold} .Tear_when .Right .Buttom_Right{width:100%;height:auto;float:left;margin:0px;} .Tear_when .Right .Buttom_Right span{font-size:16px;text-transform:uppercase;display:block;text-align:center;margin:2px auto;color:#595959;} .Trademark{width:1100px;height:auto;margin:10px auto} .Trademark h3{font-size:22px;margin:5px auto;text-align:center;color:#4e4e4e;font-weight:normal;text-transform:uppercase} .Trademark .content_trademark{width:100%;height:auto;float:left;margin:0px;} .Trademark .content_trademark .Tear_trademark{width:18.9%;height:80px;float:left;border:1px solid #d0d0d0;margin:5px;display:table;table-layout:fixed} .Trademark .content_trademark .Tear_trademark:hover{border-radius:5px;opacity:0.5;border:1px solid #b3b3b3} .Trademark .content_trademark .Tear_trademark a{display:table-cell;vertical-align:middle;text-align:center} .Trademark .content_trademark .Tear_trademark a img{max-width:90%;max-height:78px} .Func{width:100%;height:auto;float:left;margin:5px 0px;background:url(../iCon/bg_app_store.png)} .Func .Content_Func{width:1100px;height:auto;margin:0px auto} .Func .Content_Func .nVar{width:100%;height:30px;float:left;margin:10px 0px;background:url(../iCon/line-wile.png) repeat-x left center scroll transparent;position:relative} .Func .Content_Func .nVar .Name{width:auto;height:100%;float:left;background:url(../iCon/bg_app_store.png) repeat-x left center scroll transparent} .Func .Content_Func .nVar .Name span{color:#FFF;line-height:30px;margin:auto 10px;font-size:22px;text-transform:uppercase;display:block} .Func .Content_Func .List_Func{width:100%;height:auto;float:left;margin:10px 0px} .Func .Content_Func .List_Func .Tear_Func{border:1px solid #484b4f;width:18.9%;height:100%;float:left;margin:5px;border-radius:5px;overflow:hidden} .Func .Content_Func .List_Func .Tear_Func:hover{opacity:0.5} .Func .Content_Func .List_Func .Tear_Func .Tear_Func1{border:1px solid #7c828f;width:100%;height:100%;float:left} .Tear_Func1 .Name{font-size:15px;color:#FFF;font-family:UTMSwissCondensed;text-align:center;display:block;text-transform:uppercase;margin:5px 5px 3px 5px} .Tear_Func1 .Name1{font-size:15px;color:#fffb89;text-align:center;display:block;text-transform:uppercase;margin:1px 5px 5px 5px} .Tear_Func1 .Conten_Tear_Funct{width:100%;height:145px;margin:0px 0px 10px 0px;float:left;background:url(../iCon/bg4.png);display:table;table-layout:fixed} .Tear_Func1 .Conten_Tear_Funct a{text-align:center;display:table-cell;vertical-align:middle} .Tear_Func1 .Conten_Tear_Funct a img{max-width:98%;margin:0px auto;max-height:100%} .Tear_Func1 .fuc{color:#b8b9ba;margin:5px;display:block;text-align:justify;font-style:italic;font-size:12px} .compare{width:100%;height:100%;float:left;margin:10px 0px;background:url(../iCon/bg_customer_comments.png) no-repeat} .content_compare{width:1100px;height:auto;margin:5px auto} .content_compare p{text-align:center;margin:5px auto} .content_compare .iconcamket{width:202px;height:90px;;background:url(../iCon/camket.png) no-repeat center top scroll transparent;margin:5px auto;display:block;border:none;text-align:center} .content_compare h3{font-size:35px;color:#FFF;margin:5px;font-family:UTMPenumbra;text-align:center;margin:5px auto 5px auto;font-weight:normal} .content_compare .chinhang{font-family:UVNBaiSau;color:#f8e082;text-transform:uppercase;font-size:35px;display:block;margin:2px 5px 8px 5px;text-align:center} .content_compare a{width:536px;height:52px;background:url(../iCon/kiemtra.png) no-repeat;display:block;text-align:center;margin:5px auto 15px auto} .Tear_One .Left .Content{width:100%;height:auto;float:left;margin:0px;text-align:justify;line-height:20px} .Tear_One .Left .Content p.Des{font-size:12px;color:#5a5d5d;margin:5px 2px;font-style:italic} .Tear_One .Des1{width:100%;height:auto;float:left;margin:0px} .Tear_One .Des1 .sp1{color:#ff3c00;display:block;margin:4px;line-height:normal;float:left} .Tear_One .Des1 .sp1 .iCon{color:#e43702;font-size:14px} .Tear_One .Des1 .sp1 .sp2{color:#00a8ff;font-style:italic} .Tear_True{width:100%;height:auto;margin:10px 0px;float:left;padding:10px 0px} .Content_Tear_True{width:1100px;height:auto;margin:0px auto} .Content_Tear_True .Left{width:40%;height:auto;float:left;margin:0} .Content_Tear_True .Left img{max-width:90%;margin:5px auto;display:block;height:225px} .Content_Tear_True .Right{width:60%;height:auto;float:left;margin:0} .Content_Tear_True .Right .Content{width:100%;height:auto;float:left;margin:0px;line-height:20px;text-align:justify} .Content_Tear_True .Right .Content p{font-size:12px;color:#5a5d5d;margin:5px 2px;font-style:italic} .Content_Tear_True .Right .Des1{width:100%;height:auto;margin:5px 0px;border:1px dashed #c7c7c7;border-radius:5px;padding:5px 0px;float:left} .Content_Tear_True .Right .Des1 p{width:46%;margin:1px 7px;float:left;font-style:normal;font-family:UTMSwissCondensed;font-size:15px} .Content_Tear_True .Right .Des1 p .icon{color:#ff5d25 !important;font-size:14px;margin:auto 10px auto 5px;float:left} .Content_Tear_True .Right .Des1 p .sp3{color:#ff3c00;font-weight:normal;font-size:15px} .Tear_One .Left .Content p.Des span{color:#F00;font-weight:bold} .Tear_One .Des3{width:90%;height:auto;float:left;margin:5px;padding:10px 0px;border:1px dashed #FFF;border-radius:5px;background:#FFF} .Tear_One .Des3 p{width:46%;margin:1px 7px;float:left;font-style:normal !important;font-family:UTMSwissCondensed;font-size:15px} .Tear_One .Des3 p .icon{color:#ff5d25 !important;font-size:14px;margin:auto 10px auto 5px;float:left} .Tear_One .Des3 p .sp3{color:#ff3c00;font-size:15px} .Content_Tear_True .Right .Des1 .Tr{width:46%;height:auto;float:left;margin:3px 10px} .Left_Tr{width:10%;height:30px;background:#919191;border-radius:50%;float:left;text-align:center;color:#FFF;font-size:16px;line-height:30px} .Right_Tr{width:90%;height:100%;float:left;margin:0px;line-height:normal !important} .Right_Tr .span1{font-family:UTMSwissCondensed;font-size:15px;margin:0px 5px;display:block} .Right_Tr .span1 span{color:#ff3c00;font-size:16px} .Right_Tr .span2{font-size:12px;color:#5a5a5a;font-style:italic;margin:2px 5px;display:block} .iConlen{float:left;width:15px;height:15px;background:url(../iCon/bg-ufc.png) no-repeat;background-size:100%;margin:1px 7px 1px 5px} .Succes{width:100%;height:auto;float:left;margin:10px 0px 0px 0px} .Succes .Content_Succes{width:1100px;height:auto;margin:0px auto} .Succes .Content_Succes .title{color:#0b0b0b;margin:15px auto 5px auto;text-align:center;font-size:39px;font-family:UTMNokiaStandard;display:block;text-transform:uppercase} .Succes .Content_Succes .slogan{color:#ff6600;font-family:UTMSwissCondensed;margin:5px auto;text-align:center;font-size:20px;text-transform:uppercase;display:block} .Succes .Content_Succes p{color:#4f4f4f;text-align:center;font-size:15px;;font-family:UTMSwissCondensed;display:block;margin:5px 5px 15px 5px} .Support{width:100%;height:auto;float:left;margin:5px 0px} .Support .Content_Support{width:1100px;height:auto;margin:3px auto} .Support .Content_Support .Tear_Support{width:142px;height:auto;float:left;margin:3px 40px} .Support .Content_Support .Tear_Support:first-child{margin-left:0px} .Support .Content_Support .Tear_Support .Image{width:100%;height:142px;float:left;border-radius:50%;margin-bottom:10px;background-size:100% !important;} .Support .Content_Support .Tear_Support .Name{font-size:12px;color:#414141;margin:2px 3px;text-align:center;display:block;text-transform:uppercase} .Support .Content_Support .Tear_Support .Fun{font-size:12px;color:#636161;margin:2px 4px;text-align:center;display:block} .Support .nVars{width:1100px;height:auto;margin:0px auto} .Support .nVars .ht1{font-size:30px;text-align:center;margin:5px;display:block;color:#4d4d4d} .Support .nVars .ht2{font-size:20px;margin:2px 5px;display:block;text-align:center;color:#6f6f6f} .Support .Content_Support .Tear_Support a{text-align:center;display:block;margin:2px 5px} .Listkhacbiet{width:800px;height:auto;margin:7px auto} .Tear_kb{width:29%;height:auto;float:left;margin:9px 15px} .Tear_kb .top{width:112px;height:113px;margin:0px auto} .Tear_kb .t1{color:#fff;font-family:UTMSwissCondensed;margin:2px 5px;text-align:center;display:block;font-size:17px} .Box{;height:auto;background:url(../iCon/bachground_kkb.png) repeat left center scroll transparent;border-radius:5px;margin:3px auto;background-size:100%} .Box span{font-family:UTMSwissCondensedBold;color:#ff4200;padding:4px;text-align:center;display:block;text-transform:uppercase;font-size:17px;opacity:1} .Tear_kb .t2{color:#62c7ff;font-family:UTMSwissCondensed;margin:1px 5px;text-align:center;display:block;font-size:13px} footer{width:100%;height:auto;float:left;margin:0px 0px 0px 0px; } footer #Footer{width:100%;; padding-bottom:20px;height:auto;float:left;margin:0px 0px 0px 0px;padding:0px;background:url(../iCon/footer-bg.png) no-repeat bottom center scroll #333940} #Content_footer{width:1100px;height:auto;margin:5px auto} #Content_footer #Top{width:100%;height:auto;float:left;margin:0px} #Content_footer #Top .ft1{color:#d0d0d0;margin:10px 5px 1px 5px;text-align:center;display:block;font-size:25px;} #Content_footer #Top .ft2{font-family:UTMEssendineCapsBold;color:#FFF;font-size:30px;margin:2px 5px;text-align:center;display:block} .line2{width:100%;height:2px;background:url(../iCon/line2.png) repeat-x;float:left;margin:10px 0px} #Content_footer #buttom{width:100%;height:auto;float:left;margin:2px 0px} #Content_footer #buttom #Left_Content_footer{width:50%;height:auto;float:left;margin:0px} #Content_footer #buttom #Left_Content_footer .org{font-size:17px;margin:2px 5px;display:block;font-weight:normal;font-family:UTMSwissCondensedBold;color:#a3a3a4;font-style:normal} #Content_footer #buttom #Left_Content_footer span{font-size:12px;margin:2px 5px;display:block;color:#929294} #Content_footer #buttom #Left_Content_footer span .icon_Localtion{width:21px;height:17px;float:left;background:url(../iCon/icon_location.png) no-repeat} #Content_footer #Right_Content_footer{width:50%;height:auto;float:left;margin:0px} #Authorship{width:100%;height:22px;float:left;margin:5px 0px} #Authorship img{width:125px;height:21px;float:left;margin:0px 5px} .fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style], .fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style]{width:100% !important;} .fb-like{width:118px;height:15px;float:left;margin:7px 6px 7px 0px} .tweet{width:70px;height:15px;float:left;margin:7px 5px} #Services{width:1100px;height:auto;margin:20px auto 10px auto} .Tear_Chinhhang{width:30%;height:66px;float:left;margin:5px 5px 5px 0px;background:url(../iCon/ft_chinhhang.png) no-repeat left center scroll transparent;background-position:5px} .Tear_Chinhhang .Name{font-size:17px;color:#FFFFFF;text-transform:uppercase;font-family:SwissCondensedBold;margin:2px 5px 3px 65px;display:block} .Tear_Chinhhang .Des{font-style:italic;font-size:12px;color:#bfbfbf;margin:3px 5px 3px 65px;display:block} .Tear_Dichvu{width:30%;height:66px;float:left;margin:5px 50px;background:url(../iCon/ft-dichvu.png) no-repeat left center scroll transparent;background-position:5px} .Tear_Dichvu .Name{font-size:17px;color:#FFFFFF;text-transform:uppercase;font-family:SwissCondensedBold;margin:2px 5px 3px 65px;display:block} .Tear_Dichvu .Des{font-style:italic;font-size:12px;color:#bfbfbf;margin:3px 5px 3px 65px;display:block} .Tear_Muahang{width:30%;height:66px;float:right;margin:5px 0px 5px 5px;background:url(../iCon/ft-muahang.png) no-repeat left center scroll transparent;background-position:5px} .Tear_Muahang .Name{font-size:17px;color:#FFFFFF;text-transform:uppercase;font-family:SwissCondensedBold;margin:2px 5px 3px 65px;display:block} .Tear_Muahang .Des{font-style:italic;font-size:12px;color:#bfbfbf;margin:3px 5px 3px 65px;display:block} .Line_ft{margin:5px auto;height:1px;width:1100px;background:#f2f1f1} #List_Info{width:1100px;height:auto;margin:5px auto} .Tear_Info{width:23%;height:auto;float:left;margin:5px 5px} .Tear_Info .Name{font-size:16px;margin:5px 0px 0px 0px;text-transform:uppercase;display:block;font-family:UTM_SwissCondensed;color:#FFFFFF} .line_Bo{width:100%;height:5px;background:url(../iCon/bottoms_list.gif) no-repeat left center scroll transparent;float:left;margin:5px 0px 2px 0px} .Tear_Info a{font-size:12px;color:#bababa;margin:4px 2px;display:block} .Tear_Info_p{width:24%;height:auto;float:left;margin:5px 5px} .Tear_Info_p .Name{font-size:16px;margin:5px 0px 0px 4px;text-transform:uppercase;display:block;font-family:UTM_SwissCondensed;color:#FFFFFF} .Tear_Info_p nav{width:100%;height:auto;float:left;margin:0px} .Tear_Info_p nav a{font-size:12px;color:#bababa;margin:4px 2px;display:block} .Tear_Info_n{width:25%;height:auto;float:right;margin:5px 5px} .Tear_Info_n .Name{font-size:16px;margin:5px 0px 0px 0px;text-transform:uppercase;display:block;font-family:UTM_SwissCondensed;color:#FFFFFF} .Tear_Info_n nav a{font-size:12px;color:#bababa;margin:4px 2px;display:block} #Res{width:100%;height:auto;float:left;margin:0px 0px;background:url(../iCon/bg.gif);position:relative} #Res #icon{width:50px;height:50px;background:url(../iCon/register.png);background-size:100%;position:absolute;top:0px;float:left;margin:12px} #Content_Res{width:1100px;height:100%;margin:15px auto;background:url(../iCon/bg.gif)} #Content_Res #Left_Res{width:55%;height:auto;float:left;margin:0px} #Content_Res #Left_Res #nVar_Res{width:100%;height:auto;float:left;margin:10px 0px;background:url(../iCon/bg-res.png) repeat-y left center scroll transparent} #Content_Res #Left_Res #nVar_Res span{font-size:25px;color:#6d1010;margin:5px 10px 0px 20px;display:block;text-transform:uppercase} #Content_Res #Left_Res #nVar_Res h3{font-size:25px;color:#a24609;margin:0px 10px 5px 20px;display:block;text-transform:uppercase;font-family:UTMPenumbra;line-height:30px} #Content_Res .Info_Res{width:100%;height:auto;float:left;margin:5px 0px} #Content_Res .Info_Res .Gioithieu{font-size:12px;font-style:italic;color:#545454;margin:15px 10px 5px 10px;text-align:center;display:block} .Info_Res .Loiich{font-size:27px;font-weight:bold;color:#920404;margin:15px 5px 5px 5px;text-align:center;display:block} #Content_Res .Line{width:60%;height:1px;border-bottom:1px dashed #333333;text-align:center;display:block;margin:5px auto 25px auto} #Content_Res .Lines{width:60%;height:1px;border-bottom:1px solid #c6c6c6;text-align:center;display:block;margin:5px auto 25px auto} .Info_Res .Thoigian{width:90%;height:auto;margin:10px auto 5px auto;float:left} .Info_Res .Thoigian .Left_Thoigian{width:50px;height:50px;float:left;margin:0px;background:url(../iCon/icon-thoigian.png) no-repeat} .Info_Res .Thoigian .Right_Thoigian{width:auto;height:100%;float:left;margin:0px} .Info_Res .Thoigian .Right_Thoigian .sp1{font-size:20px;text-transform:uppercase;color:#7c7502;display:block;margin:2px 10px 0px 10px} .Info_Res .Thoigian .Right_Thoigian .sp2{font-size:14px;color:#545454;margin:0px 10px 5px 10px;display:block} .Info_Res .Tietkiem{width:90%;height:auto;margin:10px auto 5px auto;float:left} .Info_Res .Tietkiem .Left_Tietkiem{width:50px;height:50px;float:left;margin:0px;background:url(../iCon/icon-tienbac.png) no-repeat} .Info_Res .Tietkiem .Right_Tietkiem{width:auto;height:100%;float:left;margin:0px} .Info_Res .Tietkiem .Right_Tietkiem .sp1{font-size:20px;text-transform:uppercase;color:#7c7502;display:block;margin:2px 10px 0px 10px} .Info_Res .Tietkiem .Right_Tietkiem .sp2{font-size:14px;color:#545454;margin:0px 10px 5px 10px;display:block} .Info_Res .Tietkiem .Right_Tietkiem .Left1{height:auto;float:left;margin:0px 0px} .Info_Res .Tietkiem .Right_Tietkiem .Right1{height:auto;float:left;margin:0px 0px} .Info_Res .Tietkiem .Right_Tietkiem .Right1 .sp3{font-size:45px;color:#860000;font-family:UTM_SwissCondensed;margin:0px 0px;float:left;line-height:37px} .Info_Res .Tietkiem .Right_Tietkiem .Right1 .sp4{font-size:14px;color:#860000;margin:0px 10px 5px 10px;line-height:45px} .Info_Res .Tuvan{width:90%;height:auto;margin:10px auto 5px auto;float:left} .Info_Res .Tuvan .Left_Tuvan{width:50px;height:50px;float:left;margin:0px;background:url(../iCon/icon_tuvan.png) no-repeat} .Info_Res .Tuvan .Right_Tuvan{width:auto;height:100%;float:left;margin:0px} .Info_Res .Tuvan .Right_Tuvan .sp1{font-size:20px;text-transform:uppercase;color:#7c7502;display:block;margin:2px 10px 0px 10px} .Info_Res .Tuvan .Right_Tuvan .sp2{font-size:14px;color:#545454;margin:0px 10px 5px 10px;display:block} .Info_Res .dkn{font-size:15px;color:#ff0000;margin:15px 0px 15px 0px;display:block;text-align:center} #Content_Res #Right_Res{width:40%;height:auto;float:right;margin:0px 0px;background:#FFF;position:relative} .Nameform{color:#545454;text-align:center;margin:10px 5px 5px 5px;text-align:center;text-transform:uppercase;font-size:20px;font-weight:bold;display:block} #Content_Right_Res{width:97%;height:auto;margin:6px auto;border:1px solid #d8d8d8;border-radius:5px;background:url(../iCon/paper-texture-9.jpg)} #Content_Res #Right_Res .ghichu{text-align:center;display:block;color:#545454;margin:5px auto;display:block;font-style:italic} #Content_Res #Right_Res .rows{height:auto;float:left;margin:3px 0px;float:left;width:100%} #Content_Res #Right_Res .rows .Left_Row{width:25%;height:100%;float:left;margin:0px} #Content_Res #Right_Res .rows .Left_Row span{font-size:13px;color:#545454;text-align:right;display:block;line-height:25px;margin:auto 10px} #Content_Res #Right_Res .rows .Left_Row span:after{content:' (*)';color:#ffab6d} #Content_Res #Right_Res .rows .Right_Row{width:75%;height:100%;float:left;margin:0px;} #Content_Res #Right_Res .rows .Right_Row input{height:16px;color:#dd0000;text-transform:uppercase;text-indent:15px;margin:0px 5px;float:left;width:80%;background:none;border:none;border-bottom:1px dashed #b0b0b0;font-size:12px} #Content_Res #Right_Res .rows .Right_Row .txtAddress{height:55px;text-indent:15px;text-transform:uppercase;border-radius:5px;margin:0px 5px;float:left;width:80%;background:none;border:none;border:1px dashed #b0b0b0;font-size:12px;color:#dd0000} #Content_Res #Right_Res .rows2{width:90%;height:auto;margin:10px auto 3px auto;border-radius:5px;} #Content_Res #Right_Res .rows2 .Left_Row2{width:50%;height:auto;float:left;margin:0px} #Content_Res #Right_Res .rows2 span{font-size:12px;text-align:center;color:#545454;display:block;margin:5px} #Content_Res #Right_Res .rows2 input{height:20px;border-radius:5px;margin:0px auto 10px auto;width:80%;background:none;border:none;border-bottom:1px dashed #b0b0b0;font-size:12px;display:block;text-align:center;color:#dd0000;text-indent:15px} #Content_Res #Right_Res .rows2 .Right_Row2{width:50%;height:auto;float:left;margin:0px} .rows3{width:100%;height:auto;float:left;margin:5px 0px;float:left} .rows3 span.inf{font-size:14px;text-align:center;display:block;margin:5px;color:#545454} .rows3 .loi{width:auto;height:auto;margin:3px;float:left;line-height:15px} .rows3 .loi input{float:left;border-radius:2px} .rows3 .loi span{line-height:15px;font-size:12px;float:left;margin:2px 4px;color:#545454} #Content_Res button{width:80px;height:25px;background:none;color:#545454;text-align:center;margin:10px auto;display:block;border:none;border:1px solid #d1d1d1} #List_if{width:100%;height:auto;float:left;margin:30px 0px 10px 0px} .Tear_if{width:22.9%;height:auto;float:left;margin:0px;position:relative;min-height:1px;padding-right:15px;padding-left:15px;} .Tear_if:first-child{padding-left:0px} .Tear_if:last-child{padding-right:0px;float:right} .Tear_if h4{background:#3F454C;display:block;line-height:30px;margin:0px;font-weight:bold;border-radius:3px;font-weight:normal;} .Tear_if h4 span{font-family:UTM_SwissCondensed;text-transform:uppercase;font-size:14px;color:#FFF;padding:10px} .Tear_if ul{padding:10px 0px 0px;list-style:outside none none;margin-left:10px;border-left:1px solid #555C62;line-height:24px; float:left} .Tear_if ul li a{padding-left:10px;color:#BCC3CC;} .Tear_if ul li h3{font-size:12px; margin:0px; font-weight:normal; float:left} .Tear_if ul li h2 {font-size:12px; margin:0px; font-weight:normal; float:left} .Tear_if ul li{position:relative} .Tear_if ul li:before{content:"-";color:#555c62; position:absolute; left:0px; top:5px} #Info_Company{width:100%;height:auto;float:left;margin:50px 0px 10px 0px} #Info_Company #Logo{width:8%;height:auto;float:left;margin:0px;} #Info_Company #Logo img{width:60px;height:60px;float:left;margin:0px} #Info_Com{width:60%;height:auto;float:left;margin:0px} #Info_Com .org{display:block;text-transform:uppercase;color:#FFF;font-size:12px;padding-bottom:4px;margin-bottom:0px;font-weight:bold;font-style:normal;font-family:sans-serif} #Info_Com .if{display:block;margin:0px;font-size:11px;color:#BCC3CC;font-style:normal;font-family:Arial;} #Info_Mxh{width:25%;height:auto;float:right;margin:0px} #Info_Mxh span.kn{display:block;text-transform:uppercase;color:#FFF;font-size:12px;padding-bottom:4px;margin-bottom:0px;font-weight:bold;font-style:normal;font-family:sans-serif} #Info_Mxh #slution{width:100%;height:auto;float:left;margin:0px;text-align:left} #Info_Mxh #slution a{line-height:30px;margin:0px 5px;text-align:left} #Info_Mxh #slution .facebook{width:30px;height:30px;float:left;background:url(../iCon/icon_face.png) no-repeat;opacity:0.7} #Info_Mxh #slution .google{width:30px;height:30px;float:left;background:url(../iCon/icon_google.png) no-repeat;opacity:0.7} #Info_Mxh #slution .youtube{width:30px;height:30px;float:left;background:url(../iCon/icon_youtube.png) no-repeat;opacity:0.7} #Info_Mxh #slution .facebook:hover{opacity:1} #Info_Mxh#slution .google:hover{opacity:1} #Info_Mxh#slution .youtube:hover{opacity:1} #Coppyright{background:#1A1F24 none repeat scroll 0% 0%;height:30px;width:100%;float:left;bottom:0px;position:fixed} #Info_Company .line2{margin-top:3px} #content_Coppyright{width:1100px;height:100%;margin:0px auto} #content_Coppyright .Left_Coppyright{width:auto;float:left} #content_Coppyright span{color:#BCC3CC;display:block;float:left;font-size:11px;padding-top:8px;margin-right:20px;} .Center_Coppyright{float:left} .Center_Coppyright img{float:left;margin:4px 3px;height:21px;width:auto} #Supports{width:100%;padding-top:10px;padding-bottom:10px;background:#1881BD none repeat scroll 0% 0%;height:100%;float:left} #Content_Supports{width:1100px;height:auto;margin:3px auto} #Content_Supports #support_1{width:32%;height:auto;float:left;margin:0px 15px 0px 0px;} #Content_Supports .support_2{width:22%;height:auto;float:left;margin:10px 10px;} #Content_Supports .support_2 p{font-size:18px;color:#FFFFFF;font-family:"Roboto", sans-serif;font-weight:400;text-align:left;margin:0px} #Content_Supports .support_2 p img{width:22px;height:22px;margin:-5px 7px} #Content_Supports .support_2 a{color:#fbff95; margin:5px 0px; text-align:center; display:block; font-size:18px} #Content_Supports .support_3{width:17%;height:auto;float:right;margin:10px 10px;} #Content_Supports .support_3 a{background:#CA7A01 none repeat scroll 0% 0%;font-size:18px;font-family:"Roboto",sans-serif;font-weight:300;height:60px;margin-top:0px;line-height:60px;color:#FFF;text-align:center;border-radius:3px;display:block} #Note{width:100%;background:url(../iCon/cloud-bg.jpg);height:100%;margin:5px 0px;float:left;background-attachment:fixed;position:relative;background-size:100%} #Note #Content_Note{width:1100px;height:auto;margin:0px auto} #Top_Note{width:100%;height:auto;float:left;margin:0px} #Top_Note h3{font-size:35px;color:#FFF;margin:20px 5px 7px 5px;text-align:center} #Top_Note p{font-size:15px;color:#feff81;text-align:center;margin:5px;font-style:italic} #Bottom_Note{width:100%;height:auto;float:left;margin:30px 0px 10px 0px} #Bottom_Note #Left_Bottom_Note{width:45%;height:auto;float:left;margin:0px} #Bottom_Note #Right_Bottom_Note{width:55%;height:auto;float:left;margin:0px;} #Bottom_Note #Right_Bottom_Note #Top_Right_Bottom_Note{width:100%;height:352px;background:url(../iCon/bg_note1.png) no-repeat right center scroll transparent;background-size:90%;opacity:0.7} #Left_Bottom_Note .Tear_Note{width:100%;height:auto;float:left;margin:5px 0px} #Left_Bottom_Note .Tear_Note .Number{width:50px;height:50px;float:left;margin:0px 5px 0px 0px;border-radius:50%;background:url(../iCon/bg_note.png);font-size:30px;font-weight:bold;color:#FFF;text-align:center;line-height:50px} #Left_Bottom_Note .Tear_Note .Name_Note{width:auto;height:50px;float:left;margin:0px} #Left_Bottom_Note .Tear_Note .Name_Note span{font-size:25px;text-transform:uppercase;color:#FFF;line-height:50px;margin:0px 10px;display:block} #Left_Bottom_Note .Tear_Note .Des_Note{width:100%;height:auto;float:left;margin:0px} #Left_Bottom_Note .Tear_Note p{font-size:13px;color:#b1e1f2;font-style:italic;display:block;margin:2px 5px 10px 5px;text-align:justify} #Left_Bottom_Note .Tear_Note a{background:#42b914;margin:5px;padding:5px 20px;line-height:20px;display:inline-block;color:#FFF;font-size:15px; border-radius:5px;font-style:italic} #Note .ghichu{font-family:Tahoma, Geneva, sans-serif;color:#FFF;font-size:14px;text-align:center;display:block;margin:10px 0px 20px 0px} #NewProduct{width:100%;height:auto;float:left;margin:20px 0px} #Content_NewProduct{width:1100px;height:auto;margin:0px auto} #Content_NewProduct h4{color:#565656;font-size:27px;margin:5px 5px;line-height:25px;font-weight:normal} #Content_NewProduct h4 span{height:25px;width:5px;background:#0037c2;float:left;margin:0px 10px 1px 5px;float:left} #Content_NewProduct #Left_NewProduct{width:50%;height:auto;float:left;margin:15px 0px} #Content_NewProduct #Left_NewProduct .Tear_pdn{height:175px;width:120px;float:left;margin:6px 8px;overflow:hidden} #Content_NewProduct #Left_NewProduct .Tear_pdn .img{width:98%;height:120px;float:left;margin:0px 0px 7px 0px;display:table;table-layout:fixed;border:1px solid #d2d2d2;border-radius:4px;opacity:0.8} #Content_NewProduct #Left_NewProduct .Tear_pdn .img{border:1px solid #bdbdbd} #Content_NewProduct #Left_NewProduct .Tear_pdn:hover .img{opacity:1} #Content_NewProduct #Left_NewProduct .Tear_pdn .img a{text-align:center;display:table-cell;vertical-align:middle} #Content_NewProduct #Left_NewProduct .Tear_pdn .img a img{max-width:85%;max-height:120px} #Content_NewProduct #Left_NewProduct .Tear_pdn h2{font-size:13px; color:#686868;text-align:center;display:block;margin:5px; font-weight:normal} #Content_NewProduct #Left_NewProduct .Tear_pdn h2 a{color:#686868} #Content_NewProduct #Right_NewProduct{width:42%;height:auto;margin:15px 0px;float:right} #Content_NewProduct #Right_NewProduct .Tear_N{width:100%;height:auto;float:left;margin:8px 0px} #Content_NewProduct #Right_NewProduct .Tear_N img{width:60px;height:60px;float:left;margin:0px 20px 0px 0px;border-radius:5px} #Content_NewProduct #Right_NewProduct .Tear_N h3{font-weight:normal; margin:0px} #Content_NewProduct #Right_NewProduct .Tear_N .Name{font-size:13px;font-weight:bold;color:#337ab7;text-decoration:none;margin:7px 5px;display:block} #Sales{width:100%;height:15px 0px;float:left;background:url(../iCon/bg_customer_comments.png);height:auto} #Sales #Content_Sales{width:1100px;height:auto;margin:0px auto} #Sales #Content_Sales .sl1{font-size:27px;color:#FFF;text-align:center;margin:20px 0px 10px 0px;display:block} #Sales #Content_Sales .sl1 span{font-size:35px;color:#e1ff98} #Sales #Content_Sales .sl2{font-size:22px;text-transform:uppercase;margin:7px 5px 15px 4px;text-align:center;display:block;font-family:sans-serif;color:#feffaa;} .Times{width:350px;height:70px;margin:10px auto;background:url(../iCon/Times.gif) no-repeat 7px center scroll #dee0e1;border-radius:5px} .Times .time1{font-size:16px;text-transform:uppercase;margin:5px 5px 1px 86px;display:inline-block;color:#f84600;font-family:UTMPenumbra} .Times .time1 span{font-weight:bold;font-size:22px;font-family:UTMSwissCondensedBold} .Times .Date1{font-size:16px;color:#0a83bb;margin:2px 5px 2px 86px;display:inline-block} .f-nav{float:left;width:198px;top:0px;position:fixed} #Baogias{ width:100%; height:auto; float:left; margin:10px 0px} #Baogias #Content_Baogias{ width:1200px; margin:0px auto; height:auto; background:url(../iCon/Bg_baogia.jpg) no-repeat} #Baogias #Content_Baogias h2{ font-size:30px; text-align:center; margin:15px 5px 5px 5px} #Baogias #Content_Baogias span{ font-size:14px; text-align:center; color:#ff6000; margin:10px 5px 5px 5px; display:block} #Baogias #Content_Baogias #ListBaogia{ width:100%; height:auto; float:left; margin:50px 0px 20px 0px} #Baogias #Content_Baogias #ListBaogia .Tear_Baogias{ width:18.6%; height:92px; float:left; margin:7px; border:1px solid #e6e6e6; border-radius:5px; background:#FFF} #Baogias #Content_Baogias #ListBaogia .Tear_Baogias img{ max-width:98%; max-height:50px; display:block; margin:2px auto;} #Baogias #Content_Baogias #ListBaogia .Tear_Baogias h2{margin:0px; font-weight:normal} #Baogias #Content_Baogias #ListBaogia .Tear_Baogias a{color:#282828; margin:5px; display:block; font-weight:bold; font-size:13px; text-align:center; display:block } #URL{ width:100%; height:auto; float:left; margin:10px 0px 200px 0px; color:#FFF} .spn1{ font-size:27px; text-transform:uppercase; margin:5px; text-align:center; display:block} .spn2{ font-size:16px; margin:5px; text-align:center; display:block} #Content_URL{ width:90%; height:auto; margin:10px auto; border:1px solid #FFF; border-radius:5px; padding:10px;color:#fa8e0} #Content_URL a{color:#fa8e00; font-size:17px; display:inline-block} #adwfooter { width: 100%; height: auto; float: left; margin: 0px; position: fixed; bottom: 0px; } #adwfooter img{width:100%; height:auto; float:left; margin:0px; float:0px} #Banner_footer { bottom: 0px; z-index: 10; width: 100%; height: auto; float: left; } #Content_Banner_Footer { width: 1100px; height: auto; margin: 0px auto; position: relative; overflow: hidden; } #Content_Banner_Footer span { font-size: 20px; text-align: center; display: inline-block; width: 20px; height: 20px; position: absolute; right: 0; top: 0; background-color: #333; color: #FFF; cursor: pointer; z-index: 99; line-height: 20px; } #Content_Banner_Footer a { float: left; margin: 0px; display: block; } #Content_Banner_Footer a img{ width:100%; height:auto} /* thêm mới */ footer{width:100%; height:auto; float:left; margin:10px 0px 0px 0px} #footer{width:100%; height:auto; float:left; margin:0px ;background: #394c66; padding: 15px 0px 0px;} #mainFooter{width:1300px; height:auto; margin:0px auto} #infoFooter{width:40%; height:auto; float:left; margin:0px} #mainFooter .name{ color: #f16725; font-size: 18px; margin-bottom: 20px; min-height: 25px; font-weight:bold; display:block } #infoFooter ul li {padding: 3px 0px;} #infoFooter ul li span{ float: left; color: #95cffe; font-weight: bold; margin:5px; margin-right: 10px; font-size: 12px; width: 100px;} #infoFooter ul li .desc { display:table} #infoFooter ul li .desc p{ font-size: 12px; margin:0px 5px; color:#fff} #infoFooter ul li .desc p a{text-decoration: underline;color: #dfb800 !important;} #supportFooter{width:29%; height:auto; float:left; margin:0px 3%} #supportFooter p{ background:rgba(255,255,255,0.1); padding:0px 20px; display:block; color:#FFF; margin:5px 0px; line-height:43px} #supportFooter p .icon{ width:20px; height:20px; background:url(../Icon/on.png) no-repeat; display:inline-block; margin:0px 5px} #supportFooter p .email{color: #88d54f; font-size: 11px; font-weight: normal;} #payFooter{width:25%; height:auto; float:left; margin:0px 0px} #payFooter a{ background:rgba(255,255,255,0.1); padding:0px 20px; display:block; color:#FFF; margin:5px 0px; line-height:43px; display:block} .social { border-top: 1px solid #435670; padding: 10px 0px; margin-top: 10px; width:100%; float:left; text-align:center} .social ul li a { display: block; width: 30px; height: 30px; background: #dcdcdc; color: #717e91; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align:center; line-height:35px; padding: 0px; line-height:30px } .social ul li { display: inline-block; margin: 0px 2px; color: #dcdcdc; } .social ul li i{line-height:30px} .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; } #listInfo{width:100%; height:auto; float:left; background: #435670; padding: 35px 0px;} #listInfo #contentListInfo{width:1300px; height:auto; margin:0px auto; clear:both} #listInfo #contentListInfo .tearInfo{width:25%; height:auto; float:left; margin:5px 1%; } #listInfo #contentListInfo .tearInfo:first-child{width:17%} #listInfo #contentListInfo .tearInfo .name{ color: #f16725; font-size: 18px; margin-bottom: 15px; min-height: 25px; font-weight:bold; display:block } #listInfo #contentListInfo .tearInfo ul{width:100%; height:auto; float:left; margin:0px} #listInfo #contentListInfo .tearInfo ul li a{ color: #fff; font-size: 14px; display: block; padding: 5px 0px;text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #listInfo #contentListInfo .tearInfo ul li h2{font-weight:normal; margin:4px 0px} #footerbottom{width:100%; height:auto; float:left; margin:0px; padding:10px 0px 37px 0px} #contentFooterbottom{width:1300px; height:auto; margin:0px auto; clear:both} #logoFooter{width:18%; height:auto; float:left} #logoFooter img{width:200px; height:auto; float:left; margin:4px 0px} #centerFooter{width:50%; height:auto; float:left; margin:0px} #centerFooter p{ font-size:12px; color:#3e3e3e; margin:5px} #centerFooter p.p1{margin-top:7px} #centerFooter p span{font-weight: bold; color: #3b88c8; } #rightFooter{width:32%; float:left; margin:0px} #rightFooter img{float:right; margin:3px 0px} #Support_Footer{width:100%; height:50px; z-index:1000; margin:0px; padding:0px; position:fixed; background:#3b88c8; bottom:0px} #Content_SupportFooter{width:1300px; height:auto; margin:0px auto} #Content_SupportFooter #Support{width:65%; height:100%; float:left; margin:0px} #Content_SupportFooter #Support .thacmac{float:left; margin:0px; line-height:50px; display:block; color: #fff; font-family: 'hevr',Arial,Helvetica,sans-serif; font-size: 20px; display:block; margin-right:20px} .Tear_Sp{width:auto; height:100%; float:left; margin:0px 10px 0px 5px; position:relative} #Call{width:170px; float:left; margin:5px 0px; float:left; position:relative; background:#fffadf; height:40px; border-radius: 4px; cursor:pointer} #Call .icon{ width:41px; height:40px; position:absolute; right:-5px; top:-5px; content:''; background:url(../ICon/chat.png) no-repeat} #Call span{ color: #374b67; font-size: 10.3px; display: block; text-transform:uppercase; margin:7px 2px 0px 9px; display:block; font-weight:bold} #Call small{ color: #a78a00; font-size: 15px; display: block; margin:0px 2px 2px 9px; font-weight:bold; line-height: 17px;} .Tear_Sp:after{width:1px; height:40px; content:''; border-right:1px solid #0267c3; position:absolute; top:5px; right:0px} .Tear_Sp:last-child:after{ border:none} .Tear_Sp .Left_Tear_Sp{ background:url(../ICon/hotline_iCon.png) no-repeat left center scroll transparent; width:40px; height:50px; float:left; margin-right:10px} .Tear_Sp .Right_Tear_Sp{width:auto; height:100%; float:left; margin:0px} .Tear_Sp .Right_Tear_Sp .sp1{ font-size:11px; color:#FFF; display:block; text-transform:uppercase; margin:7px 5px 0px 5px} @-webkit-keyframes st { 0%{color:#F8CD0A} 50%{color:#81c3ff} 100%{color:#F8CD0A} } @-moz-keyframes st { 0%{color:#F8CD0A} 50%{color:#81c3ff} 100%{color:#F8CD0A} } @-o-keyframes st { 0%{color:#F8CD0A} 50%{color:#81c3ff} 100%{color:#F8CD0A} } @keyframes st { 0%{color:#81c3ff} 50%{color:#fff} 100%{color:#e4ff00} } @-webkit-keyframes dt { 0%{color:#f80300} 50%{color:#db9000} 100%{color:#f80300} } @-moz-keyframes dt { 0%{color:#F8CD0A} 50%{color:#db9000} 100%{color:#F8CD0A} } @-o-keyframes dt { 0%{color:#f80300} 50%{color:#db9000} 100%{color:#f80300} } @keyframes dt { 0%{color:#db9000} 50%{color:#fff} 100%{color:#e55c00} } .Tear_Sp .Right_Tear_Sp .sp2{ font-family:SwissCondensedBold; margin:4px 5px; font-size:18px; display:block; line-height:13px; font-weight: 700; -webkit-animation: st 700ms infinite; -moz-animation: st 700s infinite; -o-animation: st 700ms infinite; animation: st 700ms infinite;} .f-nav{ /* To fix main menu container */ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%; background:url(../ICon/bg_bottom_header.gif) } .Tuvan{width:100%;height:100%;float:left;margin:10px 0px;background:url(../iCon/intro-domain.jpg) no-repeat; position: relative; background-size:100%;} .content_Tuvan{width:1330px;height:auto;margin:5px auto; text-align:center} .content_Tuvan span{font-size:30px;color:#333;margin:5px;font-family:UTMPenumbra; margin:120px auto;font-weight:normal; display:inline-block; background:rgba(255,255,255,0.8); padding:3px 9px } #Hotline{width:auto; float:right; height:100%; float:right; margin:0px; position:relative} #Hotline #Content_Hotline{ width:193px; height:70px; position:absolute; right:0px; background:url(../ICon/hotline.png)} #Hotline #Content_Hotline span{ animation: st 700ms infinite;color:#FFF; font-weight:bold; margin:40px 5px 5px 40px; font-size:20px; font-family:SwissCondensedBold; display:block; } .Link{ width:100%; height:auto; float:left; margin:0px; text-align:left; margin-top:10px} .Link h4{font-weight:normal; margin:0px; display:inline-block; margin:2px 2px 2px 0px} .Link h4 a{padding:5px 7px; border:1px solid #ebebeb; display:inline-block; color:#3e3e3e; font-size:11px} .h1{font-size:2px; color:#FFF; font-weight:normal; margin:0px; float:left} #Transport{ width:100%; height:auto; float:left; margin:10px 0px} #contentTransport{width:100%; height:auto; float:left; margin:0px; clear:both; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc} #Transport .Tear_Tran{width:33%; height:77px; float:left; margin:0px; border: 1px solid #dcdcdc; position:relative; border-left:none; border-right:none} #Transport .Tear_Tran:last-child{width:34%} #Transport .tt{ background:url(../ICon/people-pay.png) no-repeat 35px center scroll #f8f8f8;} #Transport .gh{ background:url(../Icon/sua.jpg) no-repeat 35px center scroll #f8f8f8;} #Transport .dh{ background:url(../Icon/baotri.png) no-repeat 35px center scroll #f8f8f8;} #Transport .gg{ background:url(../ICon/plan-free.png) no-repeat 35px center scroll #f8f8f8;} #Transport .Tear_Tran:after{ background: #FFF url(../ICon/dot_seperate.png) no-repeat center center; width: 36px; height: 77px; content: ""; position: absolute; right: -17px; top: -1px; z-index: 9; } #Transport .Tear_Tran:last-child:after{ background:none; width:0; height:auto} #Transport .Tear_Tran .tr1{font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size:16px; text-transform:uppercase; font-weight:700; display:block; margin:17px 5px 5px 30%; color:#818181} #Transport .Tear_Tran .tr2{font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:300; font-size:16px; display:block;margin:5px 5px 5px 30%; text-transform:uppercase; color:#394d69} #myModal{ margin-top:50px !important; z-index:999999991; } .input-content{width:100%; margin:0px} .input-content img{ width:31px; height:auto; display:block; margin:0px 5px 0px 0px; float:left} .input-content .text-hello{ color: #169e31; font-size: 22px; padding-top: 5px;; margin:5px; display:block} .conten-sub{ color: #337ab7; font-size: 11px; font-weight: bold; padding-top: 5px;} .input-content input.request_phone{margin:5px 0px; display:block} .send-go{background: #f16726; color: #FFF; border-radius: 3px; display:inline-block} .go-hotline { width: 70%; float: right; text-align: center; padding: 5px 0px;} .go-hotline>span { color: #f16726; font-weight: bold; } #menuMobile{width:100%; background:#3b88c8; float:left; text-align:center; display:none} #menuMobile a{color:#FFF; font-size:14px; text-transform:uppercase; text-align:center; display:block; padding:10px} #menuMobile a i{margin-right:10px;} /*Danh sách chi nhánh*/ #infomation{width:100%; height:auto; float:left; margin:0px 0px; padding:5px 0px} #infomation h5{font-size:25px; color:#FFF; margin:5px; text-align:center; text-transform:uppercase; font-weight:bold} #infomation .if{color:#9F6; font-size:20px; text-align:center; margin:5px} #infomation #contentInfo{width:100%; height:auto; float:left; margin:10px 0px} #infomation #contentInfo ul.listLocation{width:100%; height:auto; float:left; margin:1px 0px 0px 0px; background:rgba(255,255,255,0.06)} #infomation #contentInfo ul.listLocation li{width:12.5%; float:left} #infomation #contentInfo ul.listLocation li a{color:#d3e6ff; font-size:16px; display:block; padding:10px; font-family:"Open Sans",sans-serif!important; position:relative; cursor:pointer} #infomation #contentInfo ul.listLocation li a.set:after { position: absolute; top: 32px; left: 20px; border-left: 10px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.1); border-right: 10px solid transparent; content: "";} .contentLocation{ width:100%; height:auto; float:left; margin:0px; background:rgba(255,255,255,0.1); display:none; border-left: 1px solid #43546b; border-top: 1px solid #43546b; padding:5px 0px} .showLocation{display:block !important} .tearLoca .p1{ color:#ffa96a; margin:5px 8px; font-weight:bold; font-size:13px;font-family:"Open Sans",sans-serif!important; text-transform:uppercase} .tearLoca .p1 span{ color:#FFF; background:#ff2a00; padding:2px 5px 2px 2px ; display:inline-block; font-weight:normal; font-size:12px; text-transform:none} .tearLoca .p2{color:#FFF; font-size:12px; margin:5px 8px} .tearLoca a{color:#489eff; font-size:14px; display:block; margin:8px 8px} .tearLoca{width:20%; height:auto; float:left; margin:0px; border-right:1px solid #43546b; border-bottom:1px solid #43546b; padding:5px} .support{width:100%; height:auto; margin:0px; float:left; background:#3b88c8} .support .leftSupport{width:47%; height:100%; background: url(../iCon/hotline_iCon.png) no-repeat 5px 36px scroll #153f79; float:left; position:relative; padding-bottom:5px} .support .leftSupport:after{position:absolute; content:''; border-bottom:70px solid transparent; border-top:0px solid transparent; border-left:40px solid #153f79; right:-40px; top:0px} .support .leftSupport p{font-size:15px; color:#b9efff; margin:4px 5px 8px 8px;font-family:"Open Sans",sans-serif!important; position:relative; padding-bottom:3px} .support .leftSupport p:before{ width:90%; height:1px; background:#093167; content:''; position:absolute; left:0px; bottom:0px} .support .leftSupport p:after{ width:90%; height:1px; background:#386198; content:''; position:absolute; left:0px; bottom:-1px} .support .leftSupport a{font-size:17px; color:#fff; margin:3px 5px 0px 37px; display:block; line-height:14px} .support .rightSupport{width:53%; height:auto; float:left; margin:0px} .support .rightSupport p{font-size:15px; color:#d9ffff; margin:4px 5px 2px 41px;font-family:"Open Sans",sans-serif!important; position:relative; padding-bottom:3px} .support .rightSupport .sp1{font-size:22px; display:block; margin:0px 5px 0px 20px; color:#FFF; text-align:right; font-weight:bold; line-height:20px} .support .rightSupport .sp2{font-size:13px; color:#feffd9; margin:2px 5px 2px 5px; text-align:right; display:block} #table1 td { text-indent: 10px; border: 1px solid #fff !important; }.people{font-size:12px; margin:5px; text-align:center; display:inline-block; border:1px dashed #afafaf;padding: 2px 6px; } #chinhsach{width:100%; height:auto; text-align:center; float:left; margin:7px 0px 0px 0px; font-size:12px; color:#c7ddef; font-weight:bold; } #chinhsach a{ margin:5px; color:#c7ddef; display:inline-block; font-size:12px; font-weight:normal } @charset "utf-8"; @media screen and (max-width:768px){#Banner{width:100%;} #Banner #LeftBanner{width:45%} #Banner #RightBanner{width:55%} #Banner #LeftBanner h2{font-size:15px;line-height:67px} #Banner #LeftBanner #Logo{width:70px;height:100%} #Banner #LeftBanner #Logo a img{max-width:70px;height:auto} #Banner #RightBanner a{font-size:12px;margin:auto 6px} .line{width:100%} #Header{width:100%} #Content_Banner_Footer { width: 100% !important; } #mainFooter{width:100%} .contentLocation table tr td{width:30%} #Header #ContentHeader{width:100%} #Header #ContentHeader .Notes{width:100%} .Listkhacbiet{width:100%} .Tear_kb{width:30%;margin:5px 7px} #Info{display:100%;margin:0px} #Info #Info_Content{width:100%;margin:0px;float:left;padding:5px 0px} .Content_Tear_One{width:97%;margin:5px auto;float:none} .Content_Tear_True{width:97%;margin:5px auto;float:none} .Tear_One .Left{width:100%} .Tear_One .Right{width:100%} .Trademark{width:100%;margin:5px 0px} #Header #ContentHeader h1{font-size:25px} .Trademark h3{font-size:16px} .Trademark .content_trademark .Tear_trademark{width:18%} .Func .Content_Func .nVar .Name span{margin:auto auto;text-align:center;display:block} .Func .Content_Func .nVar .Name{width:100%;margin:0px} .Func .Content_Func .List_Func .Tear_Func{width:23%} .Why{width:100%;margin:5px 0px} .Why .Right img{width:100%;height:auto} .Func .Content_Func{width:100%} .Right_Content_Note{width:84%} #when{width:100%;overflow:hidden} #Right_when h3{text-align:center} #when #Left_when{width:98%} #Right_when{width:98%} .Content_Tear_True .Left{width:100%} .Content_Tear_True .Right{width:100%} .Support .nVars{width:100%} .Support .Content_Support{width:100%} .Support .Content_Support .Tear_Support{width:30%;float:left;margin:5px 10px} .Succes .Content_Succes{width:100%} .Succes .Content_Succes .title{font-size:25px;margin:10px auto 0px auto} .Succes .Content_Succes .slogan{font-size:15px;margin:2px 5px} .Succes .Content_Succes p{font-size:13px} #Content_footer{width:100%;overflow:hidden} #Content_footer #buttom #Left_Content_footer{width:100%} #Content_footer #Right_Content_footer{display:none} .content_compare{width:100%;height:auto;float:left} #Services{width:100%;float:left;margin:0px} .Tear_Chinhhang{width:48%;height:auto} .Tear_Dichvu{width:48%;margin:0px 5px 0px 10px;height:auto} .Tear_Dichvu .Name{font-size:15px} .Tear_Chinhhang .Name{font-size:15px} .Tear_Muahang{display:none} #List_if{display:none} .Tear_Chinhhang:last-child{display:none} #List_Info{width:100%;height:auto;float:left;margin:0px} .Tear_Info{width:30%;height:auto;float:left} .Tear_Info_p{width:32%;height:auto;float:left} .Tear_Info_n{display:none} .Tear_Info .Name{font-size:15px} .Tear_Info_p .Name{font-size:15px} #Content_Res{width:100%} #Content_Res #Left_Res{width:100%;margin:0px} #Content_Res #Right_Res{width:100%;margin:0px} #Note #Content_Note{width:100%;padding:0px} #Bottom_Note #Left_Bottom_Note{width:100%;margin:0px;padding:0px} #Bottom_Note #Right_Bottom_Note{width:100%;margin:0px;padding:0px} #Bottom_Note #Right_Bottom_Note #Top_Right_Bottom_Note{width:100%;height:352px;background:url(../iCon/bg_note1.png) no-repeat center center scroll transparent;background-size:80%;opacity:0.7} #Left_Bottom_Note .Tear_Note a{text-align:center;display:block;margin:0px auto} #Left_Bottom_Note .Tear_Note{width:95%;height:auto;float:none;margin:4px auto} #Top_Note h3{font-size:30px} #Content_Supports{width:100%;padding:0px} #Content_Supports #support_1{width:55%;margin:5px} #Content_Supports .support_2{width:40%;margin:2px} #Content_Supports .support_2 p{font-size:15px;line-height:30px} #Content_Supports .cl1{margin-top:20px} #Content_Supports .support_3{display:none} .Tear_if{width:45%;margin:10px 15px;padding:0px} #Info_Company{width:97%;margin:5px 0px 40px 0px} #Info_Company #Logo{width:12%} #content_Coppyright{width:100%;float:left;margin:0px} #Content_NewProduct{width:100%} #Content_NewProduct #Left_NewProduct{width:100%;float:left;margin:10px 0px} #Content_NewProduct #Left_NewProduct .Tear_pdn{width:130px;height:160px} #Content_NewProduct #Left_NewProduct .Tear_pdn .img{height:130px} #Content_NewProduct #Right_NewProduct{width:94%;float:none;margin:4px auto} #Content_NewProduct #Right_NewProduct .Tear_N{margin:5px 0px} #Sales #Content_Sales{width:100%} #Baogias #Content_Baogias{width:100%} #Baogias #Content_Baogias #ListBaogia .Tear_Baogias{ width:22.4%} .tearLoca{width: 50%} #infomation #contentInfo ul.listLocation li{width:25%} #listInfo #contentListInfo{width:100%} #listInfo #contentListInfo .tearInfo{width:48%; margin:5px 1%} #contentFooterbottom{width:100%} #logoFooter{width:35%} #centerFooter{width:65%} #rightFooter{width:100%; text-align:center} #rightFooter img{float:none} #Support_Footer{display:none} #footerbottom{padding-bottom:5px}#Content_Supports .support_2 p span{background:#FFF; display:inline-block; padding:0px 3px; font-weight:bold; font-size:13px; color:#F00} } @media screen and (max-width:488px){#Banner #LeftBanner{width:100%} #Banner #RightBanner{display:none} #Banner #LeftBanner h2{font-size:15px;line-height:67px;margin-left:10px} #Banner #LeftBanner #Logo{margin-left:10px;margin-right:7px} #Header{display:none} #Info #Info_Content h2{font-size:17px} #Info #Info_Content span.gp{font-size:12px} .Tear_One .Des3{width:100%;margin:0px} .Content_Tear_True .Right .Des1 .Tr{width:42%} .Support{display:none} #Content_footer #Top .ft1{font-size:18px} .line{display:none} #Right_when .Des{text-align:center} .Tear_when{width:98%;border:none} #when #Left_when{border:none;margin:0px} #when #Left_when img{width:98%;height:auto} .Trademark .content_trademark .Tear_trademark{width:46%} .Trademark h3{font-size:17px;text-transform:none} #Right_when h3{font-size:17px;text-transform:none} .Why h2{font-size:25px} .Why .Left .Tear_1s{margin:2px 0px 25px 0px;} .Why .Left .Tear_1s .Right_Tear1 .name1{font-size:18px} .Why .Note .Content_Note .Left_Content_Note{display:none} .Right_Content_Note{width:90%;margin:3px auto;float:none;} .Func .Content_Func .List_Func .Tear_Func{width:46%} .Func .Content_Func .nVar{height:auto} .Func .Content_Func .nVar .Name span{font-size:15px} .content_compare h3{font-size:22px} .content_compare .chinhang{font-size:22px} .content_compare a{width:100%;background-size:100%;margin:0px} .Content_Func .xemthem{width:100%;font-size:13px} #Info #Info_Content p{display:none} #Info #Info_Content span.gp{display:none} #Info #Info_Content h2{display:none} .Tear_Dichvu{width:99%;height:auto;margin:5px 2px} .Tear_Chinhhang{width:99%;height:auto;margin:5px 2px} .Tear_Info{width:46%;height:auto;margin:5px 2px 5px 8px} .Tear_Info_p{width:99%;height:auto;margin:5px 2px;display:none} .Tear_1{width:48%} .Info_Res .Thoigian .Right_Thoigian .sp1{font-size:16px} .Tear_Info .Name{font-size:14px} .Info_Res .Thoigian .Right_Thoigian{float:right;;width:80%} .Info_Res .Tietkiem .Right_Tietkiem{float:right;;width:80%} .Info_Res .Tuvan .Right_Tuvan{float:right;;width:80%} .Info_Res .Loiich{font-size:22px} .Tear_Info .Name{font-size:13px} #Content_footer #buttom #Left_Content_footer .org{font-size:13px} #Content_Res #Right_Res .rows .Left_Row span{font-size:12px} #Content_Res #Right_Res .rows .Left_Row{width:30%} #Content_Res #Right_Res .rows .Right_Row{width:70%} #Content_Res #Right_Res .rows .Left_Row span{text-align:right} #Bottom_Note #Right_Bottom_Note #Top_Right_Bottom_Note{height:200px} #Top_Note h3{font-size:25px} #Content_Supports #support_1{width:97%;margin:5px} #Content_Supports .support_2{width:47%;margin:2px} #Content_Supports .support_2 p{line-height:25px;text-align:center;font-size:15px} #Content_Supports .support_2 p img{width:17px;height:17px} .Tear_if{width:95%;margin:5px auto;float:none} #Info_Company #Logo{width:22%} #Info_Com{width:78%} #Info_Mxh{display:none} .Center_Coppyright{display:none} #Content_NewProduct #Left_NewProduct .Tear_pdn{width:44%} #Sales #Content_Sales .sl1{font-size:20px} #Sales #Content_Sales .sl1 span{font-size:25px} #Sales #Content_Sales .sl2{font-size:17px} .Tear_if h4 span{text-align:center;display:block} .Tear_if:last-child{float:left;padding-right:15px;padding-left:15px;} .Tear_if ul li a{text-align:center;display:block;line-height:normal;margin:5px auto} .Tear_if ul{line-height:0px} .Tear_if ul{margin:0px;border:none} .Times{width:95%;height:60px;} .Times .time1{font-size:12px;margin-top:7px} .Times .time1 span{font-weight:bold;font-size:16px} .Times .Date1{font-size:11px;color:#0a83bb;margin:2px 5px 2px 86px;display:inline-block} #Content_Supports .cl1{margin-top:2px} .Tear_if ul li:before{content:""} .Tear_if h4{line-height:15px} #Baogias #Content_Baogias #ListBaogia .Tear_Baogias{ width:44%} #Baogias #Content_Baogias h2{ font-size:25px} #Baogias #Content_Baogias span{ margin-top:10px} .tearLoca{ width:100%} #infomation #contentInfo ul.listLocation li{width:50%} #mainRegister #boxRegister{width:96%; margin:auto 2%} #mainRegister #boxRegister input{width:66%; font-size:12px !important} #supportFooter{display:none} #payFooter{display:none} .social ul li:first-child{width:100%; margin-bottom:6px} #listInfo{display:none} #logoFooter{width:100%; text-align:center} #logoFooter img{float:none} #centerFooter{width:100%; text-align:center} #linkOut{display:none} #Content_Supports .support_2 p{color:#FFF !important} #footerbottom{ padding-bottom:80px} #Content_Supports .support_2 a{ text-align:center} } @charset "utf-8";#Contents{width:1100px;height:auto;margin:0px auto} #Contents #HeadShort{width:100%;height:auto;float:left;margin:0px;position:relative;border:1px dashed #c7c7c7;padding:2px 0px;overflow:hidden} #Contents #HeadShort #Left_HeadShort{width:70%;height:auto;float:left;margin:0px 2px;} #Contents #HeadShort #Left_HeadShort img{width:100%;height:auto;margin:0px;padding:0px} #Contents #HeadShort #Right_HeadShort{width:29%;float:left;margin:0px 2px;height:auto} #Contents #HeadShort #Right_HeadShort #nVar_HeadShort{width:100%;height:auto;float:left;margin:0px} .Product_Tear{width:100%;height:auto;float:left;margin:7px 0px} .Tear_1:hover .Name{color:#ff4800} .Tear_1{width:210px;float:left;height:auto;border:1px solid #e4e4e4;margin:4px} .Tear_1 .img{width:100%;height:200px;float:left;margin:0px 0px 7px 0px;position:relative;overflow:hidden} .Tear_1 .content_img{display:table;table-layout:fixed;width:100%;height:100%} .Tear_1 .img a{display:table-cell;vertical-align:middle;text-align:center} .Tear_1 .img a img{max-width:90%;max-height:200px;margin:4px} .Tear_1 h2{font-weight:normal; margin:0px} .Tear_1 h3{font-weight:normal; margin:0px} .Tear_1 .Name{font-size:13px;color:#353535;margin:5px;display:block;text-align:center;font-weight:bold} .Tear_1 .Price{font-size:12px;color:#797979;margin:5px 5px 0px 5px;display:block;text-align:center} .Tear_1 .PriceSale{font-size:16px;font-family:UTMSwissCondensed;color:#3d3d3d;margin:0px 5px 7px 5px;text-align:center;display:block} .Tear_1 .PriceSale img{width:30px;height:10px;background:url(../iCon/icon_sale.png) no-repeat;} .Tear_1 .img .detail{position:absolute;width:100%;height:100%;top:0;left:0;text-align:center;overflow:hidden;background:url(../iCon/bg_app_store.png);transform:translateX(-100%);//Đẩy phần detail sang trái ra khỏi -webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transition:all 0.4s ease-in-out 0s;-moz-transition:all 0.4s ease-in-out 0s;-webkit-transition:all 0.4s ease-in-out 0s;} .Tear_1 .img:hover .detail{transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0);} .Tear_1 .img img{transition:all 0.4s ease-in-out 0s;-moz-transition:all 0.4s ease-in-out 0s;-webkit-transition:all 0.4s ease-in-out 0s;} .Tear_1 .img:hover img{transform:translateX(100%);-webkit-transform:translateX(100%);-moz-transform:translateX(100%);} .Tear_1 .img .title{text-transform:uppercase;font-size:15px;font-weight:bold;padding:10px;font-family:UTMSwissCondensed;position:relative;display:block} .Tear_1 .img .detail p{color:#fff;padding:10px;} .Tear_1 .img .detail a{text-decoration:none;display:inline-block;padding:10px 15px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border:1px solid #111;} .Tear_1 .img .detail .title{background:rgba(255,255,255,0.5);box-shadow:0 1px 3px #999;color:#111;} .Tear_1 .img .detail p{color:#fff;opacity:0.7;transition:all 0.4s linear 0.5s;-webkit-transition:all 0.4s linear 0.5s;-moz-transition:all 0.4s linear 0.5s;} .Tear_1 .img img{transition:all 0.4s ease-in-out 0s;-moz-transition:all 0.4s ease-in-out 0s;-webkit-transition:all 0.4s ease-in-out 0s;} .Tear_1 .img .detail a{background:#111;border-radius:0;color:#fff;} .Tear_1 .img .detail:hover p{opacity:1;} #Contents #HeadShort #Right_HeadShort #nVar_HeadShort h1{font-size:17px;margin:5px 10px;line-height:25px;text-transform:uppercase;font-family:UTMSwissCondensedBold;color:#444444;display:block} #Contents #HeadShort #Right_HeadShort #nVar_HeadShort h1:before{content:'❖ '} #Contents #HeadShort #Right_HeadShort #Content_HeadShort{width:97%;height:auto;float:left;margin:0px;padding:5px;font-family:UTMSwissCondensed;text-align:justify;font-size:15px;color:#5b5b5b} .ListProduct{width:100%;height:auto;float:left;margin:10px 0px} .ListProduct .Names{height:100%;margin:0px auto;position:absolute;margin:0px auto;left:0px;background:#FFF} .ListProduct h2{font-size:30px;text-align:center;margin:auto 5px auto 0px;color:#4d4d4d;font-weight:normal;line-height:40px;} .ListProduct h2 a{color:#3f3f3f} .ListProduct .nVar2{width:100%;float:left;margin:0px;height:40px;position:relative;text-align:center !important} .ListProduct .nVar2 hr{width:100%;height:1px;background:#676767;border:none;margin:19px 0px;float:left} .Root{width:100%;height:auto;float:left;margin:10px 0px;overflow:hidden;padding:0px} .Root a{color:#525252;font-size:12px;margin:auto 5px;line-height:20px} .Root a span{width:16px;height:14px;margin:2px 5px 1px 2px;float:left;background:url(../iCon/icon-home.png) no-repeat} #Content{width:100%;height:auto;float:left;margin:5px 0px} #Content #Hearshort{width:100%;height:auto;float:left;margin:0px 0px;border:1px dashed #bebebe;;position:relative} #Content #Hearshort #LeftHeadshort{width:67%;height:auto;float:left;margin:0px} #Content #Hearshort #LeftHeadshort img{width:100%;height:auto;float:left;margin:0px} #Content #Hearshort #RightHeadshort{width:33%;height:auto;float:right;margin:0px} #Content #Hearshort #RightHeadshort #nVarhs{width:100%;height:30px;background:#f4f4f4;float:left;margin-bottom:10px} #Content #Hearshort #RightHeadshort h1{font-size:17px;font-weight:normal;font-family:SwissCondensedBold;margin:4px auto;text-transform:uppercase;color:#454545;text-align:center} #Content #Hearshort #RightHeadshort .mota{font-size:12px;color:#5e5e5e;margin:5px;display:block} #Content #Hearshort #RightHeadshort #Des{width:98%;height:auto;float:left;margin:0px 5px 25px 5px;font-size:14px;color:#353535;font-family:UTM_SwissCondensed} #Content #Box_Name h2{font-size:16px;color:#474747;text-transform:uppercase;line-height:25px;font-weight:normal;font-family:SwissCondensedBold;display:block;margin:0px 5px} #Content #Box_Name{width:100%;height:25px;float:left;margin:10px 0px} #Content #Box_Name #Leff_BoxName{width:auto;height:100%;float:left} #Content #Box_Name #Rigt_Box_Name{width:auto;height:100%;float:right} #Content #Box_Name #Rigt_Box_Name select{width:auto;font-size:12px;color:#575757;border:1px solid #e6e6e6;float:right;height:20px;text-align:center;display:block} #Content .List_product{width:100%;height:auto;float:left;margin:7px 0px} #Content .ContentProduct{width:99%;height:auto;margin:2px auto;border:1px solid #f0f0f0;padding:3px} #Content #ContentProduct .Tear_1{width:173px;margin:3px} #Content #Download{width:100%;height:auto;margin:10px 0px 5px 0px;float:left;text-align:center;position:absolute;bottom:2px} #Content #Download a{text-align:center;margin:0px;display:block;text-align:right;margin-right:5px} #Content #Download a span{width:150px;height:29px;float:right;background:url(../iCon/download.png) no-repeat} @charset "utf-8";.Nvar_Product{height:30px;float:left;width:100%;margin:2px 0px;background:#fafafa} .Nvar_Product a{line-height:30px;margin:auto 5px;color:#333} .Nvar_Product a span{width:13px;height:13px;background:url(../iCon/icon_Home.png) no-repeat;margin:8px;float:left} .Nvar_Product a img{margin:9px 2px;float:left} #Content_Product{width:100%;height:auto;float:left;margin:5px 0px} #LeftProduct{width:77%;height:auto;float:left;margin:0px} #LeftProduct_Top{width:100%;height:100%;float:left;margin:0px;position:relative} #LeftProduct #Left_ContentProduct{width:47%;height:auto;float:left;margin:5px 5px 5px 0px;position:relative} #LeftProduct #Left_ContentProduct #Top_Product{width:100%;height:auto;float:left;margin:0px;position:relative} #LeftProduct #Left_ContentProduct #Top_Product #SaleProduct{width:82px;height:82px;position:absolute;bottom:0px;left:3px;z-index:1} #LeftProduct #Left_ContentProduct #Top_Product #img_Product{width:99%;height:auto;max-height:450px;float:left;margin:0px;border:1px solid #f2f2f2;position:relative} #LeftProduct #Left_ContentProduct #Top_Product #img_Product #Sale{width:100%;height:auto;position:absolute;bottom:0px;background:#fafafa;border-top:1px solid #f2f2f2;;border-left:none;border-right:none} #LeftProduct #Left_ContentProduct #Top_Product #img_Product #Sale span{padding:5px;display:block;color:#7b7b7b;font-style:italic;opacity:1;margin:auto auto auto 106px} #LeftProduct #Left_ContentProduct #Top_Product #img_Product #Content_Img_Product{width:100%;max-height:450px;float:left;margin:0px;display:table;table-layout:fixed;} #LeftProduct #Left_ContentProduct #Top_Product #img_Product a{display:table-cell;vertical-align:middle;text-align:center} #LeftProduct #Left_ContentProduct #Top_Product #img_Product a img{max-width:98%;max-height:360px;margin:5px;transition:all .2s ease-in-out;} #LeftProduct #Left_ContentProduct #Top_Product #img_Product a img:hover{transform:scale(1.1);} #LeftProduct #Left_ContentProduct #Top_Product #List_Product{width:99%;height:auto;float:left;margin:5px 0px;} #LeftProduct #Left_ContentProduct #Top_Product #List_Product .Tear_pl{width:23.2%;height:100px;float:left;margin:0px;border:1px solid #f2f2f2;display:table;table-layout:fixed;margin:3px;} #LeftProduct #Left_ContentProduct #Top_Product #List_Product .Tear_pl a{display:table-cell;vertical-align:middle;text-align:center} #LeftProduct #Left_ContentProduct #Top_Product #List_Product .Tear_pl:first-child{margin-left:0px} #LeftProduct #Left_ContentProduct #Top_Product #List_Product .Tear_pl a img{max-width:100%;height:auto;max-height:100%} #LeftProduct #Left_ContentProduct #Top_Product #List_Product .Tear_pl:hover{border:1px solid #4d4d4d} #Right_ContentProduct{width:50%;float:left;margin:5px;height:auto} #Right_ContentProduct #Top1{width:100%;height:auto;float:left;margin:0px;border-bottom:1px solid #f2f2f2;padding-bottom:7px} #Right_ContentProduct #Top1 h1{font-size:16px;text-transform:uppercase;margin:5px 5px 5px 0px;font-family:Arial, Helvetica, sans-serif} #Right_ContentProduct #Top1 span{font-size:12px;color:#7c7c7c;margin:3px 8px 3px 0px;} #Right_ContentProduct #Top1 span span{color:#ff6000;} #Top2{width:98%;height:auto;float:left;margin:5px 0px 0px 0px;border-left:5px solid #23a5e4;background:#fafafa;padding-top:5px;padding-bottom:5px} #Top2 li{width:50%;margin:0px;height:auto;float:left} #Top2 li span{margin:5px 5px !important;color:#434343;line-height:23px;} #Top2 li span span{width:12px;height:12px;float:left;background:url(../iCon/icon_1.png) no-repeat} #Top3{width:100%;height:55px;float:left;margin:5px 0px} #Top3 #Left_Top3{width:50%;height:auto;float:left} #Top3 #Right_Top3{width:48%;height:100%;float:left;border-left:5px solid #23a5e4;background:url(../iCon/cold-calling.png) no-repeat left center scroll transparent;background-position:10px} #Top3 #Left_Top3 span{color:#3a3a3a;margin:5px} #Top3 #Left_Top3 span .Price_Sale{font-size:18px;color:#ff6000;font-family:UTMSwiss;} #Top3 #Left_Top3 span.PriceDetail{color:#3a3a3a;margin:3px 5px;display:block} #Top3 #Left_Top3 span.editprice{color:#939393;margin:0px 5px;display:block;font-size:9px;font-style:italic} #Top3 #Right_Top3 .sp1{text-transform:uppercase;color:#9c9fa0;margin:5px 5px 1px 55px;display:block;font-weight:bold;} #Top3 #Right_Top3 .sp2{color:#ff6600;text-transform:uppercase;margin:0px 5px 5px 55px;display:block;font-weight:normal;font-size:17px;font-family:SwissCondensedBold;display:block;} #Top4{width:99%;height:auto;float:left;margin-top:4px;background-position:7px;padding-top:3px;padding-bottom:3px} #Top4 #Left_Top4{float:left;width:auto;height:auto;margin:3px} #Top4 span{margin:20px 5px;float:left} #Top4 #Left_Top4 span.Mau{width:50px;height:57px;float:left;margin:0px;background-size:100%} #Top5{width:100%;height:auto;float:left;margin:5px 0px} #Top5 span{float:left;margin:7px 10px 5px 1px;} #Top5 .txtOrd{width:30px;height:18px;float:left;margin:3px 5px;text-align:center !important;} #Top5 button{width:90px;height:25px;background:#0993e3;border:none;color:#FFF;text-transform:uppercase;font-size:11px;margin:3px 3px;} #Top6{width:98%;height:auto;float:left;margin:5px 0px 0px 0px;border-left:5px solid #23a5e4;background:#fafafa;padding-top:5px;padding-bottom:5px} #Top6 li{width:50%;margin:0px;height:auto;float:left} #Top6 li a{margin:0px 5px !important;color:#434343;line-height:25px;float:left} #Top6 li a .Muahang{width:11px;height:11px;background:url(../iCon/icon_Online_1.png) no-repeat;float:left;margin:6px 5px} #Top6 li a .Thanhtoan{width:13px;height:14px;background:url(../iCon/icon_Price.png) no-repeat;float:left;margin:4px 5px} #Top6 li a .Vanchuyen{width:10px;height:13px;background:url(../iCon/icon_Van_chuyen.png) no-repeat;float:left;margin:5px 5px} #Top6 li a .Baohanh{width:15px;height:16px;background:url(../iCon/icon_Chinh_sach.png) no-repeat;float:left;margin:0px 5px} #Top7{width:100%;height:auto;float:left;margin:7px 0px;text-align:justify;position:relative} #Top7 #iCon{width:54px;height:55px;background:url(../iCon/icon_HotPrice.png) no-repeat transparent;position:absolute} #Top7 #Content_Top7{width:99%;height:auto;min-height:55px;float:left;margin-top:7px;background:#fafafa;border:1px solid #f2f2f2} #Top7 #Content_Top7 ul li{float:left;margin:2px 5px;width:46%} #Top7 #Content_Top7 p{margin:5px 5px 12px 65px;font-size:12px;line-height:18px} #Top7 #Content_Top7 p a{color:#ff5a00;text-decoration:underline} #Top7 #Content_Top7 p span{color:#ff5a00} #Top7 #Content_Top7 ul li a{font-size:12px;margin:2px 5px;color:#ff5a00;} #Top7 #Content_Top7 a span{width:24px;height:15px;float:left;background:url(../iCon/red-star.gif) no-repeat;margin:3px 1px} #Top8{width:100%;height:auto;float:left;margin:8px 0px;font-size:12px;text-align:justify;color:#595959;font-style:italic} #LeftProduct_Content{width:100%;height:auto;float:left;margin:5px 0px;line-height:20px} .nVar_Content{width:100%;height:25px;float:left;border-bottom:1px solid #0993e3} .nVar_Content .Nvar{width:auto;height:100%;float:left;margin:0px;background:#0993e3} .nVar_Content .Nvar span{font-size:13px;color:#FFF;font-family:UTM_SwissCondensed;line-height:25px;margin:auto 7px;display:block;text-transform:uppercase} #LeftProduct_Content_Content{width:99%;height:auto;float:left;margin:10px 5px;font-size:14px;text-align:justify; line-height:25px} table{width:100% !important} table tr{min-height:30px !important} #LeftProduct_Content_Content h3{display:block;font-size:15px !important;font-family:SwissCondensedBold;font-weight:normal;margin:15px auto;color:#545454;text-transform:uppercase;} #LeftProduct_Content_Content h2{display:block;font-size:15px !important;font-family:SwissCondensedBold;font-weight:normal;margin:15px auto;color:#545454;text-transform:uppercase;} #LeftProduct_Parametter h2{display:block;font-size:15px !important;font-family:SwissCondensedBold;font-weight:normal;margin:15px auto;color:#545454;text-transform:uppercase;} #LeftProduct_Parametter h3{display:block;font-size:15px !important;font-family:SwissCondensedBold;font-weight:normal;margin:15px auto;color:#545454;text-transform:uppercase;} #LeftProduct_Parametter h2::before{content:'❖ '} #LeftProduct_Parametter h3::before{content:'❖ '} #LeftProduct_Content_Content h2::before{content:'❖ '} #LeftProduct_Content_Content h3::before{content:'❖ '} #LeftProduct_Content_Content img{max-width:100%;height:auto !important} #LeftProduct_Parametter{width:100%;height:auto;float:left;margin:5px 0px} #LeftProduct_Parametter_content{width:99%;height:auto;float:left;margin:10px 5px;font-size:12px;text-align:justify} #LeftProduct_Parametter_content img{max-width:100%;height:auto !important;margin:5px auto;display:block} #LeftProduct_Parametter #Note{width:65%;height:auto;margin:8px auto;display:block;background:url(../iCon/iconChuY.png) no-repeat left center scroll #fefde8;background-position:5px;min-height:40px;padding:5px} #LeftProduct_Parametter #Note span{font-size:12px;margin:5px 5px 5px 25px;text-align:center;display:block;color:#5c5c5c} .Tear_syn{width:23%;height:auto;float:left;margin:5px 5px;min-height:244px} .Tear_syn .img_syn{width:100%;height:180px;float:left;margin:0px;display:table;table-layout:fixed} .Tear_syn .img_syn a{text-align:center;display:table-cell;vertical-align:middle} .Tear_syn .img_syn a img{max-width:98%;max-height:98%;margin:0px} .Tear_syn .nvar_Syn{width:100%;height:auto;background:#f7f7f7;float:left;margin:2px 0px;text-align:center;border:1px dashed #e1dddd;min-height:57px} .Tear_syn .img_syn h2{font-size:13px;color:#363636;font-weight:normal;argin:5px 10px;text-transform:uppercase;font-family:UTM_SwissCondensed;text-align:center} .Tear_syn .img_syn h2 a{color:#363636;text-align:center;display:block} #RightProduct{width:22%;height:auto;margin:0px;border:1px solid #f2f2f2;float:right;} #RightProduct #Supports{width:100%;height:auto;float:left;background:#fafafa} #img_Support{width:100%;height:200px;float:left;background:url(../iCon/ho_tro_vien.png) no-repeat center center scroll transparent;} #Contact_Support{width:100%;height:auto;float:left;margin:5px 0px} #Contact_Support .Hotline{width:100%;margin:0px 0px;color:#ff5a00;font-size:22px;font-family:UTMSwiss;line-height:49px} #Contact_Support .Hotline span{width:49px;height:45px;float:left;background:url(../iCon/icon_hotline.png) no-repeat;margin:2px 10px 5px 8px} #Contact_Support .Mobile{width:100%;height:auto;float:left;margin:0px 0px;font-size:12px;color:#646464;line-height:22px;font-weight:bold} #Contact_Support .Mobile span{width:22px;height:18px;float:left;background:url(../iCon/icon_Phone.png) no-repeat;margin:2px 15px 0px 20px} #Contact_Support .Email{width:100%;height:auto;float:left;margin:0px 0px;font-size:12px;color:#646464;line-height:17px;font-weight:bold} #Contact_Support .Email span{width:17px;height:12px;float:left;background:url(../iCon/icon_Email.png) no-repeat;margin:2px 15px 0px 22px} #Contact_Support .Address{width:100%;height:auto;float:left;margin:0px 0px;font-size:12px;color:#646464;line-height:20px;font-weight:bold} #Contact_Support .Address span{width:17px;height:27px;float:left;background:url(../iCon/icon-diadiem.png) no-repeat;margin:2px 15px 0px 22px} #ListSupport{width:100%;height:auto;float:left;margin:5px 0px;background:#fafafa} #ListSupport .httt{font-size:15px;font-family:SwissCondensedBold;text-align:center;margin:5px auto;color:#ff4e00;display:block;text-transform:uppercase} #ListSupport .Line_Buttom{width:100%;height:6px;background:url(../iCon/line-buttom.png) no-repeat center center scroll transparent;float:left} #ListSupport .Tear_Supports{width:100%;height:auto;float:left;margin:5px 0px;background:url(../iCon/line-1.png) no-repeat center bottom scroll transparent;padding-bottom:10px} #ListSupport .Tear_Supports .Left_Tear_Support{width:50%;height:auto;float:left;margin:0px} #ListSupport .Tear_Supports .Left_Tear_Support .htv1{color:#393939;margin:8px 5px;text-align:right;display:block} #ListSupport .Tear_Supports .Left_Tear_Support .htv2{color:#ff3600;margin:5px;text-align:right;display:block} #ListSupport .Tear_Supports .Right_Tear_Support{width:50%;height:auto;float:left;margin:0px} #ListSupport .Tear_Supports .Right_Tear_Support .imgYahoo{width:auto;height:auto;float:left;margin:5px 5px 2px 5px;display:block} #ListSupport .Tear_Supports .Right_Tear_Support .imgSkype{width:76px;height:auto;float:left;margin:0px 3px;display:block} #MenuProduct{width:100%;height:auto;float:left;margin:7px 0px;background:#fafafa} .nVar_Left{width:100%;height:auto;margin:0px;background:url(../iCon/line-buttom.png) no-repeat bottom center scroll transparent;padding-bottom:7px} .nVar_Left span{text-align:center;display:block;font-size:15px;font-family:SwissCondensedBold;text-align:center;margin:5px auto;color:#ff4e00;text-transform:uppercase} #MenuProduct #Content_MenuProduct{width:100%;height:auto;float:left;margin:0px} #MenuProduct #Content_MenuProduct a{font-size:15px;margin:3px 7px 2px 10px;display:block;color:#595959;font-family:UTM_SwissCondensed} #ProductLienquan{width:100%;height:auto;float:left;margin:7px 0px;background:#fafafa} #ProductLienquan .Tear_1{width:90%;height:auto;margin:3px auto;display:block;float:none} #Comment{width:100%;height:auto;float:left;margin:5px 0px} #Comment .nVar_2{width:95%;height:25px;float:left;margin:0px;background:url(../iCon/comments-icon.png) no-repeat left center scroll transparent;line-height:25px;text-indent:35px;color:#4b4b4b;text-transform:uppercase;font-family:SwissCondensedBold;font-size:16px} #Sluion{width:100%;height:auto;float:left;margin:0px} #review{width:100%;height:auto;float:left;margin:0px} #review .rv1{color:#ff5b02;font-size:13px;margin:5px;display:block} #review .rv2{color:#0a9aff;font-size:12px;margin:2px 5px;display:block;font-style:italic} #ConmentFacebook{width:100%;height:auto;float:left;margin:5px 0px} .nava{width:100%;height:30px;background:#a9a9a9;float:left;margin:2px 0px;display:block;font-size:13px;color:#FFF;font-weight:normal;line-height:30px;text-transform:uppercase;font-family:UTM_SwissCondensed;text-indent:15px} .navadongbo{width:100%;height:30px;background:#000;float:left;margin:2px 0px;display:block;font-size:15px;color:#FFF;font-weight:normal;line-height:30px;text-transform:uppercase;font-family:SwissCondensedBold;text-indent:15px;text-align:center} table{text-align:justify} table, th, td{border:1px solid #dadada;} table{border-right:none;border-bottom:none} .table3{border:none;} table tr{min-height:25px;line-height:22px} table td{text-indent:10px;border:1px solid #dadada;} .table3 tr:first-child{text-align:center;text-transform:uppercase;line-height:25px} .table3 td{width:32%;border:none !important;float:left;margin:3px} .table2{border:none} .table2 td{width:32%;border:none !important;float:left;margin:3px} .table4{border:none} .table4 td{width:32%;border:none !important;float:left;margin:3px} .table5{border:none} .table5 td{width:32%;border:none !important;float:left;margin:3px} table td{border-top:none;border-left:none} #inaxchinhhang{width:100px;height:91px;background-size:100%;position:absolute;background:url(../iCon/inaxchinhhang.png) no-repeat left center scroll transparent;right:4px;top:4px;opacity:0.8;-webkit-transform:rotate(40deg);} #Tech{width:100%;height:auto;float:left;margin:5px 0px} #Tech .Tear_tech{width:98%;float:left;height:auto;min-height:35px;margin:5px 0px;border-right:1px solid #f3f3f3} #Tech .Tear_tech .imagetech{float:left;width:100px;min-height:42px;margin-bottom:5px;margin-right:15px} #Tech .Tear_tech .Destech{margin:1px 5px 3px 10px;display:block;color:#000;} #Tech .Tear_tech p{font-size:11px;color:#767677;font-style:italic;margin:2px 5px 2px 10px;display:block} #Tech .Tear_tech p a{color:#176388;font-weight:bold} .tinhnang{font-size:15px;color:#3d3d3d;font-family:SwissCondensedBold;margin:5px 5px 5px 2px;display:block;text-transform:uppercase} .nVar_Equa{width:100%;height:40px;float:left;margin:2px 0px;background:url(../iCon/icon-calcua.png) no-repeat left center scroll transparent} .nVar_Equa span{display:block;color:#383838;text-transform:uppercase;margin:auto 10px auto 50px;line-height:40px;font-family:SwissCondensedBold;font-size:17px} #LeftProduct_Parametter iframe{width:100%;min-height:600px;float:left;margin:0px;background:#FFF} #Totochinhhang{width:80px;height:80px;position:absolute;background:url(../iCon/totochinhhang.png) no-repeat left center scroll transparent;right:15%;bottom:39px;opacity:0.7;background-size:100%} #ProductLienquan .spdb{width:98%;height:auto;margin:5px auto} .Tabs{width:100%;height:auto;min-height:20px;padding:3px 0px;display:inline-block;line-height:20px} .Tabs span{background-color:#222222;padding:5px 9px;color:#fff;display:block;text-transform:uppercase;line-height:10px;float:left;margin:3px} .Tabs a{display:block;float:left;border:1px solid #ededed;margin-left:4px;line-height:10px;color:#4e4e4e !important;padding:5px 8px;margin:2px;font-size:11px;display:inline-block;} .Tabs h3{margin:0px; font-weight:normal} .Tabs h2{margin:0px; font-weight:normal} .Tabs a:hover{background:#222222;color:#FFF !important} .Box_Manufactures{width:100%;height:auto;float:left;margin:5px 0px} .Box_Manufactures img{width:auto;max-width:90%;height:auto;margin:2px auto;display:block} .Box_Manufactures h1{font-size:16px;font-weight:normal;color:#4e4e4e;margin:5px auto;text-align:center;text-transform:uppercase;font-family:UTMPenumbra} #LeftProduct .ListProduct .Tear_1{width:200px} #SalePop{width:100%; position:absolute; bottom:5px; left:0px; text-align:center } #SalePop span{ color:#F00; font-size:14px; line-height:22px; padding:4px 7px; text-align:center; display:inline-block; border:1px dashed #F00} .nVar_Product{ width:100%; height:auto; float:left; background:#f9f9f9; margin:0px} .nVar_Product a{color:#3e3e3e; font-size:12px; display:inline-block; line-height:34px; margin: auto 5px} .nVar_Product h1{color:#3e3e3e; font-size:12px; display:inline-block; margin: 10px 5px; font-weight:normal} .nVar_Product ol{width:auto; float:left; margin:0; padding:0} .nVar_Product ol li{display:inline-block; margin:0px 0px} .nVar_Product i{background: url(../iCon/beacon_sprite.png) no-repeat 0 -686px; font-size: 0; margin: 0px 2px; padding: 12px 2px;} .nVar_Product div span{ color:#f5f5f5; opacity:0.2} @charset "utf-8";@media screen and (max-width:768px){#Contents{width:100%;overflow:hidden} #ProductDetail{width:100%;height:auto;float:left;margin:5px 0px} #Left_ProductDetail{width:40%} #Right_ProductDetail{width:56%} #ProductInvolve{width:100%;margin:5px 0px !important} #Top2 #Left_Top2 span .PriceSale{font-size:16px} #Right_Top2 .bh2{font-size:16px} #nVar_ContentProduct .nVar a{margin:5px;font-size:11px} #nVar_ContentProduct .nVar a:last-child{display:none} #Content_ProductInvolve .Tear_pd{width:180px;float:left;margin:2px} #Content_ProductInvolve .Tear_1{width:31%;float:left;margin:5px} #Contents #HeadShort #Content_HeadShort{height:170px;background-size:100% !important} #Contents #HeadShort #nvar{top:15%} #ListProduct h2{font-size:18px} #LeftProduct{width:100%;margin:0px} #Top3{height:auto} #Top3 #Left_Top3 span .Price_Sale{font-size:15px} #Top3 #Right_Top3 .sp2{font-size:14px} #Left_Top_Headder:hover #Menu{margin-top:-33px} #LeftProduct #Left_ContentProduct #Top_Product #List_Product .Tear_pl{width:22.8%} #RightProduct{width:100%} #Support{display:none} #MenuProduct{display:none} #ProductLienquan .Tear_1{width:23%;float:left} #Contents #HeadShort #Left_HeadShort{width:100%;margin:0px} #Contents #HeadShort #Right_HeadShort{width:100%;margin:0px} .Tear_1{width:31%} } @media screen and (max-width:488px){#Content_Product{float:none;width:95%;height:100%;margin:5px auto} #Left_ProductDetail{width:100%;margin-bottom:15px} #Right_ProductDetail{width:100%} #ProductInvolve{display:none} #Top2 #Left_Top2 span .PriceSale{font-size:16px} #Contents #HeadShort #Content_HeadShort{height:80px} .ListProduct .nVar2{height:auto} .ListProduct .Names{position:relative} .Tear_1{width:46%} #Contents #Box_Name #Rigt_Box_Name{display:none} #LeftProduct #Left_ContentProduct{width:100%;margin:0px} #Right_ContentProduct{width:100%;margin:7px 0px} #LeftProduct_Content_Content{margin:5px 0px} #LeftProduct_Parametter{margin:5px 0px} #LeftProduct_Parametter_content{margin:5px 0px} #Right_ContentProduct #Top1 h1{text-align:center} #ProductLienquan .Tear_1{width:48%;float:left} #RightProduct #Supports{display:none} #MenuProduct{display:none} #LeftProduct_Parametter #Note{width:100%;height:auto;float:left;margin:0px} #LeftProduct .ListProduct .Tear_1{width:46%} #LeftProduct_Content_Content{font-size:14px} } @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(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: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-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: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @charset "utf-8"; /* CSS Document */ #Contact{ width:100%; height:auto; margin:10px auto; float:left; background:#FFF} #Left_Contact{ width:50%; height:auto; float:left; margin:0px} #Content_LeftContact{ width:100%; height:auto; float:left; margin:10px 0px 0px 0px;border:1px solid #e2e2e2; border-radius:5px} #Left_Contact .Logo{ width:auto; height:auto; margin:2px auto; display:block; padding-top:20px} #Left_Contact h2{ font-size:15px; color:#000; text-transform:uppercase; margin:10px auto; text-align:center} #Left_Contact p{ font-size:12px; margin:7px 10px} #Left_Contact p span{ font-weight:bold} .Nvar_Contact{ width:auto; height:20px; margin-left:40px; background-color:#fff; position:absolute; float:left} .Nvar_Contact span{ color:#000; font-weight:bold; line-height:20px; margin: auto 5px; text-transform:uppercase} #Right_Contact{ width:48%; height:auto; float:left; margin:0px 0px 0px 10px} #Content_RightContact{width:100%; height:auto; float:left; margin:10px 0px 0px 0px;border:1px solid #e2e2e2; border-radius:5px} .Tear_Contact:first-child{ margin-top:15px} .Tear_Contact:last-child{ height:auto !important; background:none} .Tear_Contact{ width:100%; height:auto; float:left; margin:5px auto; background:url(../Icon/line_Menu.png) repeat-x left bottom transparent} .Left_TearContact{ width:25%; height:100%; float: left; background:url(../Icon/line_heigh_Menu.png) repeat-y left right transparent} .Left_TearContact span{ font-size:12px; color:#4c4b4b; line-height:25px; float:right; margin-right:10px; display:block} .Right_TearContact{ width:70%; height:auto; float:left; margin:0px } .Right_TearContact input{width:90%; height:25px; border:none; margin:2px 5px; border:1px solid #e2e2e2; font-size:11px; float:left; text-indent:20px} .Right_TearContact textarea{width:90%; height:100%; border:none; margin:2px 5px; border:1px solid #e2e2e2; float:left; text-indent:20px} .Tear_Contact:last-child input{ height:70px} .Tear_Contact button{ margin:0px auto; display:block;padding:5px 7px; background:#FFF; border:1px solid #f0eeee} .note{ color:#ff4800; text-align:center; margin:5px} .HeadShort1{ font-size:12px; text-indent:15px; font-weight:bold; width:100%; margin:5px auto} .Description1{ width:100%; height:auto; margin:5px auto ;margin:5px auto} .btnSend{ } @media screen and (max-width: 480px) { #Left_Contact{width:100%; margin:0px; padding:0px} #Right_Contact{width:100%; margin:10px 0px; padding:0px} } .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination > li { display: inline; } .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.428571429; text-decoration: none; background-color: #ffffff; border: 1px solid #dddddd; } .pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .pagination > li:last-child > a, .pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { background-color: #eeeeee; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 2; color: #ffffff; cursor: default; background-color: #428bca; border-color: #428bca; } .pagination > .disabled > span, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { color: #999999; cursor: not-allowed; background-color: #ffffff; border-color: #dddddd; } .pagination-lg > li > a, .pagination-lg > li > span { padding: 10px 16px; font-size: 18px; } .pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span { border-bottom-left-radius: 6px; border-top-left-radius: 6px; } .pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .pagination-sm > li > a, .pagination-sm > li > span { padding: 5px 10px; font-size: 12px; } .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .pager { padding-left: 0; margin: 20px 0; text-align: center; list-style: none; } .pager:before, .pager:after { display: table; content: " "; } .pager:after { clear: both; } .pager:before, .pager:after { display: table; content: " "; } .pager:after { clear: both; } .pager li { display: inline; } .pager li > a, .pager li > span { display: inline-block; padding: 5px 14px; background-color: #ffffff; border: 1px solid #dddddd; border-radius: 15px; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; background-color: #eeeeee; } .pager .next > a, .pager .next > span { float: right; } .pager .previous > a, .pager .previous > span { float: left; } .pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span { color: #999999; cursor: not-allowed; background-color: #ffffff; }