/* * 我们的自定义样式 * @Author: iceStone * @Date: 2015-12-12 10:56:34 * @Last Modified by: iceStone * @Last Modified time: 2015-12-15 17:23:08 */ /** * 1.样式都是通过id去限定 * 2.尽可能使用直接子代选择器 */ /** * 公共样式 */ body{ font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; } @font-face { font-family: 'itcast'; src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff'); } /** * 头部区域 */ #main_ad > .container-fluid > .row > div { min-height: 0; } /** * 网站导航 */ /** * 关于我们 */ #gywm { background-color: #ffffff; padding: 25px 0; text-align: center; box-shadow: 0px 0px 1px #c8c8c8; } #gywm > .container > .row { margin: 0 auto; } #gywm > .container > .row > div { display：inline-block; } #gywm > .container > .row > .tupian { height: 100%; } #gywm > .container > .row > .jianjie { } /** * 精品课程 */ #jpkc { background-color: #ffffff; text-align: center; box-shadow: 0px 0px 1px #c8c8c8; } #jpkc > .container > .row { margin: 0 auto; } #jpkc > .container > .row > div { display：inline-block; } #jpkc > .container > .row > .tupian { height: 100%; } #jpkc > .container > .row > .jianjie { } /** * 产品展示 */ #fycp { background-color: #ffffff;} #cpzs{ background-color: #ffffff; padding: 0px 0; text-align: center; box-shadow: 0px 0px 1px #c8c8c8; } /** * 最新案例 */ #fyal { background-color: #1e51ad; padding: 0px 0; text-align: center; box-shadow:0px 0px 3px 0px #c8c8c8 inset; } #zxal { background-color: #f8f8f8; padding: 25px 0; text-align: center; box-shadow: 0px 0px 1px #c8c8c8; } @media (min-width: 768px) .bs-example { margin-right: 0; margin-left: 0; background-color: #fff; border-color: #ddd; border-width: 1px; border-radius: 4px 4px 0 0; -webkit-box-shadow: none; box-shadow: none; } .bs-example { position: relative; padding: 45px 15px 15px; margin: 0 -15px 15px; padding-top: 0px; } /** * 新闻动态 */ #xwdt { background-color: #ffffff; padding: 25px 0; text-align: left; } #xwdt .container .row .col-md-4 .block { border: 1px solid #ADADAD; padding: 0px; box-shadow: 10px 5px 10px #ccc; padding: 0px; background-color: #FFFFFF; } /** * 下面是当屏幕小于768时候的定义 */ @media (max-width: 768px) { #news .nav-stacked > li { float: left; } } /** * 产品内容页 */ #cpnry { padding: 25px 0; } #cpfl > a { line-height: 30px; } /** * 脚注区域 */ #footer { } #footer { } #footer > .li > a { color: #555; } #footera > li > a { color: #555; } /** * 自定义导航css样式 */ .navbar { border: 0; } .navbar-zdydaohang { background-color: #d82231; border-color: 0; text-align: center; font-size: 15px; } .navbar-zdydaohang .navbar-brand { color: #9d9d9d; } .navbar-zdydaohang .navbar-brand:hover, .navbar-zdydaohang .navbar-brand:focus { color: #fff; background-color: transparent; } .navbar-zdydaohang .navbar-text { color: #9d9d9d; } .navbar-zdydaohang .navbar-nav > li > a { color: #FFFFFF; line-height: 62px; } .navbar-zdydaohang .navbar-nav > li > a:hover, .navbar-zdydaohang .navbar-nav > li > a:focus { color: #fff; background-color: transparent; } .navbar-zdydaohang .navbar-nav > .active > a, .navbar-zdydaohang .navbar-nav > .active > a:hover, .navbar-zdydaohang .navbar-nav > .active > a:focus { color: #FFFFFF; background-color: 0; } .navbar-zdydaohang .navbar-nav > .disabled > a, .navbar-zdydaohang .navbar-nav > .disabled > a:hover, .navbar-zdydaohang .navbar-nav > .disabled > a:focus { color: #444; background-color: transparent; } .navbar-zdydaohang .navbar-toggle { border-color: #333; } .navbar-zdydaohang .navbar-toggle:hover, .navbar-zdydaohang .navbar-toggle:focus { background-color: #333; } .navbar-zdydaohang .navbar-toggle .icon-bar { background-color: #fff; } .navbar-zdydaohang .navbar-collapse, .navbar-zdydaohang .navbar-form { } .navbar-zdydaohang .navbar-nav > .open > a, .navbar-zdydaohang .navbar-nav > .open > a:hover, .navbar-zdydaohang .navbar-nav > .open > a:focus { color: #fff; background-color: #080808; } @media (max-width: 767px) { .navbar-zdydaohang .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #080808; } .navbar-zdydaohang .navbar-nav .open .dropdown-menu .divider { background-color: #080808; } .navbar-zdydaohang .navbar-nav .open .dropdown-menu > li > a { color: #101010; } .navbar-zdydaohang .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; background-color: transparent; } .navbar-zdydaohang .navbar-nav .open .dropdown-menu > .active > a, .navbar-zdydaohang .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-zdydaohang .navbar-nav .open .dropdown-menu > .active > a:focus { color: #fff; background-color: #080808; } .navbar-zdydaohang .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-zdydaohang .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-zdydaohang .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #444; background-color: transparent; } } .navbar-zdydaohang .navbar-link { color: #9d9d9d; } .navbar-zdydaohang .navbar-link:hover { color: #fff; } .navbar-zdydaohang .btn-link { color: #9d9d9d; } .navbar-zdydaohang .btn-link:hover, .navbar-zdydaohang .btn-link:focus { color: #fff; } .navbar-zdydaohang .btn-link[disabled]:hover, fieldset[disabled] .navbar-zdydaohang .btn-link:hover, .navbar-zdydaohang .btn-link[disabled]:focus, fieldset[disabled] .navbar-zdydaohang .btn-link:focus { color: #444; } .navbar-zdyddd { float: left; height: 50px; padding: 0px 0px; font-size: 18px; line-height: 20px; } .navbar-zdyddd:hover, .navbar-zdyddd:focus { text-decoration: none; } .navbar-zdyddd > img { display: block; } @media (max-width: 768px) { #myCarousel { margin-top: 135px; } } @media (min-width: 768px) { #myCarousel { margin-top: 92px; } } /** * 头部区域 */ .topbar > .container-fluid { } .header > a { color: #FFFFFF; } #header { border-bottom: 0px solid #fcdb6a; } #header > .topbar { height: 120px; line-height: 120px; } #header .mobile-link { font-size: 13px; color: #888; } #header .mobile-link:hover { text-decoration: none; } #header >.topbar >.container>.row > div{ height: 45px; font-size: 13px; color: #888; } #header > .topbar > .container > .row > div + div { border-left: 1px solid #777777; } /** * 自定义导航css样式 */ .navbar-itcast { background-color: #1e51ad; border-color: #BBB6B6; height: 40px; margin-bottom: 0px; width: 100%; top: 0px; } .navbar-itcast .navbar-brand { color: #ffffff; line-height: 50px; } .navbar-itcast .navbar-brand:hover, .navbar-itcast .navbar-brand:focus { color: #5e5e5e; background-color: transparent; line-height: 50px; } .navbar-itcast .navbar-text { color: #777; } .navbar-itcast .navbar-nav > li > a { color: #ffffff; line-height: 62px; font-size: 15px; } .navbar-itcast .navbar-nav > li > a:hover, .navbar-itcast .navbar-nav > li > a:focus { color: #333; background-color: transparent; } .navbar-itcast .navbar-nav > .active > a, .navbar-itcast .navbar-nav > .active > a:hover, .navbar-itcast .navbar-nav > .active > a:focus { color: #; background-color: 0; om: inherit; } .navbar-itcast .navbar-nav > .disabled > a, .navbar-itcast .navbar-nav > .disabled > a:hover, .navbar-itcast .navbar-nav > .disabled > a:focus { color: #ccc; background-color: transparent; } .navbar-itcast .navbar-toggle { border-color: #ddd; margin-top: 9px; margin-bottom: 0px; height:40px; } .navbar-itcast .navbar-toggle:hover, .navbar-itcast .navbar-toggle:focus { background-color: #ddd; } .navbar-itcast .navbar-toggle .icon-bar { background-color: #888; } .navbar-itcast .navbar-collapse, .navbar-itcast .navbar-form { border-color: #e7e7e7; } .navbar-itcast .navbar-nav > .open > a, .navbar-itcast .navbar-nav > .open > a:hover, .navbar-itcast .navbar-nav > .open > a:focus { color: #555; background-color: #e7e7e7; } @media (max-width: 767px) { .navbar-itcast .navbar-nav .open .dropdown-menu > li > a { color: #777; } .navbar-itcast .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-itcast .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; background-color: transparent; } .navbar-itcast .navbar-nav .open .dropdown-menu > .active > a, .navbar-itcast .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-itcast .navbar-nav .open .dropdown-menu > .active > a:focus { color: #555; background-color: #e7e7e7; } .navbar-itcast .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-itcast .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-itcast .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #ccc; background-color: transparent; } } .navbar-itcast .navbar-link { color: #777; } .navbar-itcast .navbar-link:hover { color: #333; } .navbar-itcast .btn-link { color: #777; } .navbar-itcast .btn-link:hover, .navbar-itcast .btn-link:focus { color: #333; } .navbar-itcast .btn-link[disabled]:hover, fieldset[disabled] .navbar-itcast .btn-link:hover, .navbar-itcast .btn-link[disabled]:focus, fieldset[disabled] .navbar-itcast .btn-link:focus { color: #ccc; } /** * 动画区域 */ body,html,p,h1,h2,h3,h4,h5,h6,dl,dd,dt,ul,li{ padding:0; margin:0; } /* img{display:block;}*/ body { font:14px/1.5 Arial,'Microsoft Yahei',\5FAE\8F6F\96C5\9ED1; color:#666; background:#fff; } a.disabled { cursor: default; opacity: 0.5; } /*img{display:block;border:0;}*/ dl,dd,dt,ul,li{ list-style:none; } a { color: #666; text-decoration: none; } a:hover { color: #333; } h2.title{ font-size: 24px; color: #000; text-align: center; padding: 30px 0 0px 0; } /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{ display:block } .he{position:fixed;top:0;left:0px;width:100%;height:110px;background:#fff;z-index:99;border-bottom:1px solid #ccc} .main,.mainbox{width:1120px;overflow:hidden;margin:0 auto;} .scrol-page{margin:0 auto;} .content{width:1120px;margin:auto;} nav{position:absolute;right:0px;top:0px;width:auto;line-height:60px;color:#000;font-size:14px} .logo{padding-left:80px;background:url(/common/logo.png) no-repeat center left;font-size:35px;display:inline-block;line-height:59px; color:#fff; width:237px; height:59px; padding-top:45px; } #product,#case,#solution,#order,#contact,#about{padding-top:80px;padding-bottom:50px} .linkbtn{text-align:center;margin:50px 0;overflow:hidden;clear:both} .linkbtn a{ display: inline-block; height: 40px; border: 3px solid #717171; text-align: center; padding: 0 50px; line-height: 38px; margin: 0 10px; transition:.3s ease-in; -webkit-transition:.3s ease-in; -o-transition:.3s ease-in; -ms-transition:.3s ease-in; -moz-transition:.3s ease-in; text-align:center; display:inline-block; } .case p{padding:0 10px} .linkbtn a.disable{border:3px solid gray;} .linkbtn a:hover{ background:#f29601; border-color:#f29601; color:#fff; } .linkbtn a.disabled:hover{ border:3px solid gray; background:#fff !important; color:#717171; } #menuList{ display: none; position: absolute; right: 10px; top: 5px; font-size: 20px; color: #000; } #home .mainbox{position:relative} #case p,#product p{text-align:center;font-size:15px} #product p,#product h5{text-shadow: 0px 1px 2px #000;color:#fff} #home .mainbox>img{position:absolute;left:10px;} .case>h3 ,.news>h3,h3.title{ font-size: 35px; color: #000; text-align: center; padding: 20px 0 20px 0; font-weight:normal } .sidebar{position:fixed;width:100px;top:0px;right:0px;bottom:0px;} .case ul{visibility: visible; -webkit-perspective: 2000; position: relative; -moz-perspective: 2000; -ms-perspective: 2000; perspective: 2000; -ms-transform: perspective(2000px); -moz-transform: perspective(2000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;} .case li,.news li{ width:25%; margin:20px 0; float:left; box-sizing:border-box; position: relative; transform-style: preserve-3d; -webkit-perspective: 2000; transform-origin: center; visibility: visible; } .case li img { max-width:100%; margin: 0 auto; } .fwhite{color:#fff !important;} .case li .imgs{height:11pc;overflow:hidden;display:block;border: 1px solid #ccc; box-shadow: 0 1px 2px #c5c5c5;} .case li>div{ transform-style: preserve-3d; backface-visibility: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border: 1px solid #ccc; box-shadow: 0 1px 2px #c5c5c5; margin:0 19px; max-height: 11pc; min-height: 11pc; } .case li h2{ background: #009fe9; color: #fff; backface-visibility: hidden; box-shadow: 0 1px 2px #c5c5c5; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); z-index: -1; text-align: center; position: absolute; top: 0px; overflow:hidden; left: 20px; right: 20px; line-height:11pc; max-height: 11pc; min-height: 11pc; } .case li:hover>div{background:#fff; transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -o-transform:rotateY(180deg); -ms-transform:rotateY(180deg); } .case li:hover img { } .case li:hover h2 a{color:#fff;padding:0 10px;} .case li:hover h2{ transform:rotateY(0deg); max-height: 11pc; min-height: 11pc; -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); -o-transform:rotateY(0deg); -ms-transform:rotateY(0deg); z-index:1; } .news li h4{text-align:center;margin-bottom:10px;padding-bottom:10px;font-size:15px;border-bottom:1px solid #ccc;} .news li p{line-height:20px;font-size:12px;margin:5px; max-height:100px;overflow:hidden; } .news li p:first-child{text-indent:2em} .news li a.more{ display:inline-block; padding:0 15px; border:1px solid #555; height:28px; line-height:28px; font-size:12px; background:#fff; text-align:center; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .news li a.more:hover{ color:#fff; text-decoration:none; border:1px solid #c11e2b; background:#c11e2b; } .pages{text-align: center;clear:both; display:none} .view-tenth { position: relative; overflow: hidden; display:block; max-height: 11pc; min-height: 11pc; text-align: center; } .view-tenth img { -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transform: scaleY(1); transform: scaleY(1); -ms-transform: scaleY(1); display:block; max-width:100%; } .view-tenth a{display:block;} input[type="text"], input[type="password"] { height: 30px; width:100%; box-sizing:border-box; line-height:30px; font-size: 14px; color: #787C7F; margin:0 auto } textarea{width:100%;box-sizing:border-box;height:150px;} .viewMain { padding: 0 10px; } .viewMain, .view p { font-size: 14px; color: #000; text-align: left; } .bgblack{background:#000;} .icons{overflow:hidden;} .m20{clear:both;margin:20px 0; text-align:center;} .icons h3{color:#fff; text-align:center;margin:20px 0;} .icons p{color:#fff;font-size:12px;margin-top:20px;text-indent:2em; overflow: hidden; height:70px;} .map{padding-top:10px} #home .title{text-align:right;font-size:60px;font-weight:bold;padding-right:10px;} .icons i{color:#fff;font-size:60px;margin:0 auto;display:block;width:60px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; border-radius:30px; } .icons li{ float:left;width:25%;padding:20px; box-sizing:border-box; } .news{padding-top:20px !important;} .icons li:hover i{ } .news ul{overflow:hidden} section{padding:0px 0} .views{padding-left:10px;padding-right:10px;padding-top:0px !important;} .moreBtn{ clear:both; margin:0 auto; border:3px solid #f5a30f;; background:#1e51ad; height:45px; line-height:45px; padding:0 4%; text-align:center; display:inline-block; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; color:#fff; } .moreBtn:hover{ color:#c11e2b; border:3px solid #c11e2b; background:none; text-decoration:none; padding:0 8%; } .act{ background-position: 50% 50%; background-attachment: fixed; background-size: cover; } .txtshadow{text-shadow:0px 1px 2px #000;} .icons li{} #dituContent{position:relative;} #dituContent:before{ content:''; position:absolute; top:0; left:0;right:0;bottom:0; background:rgba(255,255,255,0); z-index:999; } .memo:after { overflow: hidden; line-height: 100%; position: absolute; bottom: -130px; right: -75px; content: '”'; font-size: 200px; color: #f1f2f2; font-weight: bold; } #menuList{display:none;position:fixed;top:15px;right:10px;font-size:30px;} .openNav header{right:0px} .openNav #menuList{right:80px;-webkit-transition: 0.2s ease-in 0s; -moz-transition: 0.2s ease-in 0s; -ms-transition: 0.1s ease-in 0s; -o-transition: 0.2s ease-in 0s;} .openNav.pagemain{ margin-right: 70px; margin-left: -70px; } .pagemain{ margin-left:0px; margin-right:0px; -webkit-transition: 0.2s ease-in 0s; -moz-transition: 0.2s ease-in 0s; -ms-transition: 0.1s ease-in 0s; -o-transition: 0.2s ease-in 0s; } .news ul,.case ul{padding: 0 10px} #solution{padding-top:220px;padding-bottom:100px;} #about{padding-top:220px;} @media(max-width:1120px){ .mainbox,.main{width:100%;padding:0 } } @media(max-width:960px){ section{padding-top:0px;} nav,.logo,nav>a,.he{line-height:55px;height:55px; } .logo{font-size:18px;} nav>a{width:auto;padding:0px 20px;} body{padding-top:0px} #product,#case,#solution,#order,#contact,#about{padding-top:0px;padding-bottom:0px} } @media (max-width: 767px) { .banner .ms{font-size:14px;} .slidecontent{padding:40px 0;} #home .title{font-size:30px} #about.right{display:none} #about .title,#order .title{text-align:center} #about .right{display:none} #menuList{display:block;} .mainbox,.main{width:100%;} .news li,.case li,.icons li{width:50%} } @media (max-width:600px){ #product,#case,#solution,#order,#contact,#about{padding-top:20px;padding-bottom:20px} } @media (max-width:480px){ .moreBtn{display: block;margin: 0 10px} h2.title{font-size:20px;line-height:30px;padding:20px 0} nav{position:absolute;top:0px;bottom:0px;right:0px;width:100%;background:#fff;} nav a{display:block;} .icons li,.case li,.news li{width: auto; float: none;} .icons li{opacity:1 !important} .slidecontent{height:120px} .banner .ms{font-size:14px;line-height:20px;height:60px;overflow:hidden} section h3.title{font-size:28px;line-height:30px;padding:0px 10px} section{overflow:hidden;padding:0px 0;} } /** * 动画区域结束 手机版导航栏nav 宽度和高度 */ .tpic{margin:0 auto; display:block;max-width:100%;} /** * 导航栏滚动样式 */ #case.active h3.title,#fycp.active h3.title,#case.active .infoText,#fycp.active .infoText{ -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation: fadeInUp 1s ; animation: fadeInUp 1s ; } #fycp.active ul li{ -webkit-animation: bounceInRight 1s; animation:bounceInRight 1s; } .title{padding-left:10px;padding-right:10px} .case ul,.news ul{padding-top:20px;} .tpic{margin:0 auto; display:block;max-width:100%;} h2 a{display:block;} a { color: #000000; } .nav-pills>li>a { border-radius: 4px; line-height: 0px; } /** * 左侧导航颜色修改动样式 */ .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; color: #000; background-color: #0059a9; border-color: #CBCBCC; border-bottom:0px; } /** * 左侧导航颜色修改动样式 */ /** * 头部导航悬停颜色修改动样式 */ .nav>li>a:hover, .nav>li>a:focus , .nav>li>a:active { padding: 10px 14px; color: #ffffff; line-height: 20px; display: block; background-color: #8dc420; text-align: center; } /** * 头部导航文字颜色修改动样式 */ .nav>li>a { position: relative; display: block; padding: 10px 14px; line-height: 20px; color: #333; text-align: center; /*border-left: 1px solid #ffffff;*/ font-weight: 100; display: block; } /** * 头部导航悬停颜色修改动样式 */ /** * 导航样式式 */ .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #333; } .navbar-inverse .navbar-toggle { border-color: #333; } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: #12a4ef; background-image: none; border: 1px solid#FFFFFF; border-radius: 4px; } input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button, select { text-transform: none; } button { overflow: visible; } button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; } /** * 导航样式式 */ /** * 胶囊导航手机导航样式式 */ @media (max-device-width: 480px) and (orientation: landscape) { .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 200px; } } .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: 0px; margin-left: 0px; font-weight:bold; font-size: 15px; } @media (max-width: 480px) { .nav>li>a { position: relative; display: block; padding: 10px 20px; line-height: 30px; color: #ffffff; /*background-color: #12a4ef;*/ } .nav>li>a:hover, .nav>li>a:focus { text-decoration: none; background-color: #8dc420; padding: 10px 20px; color: #fff; line-height: 30px; } .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: -15px; margin-left: -15px; /* background-color: #12a4ef;*/ font-weight: bold; font-size: 15px; } .navbar { margin-bottom: 0; border: 0; /*background-color: #12a4ef;*/ } .navbar-zdyddd > img { display: block; height: 46px; margin-right: -15px; margin-left: 0px; } } /** * 胶囊导航手机导航样式式 */ /** * 手机导航样三个小横条 */ .nav-pills .navbar-toggle .icon-bar { background-color: #fff; } .navbar-toggle .icon-bar+.icon-bar { margin-top: 4px; } .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; } #fwlc { padding: 15px; } #fwlc .container .row .col-md-12 { border: 1px solid #ADADAD; padding: 0px; box-shadow: 50px 5px 50px #ccc; padding-bottom: 15px; } #yqlj { padding: 20px; } .nav > li:hover .dropdown-menu {display: block;} #leftdh > ul > li >a:hover { height: 30px; width: 221px; display: block; background: #12a4ef; border-radius: 15px; color: #ffffff; text-decoration: none; } #leftdh { } @media (max-width: 480px) { #leftdh > li >a:hover { display: block; background-image: url(/146/img/bjhover.gif); width: 210px; height: 50px; } #leftdh > li >a { display: block; background-image: url(/146/img/hsbjt.gif); width: 210px; height: 50px; } #leftdh { background: #ffffff; width: 380px; } } /** * 首页左侧导航样式式 */ #xwdt .container .row .col-md-3 .text-center > li >a:hover { display: block; background: #0f60ed; } /** * 首页左侧导航样式式 */ /** * 首页折叠效果 */ .panel-default>.panel-heading { color: #fff; background-color: #013895; border-color: #DA0808; } /** * 首页折叠效果 */ /** * 图片样式插件 */ @charset "utf-8"; .he_border1{background:#fe7253;width:360px;height:240px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border1 .he_border1_img{display:block;width:100%;padding:0;margin:0;position:relative;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;opacity:1;overflow:hidden} .he_border1:hover .he_border1_img{position:absolute;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);opacity:.6} .he_border1 .he_border1_caption{color:#fff;padding:0;margin:0;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border1 .he_border1_caption::before,.he_border1 .he_border1_caption::after{position:absolute;content:'';opacity:0;-webkit-transition:opacity 0.4s,-webkit-transform .4s;-moz-transition:opacity 0.4s,-moz-transform .4s;-o-transition:opacity 0.4s,-o-transform .4s;transition:opacity 0.4s,transform .4s} .he_border1 .he_border1_caption::before{top:8%;right:10%;bottom:8%;left:10%;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-moz-transform:scale(0,1);-o-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0} .he_border1 .he_border1_caption::after{top:8%;right:10%;bottom:8%;left:10%;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-moz-transform:scale(1,0);-o-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0} .he_border1:hover .he_border1_caption::before,.he_border1:hover .he_border1_caption::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} .he_border1 .he_border1_caption,.he_border1 .he_border1_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden; z-index:1000} .he_border1 .he_border1_caption_h{font-size:1.3em;font-weight:700;text-align:center;width:80%;position:absolute;top:20%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:1} .he_border1 .he_border1_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:60%;left:10%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;opacity:0} .he_border1:hover .he_border1_caption_p{top:45%;opacity:1} .he_border2{background:#3c0f14;width:100%;height:136px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border2 .he_border2_img{display:block;width:100%;padding:0;margin:0;position:relative;opacity:1;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border2:hover .he_border2_img{position:absolute;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);opacity:.6} .he_border2 .he_border2_caption{color:#fff;padding:0;margin:0;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border2 .he_border2_caption::before,.he_border2 .he_border2_caption::after{position:absolute;content:'';opacity:0;-webkit-transition:opacity 0.4s,-webkit-transform .4s;-moz-transition:opacity 0.4s,-moz-transform .4s;-o-transition:opacity 0.4s,-o-transform .4s;transition:opacity 0.4s,transform .4s} .he_border2 .he_border2_caption::before{top:14%;right:5%;bottom:14%;left:5%;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-moz-transform:scale(0,1);-o-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0} .he_border2 .he_border2_caption::after{top:8%;right:10%;bottom:8%;left:10%;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-moz-transform:scale(1,0);-o-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0} .he_border2:hover .he_border2_caption::before,.he_border2:hover .he_border2_caption::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} .he_border2 .he_border2_caption,.he_border2 .he_border2_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden; z-index:1000} .he_border2 .he_border2_caption_h{font-size:1.3em;font-weight:700;text-align:center;width:80%;position:absolute;top:20%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:1} .he_border2 .he_border2_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:60%;left:10%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;opacity:0} .he_border2:hover .he_border2_caption_p{top:45%;opacity:1} /*.he_border3{background:#fe7253;width:360px;height:240px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border3 .he_border3_img{display:block;width:100%;padding:0;margin:0;position:relative;opacity:1;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border3:hover .he_border3_img{position:absolute;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);opacity:.6} .he_border3 .he_border3_caption{color:#fff;padding:0;margin:0;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border3 .he_border3_caption::before,.he_border3 .he_border3_caption::after{position:absolute;content:'';opacity:0;-webkit-transition:opacity 0.4s,-webkit-transform .4s;-moz-transition:opacity 0.4s,-moz-transform .4s;-o-transition:opacity 0.4s,-o-transform .4s;transition:opacity 0.4s,transform .4s} .he_border3 .he_border3_caption::before{top:14%;right:25%;bottom:14%;left:25%;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-moz-transform:scale(0,1);-o-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}.he_border3 .he_border3_caption::after{top:25%;right:10%;bottom:25%;left:10%;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-moz-transform:scale(1,0);-o-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0} .he_border3:hover .he_border3_caption::before,.he_border3:hover .he_border3_caption::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} .he_border3 .he_border3_caption,.he_border3 .he_border3_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden; z-index:1000} .he_border3 .he_border3_caption_h{font-size:1.3em;font-weight:700;text-align:center;width:80%;position:absolute;top:20%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:1} .he_border3 .he_border3_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:60%;left:10%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;opacity:0} .he_border3:hover .he_border3_caption_p{top:45%;opacity:1}*/ .he_3DFlipX{display:block;width:360px;height:240px;overflow:hidden;padding:0;margin:0;border:0;position:relative;box-sizing:border-box;-webkit-perspective:1700px;-moz-perspective:1700px;perspective:1700px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;perspective-origin:50% 50%} .he_3DFlipX_inner{width:100%;height:100%;padding:0;margin:0;position:relative;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d} .he_3DFlipX_inner div.he_3DFlipX_img{backface-visibility:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out} .he_3DFlipX_inner:hover > div.he_3DFlipX_img{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);transform:rotateX(180deg)}.he_3DFlipX_inner > div img{max-width:100%;padding:0;margin:0;display:block;position:relative} .he_3DFlipX_caption{position:absolute;top:0;left:0;padding:0;background:#fe7253;color:#fff;height:100%;width:100%;padding:0;margin:0;opacity:0;background-color:#fe7253;text-align:center;backface-visibility:hidden;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out} .he_3DFlipX_inner:hover .he_3DFlipX_caption{opacity:1;-webkit-transform:rotateX(0);-moz-transform:rotateX(0);transform:rotateX(0)} .he_3DFlipX_caption h3{font-size:1.3em;font-weight:700;text-align:center;width:100%;position:absolute;top:25%;left:5px;margin:0;padding:0;color:#fff} .he_3DFlipX_caption p{font-size:1em;text-align:center;width:100%;position:absolute;top:45%;left:5px;margin:0;padding:0;color:#fff} .he_3DFlipX a{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0} .he_3DFlipY{display:block;width:250px;height:330px;overflow:hidden;padding:0;margin:0;border:0;position:relative;box-sizing:border-box;cursor:pointer;-webkit-perspective:1700px;-moz-perspective:1700px;perspective:1700px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;perspective-origin:50% 50%} .he_3DFlipY_inner{width:100%;height:100%;padding:0;margin:0;position:relative;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d} .he_3DFlipY_inner > div.he_3DFlipY_img{backface-visibility:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out} .he_3DFlipY_inner:hover > div.he_3DFlipY_img{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);transform:rotateY(180deg)}.he_3DFlipY_inner > div img{max-width:100%;padding:0;margin:0;display:block;position:relative} .he_3DFlipY_caption{position:absolute;top:0;left:0;padding:0;background:#fdad00;color:#fff;height:100%;width:100%;padding:0;margin:0;opacity:0;background-color:#fdad00;text-align:center;backface-visibility:hidden;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out} .he_3DFlipY_inner:hover .he_3DFlipY_caption{opacity:1;-webkit-transform:rotateY(0);-moz-transform:rotateY(0);transform:rotateY(0)} .he_3DFlipY_caption h3{font-size:1.3em;font-weight:700;text-align:center;width:100%;position:absolute;top:25%;left:5px;margin:0;padding:0;color:#fff} .he_3DFlipY_caption p{font-size:1em;text-align:center;width:100%;position:absolute;top:45%;left:5px;margin:0;padding:0;color:#fff} .he_3DFlipY a{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0} .he_ZoomInImg{background:#fe7253;width:360px;height:240px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;cursor:pointer;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_ZoomInImg .he_ZoomInImg_img{position:relative;display:block;width:100%;padding:0;margin:0;opacity:1;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_ZoomInImg:hover .he_ZoomInImg_img{opacity:.7;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-o-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)} .he_ZoomInImg .he_ZoomInImg_caption{color:#fff;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_ZoomInImg .he_ZoomInImg_caption,.he_ZoomInImg .he_ZoomInImg_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_ZoomInImg .he_ZoomInImg_caption_h{font-size:1.3em;font-weight:700;text-align:center;width:80%;position:absolute;top:20%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:.8}.he_ZoomInImg:hover .he_ZoomInImg_caption_h{color:#fff;opacity:1} .he_ZoomInImg .he_ZoomInImg_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:45%;left:10%;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;transition:all .6s ease-in-out;overflow:hidden;opacity:0} .he_ZoomInImg:hover .he_ZoomInImg_caption_p{color:#fff;opacity:1} .he_ZoomOutImg{background:#fe7253;width:360px;height:240px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;cursor:pointer;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_ZoomOutImg .he_ZoomOutImg_img{position:relative;display:block;width:100%;padding:0;margin:0;opacity:1;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-o-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)} .he_ZoomOutImg:hover .he_ZoomOutImg_img{opacity:.7;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} .he_ZoomOutImg .he_ZoomOutImg_caption{color:#fff;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_ZoomOutImg .he_ZoomOutImg_caption,.he_ZoomOutImg .he_ZoomOutImg_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_ZoomOutImg .he_ZoomOutImg_caption_h{font-size:1.3em;font-weight:700;text-align:center;width:80%;position:absolute;top:20%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:.8} .he_ZoomOutImg:hover .he_ZoomOutImg_caption_h{color:#fff;opacity:1} .he_ZoomOutImg .he_ZoomOutImg_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:45%;left:10%;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;transition:all .6s ease-in-out;overflow:hidden;opacity:0} .he_ZoomOutImg:hover .he_ZoomOutImg_caption_p{color:#fff;opacity:1} .he_slideCaptionDown{background:#ffffff;width:275px;height:183px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;cursor:pointer;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_slideCaptionDown .he_slideCaptionDown_img{position:relative;display:block;width:100%;padding:0;margin:0;opacity:1;overflow:hidden} .he_slideCaptionDown .he_slideCaptionDown_caption{color:#fff;background:rgba(0,0,0,0.5);-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translate3d(0,-100%,0);-moz-transform:translate3d(0,-100%,0);-o-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_slideCaptionDown:hover .he_slideCaptionDown_caption{background:rgba(0,0,0,0.5);-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .he_slideCaptionDown .he_slideCaptionDown_caption,.he_slideCaptionDown .he_slideCaptionDown_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_slideCaptionDown .he_slideCaptionDown_caption_h{font-size:1.3em;font-weight:700;text-align:center;width:80%;position:absolute;top:-50%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:0} .he_slideCaptionDown:hover .he_slideCaptionDown_caption_h{color:#fff;top:25%;opacity:1} .he_slideCaptionDown .he_slideCaptionDown_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:-50%;left:10%;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;transition:all .6s ease-in-out;overflow:hidden;opacity:0} .he_slideCaptionDown:hover .he_slideCaptionDown_caption_p{color:#fff;top:45%;opacity:1} .he_slideAllDown{background:#12a4ef;width:100%;max-height:174px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;cursor:pointer;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_slideAllDown .he_slideAllDown_img{position:relative;display:block;width:100%;padding:0;margin:0;opacity:.9;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_slideAllDown:hover .he_slideAllDown_img{opacity:1;-webkit-transform:translate3d(0,100%,0);-moz-transform:translate3d(0,100%,0);-o-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} .he_slideAllDown .he_slideAllDown_caption{color:#000;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_slideAllDown .he_slideAllDown_caption,.he_slideAllDown .he_slideAllDown_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_slideAllDown .he_slideAllDown_caption_h{font-size:14px;font-weight:700;text-align:center;width:80%;position:absolute;top:-50%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:0} .he_slideAllDown:hover .he_slideAllDown_caption_h{color:#fff;top:25%;opacity:1} .he_slideAllDown .he_slideAllDown_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:-50%;left:10%;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;transition:all .6s ease-in-out;overflow:hidden;opacity:0} .he_slideAllDown:hover .he_slideAllDown_caption_p{color:#000;top:45%;opacity:1} .demo{width:360px; margin:60px auto 10px auto} @media only screen and (min-width: 420px) { .demo{width:800px; margin:60px auto 10px auto} } .box{float:left; width:380px; height:260px} .clear{clear:both} @media (max-width: 480px) { .he_slideAllDown{background:#12a4ef;width:100%;max-height:174px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;cursor:pointer;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border2{background:#fe7253;width:158px;height:125px;padding:0px;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_3DFlipY{display:block;width:158px;height:125px;overflow:hidden;padding:0;margin:0;border:0;position:relative;box-sizing:border-box;cursor:pointer;-webkit-perspective:1700px;-moz-perspective:1700px;perspective:1700px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;perspective-origin:50% 50%} .he_slideCaptionDown{background:#ffffff;width:95%;height:120px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;cursor:pointer;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} } /** * 图片综合样式插件 */ /** * 鼠标经过选项卡 */ #container { text-align: left; height: 400px; background-color: #FFFFFF; padding: 20px; } #container #title { height: 28px; } #container #title li { float: left; list-style-type: none; height: 28px; line-height: 28px; text-align: center; margin-right: 1px; } #container #title ul { background-color: #FFFFFF; height: 28px; } #container #title a { text-decoration: none; color: #000000; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -29px; } #container #title a span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -29px; padding: 0 15px 0 15px; } #container #title #tag1 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px; } #container #title #tag1 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title #tag2 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px; } #container #title #tag2 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title #tag3 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px; } #container #title #tag3 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title #tag4 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px; } #container #title #tag4 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title #tag5 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px; } #container #title #tag5 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #title .selectli1 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px; } #container #title a .selectspan1 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title .selectli2 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px; } #container #title a .selectspan2 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title .selectli3 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px; } #container #title a .selectspan3 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title .selectli4 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px; } #container #title a .selectspan4 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title .selectli5 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px; } #container #title a .selectspan5 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #content ul {margin: 10px;} #container #content li {margin: 5px; } #container #content li img {margin: 5px;display:block;} #container #content { height: 300px; padding: 10px; } .content1 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #2aa6e2; margin-left: 13px; } .content2 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #ff950b; margin-left: 13px; } .content3 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #FE74B8; } .content4 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #00988B; border-right-color: #00988B; border-bottom-color: #00988B; border-left-color: #00988B; background-color: #E8FFFD; } .content5 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #A8BC1F; border-right-color: #A8BC1F; border-bottom-color: #A8BC1F; border-left-color: #A8BC1F; background-color: #F7FAE2; } .hidecontent {display:none;} /** * 鼠标经过选项卡 */ .khjzh .row .col-md-3 > img { display: block; border: 0; padding-bottom: 20px; } /** * 关于我们家具的 */ #guwomm { background-color: #175fd8; } #lunbotu { border: 1px solid #0376c7; padding-top: 6px; } /** * 导航栏左边距定义 */ .navbar-nav { margin-top: 20px; } @media (max-width:480px){ .navbar-nav { margin-left: 0px;background:#12a4ef;margin-top: 4px;} } /** * 导航栏左边距定义 */ #zcflxt > li >a:hover { display: block; background: #ffa101; } #myTab > li >a { color: #ffffff; } #myTab > li >a:hover { color: #000; } #myTab > li >a:visited { color: #000; } #syanl { margin-left: 0px; } @media (max-width:480px){ #syanl { margin-left: 0px; } } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { background-color: #7bc91e; } @media (max-width:480px){ #home .col-md-12 >img {width: 150px; height: 100px; } } .btn-primary { color: #fff; background-color: #0b8d33; border-color: #357ebd; } /** * 146模板背景图定义 */ #qdgjsc { background-image: url(/146/img/sup_boxBg.jpg); height: 1000px; margin-bottom: 40px; border-bottom: 1px solid#000000; } #qdgjsc p { font-size: 14px; color: #333; margin: 0 0 0 86px; line-height: 40px; padding: 0 0 0 20px; background: url(/146/img/sup_icon2.jpg) left 16px no-repeat; } @media (max-width: 480px) { #qdgjsc { height: 1800px; } } /** * 157图标svg图标定义 */ /*============================================= [ Icon Wrap] ==============================================*/ .svg-icon { display: inline-block; width: 134px; height: 138px; margin: 40px 30px; float: left; } .svg-icon:hover { cursor: pointer } .flat-filled { display: inline-block; width: 100px; height: 100px; margin: 40px 30px; } .flat-line { display: inline-block; width: 100px; height: 100px; margin: 40px 30px; } .flat-shadow { display: inline-block; width: 100px; height: 100px; margin: 40px 30px; } /*============================================= [ Inactive Styles ] ==============================================*/ .social-line { display: inline-block; width: 134px; height: 138px; margin-right: 54px; } .social-line:hover { cursor: pointer } /* Gradient Offsets */ .offset0 { stop-color: #000000; stop-opacity: 0.5; } .offset1 { stop-color: #000000; stop-opacity: 0.2; } .offset2 { stop-color: #000000; stop-opacity: 0.173; } .offset3 { stop-color: #000000; stop-opacity: 0; } .offset4 { stop-color: #000000; stop-opacity: 0.7; } .offset5 { stop-color: #000000; stop-opacity: 0.1143; } .offset6 { stop-color: #000000; stop-opacity: 0.1106; } .social-line { width: 80px; height: 80px; overflow: hidden; } .social-line .icon_circle_shadow { fill: none; fill-opacity: 0; opacity: 0; -webkit-transition: all .4s ease; -moz-transition: all 4s ease; transition: all .4s ease; } .social-line .icon_shape_shadow { fill: none; fill-opacity: 0; } .social-line .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-line .icon_shape { fill: #FFFFFF } /*============================================= [ Hover Styles ] ==============================================*/ .social-line:hover { overflow: visible; -webkit-transform: scale(1.15,1.15); -moz-transform: scale(1.15,1.15); transform: scale(1.15,1.15); } /* Gradient IDs */ .social-line:hover .icon_circle_shadow { fill: url(#icon_circle_gradient); fill-opacity: 0.7; opacity: 1; } .social-line:hover .icon_shape_shadow { fill: url(#icon_shape_gradient); fill-opacity: 0.9; -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); } /* Icon Styles */ .social-line:hover .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-line:hover path.icon_shape { -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); /*animation-name*/ -webkit-animation-name: burst; -moz-animation-name: burst; -ms-animation-name: burst; -o-animation-name: burst; animation-name: burst; /*animation-duration*/ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 40px 38px !important; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } /*============================================= [ KeyFrame Animations ] ==============================================*/ @-webkit-keyframes burst { { -webkit-transform: scale(1.1); animation-timing-function: ease-in; } 37% { -webkit-transform: scale(1.5); animation-timing-function: ease-out; } 55% { -webkit-transform: scale(1.37); animation-timing-function: ease-in; } 73% { -webkit-transform: scale(1.1); animation-timing-function: ease-out; } 82% { -webkit-transform: scale(1.45); animation-timing-function: ease-in; } 91% { -webkit-transform: scale(1.5); animation-timing-function: ease-out; } 96% { -webkit-transform: scale(1.4); animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.1); animation-timing-function: ease-out; } } @-moz-keyframes burst { { -moz-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -moz-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -moz-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -moz-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -moz-transform: scale(1.4,1.4); animation-timing-function: ease-in; } 100% { -moz-transform: scale(1,1); animation-timing-function: ease-in; } } @keyframes burst { { transform: scale(1,1); animation-timing-function: ease-in; } 37% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { transform: scale(1,1); animation-timing-function: ease-out; } 82% { transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { transform: scale(1.4,1.4); animation-timing-function: ease-in; } 100% { transform: scale(1,1); animation-timing-function: ease-out; } } /*============================================= [ Inactive Styles ] ==============================================*/ .social-shadow { display: inline-block; overflow: visible; margin-right: 0; } /* Gradient Offsets */ .offset0 { stop-color: #000000; stop-opacity: 0.5; } .offset1 { stop-color: #000000; stop-opacity: 0.2; } .offset2 { stop-color: #000000; stop-opacity: 0.173; } .offset3 { stop-color: #000000; stop-opacity: 0; } .offset4 { stop-color: #000000; stop-opacity: 0.7; } .offset5 { stop-color: #000000; stop-opacity: 0.1143; } .offset6 { stop-color: #000000; stop-opacity: 0.1106; } .social-shadow { overflow: visible } /* Gradient IDs */ .social-shadow .icon_circle_shadow { fill: url(#icon_circle_gradient); fill-opacity: 0.7; opacity: 1; -webkit-transition: all .4s ease; -moz-transition: all 4s ease; transition: all .4s ease; } .social-shadow .icon_shape_shadow { fill: url(#icon_shape_gradient); fill-opacity: 0.9; } /* Icon Styles */ .social-shadow .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-shadow .icon_shape { fill: #fff } /*============================================= [ Hover Styles ] ==============================================*/ .social-shadow:hover { display: inline-block; width: 134px; height: 138px; cursor: pointer; } .social-shadow:hover .social-shadow { width: 80px; height: 80px; overflow: hidden; } .social-shadow:hover .icon_circle_shadow { opacity: 0 } .social-shadow:hover .icon_shape_shadow { opacity: 0 } .social-shadow:hover .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-shadow:hover .icon_shape { fill: #FFFFFF } .social-shadow:hover .icon_shape { -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); /*animation-name*/ -webkit-animation-name: burst2; -moz-animation-name: burst2; -ms-animation-name: burst2; -o-animation-name: burst2; animation-name: burst2; /*animation-duration*/ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 40px 38px !important; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } /*============================================= [ KeyFrame Animations ] ==============================================*/ @-webkit-keyframes burst2 { 100% { -webkit-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -webkit-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -webkit-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -webkit-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -webkit-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -webkit-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -webkit-transform: scale(1.4,1.4); animation-timing-function: ease-in; } } @-moz-keyframes burst2 { 100% { -moz-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -moz-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -moz-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -moz-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -moz-transform: scale(1.4,1.4); animation-timing-function: ease-in; } } @keyframes burst2 { 100% { transform: scale(1,1); animation-timing-function: ease-in; } 37% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { transform: scale(1,1); animation-timing-function: ease-out; } 82% { transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { transform: scale(1.4,1.4); animation-timing-function: ease-in; } } /*============================================= [ Inactive Styles ] ==============================================*/ .social-filled { display: inline-block; width: 134px; height: 138px; margin-right: 54px; } .social-filled:hover { cursor: pointer } /* Gradient Offsets */ .offset0 { stop-color: #000000; stop-opacity: 0.5; } .offset1 { stop-color: #000000; stop-opacity: 0.2; } .offset2 { stop-color: #000000; stop-opacity: 0.173; } .offset3 { stop-color: #000000; stop-opacity: 0; } .offset4 { stop-color: #000000; stop-opacity: 0.7; } .offset5 { stop-color: #000000; stop-opacity: 0.1143; } .offset6 { stop-color: #000000; stop-opacity: 0.1106; } .social-filled { width: 80px; height: 80px; overflow: hidden; } .social-filled .icon_circle_shadow { fill: none; fill-opacity: 0; opacity: 0; -webkit-transition: all .4s ease; -moz-transition: all 4s ease; transition: all .4s ease; } .social-filled .icon_shape_shadow { fill: none; fill-opacity: 0; } .social-filled .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: #fff; } .social-filled .icon_shape { fill: #af7ac4 } /*============================================= [ Hover Styles ] ==============================================*/ .social-filled:hover { overflow: visible; -webkit-transform: scale(1.25,1.25); -moz-transform: scale(1.25,1.25); transform: scale(1.25,1.25); } /* Gradient IDs */ .social-filled:hover .icon_circle_shadow { fill: url(#icon_circle_gradient); fill-opacity: 0.7; opacity: 1; } .social-filled:hover .icon_shape_shadow { fill: url(#icon_shape_gradient); fill-opacity: 0.9; -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s; } /* Icon Styles */ .social-filled:hover .icon_circle { stroke: #FFFFFF; stroke-width: 5; stroke-miterlimit: 10; fill: none; } .social-filled:hover path.icon_shape { fill: #fff; -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); /*animation-name*/ -webkit-animation-name: burst3; -moz-animation-name: burst3; -ms-animation-name: burst3; -o-animation-name: burst3; animation-name: burst3; /*animation-duration*/ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 40px 38px !important; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } /*============================================= [ KeyFrame Animations ] ==============================================*/ @-webkit-keyframes burst3 { 100% { -webkit-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -webkit-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -webkit-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -webkit-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -webkit-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -webkit-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -webkit-transform: scale(1.4,1.4); animation-timing-function: ease-in; } } @-moz-keyframes burst3 { 100% { -moz-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -moz-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -moz-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -moz-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -moz-transform: scale(1.4,1.4); animation-timing-function: ease-in; } } @keyframes burst3 { 100% { transform: scale(1,1); animation-timing-function: ease-in; } 37% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { transform: scale(1,1); animation-timing-function: ease-out; } 82% { transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { transform: scale(1.4,1.4); animation-timing-function: ease-in; } } /*============================================= [ Inactive Styles ] ==============================================*/ /*Genral*/ .flat-filled .icon > path { fill: #f26c63; -moz-transform: translate(0px ,0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } .flat-filled .icon > .lightning { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } .flat-filled .circle { fill: #fff; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } /*Exceptions*/ #filled-user .collar_right { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-user .collar_left { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-lightning .bolt { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-lightning .highlight { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-mic .bars_right rect { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); } #filled-coffee .top { fill: #f26c63; -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); transform: translate(0px, 0px) scale(1,1); : ; } /*Specifics*/ #filled-browser .green { fill: #FFF } #filled-browser .orange { fill: #FFF } #filled-browser .red { fill: #FFF } #filled-brush .brush_silver { fill: #FFF } #filled-calander .number { fill: #FFF } #filled-camera .lens_inner { fill: #FFF } #filled-clock .seconds { fill: #FFF } #filled-clock .middle { fill: #FFF } #filled-clock .hour { fill: #FFF } #filled-clock .minute { fill: #FFF } #filled-coffee .middle { fill: #FFF } #filled-diamond .middle { fill: #FFF } #filled-diamond .top_3 { fill: #FFF } #filled-disk .top { fill: #FFF } #filled-disk .top_right { fill: #FFF } #filled-disk .text { fill: #FFF } #filled-email .paper { fill: #FFF } #filled-home .hole { fill: #FFF } #filled-location .inner { fill: #FFF } #filled-lock .keyhole { fill: #FFF } #filled-message .dots { fill: #FFF } #filled-picture .sun { fill: #FFF } #filled-picture .mountain { fill: #FFF } #filled-mic .bars_left { fill: #FFF } #filled-mic .bars_right rect { fill: #FFF } #filled-paper .text { fill: #FFF } #filled-paper .corner { fill: #FFF } #filled-pencil .metal { fill: #FFF } #filled-phone .screen { fill: #FFF } #filled-phone .details { fill: #FFF } #filled-robot .eyes { fill: #FFFFFF } #filled-suitcase .buttons { fill: #FFF } #filled-tag .dot { fill: #FFF } #filled-thumbsdown .dot { fill: #FFFFFF } #filled-thumbsup .dot { fill: #FFFFFF } #filled-trash .details { fill: #FFF } #filled-winner .text { fill: #FFFFFF } /*============================================= [ Hover Styles ] ==============================================*/ #filled-browser:hover .circle { fill: #B1EB5B } #filled-browser:hover .screen { fill: #d6d6d6 } #filled-browser:hover .base { fill: #b0b0b0 } #filled-browser:hover .top { fill: #8F8F8F } #filled-browser:hover .green { fill: #AEE42D } #filled-browser:hover .orange { fill: #FFD02C } #filled-browser:hover .red { fill: #E64545 } #filled-brush:hover .brush_base { fill: #00A3C6 } #filled-brush:hover .brush_highlight { fill: #43C1DC } #filled-brush:hover .brush_silver { fill: #C8C8C8 } #filled-brush:hover .brush_tip { fill: #917152 } #filled-brush:hover .circle { fill: #F0A878 } #filled-calander:hover .circle { fill: #F3CF3F } #filled-calander:hover .base_top { fill: #5B3F89 } #filled-calander:hover .left { fill: #848484 } #filled-calander:hover .right { fill: #848484 } #filled-calander:hover .number { fill: #fff } #filled-calander:hover .base_bottom { fill: #644892 } #filled-camera:hover .circle { fill: #F39C12 } #filled-camera:hover .base { fill: #E0DECD } #filled-camera:hover .strip { fill: #3376D2 } #filled-camera:hover .lens { fill: #CAC8B7 } #filled-camera:hover .lens_inner { fill: #A6A495 } #filled-camera:hover .flash { fill: #FFF } #filled-camera:hover .red { fill: #D25133 } #filled-camera:hover .button { fill: #A6A496 } #filled-clock:hover .circle { fill: #02BD85 } #filled-clock:hover .base { fill: #FF8933 } #filled-clock:hover .face { fill: #FFF } #filled-clock:hover .seconds { fill: #FF725F } #filled-clock:hover .middle { fill: #808080 } #filled-clock:hover .hour { fill: #808080 } #filled-clock:hover .minute { fill: #808080 } #filled-coffee:hover .circle { fill: #82D8B5 } #filled-coffee:hover .base { fill: #8F6349 } #filled-coffee:hover .middle { fill: #9C8679 } #filled-coffee:hover .top { fill: #F1F1F1 } #filled-diamond:hover .circle { fill: #02BD85 } #filled-diamond:hover .middle { fill: #D87598 } #filled-diamond:hover .top_3 { fill: #FFC8DB } #filled-diamond:hover .top_2 { fill: #F2A0BD } #filled-diamond:hover .top_1 { fill: #F2A0BD } #filled-diamond:hover .top_left { fill: #D87598 } #filled-diamond:hover .top_right { fill: #D87598 } #filled-diamond:hover .right { fill: #C15179 } #filled-diamond:hover .left { fill: #FFC8DB } #filled-disk:hover .circle { fill: #F3CF3F } #filled-disk:hover .base { fill: #5D699B } #filled-disk:hover .top { fill: #B2B2B2 } #filled-disk:hover .top_right { fill: #747A90 } #filled-disk:hover .bottom { fill: #D9D9C2 } #filled-disk:hover .text { fill: #747A90 } #filled-email:hover .circle { fill: #7D79BC } #filled-email:hover .top { fill: #3DD97F } #filled-email:hover .paper { fill: #FFFFFF } #filled-email:hover .base { fill: #2DB466 } #filled-email:hover .text { fill: #BBBBBB } #filled-film:hover .circle { fill: #8DD0BE } #filled-film:hover .base { fill: #6E6E6E } #filled-film:hover .bottom { fill: #515151 } #filled-film:hover .top { fill: #8C8C8C } #filled-flag:hover .circle { fill: #8DD0BE } #filled-flag:hover .bottom { fill: #FF5400 } #filled-flag:hover .shadow { fill: #C03F00 } #filled-flag:hover .top { fill: #FF5400 } #filled-flag:hover .pole { fill: #676767 } #filled-folder:hover .circle { fill: #82D8B5 } #filled-folder:hover .back { fill: #9C4588 } #filled-folder:hover .paper_back { fill: #D9D9D9 } #filled-folder:hover .paper_front { fill: #fff } #filled-folder:hover .front { fill: #BF67AB } #filled-graph:hover .circle { fill: #E3A7C0 } #filled-graph:hover .bar_left { fill: #7BC156 } #filled-graph:hover .bar_middle { fill: #92D76C } #filled-graph:hover .bar_right { fill: #64A242 } #filled-graph:hover .front { fill: } #filled-graph:hover .dot_4, #filled-graph:hover .dot_3, #filled-graph:hover .dot_2, #filled-graph:hover .dot_1 { fill: #fff } #filled-heart:hover .circle { fill: #02BD85 } #filled-heart:hover .base { fill: #BC4B36 } #filled-heart:hover .left { fill: #db5940 } #filled-home:hover .circle { fill: #02BD85 } #filled-home:hover .base { fill: #F1F1F1 } #filled-home:hover .hole { fill: #C3C3C3 } #filled-home:hover .roof { fill: #D34141 } #filled-lightning:hover .circle { fill: #423D5B } #filled-lightning:hover .bolt { fill: #FFD928 } #filled-lightning:hover .highlight { fill: #FFF3B9 } #filled-location:hover .circle { fill: #4890A8 } #filled-location:hover .base { fill: #B6351B } #filled-location:hover .inner { fill: #7E2412 } #filled-lock:hover .circle { fill: #02AF7E } #filled-lock:hover .base { fill: #C9A80D } #filled-lock:hover .baselight { fill: #D9BC36 } #filled-lock:hover .keyhole { fill: #8A7200 } #filled-lock:hover .bar { fill: #C6C6C6 } #filled-magnify:hover .circle { fill: #F2D65F } #filled-magnify:hover .base { fill: #34B9F1 } #filled-magnify:hover .glass { fill: #8DDDFF } #filled-message:hover .circle { fill: #AC5D9F } #filled-message:hover .back { fill: #FFAD10 } #filled-message:hover .front { fill: #00A3C6 } #filled-message:hover .dots { fill: #006A81 } #filled-mic:hover .circle { fill: #F3CF3F } #filled-mic:hover .base { fill: #40979F } #filled-mic:hover .stand { fill: #5F8083 } #filled-mic:hover .bars_left { fill: #267178 } #filled-mic:hover .bars_right rect { fill: #267178 } #filled-paper:hover .circle { fill: #D6D6B8 } #filled-paper:hover .base { fill: #929292 } #filled-paper:hover .front { fill: #FFFFFF } #filled-paper:hover .corner { fill: #D6D6D6 } #filled-paper:hover .text { fill: #BBBBBB } #filled-pencil:hover .circle { fill: #CDEFE1 } #filled-pencil:hover .wood { fill: #FFC833 } #filled-pencil:hover .base_top { fill: #456FD8 } #filled-pencil:hover .base_bottom { fill: #3258B6 } #filled-pencil:hover .base_middle { fill: #567FE5 } #filled-pencil:hover .tip { fill: #567FE5 } #filled-pencil:hover .eraser { fill: #FF72B1 } #filled-pencil:hover .metal { fill: #C6C6C6 } #filled-phone:hover .circle { fill: #E55D57 } #filled-phone:hover .base { fill: #6F82A4 } #filled-phone:hover .screen { fill: #A5B5D3 } #filled-phone:hover .details { fill: #516078 } #filled-picture:hover .circle { fill: #B1EB5B } #filled-picture:hover .back { fill: #A46B49 } #filled-picture:hover .front { fill: #CE8A61 } #filled-picture:hover .sky { fill: #DCF5FF } #filled-picture:hover .sun { fill: #FF7800 } #filled-picture:hover .mountain { fill: #3B8C1E } #filled-plane:hover .circle { fill: #E88D70 } #filled-plane:hover .bottom { fill: #007D7E } #filled-plane:hover .right { fill: #4ED0D1 } #filled-plane:hover .middle { fill: #3AAAAB } #filled-plane:hover .left { fill: #4ED0D1 } #filled-present:hover .circle { fill: #4890A8 } #filled-present:hover .base { fill: #F1F1F1 } #filled-present:hover .top { fill: #C3C3C3 } #filled-present:hover .ribbon { fill: #D34141 } #filled-robot:hover .circle { fill: #E88D70 } #filled-robot:hover .ears { fill: #39517A } #filled-robot:hover .base { fill: #4C70AF } #filled-robot:hover .highlight { fill: #6384BE } #filled-robot:hover .antenna { fill: #A0ABBD } #filled-robot:hover .eyes { fill: #FFFFFF } #filled-rocket:hover .circle { fill: #4BAE97 } #filled-rocket:hover .engine { fill: #7D7D7D } #filled-rocket:hover .base { fill: #B0CED8 } #filled-rocket:hover .window { fill: #8BABB6 } #filled-rocket:hover .glass { fill: #FFFFFF } #filled-rocket:hover .flame { fill: #FF5400 } #filled-screen:hover .circle { fill: #F8B243 } #filled-screen:hover .stand { fill: #516078 } #filled-screen:hover .base { fill: #6F82A4 } #filled-screen:hover .highlight { fill: #A5B5D3 } #filled-screen:hover .logo { fill: #516078 } #filled-settings:hover .circle { fill: #E3A7C0 } #filled-settings:hover .base { fill: #8BAE5D } #filled-settings:hover .top { fill: #698741 } #filled-spaceship:hover .circle { fill: #02BD85 } #filled-spaceship:hover .light { fill: #FFF3B9 } #filled-spaceship:hover .glass { fill: #8DDDFF } #filled-spaceship:hover .base { fill: #7E8CA6 } #filled-spaceship:hover .circles { fill: #56627A } #filled-storm:hover .circle { fill: #90C0D8 } #filled-storm:hover .cloud { fill: #858585 } #filled-storm:hover .lightning { fill: #FFAD10 } #filled-suitcase:hover .circle { fill: #02BD85 } #filled-suitcase:hover .top { fill: #9A4C1D } #filled-suitcase:hover .bottom { fill: #B75B24 } #filled-suitcase:hover .buttons { fill: #C89211 } #filled-tag:hover .circle { fill: #D6D6B8 } #filled-tag:hover .base { fill: #FFBA00 } #filled-tag:hover .dot { fill: #C38E00 } #filled-thumbsdown:hover .circle { fill: #E74C3C } #filled-thumbsdown:hover .base { fill: #F1CDB0 } #filled-thumbsdown:hover .sleeve { fill: #E1AF45 } #filled-thumbsdown:hover .cuff { fill: #339FA9 } #filled-thumbsdown:hover .dot { fill: #FFFFFF } #filled-thumbsup:hover .circle { fill: #02BD85 } #filled-thumbsup:hover .base { fill: #F1CDB0 } #filled-thumbsup:hover .sleeve { fill: #854D37 } #filled-thumbsup:hover .cuff { fill: #C24C28 } #filled-thumbsup:hover .dot { fill: #FFFFFF } #filled-trash:hover .circle { fill: #90C0D8 } #filled-trash:hover .base { fill: #8C8C8C } #filled-trash:hover .details { fill: #515151 } #filled-trash:hover .lid { fill: #6E6E6E } #filled-user:hover .circle { fill: #D1F274 } #filled-user:hover .body { fill: #44B2B6 } #filled-user:hover .collar_right { fill: #FFFFFF } #filled-user:hover .collar_left { fill: #FFFFFF } #filled-user:hover .head { fill: #F1CDB0 } #filled-user:hover .hair { fill: #AB6125 } #filled-winner:hover .circle { fill: #F8B243 } #filled-winner:hover .ribbon { fill: #5BB3F0 } #filled-winner:hover .base { fill: #1983CD } #filled-winner:hover .text { fill: #FFFFFF } /*============================================= [ Animation Styles ] ==============================================*/ /*LEFT*/ #filled-winner:hover .text, #filled-user:hover .hair, #filled-trash:hover .lid, #filled-thumbsdown:hover .base, #filled-thumbsup:hover .base, #filled-suitcase:hover .buttons, #filled-spaceship:hover .light, #filled-screen:hover .highlight, #filled-rocket:hover .glass, #filled-robot:hover .eyes, #filled-robot:hover .ears, #filled-present:hover .ribbon, #filled-plane:hover .middle, #filled-picture:hover .sun, #filled-phone:hover .screen, #filled-pencil:hover .metal, #filled-mic:hover .bars_left, #filled-message:hover .dots, #filled-lock:hover .keyhole, #filled-lightning:hover .highlight, #filled-home:hover .hole, #filled-heart:hover .left, #filled-graph:hover .bar_left, #filled-folder:hover .paper_front, #filled-flag:hover .pole, #filled-film:hover .bottom, #filled-email:hover .text, #filled-disk:hover .bottom, #filled-disk:hover .text, #filled-diamond:hover .middle, #filled-coffee:hover .middle, #filled-clock:hover .seconds, #filled-camera:hover .strip, #filled-calander:hover .left, #filled-brush:hover .brush_silver, #filled-browser:hover .screen { -webkit-animation-delay: .2s; -moz-animation-delay: 0.2s; -ms-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: left; -moz-animation-name: left; -ms-animation-name: left; -o-animation-name: left; animation-name: left; } /*RIGHT*/ #filled-winner:hover .base, #filled-user:hover .body, #filled-trash:hover .base, #filled-thumbsdown:hover .sleeve, #filled-thumbsup:hover .sleeve, #filled-tag:hover .base, #filled-storm:hover .cloud, #filled-spaceship:hover .base, #filled-screen:hover .base, #filled-rocket:hover .base, #filled-robot:hover .base, #filled-present:hover .base, #filled-picture:hover .mountain, #filled-phone:hover .base, #filled-pencil:hover .base_middle, #filled-paper:hover .base, #filled-mic:hover .bars_right rect, #filled-magnify:hover .glass, #filled-lock:hover .base, #filled-location:hover .inner, #filled-home:hover .base, #filled-graph:hover .bar_middle, #filled-folder:hover .paper_back, #filled-flag:hover .top, #filled-film:hover .base, #filled-email:hover .base, #filled-disk:hover .base, #filled-diamond:hover .right, #filled-coffee:hover .base, #filled-clock:hover .base, #filled-camera:hover .base, #filled-calander:hover .base_top, #filled-browser:hover .base { /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: right; -moz-animation-name: right; -ms-animation-name: right; -o-animation-name: right; animation-name: right; } /*TOP RIGHT*/ #filled-user:hover .head, #filled-thumbsdown:hover .cuff, #filled-thumbsdown:hover .cuff, #filled-suitcase:hover .top, #filled-storm:hover .lightning, #filled-spaceship:hover .circles, #filled-spaceship:hover .glass, #filled-settings:hover .top, #filled-rocket:hover .engine, #filled-robot:hover .highlight, #filled-present:hover .top, #filled-plane:hover .right, #filled-picture:hover .sky, #filled-phone:hover .details, #filled-pencil:hover .eraser, #filled-pencil:hover .base_bottom, #filled-paper:hover .front, #filled-mic:hover .base, #filled-mic:hover .stand, #filled-lock:hover .baselight, #filled-location:hover .base, #filled-lightning:hover .bolt, #filled-home:hover .roof, #filled-heart:hover .base, #filled-graph:hover .bar_right, #filled-graph:hover .dot_4, #filled-flag:hover .bottom, #filled-film:hover .top, #filled-disk:hover .top_right, #filled-diamond:hover .top_right, #filled-diamond:hover .left, #filled-coffee:hover .top, #filled-clock:hover .face, #filled-calander:hover .right, #filled-brush:hover .brush_base, #filled-browser:hover .top { -webkit-animation-delay: .1s; -moz-animation-delay: 0.1s; -ms-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: right-top; -moz-animation-name: right-top; -ms-animation-name: right-top; -o-animation-name: right-top; animation-name: right-top; } /*TOP LEFT*/ #filled-winner:hover .ribbon, #filled-trash:hover .details, #filled-thumbsdown:hover .dot, #filled-thumbsup:hover .dot, #filled-tag:hover .dot, #filled-suitcase:hover .bottom, #filled-settings:hover .base, #filled-screen:hover .stand, #filled-rocket:hover .window, #filled-robot:hover .antenna, #filled-plane:hover .left, #filled-picture:hover .front, #filled-pencil:hover .base_top, #filled-paper:hover .corner, #filled-magnify:hover .base, #filled-lock:hover .bar, #filled-graph:hover .dot_3, #filled-flag:hover .shadow, #filled-email:hover .paper, #filled-disk:hover .top, #filled-diamond:hover .top_left, #filled-diamond:hover .top_3, #filled-clock:hover .minute, #filled-camera:hover .flash, #filled-calander:hover .number, #filled-brush:hover .brush_highlight, #filled-browser:hover .green { /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: left-top; -moz-animation-name: left-top; -ms-animation-name: left-top; -o-animation-name: left-top; animation-name: left-top; } #filled-user:hover .collar_left, #filled-screen:hover .logo, #filled-rocket:hover .flame, #filled-picture:hover .back, #filled-pencil:hover .tip, #filled-paper:hover .text, #filled-message:hover .front, #filled-graph:hover .dot_2, #filled-folder:hover .front, #filled-email:hover .top, #filled-diamond:hover .top_2, #filled-clock:hover .hour, #filled-camera:hover .red, #filled-calander:hover .base_bottom, #filled-browser:hover .orange { -webkit-animation-delay: .05s; -moz-animation-delay: 0.05s; -ms-animation-delay: 0.05s; -o-animation-delay: 0.05s; animation-delay: 0.05s; /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: left-top; -moz-animation-name: left-top; -ms-animation-name: left-top; -o-animation-name: left-top; animation-name: left-top; -webkit-animation-name: left-top; -moz-animation-name: left-top; -ms-animation-name: left-top; -o-animation-name: left-top; animation-name: left-top; } #filled-user:hover .collar_right, #filled-plane:hover .bottom, #filled-pencil:hover .wood, #filled-message:hover .back, #filled-graph:hover .dot_1, #filled-folder:hover .back, #filled-diamond:hover .top_1, #filled-clock:hover .middle, #filled-camera:hover .button, #filled-camera:hover .lens, #filled-camera:hover .lens_inner, #filled-brush:hover .brush_tip, #filled-browser:hover .red { /*animation-timing-function*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /*animation-iteration-count*/ /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; -webkit-animation-name: left-top; -moz-animation-name: left-top; -ms-animation-name: left-top; -o-animation-name: left-top; animation-name: left-top; } /*Keyframes*/ @-moz-keyframes left-top { 0% { -webki-transform: translate(-100px, -100px) scale(3,3) } 1% { -webkit-transform: translate(-100px, -100px) scale(3,3) } 100% { -webkit-transform: translate(0px ,0px) scale(1,1) } } @-webkit-keyframes left-top { 0% { -webki-transform: translate(-100px, -100px) scale(3,3) } 1% { -webkit-transform: translate(-100px, -100px) scale(3,3) } 100% { -webkit-transform: translate(0px ,0px) scale(1,1) } } @keyframes left-top { 0% { transform: translate(-100px, -100px) scale(3,3) } 1% { transform: translate(-100px, -100px) scale(3,3) } 100% { transform: translate(0px, 0px) scale(1,1) } } @-moz-keyframes right-top { 0% { -webki-transform: translate(100px, -200px) scale(3,3) } 1% { -webkit-transform: translate(100px, -200px) scale(3,3) } 100% { -webkit-transform: translate(0px ,0px) scale(1,1) } } @-webkit-keyframes right-top { 0% { -webki-transform: translate(100px, -200px) scale(3,3) } 1% { -webkit-transform: translate(100px, -200px) scale(3,3) } 100% { -webkit-transform: translate(0px ,0px) scale(1,1) } } @keyframes right-top { 0% { transform: translate(100px, -200px) scale(3,3) } 1% { transform: translate(100px, -200px) scale(3,3) } 100% { transform: translate(0px, 0px) scale(1,1) } } @-moz-keyframes right { 0% { -webki-transform: translate(100px, 0px) } 1% { -webkit-transform: translate(100px, 0px) } 100% { -webkit-transform: translate(0px ,0px) } } @-webkit-keyframes right { 0% { -webki-transform: translate(100px, 0px) } 1% { -webkit-transform: translate(100px, 0px) } 100% { -webkit-transform: translate(0px ,0px) } } @keyframes right { 0% { transform: translate(100px, 0px) } 1% { transform: translate(100px, 0px) } 100% { transform: translate(0px, 0px) } } @-moz-keyframes left { 0% { -webki-transform: translate(-100px, 0px) } 1% { -webkit-transform: translate(-100px, 0px) } 100% { -webkit-transform: translate(0px ,0px) } } @-webkit-keyframes left { 0% { -webki-transform: translate(-100px, 0px) } 1% { -webkit-transform: translate(-100px, 0px) } 100% { -webkit-transform: translate(0px ,0px) } } @keyframes left { 0% { transform: translate(-100px, 0px) } 1% { transform: translate(-100px, 0px) } 100% { transform: translate(0px, 0px) } } /*============================================= [ Inactive Styles ] ==============================================*/ /*Genral*/ .flat-line .icon > path { stroke: #fff; stroke-width: 3px; fill: transparent; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } .flat-line .circle { stroke: #fff; stroke-width: 3px; fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } /*Exceptions*/ .flat-line .icon > .lightning { stroke: #fff; stroke-width: 1.5px; fill: transparent; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-user .collar_right { fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-user .collar_left { fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-lightning .bolt { stroke: #fff; stroke-width: 3px; fill: transparent; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-lightning .highlight { fill: transparent; stroke: 0px; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-mic .bars_right rect { fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } #line-coffee .top { fill: #52be7f; transform: translate(0px, 0px) scale(1,1); -webkit-transform: translate(0px ,0px) scale(1,1); -moz-transform: translate(0px ,0px) scale(1,1); } /*Specifics*/ #line-browser .green { fill: #FFF; stroke-width: 0px; } #line-browser .orange { fill: #FFF; stroke-width: 0px; } #line-browser .red { fill: #FFF; stroke-width: 0px; } #line-browser .screen { fill: transparent; stroke-width: 0px; } #line-brush .brush_silver { fill: #FFF; stroke-width: 0px; } #line-calander .number { fill: transparent; stroke-width: 0px; } #line-camera .lens_inner { fill: #FFF; stroke-width: 0px; } #line-camera .lens { fill: transparent; stroke-width: 0px; } #line-camera .strip { fill: transparent; stroke-width: 0px; } #line-camera .red { fill: #FFF; stroke-width: 0px; } #line-clock .seconds { fill: #FFF; stroke-width: 0px; } #line-clock .middle { fill: #FFF; stroke-width: 0px; } #line-clock .hour { fill: #FFF; stroke-width: 0px; } #line-clock .minute { fill: #FFF; stroke-width: 0px; } #line-clock .face { fill: transparent; stroke-width: 0px; } #line-coffee .top { fill: transparent; stroke-width: 3px; stroke: #fff; } #line-coffee .middle { fill: #FFF; stroke-width: 0px; } #line-disk .top { fill: #FFF; stroke-width: 0px; } #line-disk .top_right { fill: #FFF; stroke-width: 0px; } #line-disk .text { fill: transparent; stroke-width: 0px; } #line-email .paper { fill: transparent; stroke-width: 0px; } #line-email .text { fill: transparent; stroke-width: 0px; } #line-film .top { fill: transparent; stroke-width: 0px; } #line-film .bottom { fill: transparent; stroke-width: 0px; } #line-folder .paper_front { fill: transparent; stroke-width: 0px; } #line-folder .paper_back { fill: transparent; stroke-width: 0px; } #line-graph .dot_1, #line-graph .dot_2, #line-graph .dot_3, #line-graph .dot_4 { fill: #FFF; stroke-width: 0px; } #line-home .hole { fill: #FFF; stroke-width: 0px; } #line-home .roof { -webkit-transform: translateY(-5px) } #line-location .inner { fill: #FFF; stroke-width: 0px; } #line-lock .keyhole { fill: transparent; stroke-width: 0px; } #line-lock .baselight { fill: transparent; stroke-width: 0px; } #line-magnify .glass { fill: transparent; stroke-width: 0px; } #line-message .dots { fill: transparent; stroke-width: 0px; } #line-picture .sun { fill: #FFF; stroke-width: 0px; } #line-picture .mountain { fill: #FFF; stroke-width: 0px; } #line-mic .bars_left { fill: #FFF; stroke-width: 0px; } #line-mic .bars_right rect { fill: #FFF; stroke-width: 0px; } #line-paper .text { fill: transparent; stroke-width: 0px; } #line-paper .corner { fill: #FFF; stroke-width: 0px; } #line-pencil .metal { fill: #FFF; stroke-width: 0px; } #line-phone .screen { fill: #FFF; stroke-width: 0px; } #line-phone .details { fill: #FFF; stroke-width: 0px; } #line-robot .eyes { fill: #FFFFFF; stroke-width: 0px; } #line-suitcase .buttons { fill: #FFF; stroke-width: 0px; } #line-tag .dot { fill: #FFF; stroke-width: 0px; } #line-thumbsdown .dot { fill: #FFFFFF; stroke-width: 0px; } #line-thumbsup .dot { fill: #FFFFFF; stroke-width: 0px; } #line-trash .details { fill: #FFF; stroke-width: 0px; } #line-winner .text { fill: #FFFFFF; : ; stroke-width: 0px; } #line-spaceship .light { -webkit-transform: translateY(1px); -moz-transform: translateY(1px); transform: translateY(1px); } /*============================================= [ Hover Styles ] ==============================================*/ .flat-line:hover .icon { -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); /*animation-name*/ -webkit-animation-name: line-burst; -moz-animation-name: line-burst; -ms-animation-name: line-burst; -o-animation-name: line-burst; animation-name: line-burst; /*animation-duration*/ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px !important; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .flat-line:hover .icon > path { stroke: transparent; stroke-width: 0px; } .flat-line:hover .circle { stroke: transparent; stroke-width: 0px; } /*Exceptions*/ .flat-line:hover .icon > .lightning { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-user .collar_right { stroke: transparent; stroke-width: 0px; } .flat-line:hover#line-user .collar_left { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-lightning .bolt { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-lightning .highlight { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-mic .bars_right rect { stroke: transparent; stroke-width: 0px; } .flat-line:hover #line-coffee .top { stroke: transparent; stroke-width: 0px; } #line-browser:hover .circle { fill: #B1EB5B } #line-browser:hover .screen { fill: #b0b0b0 } #line-browser:hover .base { fill: #b0b0b0 } #line-browser:hover .top { fill: #8F8F8F } #line-browser:hover .green { fill: #AEE42D } #line-browser:hover .orange { fill: #FFD02C } #line-browser:hover .red { fill: #E64545 } #line-brush:hover .brush_base { fill: #00A3C6 } #line-brush:hover .brush_highlight { fill: #43C1DC } #line-brush:hover .brush_silver { fill: #C8C8C8 } #line-brush:hover .brush_tip { fill: #917152 } #line-brush:hover .circle { fill: #F0A878 } #line-calander:hover .circle { fill: #F3CF3F } #line-calander:hover .base_top { fill: #5B3F89 } #line-calander:hover .left { fill: #848484 } #line-calander:hover .right { fill: #848484 } #line-calander:hover .number { fill: #fff } #line-calander:hover .base_bottom { fill: #644892 } #line-camera:hover .circle { fill: #F39C12 } #line-camera:hover .base { fill: #E0DECD } #line-camera:hover .strip { fill: #3376D2 } #line-camera:hover .lens { fill: #CAC8B7 } #line-camera:hover .lens_inner { fill: #A6A495 } #line-camera:hover .flash { fill: #FFF } #line-camera:hover .red { fill: #D25133 } #line-camera:hover .button { fill: #A6A496 } #line-clock:hover .circle { fill: #02BD85 } #line-clock:hover .base { fill: #FF8933 } #line-clock:hover .face { fill: #FFF } #line-clock:hover .seconds { fill: #FF725F } #line-clock:hover .middle { fill: #808080 } #line-clock:hover .hour { fill: #808080 } #line-clock:hover .minute { fill: #808080 } #line-coffee:hover .circle { fill: #82D8B5 } #line-coffee:hover .base { fill: #8F6349 } #line-coffee:hover .middle { fill: #9C8679 } #line-coffee:hover .top { fill: #F1F1F1 } #line-diamond:hover .circle { fill: #02BD85 } #line-diamond:hover .middle { fill: #D87598 } #line-diamond:hover .top_3 { fill: #FFC8DB } #line-diamond:hover .top_2 { fill: #F2A0BD } #line-diamond:hover .top_1 { fill: #F2A0BD } #line-diamond:hover .top_left { fill: #D87598 } #line-diamond:hover .top_right { fill: #D87598 } #line-diamond:hover .right { fill: #C15179 } #line-diamond:hover .left { fill: #FFC8DB } #line-disk:hover .circle { fill: #F3CF3F } #line-disk:hover .base { fill: #5D699B } #line-disk:hover .top { fill: #B2B2B2 } #line-disk:hover .top_right { fill: #747A90 } #line-disk:hover .bottom { fill: #D9D9C2 } #line-disk:hover .text { fill: #747A90 } #line-email:hover .circle { fill: #7D79BC } #line-email:hover .top { fill: #3DD97F } #line-email:hover .paper { fill: #FFFFFF } #line-email:hover .base { fill: #2DB466 } #line-email:hover .text { fill: #BBBBBB } #line-film:hover .circle { fill: #8DD0BE } #line-film:hover .base { fill: #6E6E6E } #line-film:hover .bottom { fill: #515151 } #line-film:hover .top { fill: #8C8C8C } #line-flag:hover .circle { fill: #8DD0BE } #line-flag:hover .bottom { fill: #FF5400 } #line-flag:hover .shadow { fill: #C03F00 } #line-flag:hover .top { fill: #FF5400 } #line-flag:hover .pole { fill: #676767 } #line-folder:hover .circle { fill: #82D8B5 } #line-folder:hover .back { fill: #9C4588 } #line-folder:hover .paper_back { fill: #D9D9D9 } #line-folder:hover .paper_front { fill: #fff } #line-folder:hover .front { fill: #BF67AB } #line-graph:hover .circle { fill: #E3A7C0 } #line-graph:hover .bar_left { fill: #7BC156 } #line-graph:hover .bar_middle { fill: #92D76C } #line-graph:hover .bar_right { fill: #64A242 } #line-graph:hover .front { fill: } #line-graph:hover .dot_4, #line-graph:hover .dot_3, #line-graph:hover .dot_2, #line-graph:hover .dot_1 { fill: #fff } #line-heart:hover .circle { fill: #02BD85 } #line-heart:hover .base { fill: #BC4B36 } #line-heart:hover .left { fill: #db5940 } #line-home:hover .circle { fill: #02BD85 } #line-home:hover .base { fill: #F1F1F1 } #line-home:hover .hole { fill: #C3C3C3 } #line-home:hover .roof { fill: #D34141 } #line-lightning:hover .circle { fill: #423D5B } #line-lightning:hover .bolt { fill: #FFD928 } #line-lightning:hover .highlight { fill: #FFF3B9 } #line-location:hover .circle { fill: #4890A8 } #line-location:hover .base { fill: #B6351B } #line-location:hover .inner { fill: #7E2412 } #line-lock:hover .circle { fill: #02AF7E } #line-lock:hover .base { fill: #C9A80D } #line-lock:hover .baselight { fill: #D9BC36 } #line-lock:hover .keyhole { fill: #8A7200 } #line-lock:hover .bar { fill: #C6C6C6 } #line-magnify:hover .circle { fill: #F2D65F } #line-magnify:hover .base { fill: #34B9F1 } #line-magnify:hover .glass { fill: #8DDDFF } #line-message:hover .circle { fill: #AC5D9F } #line-message:hover .back { fill: #FFAD10 } #line-message:hover .front { fill: #00A3C6 } #line-message:hover .dots { fill: #006A81 } #line-mic:hover .circle { fill: #F3CF3F } #line-mic:hover .base { fill: #40979F } #line-mic:hover .stand { fill: #5F8083 } #line-mic:hover .bars_left { fill: #267178 } #line-mic:hover .bars_right rect { fill: #267178 } #line-paper:hover .circle { fill: #D6D6B8 } #line-paper:hover .base { fill: #929292 } #line-paper:hover .front { fill: #FFFFFF } #line-paper:hover .corner { fill: #D6D6D6 } #line-paper:hover .text { fill: #BBBBBB } #line-pencil:hover .circle { fill: #CDEFE1 } #line-pencil:hover .wood { fill: #FFC833 } #line-pencil:hover .base_top { fill: #456FD8 } #line-pencil:hover .base_bottom { fill: #3258B6 } #line-pencil:hover .base_middle { fill: #567FE5 } #line-pencil:hover .tip { fill: #567FE5 } #line-pencil:hover .eraser { fill: #FF72B1 } #line-pencil:hover .metal { fill: #C6C6C6 } #line-phone:hover .circle { fill: #E55D57 } #line-phone:hover .base { fill: #6F82A4 } #line-phone:hover .screen { fill: #A5B5D3 } #line-phone:hover .details { fill: #516078 } #line-picture:hover .circle { fill: #B1EB5B } #line-picture:hover .back { fill: #A46B49 } #line-picture:hover .front { fill: #CE8A61 } #line-picture:hover .sky { fill: #DCF5FF } #line-picture:hover .sun { fill: #FF7800 } #line-picture:hover .mountain { fill: #3B8C1E } #line-plane:hover .circle { fill: #E88D70 } #line-plane:hover .bottom { fill: #007D7E } #line-plane:hover .right { fill: #4ED0D1 } #line-plane:hover .middle { fill: #3AAAAB } #line-plane:hover .left { fill: #4ED0D1 } #line-present:hover .circle { fill: #4890A8 } #line-present:hover .base { fill: #F1F1F1 } #line-present:hover .top { fill: #C3C3C3 } #line-present:hover .ribbon { fill: #D34141 } #line-robot:hover .circle { fill: #E88D70 } #line-robot:hover .ears { fill: #39517A } #line-robot:hover .base { fill: #4C70AF } #line-robot:hover .highlight { fill: #6384BE } #line-robot:hover .antenna { fill: #A0ABBD } #line-robot:hover .eyes { fill: #FFFFFF } #line-rocket:hover .circle { fill: #4BAE97 } #line-rocket:hover .engine { fill: #7D7D7D } #line-rocket:hover .base { fill: #B0CED8 } #line-rocket:hover .window { fill: #8BABB6 } #line-rocket:hover .glass { fill: #FFFFFF } #line-rocket:hover .flame { fill: #FF5400 } #line-screen:hover .circle { fill: #F8B243 } #line-screen:hover .stand { fill: #516078 } #line-screen:hover .base { fill: #6F82A4 } #line-screen:hover .highlight { fill: #A5B5D3 } #line-screen:hover .logo { fill: #516078 } #line-settings:hover .circle { fill: #E3A7C0 } #line-settings:hover .base { fill: #8BAE5D } #line-settings:hover .top { fill: #698741 } #line-spaceship:hover .circle { fill: #02BD85 } #line-spaceship:hover .light { fill: #FFF3B9 } #line-spaceship:hover .glass { fill: #8DDDFF } #line-spaceship:hover .base { fill: #7E8CA6 } #line-spaceship:hover .circles { fill: #56627A } #line-storm:hover .circle { fill: #90C0D8 } #line-storm:hover .cloud { fill: #858585 } #line-storm:hover .lightning { fill: #FFAD10 } #line-suitcase:hover .circle { fill: #02BD85 } #line-suitcase:hover .top { fill: #9A4C1D } #line-suitcase:hover .bottom { fill: #B75B24 } #line-suitcase:hover .buttons { fill: #C89211 } #line-tag:hover .circle { fill: #D6D6B8 } #line-tag:hover .base { fill: #FFBA00 } #line-tag:hover .dot { fill: #C38E00 } #line-thumbsdown:hover .circle { fill: #E74C3C } #line-thumbsdown:hover .base { fill: #F1CDB0 } #line-thumbsdown:hover .sleeve { fill: #E1AF45 } #line-thumbsdown:hover .cuff { fill: #339FA9 } #line-thumbsdown:hover .dot { fill: #FFFFFF } #line-thumbsup:hover .circle { fill: #02BD85 } #line-thumbsup:hover .base { fill: #F1CDB0 } #line-thumbsup:hover .sleeve { fill: #854D37 } #line-thumbsup:hover .cuff { fill: #C24C28 } #line-thumbsup:hover .dot { fill: #FFFFFF } #line-trash:hover .circle { fill: #90C0D8 } #line-trash:hover .base { fill: #8C8C8C } #line-trash:hover .details { fill: #515151 } #line-trash:hover .lid { fill: #6E6E6E } #line-user:hover .circle { fill: #D1F274 } #line-user:hover .body { fill: #44B2B6 } #line-user:hover .collar_right { fill: #FFFFFF } #line-user:hover .collar_left { fill: #FFFFFF } #line-user:hover .head { fill: #F1CDB0 } #line-user:hover .hair { fill: #AB6125 } #line-winner:hover .circle { fill: #F8B243 } #line-winner:hover .ribbon { fill: #5BB3F0 } #line-winner:hover .base { fill: #1983CD } #line-winner:hover .text { fill: #FFFFFF } @-webkit-keyframes line-burst { { -webkit-transform: scale(1.1); animation-timing-function: ease-in; } 37% { -webkit-transform: scale(1.3); animation-timing-function: ease-out; } 55% { -webkit-transform: scale(1.17); animation-timing-function: ease-in; } 73% { -webkit-transform: scale(1.05); animation-timing-function: ease-out; } 82% { -webkit-transform: scale(1.2); animation-timing-function: ease-in; } 91% { -webkit-transform: scale(1.3); animation-timing-function: ease-out; } 96% { -webkit-transform: scale(1.2); animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.1); animation-timing-function: ease-out; } } @-moz-keyframes line-burst { { -moz-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -moz-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -moz-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -moz-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -moz-transform: scale(1.4,1.4); animation-timing-function: ease-in; } 100% { -moz-transform: scale(1,1); animation-timing-function: ease-in; } } @keyframes line-burst { { transform: scale(1,1); animation-timing-function: ease-in; } 37% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { transform: scale(1,1); animation-timing-function: ease-out; } 82% { transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { transform: scale(1.4,1.4); animation-timing-function: ease-in; } 100% { transform: scale(1,1); animation-timing-function: ease-out; } } #shadow-camera .circle { fill: #F39C12 } #shadow-camera .base { fill: #E0DECD } #shadow-camera .strip { fill: #3376D2 } #shadow-camera .lens { fill: #CAC8B7 } #shadow-camera .lens_inner { fill: #A6A495 } #shadow-camera .flash { fill: #FFF } #shadow-camera .red { fill: #D25133 } #shadow-camera .button { fill: #A6A496 } #shadow-browser .circle { fill: #B1EB5B } #shadow-browser .screen { fill: #b0b0b0 } #shadow-browser .base { fill: #b0b0b0 } #shadow-browser .top { fill: #8F8F8F } #shadow-browser .green { fill: #AEE42D } #shadow-browser .orange { fill: #b0b0b0 } #shadow-browser .red { fill: #E64545 } #shadow-brush .brush_base { fill: #00A3C6 } #shadow-brush .brush_highlight { fill: #43C1DC } #shadow-brush .brush_silver { fill: #C8C8C8 } #shadow-brush .brush_tip { fill: #917152 } #shadow-brush .circle { fill: #F0A878 } #shadow-calander .circle { fill: #246f91 } #shadow-calander .base_top { fill: #5B3F89 } #shadow-calander .left { fill: #848484 } #shadow-calander .right { fill: #848484 } #shadow-calander .number { fill: #fff } #shadow-calander .base_bottom { fill: #644892 } #shadow-clock .circle { fill: #02BD85 } #shadow-clock .base { fill: #FF8933 } #shadow-clock .face { fill: #FFF } #shadow-clock .seconds { fill: #FF725F } #shadow-clock .middle { fill: #808080 } #shadow-clock .hour { fill: #808080 } #shadow-clock .minute { fill: #808080 } #shadow-coffee .circle { fill: #90c0d8 } #shadow-coffee .base { fill: #8F6349 } #shadow-coffee .middle { fill: #9C8679 } #shadow-coffee .top { fill: #F1F1F1 } #shadow-diamond .circle { fill: #02BD85 } #shadow-diamond .middle { fill: #D87598 } #shadow-diamond .top_3 { fill: #FFC8DB } #shadow-diamond .top_2 { fill: #F2A0BD } #shadow-diamond .top_1 { fill: #F2A0BD } #shadow-diamond .top_left { fill: #D87598 } #shadow-diamond .top_right { fill: #D87598 } #shadow-diamond .right { fill: #C15179 } #shadow-diamond .left { fill: #FFC8DB } #shadow-disk .circle { fill: #f07848 } #shadow-disk .base { fill: #5D699B } #shadow-disk .top { fill: #B2B2B2 } #shadow-disk .top_right { fill: #747A90 } #shadow-disk .bottom { fill: #D9D9C2 } #shadow-disk .text { fill: #747A90 } #shadow-email .circle { fill: #7D79BC } #shadow-email .top { fill: #3DD97F } #shadow-email .paper { fill: #FFFFFF } #shadow-email .base { fill: #2DB466 } #shadow-email .text { fill: #BBBBBB } #shadow-film .circle { fill: #8DD0BE } #shadow-film .base { fill: #6E6E6E } #shadow-film .bottom { fill: #515151 } #shadow-film .top { fill: #8C8C8C } #shadow-flag .circle { fill: #8DD0BE } #shadow-flag .bottom { fill: #FF5400 } #shadow-flag .shadow { fill: #C03F00 } #shadow-flag .top { fill: #FF5400 } #shadow-flag .pole { fill: #676767 } #shadow-folder .circle { fill: #82D8B5 } #shadow-folder .back { fill: #9C4588 } #shadow-folder .paper_back { fill: #D9D9D9 } #shadow-folder .paper_front { fill: #fff } #shadow-folder .front { fill: #BF67AB } #shadow-graph .circle { fill: #E3A7C0 } #shadow-graph .bar_left { fill: #7BC156 } #shadow-graph .bar_middle { fill: #92D76C } #shadow-graph .bar_right { fill: #64A242 } #shadow-graph .front { fill: } #shadow-graph .dot_4, #shadow-graph .dot_3, #shadow-graph .dot_2, #shadow-graph .dot_1 { fill: #fff } #shadow-heart .circle { fill: #02BD85 } #shadow-heart .base { fill: #BC4B36 } #shadow-heart .left { fill: #db5940 } #shadow-home .circle { fill: #02BD85 } #shadow-home .base { fill: #F1F1F1 } #shadow-home .hole { fill: #C3C3C3 } #shadow-home .roof { fill: #D34141 } #shadow-lightning .circle { fill: #423D5B } #shadow-lightning .bolt { fill: #FFD928 } #shadow-lightning .highlight { fill: #FFF3B9 } #shadow-location .circle { fill: #4890A8 } #shadow-location .base { fill: #B6351B } #shadow-location .inner { fill: #7E2412 } #shadow-lock .circle { fill: #02AF7E } #shadow-lock .base { fill: #C9A80D } #shadow-lock .baselight { fill: #D9BC36 } #shadow-lock .keyhole { fill: #8A7200 } #shadow-lock .bar { fill: #C6C6C6 } #shadow-magnify .circle { fill: #F2D65F } #shadow-magnify .base { fill: #34B9F1 } #shadow-magnify .glass { fill: #8DDDFF } #shadow-message .circle { fill: #AC5D9F } #shadow-message .back { fill: #FFAD10 } #shadow-message .front { fill: #00A3C6 } #shadow-message .dots { fill: #006A81 } #shadow-mic .circle { fill: #f39c12 } #shadow-mic .base { fill: #40979F } #shadow-mic .stand { fill: #5F8083 } #shadow-mic .bars_left { fill: #267178 } #shadow-mic .bars_right rect { fill: #267178 } #shadow-paper .circle { fill: #D6D6B8 } #shadow-paper .base { fill: #929292 } #shadow-paper .front { fill: #FFFFFF } #shadow-paper .corner { fill: #D6D6D6 } #shadow-paper .text { fill: #BBBBBB } #shadow-pencil .circle { fill: #CDEFE1 } #shadow-pencil .wood { fill: #FFC833 } #shadow-pencil .base_top { fill: #456FD8 } #shadow-pencil .base_bottom { fill: #3258B6 } #shadow-pencil .base_middle { fill: #567FE5 } #shadow-pencil .tip { fill: #567FE5 } #shadow-pencil .eraser { fill: #FF72B1 } #shadow-pencil .metal { fill: #C6C6C6 } #shadow-phone .circle { fill: #E55D57 } #shadow-phone .base { fill: #6F82A4 } #shadow-phone .screen { fill: #A5B5D3 } #shadow-phone .details { fill: #516078 } #shadow-picture .circle { fill: #B1EB5B } #shadow-picture .back { fill: #A46B49 } #shadow-picture .front { fill: #CE8A61 } #shadow-picture .sky { fill: #DCF5FF } #shadow-picture .sun { fill: #FF7800 } #shadow-picture .mountain { fill: #3B8C1E } #shadow-plane .circle { fill: #E88D70 } #shadow-plane .bottom { fill: #007D7E } #shadow-plane .right { fill: #4ED0D1 } #shadow-plane .middle { fill: #3AAAAB } #shadow-plane .left { fill: #4ED0D1 } #shadow-present .circle { fill: #4890A8 } #shadow-present .base { fill: #F1F1F1 } #shadow-present .top { fill: #C3C3C3 } #shadow-present .ribbon { fill: #D34141 } #shadow-robot .circle { fill: #E88D70 } #shadow-robot .ears { fill: #39517A } #shadow-robot .base { fill: #4C70AF } #shadow-robot .highlight { fill: #6384BE } #shadow-robot .antenna { fill: #A0ABBD } #shadow-robot .eyes { fill: #FFFFFF } #shadow-rocket .circle { fill: #4BAE97 } #shadow-rocket .engine { fill: #7D7D7D } #shadow-rocket .base { fill: #B0CED8 } #shadow-rocket .window { fill: #8BABB6 } #shadow-rocket .glass { fill: #FFFFFF } #shadow-rocket .flame { fill: #FF5400 } #shadow-screen .circle { fill: #F8B243 } #shadow-screen .stand { fill: #516078 } #shadow-screen .base { fill: #6F82A4 } #shadow-screen .highlight { fill: #A5B5D3 } #shadow-screen .logo { fill: #516078 } #shadow-settings .circle { fill: #E3A7C0 } #shadow-settings .base { fill: #8BAE5D } #shadow-settings .top { fill: #698741 } #shadow-spaceship .circle { fill: #02BD85 } #shadow-spaceship .light { fill: #FFF3B9 } #shadow-spaceship .glass { fill: #8DDDFF } #shadow-spaceship .base { fill: #7E8CA6 } #shadow-spaceship .circles { fill: #56627A } #shadow-storm .circle { fill: #90C0D8 } #shadow-storm .cloud { fill: #858585 } #shadow-storm .lightning { fill: #FFAD10 } #shadow-suitcase .circle { fill: #02BD85 } #shadow-suitcase .top { fill: #9A4C1D } #shadow-suitcase .bottom { fill: #B75B24 } #shadow-suitcase .buttons { fill: #C89211 } #shadow-tag .circle { fill: #D6D6B8 } #shadow-tag .base { fill: #FFBA00 } #shadow-tag .dot { fill: #C38E00 } #shadow-thumbsdown .circle { fill: #E74C3C } #shadow-thumbsdown .base { fill: #F1CDB0 } #shadow-thumbsdown .sleeve { fill: #E1AF45 } #shadow-thumbsdown .cuff { fill: #339FA9 } #shadow-thumbsdown .dot { fill: #FFFFFF } #shadow-thumbsup .circle { fill: #02BD85 } #shadow-thumbsup .base { fill: #F1CDB0 } #shadow-thumbsup .sleeve { fill: #854D37 } #shadow-thumbsup .cuff { fill: #C24C28 } #shadow-thumbsup .dot { fill: #FFFFFF } #shadow-trash .circle { fill: #90C0D8 } #shadow-trash .base { fill: #8C8C8C } #shadow-trash .details { fill: #515151 } #shadow-trash .lid { fill: #6E6E6E } #shadow-user .circle { fill: #D1F274 } #shadow-user .body { fill: #44B2B6 } #shadow-user .collar_right { fill: #FFFFFF } #shadow-user .collar_left { fill: #FFFFFF } #shadow-user .head { fill: #F1CDB0 } #shadow-user .hair { fill: #AB6125 } #shadow-winner .circle { fill: #F8B243 } #shadow-winner .ribbon { fill: #5BB3F0 } #shadow-winner .base { fill: #1983CD } #shadow-winner .text { fill: #FFFFFF } .iconwrap { display: block; width: 168px; height: 170px; margin: 0; padding: 0; float: left; position: relative; } .long-shadow { background: url(http://www.pencilscoop.com/demos/animated-svg/demo/images/long_shadow.png) no-repeat; width: 168px; height: 170px; position: absolute; z-index: 1; opacity: 0; -webkit-transition: all 0.2s; -moz-transition: all .2s; transition: all .2s; display: block; top: 47px; left: 35px; } .flat-shadow { z-index: 999; position: relative; } .iconwrap:hover .long-shadow { opacity: 1; -moz-transition-delay: .5s !important; -webkit-transition-delay: .5s !important; transition-delay: .5s !important; } .flat-shadow:hover .icon { -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); /*animation-name*/ -webkit-animation-name: shadow-burst; -moz-animation-name: shadow-burst; -ms-animation-name: shadow-burst; -o-animation-name: shadow-burst; animation-name: shadow-burst; /*animation-duration*/ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; /*transform-origin*/ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50px 50px !important; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } @-webkit-keyframes shadow-burst { { -webkit-transform: scale(1.1); animation-timing-function: ease-in; } 37% { -webkit-transform: scale(1.3); animation-timing-function: ease-out; } 55% { -webkit-transform: scale(1.17); animation-timing-function: ease-in; } 73% { -webkit-transform: scale(1.05); animation-timing-function: ease-out; } 82% { -webkit-transform: scale(1.2); animation-timing-function: ease-in; } 91% { -webkit-transform: scale(1.3); animation-timing-function: ease-out; } 96% { -webkit-transform: scale(1.2); animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.1); animation-timing-function: ease-out; } } @-moz-keyframes shadow-burst { { -moz-transform: scale(1,1); animation-timing-function: ease-in; } 37% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { -moz-transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { -moz-transform: scale(1,1); animation-timing-function: ease-out; } 82% { -moz-transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { -moz-transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { -moz-transform: scale(1.4,1.4); animation-timing-function: ease-in; } 100% { -moz-transform: scale(1,1); animation-timing-function: ease-in; } } @keyframes shadow-burst { { transform: scale(1,1); animation-timing-function: ease-in; } 37% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 55% { transform: scale(1.37,1.37); animation-timing-function: ease-in; } 73% { transform: scale(1,1); animation-timing-function: ease-out; } 82% { transform: scale(1.45,1.45); animation-timing-function: ease-in; } 91% { transform: scale(1.5,1.5); animation-timing-function: ease-out; } 96% { transform: scale(1.4,1.4); animation-timing-function: ease-in; } 100% { transform: scale(1,1); animation-timing-function: ease-out; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .long-shadow { background: url(http://www.pencilscoop.com/demos/animated-svg/demo/images/long_shadow@2x.png) no-repeat; width: 168px; height: 170px; background-size: 168px 170px; } } /** * 163 */ .baobiao .more { display: block; width: 160px; height: 36px; border: 1px solid #a5a4a4; font-size: 12px; color: #999; line-height: 34px; text-align: center; margin: 20px auto 0; background: url(../images/more-icon.png) no-repeat 80% center; } .baobiao .more:hover { background: #fc9722 url(../images/more-icon1.png) no-repeat 80% center; color: #fff; border-color: #fff; } .youshi { background-image: url(../163/img/title.png); center center; color: #fc951e; height: 42px; line-height: 42px; } @media (max-width: 480px) { #banbaozhuang .container .row .col-md-4 .row .col-md-6 .row >img { height: 222px; width: 350px; } } @media (max-width: 480px) { .neinei >img { height: 222px; width: 350px; } } /** * 163 */ #jobquery { margin: 0; border-bottom: 2px #e8e8e8 solid; } #jobquery li.cap { border-bottom: 2px #e8e8e8 solid; background: #f5f5f5; } #jobquery ul.queryul { margin: 10px 0px; } #jobquery li { list-style-type: none; padding-left: 10px; height: 35px; } #jobquery .bt { float: left; width:56%; } #jobquery .cl { float: left; width:10%; text-align:center; } #jobquery .au { float: left; width:17%; text-align:center; } #jobquery .bk { float: left; text-align:center; width:17%; } /*============================================= [ Icon Wrap] svg图标结束 ==============================================*/