.transition(@transition:.4s){-webkit-transition:@transition;-moz-transition:@transition;-ms-transition:@transition;-o-transition:@transition;transition:@transition;}
.transform-origin(@origin){-webkit-transform: @origin;-moz-transform: @origin;-ms-transform: @origin;-o-transform: @origin;transform: @origin;}
.scale(@scale){-webkit-transform: scale(@scale);-moz-transform:scale(@scale);-ms-transform:scale(@scale);-o-transform:scale(@scale);transform:scale(@scale);}
.translateY(@distance){-ms-transform:translateY(@distance); -webkit-transform:translateY(@distance); -o-transform:translateY(@distance); -moz-transform:translateY(@distance); }
.border-radius(@border-radius){-webkit-border-radius:@border-radius;-moz-border-radius:@border-radius;-o-order-radius:@border-radius;-ms-border-radius:@border-radius;border-radius:@border-radius;}
.rotate(@rotate){-webkit-transform: rotate(@rotate);-moz-transform: rotate(@rotate);-ms-transform: rotate(@rotate);-o-transform: rotate(@rotate);transform: rotate(@rotate);}
@mc:#eee;
@mc1:#283b42;
@mc2:#aa5433;
@qt1:#573a59;
@qt2:#1a8fdf;/*内页导航背景*/
@qt3:#1a8fdf;/*内页分类侧边背景*/
@qt4:#099f52;/*内页分类侧边li背景*/
@qt5:#fff;/*悬浮背景变色后字体颜色*/
@qt6:#c5a46e;/*按钮悬浮颜色 */
//调用方式 .border(3px);
.txt{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.browserupgrade{margin:0;padding:1em;background:#ccc;a{color: red;}cursor: pointer;}
table{border-right:1px solid #ccc;border-bottom:1px solid #ccc}
table td{border-left:1px solid #ccc;border-top:1px solid #ccc;text-align: center;vertical-align: middle;}
input,textarea{margin: 0;padding: 0;box-shadow: none;border: none;}
/*全局---头部----主体（主页）----底部---侧边---内页--*/
/*--------------------------------------------------------全局开始---------------------------------------------------*/
p,a,h1,h2,h3,h4,h5,h6,li,label,span,i,b,div{ margin: 0;padding: 0;font-size: 14px;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;}
li{list-style: none;}
.off{display:none;} /*隐藏*/
.slh(){text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}/*单行超出部分省略号显示*/
ul{padding: 0;margin:0;}
i{font-style: normal;}
a {color: #333;text-decoration: none;}
/*----------------头部--------------*/
body{color: #333; margin: 0; font-size: 14px;
// background: #f4f4f4;
}
body {margin: 0;padding: 0;background: #fff;}
.fl,.left {float: left;}
.fr,.right {float: right;}
.w1920 {max-width: 1920px;margin: 0 auto;}
.w1200,.wrap,.main {width: 1200px;margin:0 auto;}
//顶部
.header {
width: 100%; height: 117px; margin: 0 auto;
.logo {
display: block;width: 480px;height: 117px;object-fit: contain;
}
.header_float {
float: right;height: 117px;width: 320px;overflow: hidden;
div {
padding-top:22px;width: 190px;float: left;
p:nth-of-type(1) {font-size: 12px;color: #666;text-indent: 25px;background: url('/App/Home/View/Default/Public/Images/pic01.jpg') left center no-repeat;}
p:nth-of-type(2) {font-size: 28px;color: @mc2;font-weight: bold;}
p:nth-of-type(3) {width:190px;background: @mc2;line-height: 20px;color: #fff;font-size: 12px;text-align: center;}
}
img {width: 85px;height: 85px;border:1px solid #e3dfdf;margin-top: 20px;float: right;}
}
}
.utility {
width: 100%; height: 40px; line-height: 40px; text-align: right; color: #848484; background-color: #f6f6f6;border-bottom: 1px solid #dadada;
.header_top {
width: 1200px; margin: 0 auto;
span {float: left;}
a {display: inline-block; color: #848484;}
}
}
.nav {
width: 100%; height: 55px; margin: 0 auto; background: @mc1;
.nav_sidebar {
width: 200px;height: 55px;float: left;background:@mc2 url('../Images/bg02.jpg') center center no-repeat;position:relative;
p {text-align: center;line-height: 55px;font-size: 16px; color: #fff; }
.nav_erji {
width: 200px;position:absolute;left: 0px;top: 55px;z-index: 10;background:@mc2;padding:10px 0;display: none;
a {display: block;width: 200px;line-height: 30px;color: #fff;text-indent: 3em;}
}
}
ul {
width: 1200px; margin: 0 auto;
li {
width: 142px; float: left; text-align: center; line-height: 55px;
a {
font-size: 16px; color: #fff; display: block; height: 55px;
}
}
}
}
.banner1 {
height: 600px;position:relative;
.swiper-prev {display: inline-block;vertical-align: top;cursor: pointer;position: absolute;left: 0px;top: 45%;z-index: 2;opacity: 0;.transition();}
.swiper-next {display: inline-block;vertical-align: top;cursor: pointer;position: absolute;right: 0px;top: 45%;z-index: 2;opacity: 0;.transition();}
&:hover {
.swiper-next,.swiper-prev {
opacity: 1;.transition();
}
}
.swiper-pagination {
.swiper-pagination-bullet {border-radius: 0;opacity: 1;width: 35px;height: 10px;background: #fff;}
.swiper-pagination-bullet-active {background:@mc1; }
}
}
.banner1 .swiper-slide {width: 100%;height: 100%;}
.neiye_banner {
height: 300px;background: url('/App/Home/View/Default/Public/Images/banner.jpg') top center no-repeat;
}
.banner_nav {
background:#666666;height: 30px;margin-bottom: 35px;
.title {
font-size: 12px;color:#fff;line-height: 30px;
a,span {
font-size: 12px;color:#fff;line-height: 30px;
}
}
}
// 首页主体部分开始
.search_box {padding:15px 0;height: 30px;
.main {
div:nth-of-type(1) {float: left;
p {font-size: 14px;line-height: 30px;}
a {margin-right: 10px;}
}
div:nth-of-type(2) {width: 200px;float: right;background: #eeeeee;
input {width: 150px;height: 30px;text-indent: 1em;background: #eeeeee;float: left;font-size: 12px;}
button {border:none;width: 50px;background: @mc2;float: right;
img {display: block;margin:0 auto;}
}
}
}
}
.main_title {
height: 165px; padding:40px 0px 10px;box-sizing:border-box;position:relative;
h3 {
font-size: 30px;color: @mc2;line-height: 70px;text-align: center;position:relative;z-index: 2;
&:after {
width: 50px;height: 2px;display: block;content:'';background:@mc2;margin:0 auto;
}
}
p:nth-of-type(1) {font-size: 14px;color: #666666;line-height: 50px;text-align: center;}
p:nth-of-type(2) {
font-size: 60px;color: @mc2;text-align: center;font-weight: bold; opacity: 0.1;
position: absolute;left: 0px;right: 0px;top: 30px;z-index: 1;text-transform: uppercase;
}
}
.main_more {
display: block;width: 300px;height: 50px;border-radius:8px;color: #fff;text-align: center;line-height: 50px;
margin:20px auto 0;background: @mc1;
}
.product_box {
padding-bottom: 40px;
.product_type {
padding:0px 120px;text-align: center;margin-bottom: 40px;
a {
display: inline-block;width: 150px;height: 40px;background: #e5e5e5;text-align: center;line-height: 40px;
margin:0px 3px 6px;
&:hover {
background: @mc2;color: #fff;
}
}
}
.product_main {
li {
width: 290px;height: 285px;float: left;margin-right: 13px;
div {
overflow:hidden;border:1px solid #c9c9c9;width: 290px;height: 225px;
img {display: block;width: 275px;height: 207px;object-fit: contain;margin:7px auto 0;.transition();}
}
p {text-align: center;line-height: 45px;}
&:hover {
img {.scale(1.05);.transition();}
}
}
li:nth-of-type(4n) {margin-right: 0px;}
}
.product_more {
text-align: center;width: 120px;height: 50px;border-radius:25px;line-height: 50px;display: block;
box-shadow:0px 0px 3px rgba(0,0,0,0.4);color: @mc1;.transition();margin:0 auto;
&:hover {
background:@mc2;color: #fff;.transition();
}
}
}
.youshi_box {
height: 692px;background:url('/App/Home/View/Default/Public/Images/bg03.jpg') center center no-repeat;
.main_title {
h3,p {
color: #fff;
&:after {background: #fff;}
}
}
.youshi_banner {
height: 464px;width: 1200px;
.swiper-slide {
background:url('/App/Home/View/Default/Public/Images/bg04.png') center center no-repeat;
> div {
float: left;margin-left: 50px;width:450px;
div {
height: 100px;margin-bottom: 60px;
span {display: inline-block;font-size: 48px;line-height: 70px;width: 70px;text-align: center;color: #fff;font-weight: bold;float: left;margin-right: 15px;}
p:nth-of-type(1) {font-size: 28px;font-weight: bold;margin-top: 20px;line-height: 50px;}
p:nth-of-type(2) {color: #666;}
}
> p {}
}
img {
float: right;margin-right: 50px;width:600px;margin-top: 70px;
}
}
.youshi-swiper-pagination {
position: absolute;left: 50px;bottom:50px;z-index: 8;
.swiper-pagination-bullet {
width: 110px;height: 50px;background:#999999 url('../Images/bg05.png');text-indent: 55px;color: #fff;opacity: 1;border-radius:0;
font-size: 16px;line-height: 50px;margin:0 1px;
}
span:nth-of-type(1) {background:#999999 url('../Images/bg05.png') 10px center no-repeat;}
span:nth-of-type(2) {background:#999999 url('../Images/bg06.png') 10px center no-repeat;}
span:nth-of-type(3) {background:#999999 url('../Images/bg07.png') 10px center no-repeat;}
span:nth-of-type(4) {background:#999999 url('../Images/bg08.png') 10px center no-repeat;}
.swiper-pagination-bullet-active {
background-color: @mc2 !important;
}
}
}
}
.lc_box {
padding-top:60px;
h3 {
font-size: 28px;line-height: 60px;border-bottom: 1px solid #e5e5e5;text-align: center;
&:after {width: 50px;height: 2px;background:@mc2;display: block;content:'';position: relative;left: 0px;right: 0px;margin:auto;top: 1px;}
}
img {display: block;}
}
.company_box {
background:url('/App/Home/View/Default/Public/Images/bg09.jpg') center 165px no-repeat;padding-bottom:40px;
.company_main {
box-sizing:border-box;padding-top: 30px;
ul {
text-align: right;height: 190px;
li {
width: 180px;display: inline-block; box-sizing:border-box;padding-left:70px;
p:nth-of-type(1) {
text-align: left;margin-bottom: 20px;position:relative;
span {font-size: 28px;}
&:after {
width: 20px;height: 2px;content:'';display: block;background: #e61526;
position:absolute;left: 0px;bottom:-10px;margin:auto;
}
}
p:nth-of-type(2) {font-size: 16px;text-align: left;}
}
}
div:nth-of-type(1) {
width: 670px;height: 330px;background: #eeeeee;box-sizing:border-box;padding:30px 60px 0; float: right;margin-right: -60px;
h3 {font-size: 28px;margin-bottom: 20px;}
p {line-height: 30px;text-indent: 2em; height: 120px;text-align: justify;overflow: hidden;}
a {
color: #bfbfbf;position:relative;width: 55px;height: 55px;display: block;margin-top: 25px;
border:1px solid #bfbfbf;border-radius:50%;line-height: 50px;text-align: center;font-size: 40px;
}
}
}
}
.service_box {
margin-bottom: 50px;
.main {
> img {display: block;width: 1200px;}
> div:nth-of-type(2) {
margin-bottom: 50px;overflow: hidden;
img {display: block;float: left;}
a {
display: block;width: 80px;height: 60px;background: #e60012;border-radius: 5px;text-align: center;
line-height: 60px;color: #fff;float: right;
}
}
}
}
// 首页结束
.layer_box {
background: @mc1;width: 620px;height: 450px;box-sizing:border-box;box-sizing:border-box;padding:5px;overflow:hidden;
> p {text-align: center;line-height: 108px;font-size: 34px;color: #fff;}
form {
box-sizing:border-box;text-align: center;padding:22px 80px 0;display: block;width: 610px;height: 330px;background:#fff;position:relative;
input:nth-of-type(1) {border:1px solid #cccccc;width: 165px;height: 35px;text-indent: 1em;font-size: 14px;line-height: 35px;margin-bottom: 12px;float: left;}
input:nth-of-type(2) {border:1px solid #cccccc;width: 270px;height: 35px;text-indent: 1em;font-size: 14px;line-height: 35px;margin-bottom: 12px;float: right;}
input:nth-of-type(3) {border:1px solid #cccccc;width: 270px;height: 35px;text-indent: 1em;font-size: 14px;line-height: 35px;margin-bottom: 12px;float: left;}
textarea {border:1px solid #cccccc;width: 448px;height: 80px;float: left;margin-bottom: 12px;box-sizing: border-box;padding:1em;}
img {display: inline-block;}
input:nth-of-type(4) {width: 280px;height: 35px;text-align: center;color: #fff;background: @mc1;border-radius: 5px;font-size: 16px;margin: 20px auto 10px;}
p {text-align: center;color: @mc1;font-size: 16px;}
}
}
//底部样式
.links_box {
padding:50px 0 20px;
p {border-bottom: 1px dashed #666;font-size: 14px;margin-bottom: 15px;line-height: 40px;
span {font-size: 18px;}
}
ul {overflow: hidden;
li {
a {color: #999;margin-bottom: 10px;font-size: 12px;}
}
}
}
.footer01 {
height: 60px;background:@mc1;
.main {
li {float: left;
a {display: block;width: 171px;height: 60px;color: #fff;text-align: center;line-height: 60px; }
}
}
}
.footer02 {background: url('/App/Home/View/Default/Public/Images/bg10.jpg') center center no-repeat;height: 235px;
.main {overflow: hidden;
>li:nth-of-type(1) {
width: 410px;margin-left: 430px;float: left;padding-top: 45px;
p {
font-size: 14px;line-height: 30px;color: #333;
a {color: #333;}
}
}
>li:nth-of-type(2) {
width: 150px;float: right;padding-top:20px;
img {width: 145px;height: 145px;display: block;margin:0 auto;}
p {text-align: center;color: #333;margin-top: 10px;}
}
}
}
.fix_side {
width: 50px; position: fixed; top: 50%; right: 0; margin-top: -100px;z-index: 18;
li {
display: block;width: 50px;height: 50px;margin-bottom: 5px;position:relative;
}
li:nth-of-type(1) {
background:@mc1 url('../Images/side02.png') center center no-repeat;
a {display: block;width: 100%;height: 100%;}
}
li:nth-of-type(2) {background:@mc1 url('../Images/side01.png') center center no-repeat;}
li:nth-of-type(3) {background:@mc1 url('../Images/side03.png') center center no-repeat;}
li:nth-of-type(4) {background:@mc1 url('../Images/side04.png') center center no-repeat;}
.back_to_top {
cursor: pointer;
}
.phone {
span {position: absolute;height: 40px;line-height: 40px;display: block;background: @mc1;color: #fff;right:-115px;width: 115px;top: 5px;text-align: center;.transition();}
&:hover {
span {left: -115px;.transition();}
}
}
.wx {
img {position: absolute;right: -115px;top: -30px;border:1px solid #ccc;width: 113px;height: 113px;.transition();}
&:hover {
img {left: -115px;.transition();}
}
}
}
// 内页头部样式
.list_banner > div:nth-child(1) {padding-top: 10px;font-size: 14px;}
.list_banner_top {height: 146px;padding-top:10px;position: relative;height: 81px;}
.list_banner_top > div:nth-child(1) {height: 40px;background: #bfbfbf;color: #fff;font-size: 18px;position: relative;z-index: 2;line-height: 40px;padding-left: 30px;}
.list_banner_top img {position: absolute;left: -20px;top: -1px;width: 21px;height: 21px;}
.list_banner_top > div:nth-child(2) {height: 50px;background: #dcdcdc;width: 100%;margin-top: -20px;}
// 内页主要部分
.list_left{width: 250px;height: 850px;display: inline-block;}
.list_right{width: 950px;display: inline-block;}
// 留言
.order {margin-left:30px;}
.order li {margin-top:30px;position: relative;font-weight: bold;font-size: 18px;}
.order > li:nth-child(5) {height: 70px;}
.order li input{position: absolute;left: 150px;width: 375px;}
.order li textarea{position: absolute;left: 150px;bottom: 0px;width: 375px;height: 100px;}
.order p,input {display:inline-block;font-size:18px;}
.order input {height:20px;border:1px solid #cfcfcf;}
.order textarea {border:1px solid #cfcfcf;}
#submit {width:230px;height:50px;border-radius:10px;background:#dd2121;font-size:20px;color:#fff;font-weight:bold;margin:0 auto;display: block;}
#submit:hover {border:2px solid #ddd;}
// #form1 {width: 580px;}
.message_contact {
vertical-align: top;display: block;width: 300px;height: 400px;margin-top: 30px;
h2 {font-size: 24px;line-height: 36px;margin-bottom: 30px;}
p {
font-size: 18px;line-height: 25px;
a {font-size: 18px;}
}
}
// product index1
//product index2
//案例展示
.case_title {font-size: 34px;color: #666;padding: 0 20px;line-height: 70px;margin-top: 20px;color: #666;font-weight: normal;font-family: 'Hiragino Sans GB';}
.caseson {
padding: 20px;background: #fff;box-sizing: border-box;
a {display: block;width: 76px;height: 35px;background: #f7f7f7;line-height: 35px;text-align: center;color: #333;margin-right: 20px;margin-bottom: 20px;}
a:hover {color: @mc;text-decoration: underline;}
a:nth-of-type(12n) {margin-right: 0px;}
}
.caseson_select {
background: @mc !important;color: #fff !important;
}
.case_list_main {
margin-top: 20px;
>.case_list_main_item {
width: 220px;height: 280px;background: #fff;margin-right:20px;margin-bottom: 20px;position: relative;
> div:nth-child(1) {width: 220px;height: 220px;}
> p:nth-child(2) {text-align: center;font-size: 16px;line-height: 30px;color: #000;padding-left: 14px;padding-right: 14px;}
> div:nth-child(3) {
position: absolute;width: 220px;height: 280px;background: rgba(47,102,170,0.9);top: 0px;left: 0px;display: none;
img {width: 138px;height: 138px;position: absolute;top: 0px;bottom: 0;left: 0;right: 0;margin:auto;}
p {position: absolute;bottom: 20px;padding-left: 14px;padding-right: 14px;color: #fff;font-size: 16px;width: 100%;box-sizing: border-box;text-align: center;}
}
}
> .case_list_main_item:hover {
> p:nth-child(2) {display: none;}
}
> .case_list_main_item:nth-of-type(5n) {margin-right: 0px;}
}
.search_list {margin: 30px 20px 0px;
li {margin-right: 10px;margin-bottom: 20px;width: 280px;float: left;
div {
width: 280px; height: 280px; position: relative; border: 1px solid #ececec; box-sizing: border-box;
img {width: 278px;height: 278px;object-fit:contain;display: block;}
// img {display: block; max-width: 279px; max-height: 279px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
}
h5 {
font-size: 16px;text-align: center;color: #333;line-height: 36px;background:#ededed;
}
}
li:nth-of-type(3n) {margin-right: 0px;}
}
.product_index {
overflow: hidden;width: 880px;margin:0 auto;
li {
width: 280px;float: left;margin-right: 20px;margin-bottom: 15px;background:#fff;position:relative;
div {
width: 280px;height: 300px;position:relative;overflow: hidden;box-sizing:border-box;border:1px solid #ececec;
img {width: 278px;height: 298px;object-fit: contain;.transition();}
&:hover {
img {.scale(1.05);.transition();}
}
}
h4 {
background:rgba(0,0,0,0.7);color: #fff;text-align: center;line-height: 36px;
}
}
li:nth-of-type(3n) {margin-right: 0px;float: right;}
}
.product_index1 {width: 880px;margin:0 auto;
li {width: 285px;height:290px;margin-bottom: 20px;float: left;margin-right: 12px;
a {
div:nth-of-type(1) {width: 285px;height: 250px;box-sizing: border-box;border:1px solid #eee;
img {display: block;width: 283px;height: 248px;object-fit: contain;}
}
h4 {background: @mc1;text-align: center;line-height: 40px;color: #fff;text-align: center;object-fit:contain; }
}
}
li:nth-of-type(3n) {margin-right: 0px;float: right;}
}
//产品详情 多图
.product_info_tab {
padding-top: 20px;padding-left: 20px;
.product_info_tab_box {
.product_info_tab_box_img_big {
width: 500px;height: 500px;
img {height: 500px;width: 500px;display: block;box-sizing: border-box;border:1px solid #eee;}
a {display: none;}
a:nth-of-type(1) {display: block;}
}
.product_info_tab_box_img_small {
height: 100px;width: 500px;
img {height: 96px;width: 96px;box-sizing: border-box;float: left;margin:2px;border:1px solid #eee;}
img:hover {border:1px solid #dd2121;}
}
}
> div:nth-child(2) {
width: 400px;
h3 {font-size: 24px;line-height: 36px;}
img:nth-of-type(1) {}
div:nth-of-type(1) {
text-align: center;margin-top: 100px;
img {width: 240px;height: 240px;border:1px solid #eee;}
p {font-size: 20px;line-height: 38px;color: #545454;text-align: center;}
}
}
}
.title {
margin: 0 auto 15px; padding: 12px 0px 9px 0px; width: 880px; height: 25px; border-bottom: 2px solid #dbdbdb;
strong {
max-width: 150px !important; height: 25px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display: inline-block;
float: left; display: inline-block; padding-bottom: 8px; height: 100%; border-bottom: 2px solid #414141; color: @mc1; text-align: center;
}
span {
overflow: hidden; zoom: 1; font-size: 12px;padding-left:20px;display: inline-block;
height: 25px; text-overflow: ellipsis; white-space: nowrap;
background: url('/App/Home/View/Default/Public/Image/sprite.gif') no-repeat;background-position: 0 -150px;
}
}
.title1 {
padding: 12px 0px 9px 0px; height: 25px; border-bottom: 2px solid #dbdbdb;margin-bottom: 30px;
strong {
max-width: 150px !important; height: 25px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display: inline-block;
float: left; display: inline-block; padding-bottom: 8px; height: 100%; border-bottom: 2px solid #414141; color: #da020d; text-align: center;
}
span {
overflow: hidden; zoom: 1; font-size: 12px;padding-left:20px;display: inline-block;
height: 25px; text-overflow: ellipsis; white-space: nowrap;
background: url('/App/Home/View/Default/Public/Image/sprite.gif') no-repeat;background-position: 0 -150px;
}
}
.article {
overflow: hidden; margin-bottom: 12px; width: 920px; border: 1px solid #ececec; background-color: #fff;
.article_content {
width: 880px;margin:30px auto;
img {max-width: 850px;display: block;margin:0 auto;}
}
.news_title {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center;font-size: 16px;font-weight: bold;line-height: 40px;
}
.meta {color: #999; text-align: center; line-height: 28px;margin-bottom: 10px;}
}
.article_content {
iframe {
display: block;width: 800px;height: 500px;margin: 30px auto;
}
}
.contact_main {
.main {box-sizing:border-box; padding:20px;background: #eee; }
.contact-info {
line-height: 30px;color: #333; width: 35%;float: left;
h2 {font-size: 20px;font-weight: bold;}
}
}
// 产品详情
.o_product {overflow: hidden;}
.productinfo_banner {
width: 400px;height:400px;float: left;margin-left: 20px;box-sizing:border-box;position: relative;
img {
display: block;width: 400px;height:400px;;object-fit:contain;margin:0 auto;
}
}
.productinfo-swiper-pagination {
width: 68px;float: left;margin:0 10px;height: 400px;overflow: hidden;
li {
width: 60px;height: 60px;display: block;margin-bottom: 5px;
img {width: 60px;height: 60px;}
}
.swiper-pagination-bullet {opacity: 1;background: none;border:1px solid #999;border-radius: 0;}
.swiper-pagination-bullet-active {opacity: 1;background: none;border:2px solid @mc1;}
}
.o_product_info {
float: right;width: 380px;margin-right: 75px;
h1 {font-size: 18px;font-weight: bold;}
.o_product_detail {
background: #F6F6F6; font-size: 14px; color: #999; padding: 15px 10px; margin-top: 10px;
.o_product_data {
line-height: 24px;
.val {color: #FE4200; font-size: 16px;}
}
}
.go_order {
padding: 8px 25px; color: #fff; font-size: 16px; border-radius: 5px; border: none;
margin-top: 50px; outline: none; background: #ce2029;
}
}
.info_title {
clear: both;margin: 20px auto; width: 880px; height: 40px;
border-top:1px solid #eee; border-bottom:1px solid #eee;
span {
display: inline-block; width: 90px; height: 100%; text-align: center;
// border-bottom: 3px solid #656565;
color: #333; line-height: 40px;
}
}
#prev_next {
margin-left: 20px;
li {line-height: 40px;}
}
//新闻index
.news_index {margin:20px 20px 0;
li {box-sizing: border-box;padding:20px;background: #fff;margin-bottom: 20px;overflow: hidden;border-bottom:1px dashed #eee;
img {display: block;margin-right: 20px;object-fit: cover;width: 260px;height: 165px;border:1px solid #eee;}
h3 {font-size: 18px; line-height: 45px; color: #333;}
p {
font-size: 14px; line-height: 30px; color: #666;height: 90px;overflow: hidden;height: 90px;overflow: hidden;
}
&:hover {
h3 {color: @mc1;}
}
}
}
//新闻index2
.news_index2 {
li {
margin-bottom: 20px;
h3 {font-size: 18px; line-height: 45px; color: #333;text-indent: 40px;background: url('/App/Home/View/Default/Public/Images/bg13.png') left 6px no-repeat;}
div {
background: #f5f5f5;padding:20px;
p:nth-of-type(1) {text-indent: 40px;background: url('/App/Home/View/Default/Public/Images/bg13.png') left -81px no-repeat;line-height: 45px;}
p:nth-of-type(2) {
color: #666;line-height: 30px;
}
}
}
}
.contact_main {
position: relative;padding-bottom: 30px;
.contact-info {padding-left:10px;
> p {
padding: 10px 0px 0px 10px;display: block;line-height: 31px;color: #000;width: 400px;
i {color: #000; font-size: 26px; line-height: 35px;margin-bottom: 10px; font-weight: normal;display: block;}
}
}
}
.message {
margin-top: 50px; background: #eee; overflow: hidden; margin-bottom: 50px;padding-top: 50px;
.contact_message {
width: 1000px;margin-top: 50px;margin:0 auto;
input {border:1px solid #dfdfdf;font-size: 14px; }
textarea {height: 80px;width: 480px;font-size: 18px;line-height: 38px;text-indent: 1em;border:1px solid #dfdfdf;display: inline-block;margin-right: 14px;margin-bottom: 20px;font-size: 14px;}
input:nth-of-type(1),input:nth-of-type(2),input:nth-of-type(3),input:nth-of-type(4) {
width: 480px;line-height: 38px;text-indent: 1em;margin-bottom: 20px;margin-right: 14px;
}
input:nth-of-type(5) {width: 280px;line-height: 38px;text-indent: 1em;vertical-align: top;margin-right: 14px;}
img {height: 38px;vertical-align: top;}
input:nth-of-type(6) {width: 100px;line-height: 38px;margin-top: 70px;background: #063589;color: #fff;text-indent: 0em;display: inline-block;margin:30px auto;border-radius: 10px;margin-left: 380px;margin-right: 40px;}
input:nth-of-type(7) {width: 100px;line-height: 38px;margin-top: 70px;background: @mc1;color: #fff;text-indent: 0em;display: inline-block;margin:30px auto;border-radius: 10px;}
}
}
#allmap {
width:1198px;
height: 325px;
overflow: hidden;
border: 1px solid #c9c9c9;
}
#route {
width: 100%;
height: 60px;
margin-top: 30px;
border: 1px solid #dcdcdc;
background: #fff;
box-sizing: border-box;
border-bottom: none;
}
#route span {
width: 33%;
height: 60px;
display: block;
float: left;
text-align: center;
line-height: 60px;
cursor: pointer;
}
#route .hover {
background: #c5b292;
color: #000;
}
#allmap {
width: 1074px;
height: 325px;
overflow: hidden;
border: 1px solid #c9c9c9;
}
.pagination {
text-align: center;margin-bottom:20px;padding-top: 20px;line-height: 30px;
.btn {display: inline-block;height: 30px;padding:0px 5px;line-height: 30px;text-align: center;border:1px solid #999;vertical-align: top;}
.btn-inverse {background: @mc1;color: #fff;vertical-align: top;}
select {height: 30px;vertical-align: top;border:1px solid #999;}
}
.goods_list {margin-top: 30px;}
//sidebar
.product_sidebar {width: 240px;float: left;
.product_sidebar_title {
height: 87px;padding-top:15px;background: @mc1;box-sizing:border-box;
p:nth-of-type(1) {font-size: 25px;color: #fff;text-align: center;}
p:nth-of-type(2) {font-size: 12px;color: #fff;text-align: center;text-transform: uppercase;}
}
ul {
box-sizing:border-box;padding:18px 0;margin-bottom: 10px;box-sizing: border-box;border:1px solid #eee;
li {
> a {
display: block;color: #333;padding-left: 10px;line-height: 40px;width: 220px;height: 40px;
margin:0 auto 8px;background:#eee;box-sizing: border-box;
}
}
}
.sidebar_info {
.sidebar_info_title {
height: 87px;padding-top:15px;background: @mc1;box-sizing:border-box;
p:nth-of-type(1) {font-size: 25px;color: #fff;text-align: center;}
p:nth-of-type(2) {font-size: 12px;color: #fff;text-align: center;text-transform: uppercase;}
}
> p {
font-size: 14px;background: #eee;padding:20px 10px;line-height: 28px;
}
}
}
.news_sidebar {width: 255px;background:#fff;border:1px solid #eee;margin-bottom: 30px;padding-bottom:10px;
h3 {border-bottom:1px solid #eee;border-left: 3px solid @mc1;line-height: 40px;text-indent: 1em;}
li {box-sizing:border-box;padding:0px 10px;
a {line-height: 40px;display: block;
img {display: inline-block;margin-right: 10px;vertical-align: middle;}
}
}
}
.content {margin-top: 30px;margin-bottom: 30px;overflow: hidden;}
.custom_article {
img {max-width: 1200px;}
h1 {font-size: 20px;font-weight: bold;text-align: center;}
.meta {display: block;text-align: center;margin-bottom: 20px;}
}
//人才招聘
.jobs_list {
width: 31%; background: #eee; float: left; box-sizing: border-box; height: 200px; padding: 2rem; margin: 1%; cursor: pointer;box-sizing: border-box;margin: 20px 1%;
h4 {
font-weight: 400;font-size: 24px;margin-bottom: 20px;
span {font-size: 34px;margin-left: 10px;}
}
p {line-height: 24px;}
}
.jobs_list:hover {
.transition(.8s);
h4 {color: #fff;}
p {color: #fff;}
}
//招聘详情页
.jobs {
table {
border:1px solid #333;
tr:nth-of-type(1) {
background: #000;
td {
text-align:center;
strong {color: #fff;}
}
}
td {text-align: center;}
}
tr {height: 40px;}
.well {
min-height: 300px;
> p:nth-child(1) {font-size: 18px;color: #202020;margin-top: 20px;margin-bottom: 20px;background: #eee;line-height:30px;text-indent: 1em;}
> a:last-child {margin-top: 60px;font-size: 18px;color: #fff;display: block;width: 150px;height: 50px;text-align: center;background: @mc1;line-height:50px;}
> a:last-child:hover {font-weight: bold;}
}
}
//招聘留言页面
#form2{
.order {
width: 1000px;margin:0 auto;border:1px dashed #ccc;
tr {
td:nth-of-type(1) {width: 300px;}
td:nth-of-type(2) {
width: 700px;
}
}
}
}
// 面包屑导航
.navitation_bar {
background:#fff;height: 70px;margin-bottom: 35px;
.main {
border-bottom:1px solid #dedede; font-size: 16px;color: #666;line-height: 70px;
span {display: inline-block;color: #333;line-height: 35px;font-size: 16px;}
a {font-size: 16px;color: #666;}
}
}
.clearfix,.clear {clear: both;}
.page {
text-align: center;padding: 30px 0; line-height: 30px;
.current {border:1px solid @mc1;padding:0px 8px;display: inline-block;height: 30px;}
a {display: inline-block;height: 30px;padding:0px 5px;line-height: 30px;text-align: center;border:1px solid @mc1;background: @mc1;vertical-align: top;color: #fff;}
.btn-inverse {background: @mc1;color: #fff;vertical-align: top;}
select {height: 32px;vertical-align: top;background: @mc1;color: #fff;border:1px solid @mc1;}
}
.news_info_content {
width: 950px;
.page-header {
h1 {font-size: 25px;color: #000;margin-bottom: 10px;}
p {text-align: center;}
margin-bottom: 25px;
}
.list-con {
min-height: 450px;
}
}
.news_info {min-height: 450px;}
.product_info_main {
min-height:450px;margin-top:20px;width: 950px;
> div:nth-of-type(1) {
height: 400px;
.product_info_main_img {
width:500px;height:400px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #ccc;
img {position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}
}
> div:nth-of-type(2) {
width:430px;height: 400px;
h1 {display: block;margin: 10px auto;text-align: left;font-size: 22px;border-bottom: dashed 1px #ccc;padding-bottom: 15px;}
p {margin-top: 20px;font-size: 14px;line-height: 36px;margin-bottom: 30px;}
a {display: block;background: @mc2;width: 150px;line-height: 50px;text-align: center;color: #fff;}
}
}
> div:nth-child(2) {
height: 40px;background: #eee;margin-bottom: 20px;margin-top: 20px;
h4 {
width: 20%; background: @mc2; color: #fff; font-size: 16px; text-align: center; line-height: 40px;
}
}
.product_info_content {min-height:200px;width: 950px;margin: 0 auto;}
}
.product_info_main2 {
.product_info_main2_top {
.product_info_main_img {
margin:20px auto;
// width: 500px;height: 500px;border:1px solid #ccc;position:relative;margin:0 auto;
// img {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:auto;max-width: 100%;max-height: 100%;margin:auto;}
img {display: block;max-height: 500px;margin:0 auto;}
}
h1 {text-align: center;font-size: 20px;line-height: 40px;}
}
.product_info_content_title {
background: #ccc;margin-top: 30px;
h4 {display: inline-block;line-height: 40px;background: #999;padding:0px 20px;color: #fff;}
}
.product_info_content {
min-height: 200px;padding:20px 0;
}
}
.product_info_main1 {
min-height:450px;width: 950px;
> div:nth-of-type(1) {
.product_info_main_img {
width:500px;height:400px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #ccc;background:#fff;
img {position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}
}
> div:nth-of-type(2) {
width:390px;height: 400px;
h1 {display: block;margin: 10px auto;text-align: left;font-size: 22px;border-bottom: dashed 1px #ccc;line-height: 80px;margin-bottom: 30px;}
table {
width: 300px;
tr {
td:nth-of-type(1) {width: 80px;height: 40px;line-height: 40px;}
td:nth-of-type(2) {width: 220px;height: 40px;line-height: 40px;}
}
}
}
}
> div:nth-child(2) {
height: 40px;background: #eee;margin:30px auto;
h4 {
width: 20%; background: @mc1; color: #fff; font-size: 16px; text-align: center; line-height: 40px;
}
}
.product_info_content {min-height:200px;width: 1000px;margin: 0 auto;}
}
// .back_to_top {
// position: fixed;bottom: 155px;left: 50%;margin-left: 630px;cursor: pointer;
// }
.move_self:hover {
-ms-transform:translateY(-10px); -webkit-transform:translateY(-10px); -o-transform:translateY(-10px); -moz-transform:translateY(-10px);
transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s;
}
//悬浮 图片向上移动
.move_y:hover img {
-ms-transform:translateY(-10px); -webkit-transform:translateY(-10px); -o-transform:translateY(-10px); -moz-transform:translateY(-10px);
transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s;
}
//悬浮 图片放大
.move_big:hover img {
transform:scale(1.05); -ms-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05); -moz-transform:scale(1.05);
transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s;
}
.move_big_self:hover {
transform:scale(1.05); -ms-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05); -moz-transform:scale(1.05);
transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.move_circle:hover img {
-webkit-transform: rotate(360deg);
animation: rotation 15s linear infinite;
-moz-animation: rotation 15s linear infinite;
-webkit-animation: rotation 15s linear infinite;
-o-animation: rotation 15s linear infinite;
}
//按钮效果
.btn-0 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-0:before { background: @qt1;content: '';.transition(all .6s);position: absolute;top: 0;left: 0;width: 0;height: 100%;z-index: -1;}
.btn-0:hover:before {width: 100%;}
.btn-1 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-1:before {.transition(all .6s);content: '';width: 0;height: 0;.rotate(360deg);border-style: solid;border-width: 0 0 0 0;border-color:@mc1 transparent transparent transparent;position: absolute;top: 0;left: 0;z-index: -1;}
.btn-1:hover:before {border-width: 900px 900px 0 0;}
.btn-2 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-2:before {content: '';position: absolute;bottom: 0;left: 0; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent @mc1;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-2:after {border-style: solid;content: '';width: 0;height: 0;border-width: 0 0 0 0;border-color: transparent @mc1 transparent transparent;position: absolute;right: 0;top: 0;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-2:hover:before {border-width: 165px 0 0 165px;}
.btn-2:hover:after {border-width: 0 165px 165px 0;}
.btn-3 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-3:before {content: '';position: absolute;bottom: 0;left: 0; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent @qt6;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-3:after {border-style: solid;content: '';width: 0;height: 0;border-width: 0 0 0 0;border-color: transparent transparent @qt6 transparent;position: absolute;right: 0;bottom: 0;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-3:hover:before {border-width: 222px 0 0 222px;}
.btn-3:hover:after {border-width: 0 0 222px 222px;}
.btn-4 {position: relative;overflow: hidden;.transition(all .2s);display: block;z-index: 1;}
.btn-4:before, .btn-4:after {position: absolute;top: 50%;content: '';width: 20px;height: 20px;background: #3655ca;.border-radius(50%);z-index: -1;}
.btn-4:before {left: -20px;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}
.btn-4:after {right: -20px;-webkit-transform: translate(50%, -50%);-moz-transform: translate(50%, -50%);-mz-transform: translate(50%, -50%);-o-transform: translate(50%, -50%);transform: translate(50%, -50%);}
.btn-4:hover:before {-webkit-animation: criss-cross-left 0.8s both;-moz-animation: criss-cross-left 0.8s both;-o-animation: criss-cross-left 0.8s both;-ms-animation: criss-cross-left 0.8s both;animation: criss-cross-left 0.8s both;}
.btn-4:hover:after {-webkit-animation: criss-cross-right 0.8s both;-moz-animation: criss-cross-right 0.8s both;-ms-animation: criss-cross-right 0.8s both;-o-animation: criss-cross-right 0.8s both;animation: criss-cross-right 0.8s both;}
@-webkit-keyframes criss-cross-left {
0% {left: -20px;}
50% {left: 50%;width: 20px;height: 20px;}
100% {left: 50%;width: 375px;height: 375px;}
}
@keyframes criss-cross-left {
0% {left: -20px;}
50% {left: 50%;width: 20px;height: 20px;}
100% {left: 50%;width: 375px;height: 375px;}
}
@-webkit-keyframes criss-cross-right {
0% {right: -20px;}
50% {right: 50%;width: 20px;height: 20px;}
100% {right: 50%;width: 375px;height: 375px;}
}
@keyframes criss-cross-right {
0% {right: -20px;}
50% {right: 50%;width: 20px;height: 20px;}
100% {right: 50%;width: 375px;height: 375px;}
}
.btn-5 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-5:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;right: 0;border-color: transparent #3f444e transparent transparent;}
.btn-5:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;bottom: 0;left: 0;border-color: transparent transparent transparent #3f444e;}
.btn-5:hover:before, .btn-5:hover:after {border-width:80px 433px;}
.btn-6 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-6:before, .btn-6:after {content: '';position: absolute;top: 0;left: 0;width: 250px;height: 0;background:@qt6;.transition(all .6s);z-index: -1;}
.btn-6:after {top: auto;bottom: 0;}
.btn-6:hover:before, .btn-6:hover:after {height: 40px;}
.btn-7{position:relative;transform-style:preserve-3d;transition:0.4s;}
.btn-7:hover{transform:translateZ(20px) rotateX(360deg) scale(1.1);}
.btn-8{position:relative;transform-style:preserve-3d;transition:0.4s;}
.btn-8:hover{transform:rotateY(360deg) scale(1.1);}
.btn-9{position: relative;
&::after{position: absolute; content: "";width: 100%;height: 100%;left: 0;top: 0;background: @qt6;transition: transform .4s cubic-bezier(.4,0,.2,1);transform-origin:right bottom;transform: scaleX(0);z-index: -1;}
}
.btn-9:hover::after{transform: scaleX(1); transform-origin: left bottom;}
//btn-span-1標簽
.btn-span-1 {position: relative;overflow: hidden;.transition(all .6s);display: block;width: 100%;height: 100%;z-index: 1;}
.btn-span-1:before {content: '';position: absolute;bottom: 0;left: 0; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent @qt6;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-span-1:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;right: 0;border-color: transparent @qt6 transparent transparent;}
.btn-span-1 span:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;bottom: 0;right: 0;border-color: transparent transparent @qt6 transparent;}
.btn-span-1 span:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;left: 0;border-color: @qt6 transparent transparent transparent;}
.btn-span-1:hover:before {border-width: 165px 0 0 165px;}
.btn-span-1:hover:after {border-width: 0 165px 165px 0;}
.btn-span-1:hover span:before {border-width: 0 0 165px 165px;}
.btn-span-1:hover span:after {border-width: 165px 165px 0 0;}
//btn-span-2標簽
.btn-span-2{position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-span-2:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;right: 0;border-color: transparent @qt6 transparent transparent;}
.btn-span-2:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;bottom: 0;left: 0;border-color: transparent transparent transparent @qt6;}
.btn-span-2:before, .btn-span-2:after {border-color:@qt6;}
.btn-span-2span:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;left: 0;border-color: @qt6 transparent transparent transparent;}
.btn-span-2span:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;right: 0;bottom: 0;border-color: transparent transparent @qt6 transparent;}
.btn-span-2span:before, .btn-span-2span:after {border-color: @qt6;}
.btn-span-2:hover:before {border-width: 20px 62.5px;}
.btn-span-2:hover:after {border-width: 20px 62.5px;}
.btn-span-2:hover span:before {border-width: 20px 62.5px;}
.btn-span-2:hover span:after {border-width: 20px 62.5px;}
//btn-span-3標簽
.btn-span-3 {position: relative;overflow: hidden;.transition(all .6s);display: block;;z-index: 1;}
.btn-span-3 span {position: absolute;display: block;width: 0;height: 0;.border-radius(50%);background: @qt6;z-index: -1; -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition:width 0.4s, height 0.4s;-moz-transition:width 0.4s, height 0.4s;-ms-transition:width 0.4s, height 0.4s;-o-transition:width 0.4s, height 0.4s;transition:width 0.4s, height 0.4s;}
.btn-span-3:hover span {width: 562.5px;height: 562.5px;}
//btn-span-4標簽
.btn-span-4 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-span-4:before, .btn-span-4:after,.btn-span-4 span:before,.btn-span-4 span:after {content: '';position: absolute;top: 0;width: 63.5px;height: 0;background: #012f04;.transition(all .6s);z-index: -1;}
.btn-span-4:before {left: 0;}
.btn-span-4:after {left: 125px;}
.btn-span-4 span:before, .btn-span-4 span:after {top: auto;bottom: 0;}
.btn-span-4 span:before {left: 62.5px;}
.btn-span-4 span:after {left: 187.5px;}
.btn-span-4:hover {color: #c0d3c1;}
.btn-span-4:hover:before, .btn-span-4:hover:after,.btn-span-4:hover span:before,.btn-span-4:hover span:after {height: 80px;}
//btn-span-5標簽
.btn-span-5 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-span-5:before, .btn-span-5:after,.btn-span-5 span:before,.btn-span-5 span:after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 0;background:fade(@qt6,50%);.transition(all .6s);z-index: -1;}
.btn-span-5:after,.btn-span-5 span:before {top: auto;bottom: 0;}
.btn-span-5 span:before,.btn-span-5 span:after { -webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-ms-transition-delay: 0.4s;-o-transition-delay: 0.4s;transition-delay: 0.4s;z-index: -1;}
.btn-span-5:hover:before, .btn-span-5:hover:after,.btn-span-5:hover span:before,.btn-span-5:hover span:after {height: 80px;}
//btn-span-6標簽
.btn-span-6 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-span-6:before, .btn-span-6:after,.btn-span-6 span:before,.btn-span-6 span:after {content: '';position: absolute;top: 0;left: 0;width: 0;height: 80px;background: fade(@qt6,25%);.transition(.4s);z-index: -1;}
.btn-span-6:after,.btn-span-6 span:before {left: auto;right: 0;}
.btn-span-6 span:before,.btn-span-6 span:after {-webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s;-o-transition-delay: 0.4s;-moz-transition-delay: 0.4s;transition-delay: 0.4s;}
.btn-span-6:hover:before, .btn-span-6:hover:after,.btn-span-6:hover span:before,.btn-span-6:hover span:after {width: 250px;}
//btn-span-7標簽
.btn-span-7 {.transition(.5s);position: relative;overflow: hidden;display: block;}
.btn-span-7 span {.transition(.3s);}
.btn-span-7:hover{background-color:@qt6;}
.btn-span-7:hover > span{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0px,-40px);transform: translate(0px,-40px);}
.btn-span-7::after{position: absolute;content: attr(data-text);-webkit-transform: translate(0, 30%);transform: translate(0, 30%);width: 100%;height: 100%;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);.transition(.3s);}
.btn-span-7:hover::after{opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0, 0);transform: translate(0, 0);}
//btn-span-7-1標簽
.btn-span-7-1 {.transition(.5s);position: relative;overflow: hidden;display: block;}
.btn-span-7-1 span {.transition(.3s);}
.btn-span-7-1:hover{background-color:@qt6;}
.btn-span-7-1:hover > span{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0px,40px); transform: translate(0px,40px);}
.btn-span-7-1::after{position: absolute;content: attr(data-text);-webkit-transform: translate(-30%,0);transform: translate(-30%,0);width: 100%;height: 100%;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);.transition(.3s);
}
.btn-span-7-1:hover::after{-webkit-transform: translate(0, 0);opacity: 1;filter: alpha(opacity=100);transform: translate(0, 0);}
//btn-span-7-2標簽
.btn-span-7-2 {.transition(.5s);position: relative;overflow: hidden;display: block;}
.btn-span-7-2 span {.transition(.3s);}
.btn-span-7-2:hover{background-color:@qt6;}
.btn-span-7-2:hover > span{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0px,40px); transform: translate(0px,40px);}
.btn-span-7-2::after{position: absolute;content: attr(data-text);-webkit-transform: translate(-30%, -50%) rotate(-30deg); transform: translate(-30%, -50%) rotate(-30deg); width: 100%;height: 100%;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);.transition(.3s);
}
.btn-span-7-2:hover::after{-webkit-transform: translate(0, 0);opacity: 1;filter: alpha(opacity=100);transform: translate(0, 0);}
//btn-span-8標簽
@-webkit-keyframes jello {
from, 11.1%, to {-webkit-transform: none;transform: none;}
22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);transform: skewX(-12.5deg) skewY(-12.5deg);}
33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg);transform: skewX(6.25deg) skewY(6.25deg);}
44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);transform: skewX(-3.125deg) skewY(-3.125deg);}
55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);transform: skewX(1.5625deg) skewY(1.5625deg);}
66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);transform: skewX(-0.78125deg) skewY(-0.78125deg);}
77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);transform: skewX(0.390625deg) skewY(0.390625deg);}
88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}
@keyframes jello {
from, 11.1%, to {-webkit-transform: none;transform: none;}
22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);transform: skewX(-12.5deg) skewY(-12.5deg);}
33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg);transform: skewX(6.25deg) skewY(6.25deg);}
44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);transform: skewX(-3.125deg) skewY(-3.125deg);}
55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);transform: skewX(1.5625deg) skewY(1.5625deg);}
66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);transform: skewX(-0.78125deg) skewY(-0.78125deg);}
77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);transform: skewX(0.390625deg) skewY(0.390625deg);}
88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}
.btn-span-8{.transition(.5s);position: relative;display: block;}
.btn-span-8:hover{background-color:fade(@qt6,20%); -webkit-animation-name: jello;animation-name: jello;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
//btn-span-9標簽
.btn-span-9{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;}
.btn-span-9 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-9::before{content: '';position: absolute;top: 0;left: 0;-webkit-transform: scale(0.5, 1);transform: scale(0.5, 1);width: 100%; height: 100%; z-index: 1; opacity: 0;filter: alpha(opacity=0); background-color: @qt6;.transition(.4s);}
.btn-span-9:hover::before{ opacity: 1;filter: alpha(opacity=100); -webkit-transform: scale(1, 1); transform: scale(1, 1);}
//btn-span-9-1標簽
.btn-span-9-1{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;}
.btn-span-9-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-9-1::before{content: '';position: absolute;top: 0;left: 0;-webkit-transform: scale(1,0.5);transform: scale(1,0.5);width: 100%; height: 100%; z-index: 1; opacity: 0;filter: alpha(opacity=0); background-color: @qt6;.transition(.4s);}
.btn-span-9-1:hover::before{ opacity: 1;filter: alpha(opacity=100); -webkit-transform: scale(1, 1); transform: scale(1, 1);}
//btn-span-10標簽
.btn-span-10{.transition(.5s);position: relative;display: block;overflow: hidden;}
.btn-span-10 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-10::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; opacity: 0;filter: alpha(opacity=0); background-color: @qt6;.transition(.4s);}
.btn-span-10:hover::before{transform: skewX(-180deg) scale(0.6,1);opacity: 1;filter: alpha(opacity=100);-webkit-transform: skewX(-180deg) scale(0.6,1);}
//btn-span-11標簽
.btn-span-11{.transition(.5s);position: relative;display: block;}
.btn-span-11 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-11::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.5);.transition(.4s); border: 1px solid rgba(255,255,255,0.5);}
.btn-span-11::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25);}
.btn-span-11:hover::before{.rotate(-45deg);background-color: rgba(255,255,255,0);}
.btn-span-11:hover::after{.rotate(45deg);background-color: rgba(255,255,255,0);}
//btn-span-12標簽
.btn-span-12{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;perspective: 2000px;}
.btn-span-12 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-12::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.4s);}
.btn-span-12::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25);}
.btn-span-12:hover::before{-webkit-transform: rotateX(60deg) translate(0px,40px);transform: rotateX(60deg) translate(0px,40px) ;}
.btn-span-12:hover::after{-webkit-transform: rotateX(-60deg) translate(0px,-40px) ;transform: rotateX(-60deg) translate(0px,-40px) ;}
//btn-span-13標簽
.btn-span-13 {.transition(.5s);position: relative;display: block;}
.btn-span-13 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-13::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.4s);}
.btn-span-13:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);}
.btn-span-13::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25);filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0.5,0.5);transform: scale(0.5,0.5);}
.btn-span-13:hover::after{opacity: 1 ;filter: alpha(opacity=100);-webkit-transform: scale(1,1);transform: scale(1,1);}
//btn-span-13-1標簽
.btn-span-13-1{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;}
.btn-span-13-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-13-1::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.4s);background-color: rgba(255,255,255,0.25);.transition(.3s);}
.btn-span-13-1:hover::before{opacity:0 ;filter: alpha(opacity=0);-webkit-transform: scale(0.5,0.5);transform: scale(0.5,0.5);}
.btn-span-13-1::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;opacity:0 ;filter: alpha(opacity=0);.transition(.3s);-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);border: 1px solid rgba(255,255,255,0.5);}
.btn-span-13-1:hover::after{opacity:1 ;filter: alpha(opacity=100);-webkit-transform: scale(1,1);transform: scale(1,1);}
//btn-span-14標簽
.btn-span-14 {.transition(.5s);position: relative;display: block;overflow: hidden;}
.btn-span-14 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14::before, .btn-span-14::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(0,-100%);transform: translate(0,-100%);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14:hover::before, .btn-span-14:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-1標簽
.btn-span-14-1{.transition(.5s);position: relative;display: block;overflow: hidden;}
.btn-span-14-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-1::before, .btn-span-14-1::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-100%,0);transform: translate(-100%,0);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-1::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-1:hover::before, .btn-span-14-1:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-2標簽
.btn-span-14-2 {.transition(.5s);position: relative;display: block;overflow: hidden;}
.btn-span-14-2 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-2::before, .btn-span-14-2::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-2::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-2:hover::before, .btn-span-14-2:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-3標簽
.btn-span-14-3 {.transition(.3s);position: relative;display: block;overflow: hidden;}
.btn-span-14-3 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-3::before, .btn-span-14-3::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(13%,190%) rotate(-30deg);transform: translate(13%,190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-3::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-3:hover::before, .btn-span-14-3:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-4標簽
.btn-span-14-4 {.transition(.3s);position: relative;display: block;overflow: hidden;}
.btn-span-14-4 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-4::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(13%,190%) rotate(-30deg);transform: translate(13%,190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-4::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-4::before{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-4:hover::before, .btn-span-14-4:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-5標簽
.btn-span-14-5 {.transition(.3s);position: relative;display: block;overflow: hidden;}
.btn-span-14-5 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-5::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(13%,-190%) rotate(30deg);transform: translate(13%,-190%) rotate(30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-5::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-5::before{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-5:hover::before, .btn-span-14-5:hover::after{transform: translate(0,0);-webkit-transform: translate(0,0);}
//btn-span-15標簽
.btn-span-15 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0,-105%);transform: translate(0,-105%);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-1標簽
.btn-span-15-1{.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-1::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-105%,0);transform: translate(-105%,0);border-right-width: 1px;border-right-style: solid;border-right-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-1:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-2標簽
.btn-span-15-2 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-2 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-2::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-2:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-3標簽
.btn-span-15-3 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-3 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-3::before, .btn-span-15-3::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0,-105%);transform: translate(0,-105%);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-3::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-15-3:hover::before, .btn-span-15-3:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-4標簽
.btn-span-15-4 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-4 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-4::before, .btn-span-15-4::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-105%,0);transform: translate(-105%,0);border-right-width: 1px;border-right-style: solid;border-right-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-4::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-15-4:hover::before, .btn-span-15-4:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-5標簽
.btn-span-15-5 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-5 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-5::before, .btn-span-15-5::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-5::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-15-5:hover::before, .btn-span-15-5:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-16標簽
.btn-span-16 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;border: 1px solid rgba(255,255,255,1);}
.btn-span-16:hover{border: 1px solid rgba(255,255,255,0);}
.btn-span-16::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;z-index: 1;.transition(.5s); -webkit-transform: translate(-100%, -600%) rotate(30deg);transform: translate(-100%, -600%) rotate(30deg);background-color: rgba(255,255,255,0.5);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-16:hover::before{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-17標簽
.btn-span-17 {.transition(.3s);position: relative;display: block;overflow: hidden;}
.btn-span-17 span{position: relative;.transition(.3s);z-index:2;letter-spacing:0;}
.btn-span-17::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;filter: alpha(opacity=0);.transition(.3s);border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: rgba(255,255,255,0.5);border-bottom-color: rgba(255,255,255,0.5);-webkit-transform: scale(0.1, 1);transform: scale(0.1, 1);}
.btn-span-17:hover span{letter-spacing: 2px;}
.btn-span-17:hover::before{filter: alpha(opacity=100);opacity: 1;-webkit-transform: scale(1, 1);transform: scale(1, 1);}
.btn-span-17::after{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.25);}
.btn-span-17:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0.1, 1);transform: scale(0.1, 1);}
//btn-span-18標簽 translate Y轴高度取决于a標簽的一半高度
.btn-span-18 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;border-right-width: 1px;border-left-width: 1px;border-right-style: solid;border-left-style: solid;border-right-color: rgba(255,255,255,0.5);border-left-color: rgba(255,255,255,0.5);}
.btn-span-18 span{.transition(.3s);letter-spacing:0;}
.btn-span-18:hover span{letter-spacing: 2px;}
.btn-span-18:hover{ border-right-color: rgba(255,255,255,0);border-left-color: rgba(255,255,255,0);}
.btn-span-18::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);}
.btn-span-18:hover::before{transform: translate(0,-45px) rotate(-45deg);}
.btn-span-18::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 1px;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);}
.btn-span-18:hover::after{transform: translate(0,45px) rotate(45deg);}
//btn-span-19標簽
.btn-span-19 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: rgba(255,255,255,0.5);border-bottom-color: rgba(255,255,255,0.5);}
.btn-span-19 span{.transition(.3s);letter-spacing:0;}
.btn-span-19:hover span{letter-spacing: 2px;}
.btn-span-19:hover{border-top-color: rgba(255,255,255,0);border-bottom-color: rgba(255,255,255,0);}
.btn-span-19::before{content: '';position: absolute;top: 0;right: 0;width: 1px;height: 100%;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);}
.btn-span-19:hover::before{-webkit-transform: translate(-94.9845px,0) rotate(270deg);-moz-transform: translate(-94.9845px,0) rotate(270deg);transform: translate(-94.9845px,0) rotate(270deg);}
.btn-span-19::after{content: '';position: absolute;top: 0;left: 0;width: 1px;height: 100%;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);}
.btn-span-19:hover::after{-webkit-transform: translate(94.9845px,0) rotate(180deg);-moz-transform: translate(94.9845px,0) rotate(180deg);transform: translate(94.9845px,0) rotate(180deg);}
//btn-span-20標簽 文字顶上去的效果
.btn-span-20{position: relative;overflow: hidden;;display: block;
span{display: block;.transition(.4s);}
span::before{content:attr(data-hover);position: absolute;top: 100%;.transition(.4s);left: 0;}
}
.btn-span-20:hover{
span{transform: translateY(-100%);}
}
www.5home.ccwww.68meet.com0531gkyy.comwww.0851gztq.comwww.171849.comyoumaoyou.comzjchaochao.comyuandongair.comxiaochengxu18.comntyongwang.com
That last fact occupied a central place in his mind just at present, but it was also another source of irritation. Lilian was intellectual as well as fascinating, and the former attribute became more marked as they grew more intimate. Instead of charming little notes inviting him to tea he now received long, and, he was obliged to admit, quite excellent essays upon the true place of woman in modern life. He was bound to applaud, but such activity of mind was by no means to his taste. He liked[Pg 47] a woman to have thoughts; but a thinking woman was a nuisance. It is, perhaps, characteristic of the times that Aelian’s stories should redound more especially to the credit of Asclêpius and Heracles, who were not gods of the first order, but demi-gods or deified mortals. Their worship, like that of the Nature-powers connected with earth rather than with heaven, belongs particularly to the popular religion, and seems to have been repressed or restrained in societies organised on aristocratic principles. And as more immediate products of the forces by which supernaturalist beliefs are created and maintained, such divinities would profit by the free scope now given to popular predilections. In their case also, as with the earth-goddesses Dêmêtêr and Isis, a more immediate and affectionate relation might be established between the believer and the object of his worship than had been possible in reference to the chief Olympian gods. Heracles had lived the life of a man, his activity had been almost uniformly beneficent, and so he was universally invoked, as a helper and healer, in the sick-chamber no less231 than on the storm-tost ship.354 Asclêpius was still more obviously the natural refuge of those who were afflicted with any bodily disease, and, in a time of profound peace, this was of all calamities the most likely to turn men’s thoughts towards a supernatural protector. Hence we find that where, apart from Christianity, the religious enthusiasm of the second century reaches its intensest expression, which is in the writings of the celebrated rhetor Aristeides, Asclêpius comes in for the largest share of devotional feeling. During an illness which continued through thirteen years, Aristeides sought day and night for help and inspiration from the god. It came at last in the usual form of a prescription communicated through a dream. Both on this and on other occasions, the excitement of an overwrought imagination combined with an exorbitant vanity made the sophist believe himself to be preferred above all other men as an object of the divine favour. At one time he would see himself admitted in his dreams to an exchange of compliments with Asclêpius; at other times he would convert the most ordinary incidents into signs of supernatural protection. Thus his foster-sister having died on the day of his own recovery from a dangerous epidemic, it was revealed to him in a dream that her life had been accepted as a ransom for his. We are told that the monks of the Middle Ages could not refrain from expressing their indignant contempt for the insane credulity of Aristeides, in marginal notes on his orations; but the last-mentioned incident, at least, is closely paralleled by the well-known story that a devout lady was once permitted to redeem the life of Pius IX. by the sacrifice of her own.355 Dick located the crack-up, Sandy indicated the spot and the pilot dropped so low that his trucks almost grazed the waving eel-grass. The probable outcome of things at the rate they were going was perfectly apparent. Landor would advance in age, respectability, and rank, and would be retired and settle down on three-fourths pay. He himself would end up in some cow-boy row, degraded and worthless, a tough character very probably, a fine example of nothing save atavism. And Felipa would grow old. That splendid triumphant youth of hers would pass, and she would be a commonplace, subdued, middle-aged woman, in whom a relapse to her nature would be a mere vulgarity. One had gone mad with loco-weed, and they gored each other's sides until the blood ran, while only a low, moaning bellow came from their dried throats. A cloud of fine dust, that threw back the sun in glitters, hung over them, and a flock of crows, circling above in the steel-blue sky, waited. And so Si went painstakingly through the whole squad until he came to Abel Waite, whom he found did not need any instruction, for he had profited by hearing the lectures to the others, and was standing as stiff and correct as a veteran could have done. Xi extends condolences over Hong Kong building fire, urges all-out rescue efforts to minimize losses
(Xinhua) 08:02, November 27, 2025
BEIJING, Nov. 26 (Xinhua) -- Chinese President Xi Jinping on Wednesday extended condolences over a deadly residential building fire in Hong Kong, which killed at least 13 people.
Xi, also general secretary of the Communist Party of China (CPC) Central Committee and chairman of the Central Military Commission, expressed sympathy to the families of the victims and those affected by the disaster. He urged all-out efforts to extinguish the fire and minimize casualties and losses.
In the wake of the fire, Xi attached great importance to the accident and immediately sought updates on the rescue efforts and casualties.
Xi instructed the director of the Liaison Office of the Central People's Government in the Hong Kong Special Administrative Region (HKSAR) to convey his condolences and sympathies to HKSAR Chief Executive John Lee.
He required the Hong Kong and Macao Work Office of the CPC Central Committee and the liaison office to support the HKSAR government in making all-out efforts to put out the fire, do everything possible in search and rescue, treat the injured, and comfort the victims' families.
(Web editor: Zhang Kaiwei, Du Mingming)
China releases white paper on arms control in new era
(Xinhua) 10:19, November 27, 2025
BEIJING, Nov. 27 (Xinhua) -- China's State Council Information Office on Thursday released a white paper titled "China's Arms Control, Disarmament, and Nonproliferation in the New Era."
The white paper said that China plays a constructive role in international arms control, disarmament, and nonproliferation, and actively offers its initiatives and solutions.
China has been and will always be a builder of world peace, a contributor to global development, and a defender of the international order, it said.
The white paper was released to comprehensively present China's policies and practices on arms control, disarmament, and nonproliferation, and its position on security governance in emerging fields such as outer space, cyberspace, and artificial intelligence.
It was also to restate China's commitment to safeguarding world peace and security, and to call on countries around the world to work together for international arms control.
The white paper noted that China is committed to upholding the international arms control regime with the United Nations (UN) at its core. It works to promote global governance in arms control, supports all efforts to build a world of lasting peace and common security, and serves as a key promoter of international arms control.
It also noted that as a permanent member of the UN Security Council, China has actively safeguarded the authority and effectiveness of the international arms control regime, played a constructive role in multilateral arms control in the nuclear, biological, chemical and other fields, and conscientiously performed its duties prescribed by international arms control treaties, making its due contribution to international arms control.
Emerging fields such as outer space, cyberspace, and AI represent new frontiers for human development. They create a new focus of strategic security, and new territories of global governance, the white paper pointed out.
China proposes that with the universal participation of all countries, the UN should play a pivotal role in fostering a global governance framework and standards for emerging fields based on broad consensus, while increasing the representation and voice of developing countries, it added.
The white paper stressed that China continues to build its domestic nonproliferation capacity, actively participating in the international nonproliferation process, promoting international cooperation on peaceful uses of science and technology, and facilitating the improvement of global nonproliferation governance.
Chinese modernization follows the path of peaceful development, and China's growth contributes to the growth of the world's peaceful forces. China stands ready to work with all peace-loving countries to build an equal and orderly multipolar world and promote universally beneficial and inclusive economic globalization. It will consolidate and develop the UN-centered international arms control regime, work with all parties to build a community with a shared future for humanity, and create a brighter future for all, according to the white paper.
The Chinese Foreign Ministry on Tuesday said the atmosphere of the phone call between Chinese President Xi Jinping and U.S. President Donald Trump on Monday was "positive, friendly, and constructive."
At a regular press briefing on Tuesday, Foreign Ministry spokesperson Mao Ning confirmed that the U.S. side had initiated the call. She noted that since the start of President Trump's second term, the two leaders have maintained frequent communication.
Mao said the two heads of state exchanged views on issues of mutual concern, stressing that such communication is vital for the stable development of China鈥揢.S. relations.
All rights properties of their respective server3656811777 ENTER NUMBET 005HoME五男二女激情小小说_搞av电影午夜经典性三级 - 百度_一级A性午夜影院天涯社区_天堂小视频网红美女野外私密福利视频_大香蕉jj爆乳小视频