/*@import "//at.alicdn.com/t/c/font_4098539_6s50jmtg84t.css" ;*/ @import "../font/iconfont.css"; .iconfont{ font-size: 20px ;} :root { --black:#1a1a1a; --red: #f00; --orange: #ffa400; --blue: #01a0f4; --gray: #8F8E94; } @font-face { font-family: "NotoSansHans"; src: url("../font/NotoSansHans-Regular.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: 'sourceHhanSans'; src: url('../font/sourcehansanscn-regular-webfont.woff2') format('woff2'), url('../font/sourcehansanscn-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } *{ box-sizing: border-box; margin:0;padding:0; outline:none;} body,th,td,input,select,textarea,button {font-family:"sourceHhanSans","PingFang SC","Arial","寰蒋闆呴粦","SF Pro SC","Microsoft Yahei Lighter","Helvetica Neue","Helvetica",sans-serif;color:#333} /* 閲嶇疆椤甸潰鏂囧瓧灞炴€ */ fieldset,img {border:0 none} /* 閲嶇疆fieldset锛堣〃鍗曞垎缁勶級銆佸浘鐗囩殑杈规涓?*/ dl,ul,ol,menu,li {list-style:none} /* 閲嶇疆绫昏〃鍓嶅绗﹀彿涓簅nne,menu鍦℉TML5涓湁鏁 */ blockquote, q {quotes: none} /* 閲嶇疆宓屽寮曠敤鐨勫紩鍙风被鍨 */ blockquote:before, blockquote:after,q:before, q:after {content:'';content:none} /* 閲嶇疆宓屽寮曠敤*/ input,select,textarea,button {vertical-align:middle;resize:none;-webkit-appearance: none !important;outline: none; border:none; background:transparent;} /* 閲嶇疆琛ㄥ崟鎺т欢鍨傜洿灞呬腑*/ button { cursor:pointer} /* 閲嶇疆琛ㄥ崟button鎸夐挳鏁堟灉 */ a {color:#333;text-decoration:none;border:0 none;} /* 閲嶇疆閾炬帴a鏍囩 */ address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal} /* 閲嶇疆鏍峰紡鏍囩鐨勬牱寮 */ caption {display:none;} /* 閲嶇疆琛ㄦ牸鏍囬涓洪殣钘 */ table {border-collapse:collapse;border-spacing:0;} /* 閲嶇疆table灞炴€ */ img{ border:0 none; max-width: 100%; vertical-align: middle; transition:all .6s ; -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; } /* 鍥剧墖鍦ㄥ綋鍓嶈鍐呯殑鍨傜洿浣嶇疆 */ a img{border:0 none;} em,i{font-style:normal;} h3,h4,h5,h6{ font-weight: normal;} table{margin:5px auto;width:100%;} table,tr,td,th {border: 1px solid #bbb;padding: 0.4rem;border-collapse: collapse;text-align:center;} /* 鍙栨秷a鏍囩鐐瑰嚮鍚庣殑铏氱嚎妗 */ a {outline: none;color: inherit;-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none;} ::-webkit-scrollbar {width:5px;background-color: #F5F5F5;} /* 婊氬姩妲 */::-webkit-scrollbar-track { border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0; } /* 婊氬姩鏉℃粦鍧 */::-webkit-scrollbar-thumb { border-radius:0; background:var(--black); -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0; } /*娓呴櫎娴姩*/ .fl{ float:left;} .fr{ float:right;} .clear10{height:10px;overflow:hidden;clear:both;} .clear15{height:15px;overflow:hidden;clear:both;} .clear20{height:20px;overflow:hidden;clear:both;} .clear30{height:30px;overflow:hidden;clear:both;} .clear40{height:40px;overflow:hidden;clear:both;} .clear150{height:150px;overflow:hidden;clear:both;} .clearfix:after {content: "";display: block;clear: both;width: 100%;height: 0;line-height: 0;font-size: 0;} .jumpUrl{ cursor: pointer;} /* input 鐨 placeholder*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#999;} input:-moz-placeholder, textarea:-moz-placeholder {color:#999;} input::-moz-placeholder, textarea::-moz-placeholder {color:#999;} input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #999;} /* padding */ .pt-5{ padding-top: 5px;} .pl-5{ padding-left: 5px;} .pr-5{ padding-right: 5px;} .pb-5{ padding-bottom: 5px;} .p5{ padding: 5px;} .pt-10{ padding-top: 10px;} .pl-10{ padding-left: 10px;} .pr-10{ padding-right: 10px;} .pb-10{ padding-bottom: 10px;} .p10{ padding: 10px;} .pt-15{ padding-top: 15px;} .pl-15{ padding-left: 15px;} .pr-15{ padding-right: 15px;} .pb-15{ padding-bottom: 15px;} .p15{ padding: 15px;} .pt-20{ padding-top: 20px;} .pl-20{ padding-left: 20px;} .pr-20{ padding-right: 20px;} .pb-20{ padding-bottom: 20px;} .p20{ padding: 20px;} .pt-25{ padding-top: 25px;} .pl-25{ padding-left: 25px;} .pr-25{ padding-right: 25px;} .pb-25{ padding-bottom: 25px;} .p25{ padding: 25px;} .pt-30{ padding-top: 30px;} .pl-30{ padding-left: 30px;} .pr-30{ padding-right: 30px;} .pb-30{ padding-bottom: 30px;} .p30{ padding: 30px;} .pt-40{ padding-top: 40px;} .pl-40{ padding-left: 40px;} .pr-40{ padding-right: 40px;} .pb-40{ padding-bottom: 40px;} .p40{ padding: 40px;} .pt-50{ padding-top: 50px;} .pl-50{ padding-left: 50px;} .pr-50{ padding-right: 50px;} .pb-50{ padding-bottom: 50px;} .p50{ padding: 50px;} .pt-60{ padding-top: 60px;} .pl-60{ padding-left: 60px;} .pr-60{ padding-right: 60px;} .pb-60{ padding-bottom: 60px;} .p60{ padding: 60px;} .pt-70{ padding-top: 70px;} .pl-70{ padding-left: 70px;} .pr-70{ padding-right: 70px;} .pb-70{ padding-bottom: 70px;} .p70{ padding: 70px;} /* margin */ .mt-5{ margin-top: 5px;} .ml-5{ margin-left: 5px;} .mr-5{ margin-right: 5px;} .mb-5{ margin-bottom: 5px;} .m5{ margin: 5px;} .mt-10{ margin-top: 10px;} .ml-10{ margin-left: 10px;} .mr-10{ margin-right: 10px;} .mb-10{ margin-bottom: 10px;} .m10{ margin: 10px;} .mt-15{ margin-top: 15px;} .ml-15{ margin-left: 15px;} .mr-15{ margin-right: 15px;} .mb-15{ margin-bottom: 15px;} .m15{ margin: 15px;} .mt-20{ margin-top: 20px;} .ml-20{ margin-left: 20px;} .mr-20{ margin-right: 20px;} .mb-20{ margin-bottom: 20px;} .m20{ margin: 20px;} .mt-25{ margin-top: 25px;} .ml-25{ margin-left: 25px;} .mr-25{ margin-right: 25px;} .mb-25{ margin-bottom: 25px;} .m25{ margin: 25px;} .mt-30{ margin-top: 30px;} .ml-30{ margin-left: 30px;} .mr-30{ margin-right: 30px;} .mb-30{ margin-bottom: 30px;} .m30{ margin: 30px;} .mt-40{ margin-top: 40px;} .ml-40{ margin-left: 40px;} .mr-40{ margin-right: 40px;} .mb-40{ margin-bottom: 40px;} .m40{ margin: 40px;} .mt-50{ margin-top: 50px;} .ml-50{ margin-left: 50px;} .mr-50{ margin-right: 50px;} .mb-50{ margin-bottom: 50px;} .m50{ margin: 50px; } .mt-60{ margin-top: 60px;} .ml-60{ margin-left: 60px;} .mr-60{ margin-right: 60px;} .mb-60{ margin-bottom: 60px;} .m60{ margin: 60px; } .mt-70{ margin-top: 70px;} .ml-70{ margin-left: 70px;} .mr-70{ margin-right: 70px;} .mb-70{ margin-bottom: 70px;} .m70{ margin: 70px; } .mlr{ margin-left: auto; margin-right: auto;} .hidden{ overflow: hidden;} .color-blue{ color: var(--blue);} .color-red{color: var(--red);} .color-black{color: var(--black);} .color-white{ color: white;} .color-white4{ color: rgba(255,255,255,0.4);} .color-white6{ color: rgba(255,255,255,0.6);} .color-000{ color: #000;} .color-666{ color: #666; } .color-888{ color: #888;} .color-555{ color: #555;} .color-999{ color: #999;} .color-aaa{ color: #aaa;} .bg-00{ background-color: #000;} .bg-33{background-color: #333;} .bg-fa{background-color: #fafafa;} .bg-f7{ background-color: #f7f8f9;} .bg-f5{ background-color: #f5f5f5;} .bg-f0{ background-color: #f0f0f0;} .bg-f9{ background-color: #f9fcff;} .bg-blue{background-color: var(--blue);} .bg-red{background-color: var(--red);} .bg-white{ background-color: white;} .bg-22{ background-color: #222222;} .bg-black{ background-color: var(--black);} .bg-666{ background-color: #666;} .bg-888{ background-color: #888;} .bg-555{ background-color: #555;} .bg-aaa{ background-color: #aaa;} .flex-center-center{ display: flex; align-items: center; justify-content: center;} .flex-between-center{ display: flex; justify-content: space-between; align-items: center;} .flex-center{ display: flex; align-items: center;} .flex-between{ display: flex; justify-content: space-between} .flex-between-start{ display: flex; justify-content: space-between;align-items: flex-start;} .flex-between-end{ display: flex; justify-content: space-between;align-items: flex-end;} .flex{ display: flex;} .flex-column{ flex-direction: column;} .flex-wrap{ flex-wrap: wrap;} .flex-end{display: flex; align-items: flex-end;} .flex-content-end{display: flex; justify-content: flex-end;} .flex-start{display: flex; align-items: flex-start;} .iflex{ display: inline-flex} .block{ display: block;} .justify-center{justify-content: center;} .justify-end{justify-content: flex-end;} .justify-start{justify-content: flex-start;} .align-start{align-items: flex-start;} .align-end{align-items: flex-end;} .align-center{align-items: center;} .light{ position: absolute; left: -100%; top: 0; width: 100%; height: 100%; transform: skewx(-25deg); z-index: 2; background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));} .light-tri:hover .light{ left: 100%; transition: 1s;} .light-tri:hover{ box-shadow: 0 0 10px rgba(43 ,23, 110, .5);} .posi{ position: relative;} .posi-a{ position: absolute; top: 0; left: 0;z-index: 3} .z5{ position: relative; z-index: 5;} .z10{ position: relative; z-index: 10;} .hmax{ height: 100% ;} .wmax{ width: 100% ;} .w50{ width: 50% ;} .w55{ width: 55%;} .w49-5{ width: 49.5%;} .w25{ width: 25%;}.w30{ width: 30%;}.w32{ width: 32%;} .w33{ width: 33%;} .w35{ width: 35%;} .w40{ width: 40%;} .w45{ width: 45%;} .w60{ width: 60%;} .w64{ width: 64%;} .w70{ width: 70%;} .w48{ width: 48% ;} .w49{ width: 49%;} .img{ position: relative; overflow: hidden;} .transition{ transition: all .36s;} .transition1{ transition: all 1s;} .line-height{ line-height: 2;} .text-center{ text-align: center;} .text-justify{ text-align: justify;} .text-right{ text-align: right;} .text-left{ text-align: left;} .text-uppercase{ text-transform: uppercase;} .text-capitalize{ text-transform::capitalize} .text-underline{ text-decoration: underline;} .text-nowrap{ white-space: nowrap;} .text-line{ text-decoration:line-through} .text-miao{ text-stroke:1px #ddd; -webkit-text-stroke: 1px #ddd; color: #fff;} .cursor{ cursor: pointer;} .cursor-shou{cursor: url("../images/icoN_shou.png"), auto;} .font-weight{ font-weight: bold;} .font-lighter{ font-weight: lighter;} .font-normal{ font-weight: normal;} .fixed{ position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; -webkit-animation: 300ms ease-in-out 0s normal none fadeInDown; animation: 300ms ease-in-out 0s normal none fadeInDown;} @-webkit-keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}} @keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}} /* white-space: nowrap; overflow: hidden;text-overflow:ellipsis; */ .line-clamp{ word-break:break-all;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;} .line-clamp2{ word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .line-clamp3{ word-break:break-all;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .line-clamp6{ word-break:break-all;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;} .line-clamp5{ word-break:break-all;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;} .line-height2-4{ line-height: 2.4;} .line-height2-8{ line-height: 2.8;} .line-height1{ line-height: 1;} .line-height1-6{ line-height: 1.6;} .line-height3{ line-height: 3;} .opacity8{ opacity: 0.8;} .opacity6{ opacity: 0.6;} .opacity4{ opacity: 0.4;} .opacity2{ opacity: 0.2;} .opacity0{ opacity: 0;} .opacity9{ opacity: .9;} .object{object-fit: cover;} /* 鏍忕洰椤礲anner鎵嬫満绔笌pc绔垏鎹㈡樉绀 */ .pc-show{ display: block; } .wap-show{ display: none; } .border{ border: 1px solid #e5e5e5;} .border-bottom{ border-bottom: 1px solid #e5e5e5;} .border-top{ border-top: 1px solid #e5e5e5;} .border-left{ border-left: 1px solid #e5e5e5;} .border-right{ border-right: 1px solid #e5e5e5;} .border-black{ border: 1px solid var(--black);} .border-bottom-black{ border-bottom: 1px solid var(--black);} .border-top-black{ border-top: 1px solid var(--black);} .border-left-black{ border-left: 1px solid var(--black);} .border-right-black{ border-right: 1px solid var(--black);} .shadow{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);} .radius5{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .radius8{ border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .radius10{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .radius15{ border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; } .radius20{ border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .radius40{ border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; } .radius50{ border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } /*搴曢儴*/ /*杩斿洖椤堕儴*/ #back_top{position:fixed;right:2.6vw;bottom:5.208333333333334vw;opacity: 0;visibility: hidden; transform:translateY(100%);-webkit-transform:translateY(100%);z-index:888;transition:all .6s ease;} #back_top.onshow{opacity:1;-webkit-opacity:1;visibility:visible;transform:none;-webkit-transform:none;} #back_top .master_backTop .master_aperture{background-color:rgba(0,0,0,.7);position:absolute;width:100%;height:100%;border-radius:50%;-webkit-border-radius:50%; opacity:0;-webkit-opacity:0;z-index:-1;} #back_top .master_backTop .master_backTop_btn{color:#fff;width:64px;height:64px;border-radius:50%;-webkit-border-radius:50%; align-items:center;justify-content:center;z-index:2;background-color:var(--black);} #back_top .master_backTop .master_aperture.circle01{animation:scalej01 2s .4s infinite;-webkit-animation:scalej01 2s .4s infinite;} @keyframes scalej01{ 0%{transform:scale(1);-webkit-transform:scale(1);opacity:1;-webkit-opacity:1;} 100%{ transform:scale(1.4);-webkit-transform:scale(1.4);opacity:0;-webkit-opacity:0;} } @-webkit-keyframes scalej01{ 0%{transform:scale(1);-webkit-transform:scale(1);opacity:1;-webkit-opacity:1;} 100%{ transform:scale(1.4);-webkit-transform:scale(1.4);opacity:0;-webkit-opacity:0;} } #back_top .master_backTop .master_aperture.circle02{animation:scalej02 2s infinite;-webkit-animation:scalej02 2s infinite;} @keyframes scalej02{ 0%{transform:scale(1);-webkit-transform:scale(1);opacity:1;-webkit-opacity:1;} 100%{transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;-webkit-opacity:0;} } @-webkit-keyframes scalej02{ 0%{transform:scale(1);-webkit-transform:scale(1);opacity:1;-webkit-opacity:1;} 100%{transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;-webkit-opacity:0;} } .bubble{width:100%;height:100%;position:absolute;left:0;top:0;z-index: -1;} .bubble span,.back_bubble span{display:block;width:20px;height:20px;border-radius:50%;-webkit-border-radius:50%;z-index:-1; transition: ease 1s;-webkit-transition: ease 1s;position:absolute;left:50%; bottom:0px;transform: translateX(-50%);-webkit-transform: translateX(-50%);opacity:0;-webkit-opacity:0;} .bubble span:nth-child(1){animation:pao 4s linear infinite;-webkit-animation:pao 4s linear infinite;background: rgba(0,0,0,.6);} .bubble span:nth-child(2){animation:pao3 6s linear infinite;-webkit-animation:pao3 6s linear infinite; -webkit-transition-delay:0.3s;transition-delay:0.3s;background: rgba(0,0,0,.8);} .bubble span:nth-child(3){animation:pao2 3s linear infinite;-webkit-animation:pao2 3s linear infinite; -webkit-transition-delay:0.8s;transition-delay:0.8s;background: rgba(0,0,0,1);} .bubble span:nth-child(4){animation:pao4 9s linear infinite;-webkit-animation:pao4 9s linear infinite; background: rgba(0,0,0,.3);} .bubble span:nth-child(5){animation:pao5 7s linear infinite;-webkit-animation:pao5 7s linear infinite; background: rgba(0,0,0,.5);} @keyframes pao{ 0% { transform: translate(200%,-30px) rotate(360deg) scale(.4,.4); -webkit-transform: translate(200%,-30px) rotate(360deg) scale(.4,.4); opacity:1;-webkit-opacity:1; } 50% { transform: translate(0%,-70px) rotate(360deg) scale(.8,.8); -webkit-transform: translate(0%,-70px) rotate(360deg) scale(.8,.8); opacity:.5;-webkit-opacity:.5; } 100% { transform: translate(-200%,-100px) rotate(360deg) scale(1,1); -webkit-transform: translate(-200%,-100px) rotate(360deg) scale(1,1); opacity:0;-webkit-opacity:0; } } @keyframes pao2 { 0% { transform:translate(-200%,0px) rotate(360deg) scale(1,1); -webkit-transform:translate(-200%,0px) rotate(360deg) scale(1,1); opacity:1;-webkit-opacity:1; } 50% { transform: translate(250%,-50px) rotate(360deg) scale(.8,.8); -webkit-transform: translate(250%,-50px) rotate(360deg) scale(.8,.8); opacity:.5;-webkit-opacity:.5; } 100% { transform: translate(100%,-100px) rotate(360deg) scale(.4,.4); -webkit-transform: translate(100%,-100px) rotate(360deg) scale(.4,.4); opacity:0;-webkit-opacity:0; } } @keyframes pao3 { 0% { transform: translate(0%,0px) rotate(360deg) scale(1,1); -webkit-transform: translate(0%,0px) rotate(360deg) scale(1,1); opacity:1;-webkit-opacity:1; } 50% { transform: translate(-250%,-50px) rotate(360deg) scale(.8,.8); -webkit-transform:translate(-250%,-50px) rotate(360deg) scale(.8,.8); opacity:.5;-webkit-opacity:.5; } 100% { transform: translate(-300%,-100px) rotate(360deg) scale(.4,.4); -webkit-transform:translate(-300%,-100px) rotate(360deg) scale(.4,.4); opacity:0;-webkit-opacity:0; } } @keyframes pao4 { 0% { transform: translate(400%,0px) rotate(360deg) scale(1,1); -webkit-transform: translate(400%,0px) rotate(360deg) scale(1,1); opacity:1;-webkit-opacity:1; } 50% { transform: translate(400%,-50px) rotate(360deg) scale(.8,.8); -webkit-transform: translate(400%,-50px) rotate(360deg) scale(.8,.8); opacity:.5;-webkit-opacity:.5; } 100% { transform: translate(-100%,-100px) rotate(360deg) scale(.4,.4); -webkit-transform: translate(-100%,-100px) rotate(360deg) scale(.4,.4); opacity:0;-webkit-opacity:0; } } @keyframes pao5 { 0% { transform: translate(-400%,0px) rotate(360deg) scale(.1,.1); -webkit-transform:translate(-400%,0px) rotate(360deg) scale(.1,.1); opacity:1;-webkit-opacity:1; } 50% { transform: translate(-400%,-50px) rotate(360deg) scale(.6,.6); -webkit-transform: translate(-400%,-50px) rotate(360deg) scale(.6,.6); opacity:.5;-webkit-opacity:.5; } 100% { transform: translate(0%,-100px) rotate(360deg) scale(1,1); -webkit-transform: translate(0%,-100px) rotate(360deg) scale(1,1); opacity:0;-webkit-opacity:0; } } /* .page-aside { position: fixed; right: -6px; bottom: 180px; transform: translateX(100%); z-index: 25; opacity: 0; transition: transform .3s, opacity .3s; -webkit-transition: transform .3s, opacity .3s; -moz-transition: transform .3s, opacity .3s; -ms-transition: transform .3s, opacity .3s; -o-transition: transform .3s, opacity .3s; } .page-aside.show {transform: translateX(0);opacity: 1} .page-aside .img {max-width: 100%} .page-aside-item {width: 54px;text-align: center;height: 50px;position: relative;z-index: 1;cursor: pointer;display: block;background-color:var(--black);margin: 4px 0;border-top-left-radius: 6px; border-bottom-left-radius: 6px;padding-right: 6px;transition: transform .3s;display: flex;align-items: center;justify-content: center} .page-aside-item .icon {width: 24px} */ #toolbar{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 150; display: none;} #toolbar a {width: 25%;padding: 10px 0;text-align: center;color: #333; display: flex; align-items: center; justify-content: center; flex-direction: column;} #toolbar img{ height: 20px; margin-bottom:5px;} .mask-white { position:absolute; top:0; left:0; width:100%; height:100%; z-index: 4; background:rgba(255,255,255,.2); content:''; -webkit-transition:-webkit-transform .6s; transition:transform .6s; -webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0) } .maskBox:hover .mask-white{ -webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)} .pig { width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; opacity: 0; position: absolute; left: 100%; top: 100%; z-index: 10; margin-left: -30px; margin-top: -30px; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity 0.4s linear, -webkit-transform 0.5s ease-in-out; transition: opacity 0.4s linear, -webkit-transform 0.5s ease-in-out; transition: opacity 0.4s linear, transform 0.5s ease-in-out; transition: opacity 0.4s linear, transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; } .pig.show { opacity: 1; } .pig:active, .pig.active { -webkit-transform: scale(1.1); transform: scale(1.1); } .pig s { width: 6px; height: 12px; cursor: pointer; position: absolute; margin-top: -6px; top: 50%; z-index: 2; background-color: transparent; background-position: center; background-repeat: no-repeat; -webkit-transition: 0.3s; transition: 0.3s; } .pig s.i1 { left: 20px; background-image: url('../images/sjl-pig.png'); } .pig s.i2 { right: 20px; background-image: url('../images/sjr-pig.png'); } .pig:active s.i1, .pig.active s.i1 { left: 14px; } .pig:active s.i2, .pig.active s.i2 { right: 14px; } .infoImg img{ margin-top: 5px; margin-bottom: 5px} @media screen and (max-width:750px){ .pc-show{ display: none; } .wap-show{ display: block; } .wapFlex{ flex-direction: column; align-items: flex-start; justify-content: flex-start;} .wapFlexF{ flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start;} .line-height2-4,.line-height3,.line-height2-8{ line-height: 2;} .w50,.w48,.w49-5,.w33,.w32,.w30,.w35,.w40,.w55,.w60,.w64,.w49,.w45,.w25,.w70{ width: 100% ;} .infoImg img{ height: auto !important;} #toolbar{ display: flex; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);} body::after{ display: block; content: ''; width: 100%; height: 60px; background-color: #1e1d1d;} .indexBody::after{ display: none; } .bg-scoll{ background-attachment: scroll !important;} #back_top { bottom: 100px;} .pglist a{ display: none;} .pglist .hover{ display: none !important;} .pglist .page{ display: inline-block;} } /* 鍥剧墖鏀惧ぇ */ .cursor-dot {position: fixed; top: 50%; left: 50%; pointer-events: none; border-radius: 50%; opacity: 0; width: 8px; height: 8px; background-color: rgba(0,0 ,0, 0.3); z-index: 999; transform: translate(-50%, -50%); transition: opacity 0.5s ease-in-out, transform 0.3s ease-in-out, width 0.5s, height 0.5s, background-color 0.5s ease;} /*鍒嗛〉鏍峰紡*/ .pglist { width: 100%;text-align: center;clear: both; color: #333; } .pglist a { padding: 0 15px;margin: 0 6px; border: 1px solid #e5e5e5; background-color: #fff; color: #333;} .pglist a.close {background: #f2f2f2 !important;} .pglist * {display: inline-block;vertical-align: middle;line-height: 34px;padding-bottom: 1px;} .pglist a:hover,.pglist .hover {display: inline-block;color: #fff;background: var(--black);border-color: var(--black);} .position-relative{ position: relative;} .pglist input{border: 1px solid #e5e5e5;background-color: #fff; margin: 0 6px; width: 55px; padding: 0 8px; text-align: center; color: #333;} .pglist button{ color: var(--black); border: 1px solid var(--black); padding: 0 22px;margin: 0 6px; } .pglist button:hover{ color: #fff; background: var(--black);} /* 鍙樿壊 */ /* 寮曠敤瀛椾綋 */ @font-face { font-family: 'DIN'; src: url("../font/DIN-Medium.eot"); /* IE9 */ src: url("../font/DIN-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../font/DIN-Medium.woff") format("woff"), /* chrome銆乫irefox */ url("../font/DIN-Medium.ttf") format("truetype"), /* chrome銆乫irefox銆乷pera銆丼afari, Android, iOS 4.2+ */ url("../font/DIN-Medium.svg#DIN-Medium") format("svg"); /* iOS 4.1- */ font-style: normal; font-weight: normal; } .DIN{ font-family: 'DIN'; } @font-face { font-family: 'avianregular'; src: url('../font/avian-regular-webfont.woff2') format('woff2'), url('../font/avian-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } .ENG{ font-family: 'avianregular'; } /* @font-face { font-family: 'NUMB'; src: url('../font/gotham-medium-webfont.woff2') format('woff2'), url('../font/gotham-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } .NUMB{ font-family: 'NUMB'; } @font-face { font-family: "ENG"; src: url("../font/BROWNSTD-REGULAR.WOFF.eot"); src: url("../font/BROWNSTD-REGULAR.WOFF.eot?#iefix") format("embedded-opentype"), url("../font/BROWNSTD-REGULAR.WOFF.woff") format("woff"), url("../font/BROWNSTD-REGULAR.WOFF.ttf") format("truetype"), url("../font/BROWNSTD-REGULAR.WOFF.svg#BROWNSTD-REGULAR.WOFF") format("svg"); font-style: normal; font-weight: normal; } .ENG{ font-family: 'ENG'; } */ div.video-play{position:fixed;top:0;bottom:0;right:0;left:0;width:100vw;height:100vh;z-index:10001;display:none} div.video-bg{position:absolute;top:0;bottom:0;width:100%;z-index:1001;background:#0b0b0b;opacity:.8} div.video-wrap{z-index:1002;position:fixed;top:52%;left:50%;-webkit-transform:translate3d(-50%, -52%, 0);transform:translate3d(-50%, -52%, 0);width:1000px;height:570px; } div.video-wrap video{width:100%;height:auto} div.close-btn{cursor: pointer; transition: all .36s; text-align: center; line-height: 40px; z-index: 9999; position: absolute; background: #000; border: 2px solid #fff; width: 50px; height: 50px; border-radius: 50%; opacity: 0.5; right: -20px; top: -25px;} div.close-btn:hover{ transform: rotate(180deg); opacity: 1;} @media screen and (max-width:1600px) { /* padding */ .pt-10{ padding-top: 8px;} .pl-10{ padding-left: 8px;} .pr-10{ padding-right: 8px;} .pb-10{ padding-bottom: 8px;} .p10{ padding: 8px;} .pt-15{ padding-top: 13px;} .pl-15{ padding-left: 13px;} .pr-15{ padding-right: 13px;} .pb-15{ padding-bottom: 13px;} .p15{ padding: 13px;} .pt-20{ padding-top: 16px;} .pl-20{ padding-left: 16px;} .pr-20{ padding-right: 16px;} .pb-20{ padding-bottom: 16px;} .p20{ padding: 16px;} .pt-25{ padding-top: 20px;} .pl-25{ padding-left: 20px;} .pr-25{ padding-right: 20px;} .pb-25{ padding-bottom: 20px;} .p25{ padding: 20px;} .pt-30{ padding-top: 26px;} .pl-30{ padding-left: 26px;} .pr-30{ padding-right: 26px;} .pb-30{ padding-bottom: 26px;} .p30{ padding: 26px;} .pt-40{ padding-top: 36px;} .pl-40{ padding-left: 36px;} .pr-40{ padding-right: 36px;} .pb-40{ padding-bottom: 36px;} .p40{ padding: 36px;} .pt-50{ padding-top: 40px;} .pl-50{ padding-left: 40px;} .pr-50{ padding-right: 40px;} .pb-50{ padding-bottom: 40px;} .p50{ padding: 40px;} .pt-60{ padding-top: 50px;} .pl-60{ padding-left: 50px;} .pr-60{ padding-right: 50px;} .pb-60{ padding-bottom: 50px;} .p60{ padding: 50px; } .pt-70{ padding-top: 60px;} .pl-70{ padding-left: 60px;} .pr-70{ padding-right: 60px;} .pb-70{ padding-bottom: 60px;} .p70{ padding: 60px;} /* margin */ .mt-10{ margin-top: 8px;} .ml-10{ margin-left: 8px;} .mr-10{ margin-right: 8px;} .mb-10{ margin-bottom: 8px;} .m10{ margin: 8px;} .mt-15{ margin-top: 13px;} .ml-15{ margin-left: 13px;} .mr-15{ margin-right: 13px;} .mb-15{ margin-bottom: 13px;} .m15{ margin: 13px;} .mt-20{ margin-top: 16px;} .ml-20{ margin-left: 16px;} .mr-20{ margin-right: 16px;} .mb-20{ margin-bottom: 16px;} .m20{ margin: 16px;} .mt-25{ margin-top: 20px;} .ml-25{ margin-left: 20px;} .mr-25{ margin-right: 20px;} .mb-25{ margin-bottom: 20px;} .m25{ margin: 20px;} .mt-30{ margin-top: 26px;} .ml-30{ margin-left: 26px;} .mr-30{ margin-right: 26px;} .mb-30{ margin-bottom: 26px;} .m30{ margin: 26px;} .mt-40{ margin-top: 36px;} .ml-40{ margin-left: 36px;} .mr-40{ margin-right: 36px;} .mb-40{ margin-bottom: 36px;} .m40{ margin: 36px;} .mt-50{ margin-top: 40px;} .ml-50{ margin-left: 40px;} .mr-50{ margin-right: 40px;} .mb-50{ margin-bottom: 40px;} .m50{ margin: 40px; } .mt-60{ margin-top: 50px;} .ml-60{ margin-left: 50px;} .mr-60{ margin-right: 50px;} .mb-60{ margin-bottom: 50px;} .m60{ margin: 50px; } .mt-70{ margin-top: 60px;} .ml-70{ margin-left: 60px;} .mr-70{ margin-right: 60px;} .mb-70{ margin-bottom: 60px;} .m70{ margin: 60px; } } @media screen and (max-width:1440px) { /* padding */ .pt-10{ padding-top: 6px;} .pl-10{ padding-left: 6px;} .pr-10{ padding-right: 6px;} .pb-10{ padding-bottom: 6px;} .p10{ padding: 6px;} .pt-15{ padding-top: 10px;} .pl-15{ padding-left: 10px;} .pr-15{ padding-right: 10px;} .pb-15{ padding-bottom: 10px;} .p15{ padding: 10px;} .pt-20{ padding-top: 15px;} .pl-20{ padding-left: 15px;} .pr-20{ padding-right: 15px;} .pb-20{ padding-bottom: 15px;} .p20{ padding: 15px;} .pt-25{ padding-top: 18px;} .pl-25{ padding-left: 18px;} .pr-25{ padding-right: 18px;} .pb-25{ padding-bottom: 18px;} .p25{ padding: 18px;} .pt-30{ padding-top: 24px;} .pl-30{ padding-left: 24px;} .pr-30{ padding-right: 24px;} .pb-30{ padding-bottom: 24px;} .p30{ padding: 24px;} .pt-40{ padding-top: 34px;} .pl-40{ padding-left: 34px;} .pr-40{ padding-right: 34px;} .pb-40{ padding-bottom: 34px;} .p40{ padding: 34px;} .pt-50{ padding-top: 35px;} .pl-50{ padding-left: 35px;} .pr-50{ padding-right: 35px;} .pb-50{ padding-bottom: 35px;} .p50{ padding: 35px;} .pt-60{ padding-top: 40px;} .pl-60{ padding-left: 40px;} .pr-60{ padding-right: 40px;} .pb-60{ padding-bottom: 40px;} .p60{ padding: 40px; } .pt-70{ padding-top: 50px;} .pl-70{ padding-left: 50px;} .pr-70{ padding-right: 50px;} .pb-70{ padding-bottom: 50px;} .p70{ padding: 50px;} /* margin */ .mt-10{ margin-top: 6px;} .ml-10{ margin-left: 6px;} .mr-10{ margin-right: 6px;} .mb-10{ margin-bottom: 6px;} .m10{ margin: 6px;} .mt-15{ margin-top: 10px;} .ml-15{ margin-left: 10px;} .mr-15{ margin-right: 10px;} .mb-15{ margin-bottom: 10px;} .m15{ margin: 10px;} .mt-20{ margin-top: 15px;} .ml-20{ margin-left: 15px;} .mr-20{ margin-right: 15px;} .mb-20{ margin-bottom: 15px;} .m20{ margin: 15px;} .mt-25{ margin-top: 18px;} .ml-25{ margin-left: 18px;} .mr-25{ margin-right: 18px;} .mb-25{ margin-bottom: 18px;} .m25{ margin: 18px;} .mt-30{ margin-top: 24px;} .ml-30{ margin-left: 24px;} .mr-30{ margin-right: 24px;} .mb-30{ margin-bottom: 24px;} .m30{ margin: 24px;} .mt-40{ margin-top: 34px;} .ml-40{ margin-left: 34px;} .mr-40{ margin-right: 34px;} .mb-40{ margin-bottom: 34px;} .m40{ margin: 34px;} .mt-50{ margin-top: 35px;} .ml-50{ margin-left: 35px;} .mr-50{ margin-right: 35px;} .mb-50{ margin-bottom: 35px;} .m50{ margin: 35px; } .mt-60{ margin-top: 40px;} .ml-60{ margin-left: 40px;} .mr-60{ margin-right: 40px;} .mb-60{ margin-bottom: 40px;} .m60{ margin: 40px; } .mt-70{ margin-top: 50px;} .ml-70{ margin-left: 50px;} .mr-70{ margin-right: 50px;} .mb-70{ margin-bottom: 50px;} .m70{ margin: 50px; } } @media screen and (max-width:1280px) { /* padding */ .pt-10{ padding-top: 5px;} .pl-10{ padding-left: 5px;} .pr-10{ padding-right: 5px;} .pb-10{ padding-bottom: 5px;} .p10{ padding: 5px;} .pt-15{ padding-top:8px;} .pl-15{ padding-left:8px;} .pr-15{ padding-right:8px;} .pb-15{ padding-bottom:8px;} .p15{ padding:8px;} .pt-20{ padding-top: 12px;} .pl-20{ padding-left: 12px;} .pr-20{ padding-right: 12px;} .pb-20{ padding-bottom: 12px;} .p20{ padding: 12px;} .pt-25{ padding-top: 16px;} .pl-25{ padding-left: 16px;} .pr-25{ padding-right: 16px;} .pb-25{ padding-bottom: 16px;} .p25{ padding: 16px;} .pt-30{ padding-top: 22px;} .pl-30{ padding-left: 22px;} .pr-30{ padding-right: 22px;} .pb-30{ padding-bottom: 22px;} .p30{ padding: 22px;} .pt-40{ padding-top: 30px;} .pl-40{ padding-left: 30px;} .pr-40{ padding-right: 30px;} .pb-40{ padding-bottom: 30px;} .p40{ padding: 30px;} .pt-50{ padding-top:30px;} .pl-50{ padding-left: 30px;} .pr-50{ padding-right: 30px;} .pb-50{ padding-bottom: 30px;} .p50{ padding: 30px;} .pt-60{ padding-top: 35px;} .pl-60{ padding-left: 35px;} .pr-60{ padding-right: 35px;} .pb-60{ padding-bottom: 35px;} .p60{ padding: 35px; } .pt-70{ padding-top: 40px;} .pl-70{ padding-left: 40px;} .pr-70{ padding-right: 40px;} .pb-70{ padding-bottom: 40px;} .p70{ padding: 40px;} /* margin */ .mt-10{ margin-top: 5px;} .ml-10{ margin-left: 5px;} .mr-10{ margin-right: 5px;} .mb-10{ margin-bottom: 5px;} .m10{ margin: 5px;} .mt-15{ margin-top:8px;} .ml-15{ margin-left:8px;} .mr-15{ margin-right:8px;} .mb-15{ margin-bottom:8px;} .m15{ margin:8px;} .mt-20{ margin-top: 12px;} .ml-20{ margin-left: 12px;} .mr-20{ margin-right: 12px;} .mb-20{ margin-bottom: 12px;} .m20{ margin: 12px;} .mt-25{ margin-top: 16px;} .ml-25{ margin-left: 16px;} .mr-25{ margin-right: 16px;} .mb-25{ margin-bottom: 16px;} .m25{ margin: 16px;} .mt-30{ margin-top: 22px;} .ml-30{ margin-left: 22px;} .mr-30{ margin-right: 22px;} .mb-30{ margin-bottom: 22px;} .m30{ margin: 22px;} .mt-40{ margin-top: 30px;} .ml-40{ margin-left: 30px;} .mr-40{ margin-right: 30px;} .mb-40{ margin-bottom: 30px;} .m40{ margin: 30px;} .mt-50{ margin-top: 30px;} .ml-50{ margin-left: 30px;} .mr-50{ margin-right: 30px;} .mb-50{ margin-bottom: 30px;} .m50{ margin: 30px; } .mt-60{ margin-top: 35px;} .ml-60{ margin-left: 35px;} .mr-60{ margin-right: 35px;} .mb-60{ margin-bottom: 35px;} .m60{ margin: 35px; } .mt-70{ margin-top: 40px;} .ml-70{ margin-left: 40px;} .mr-70{ margin-right: 40px;} .mb-70{ margin-bottom: 40px;} .m70{ margin: 40px; } } @media screen and (max-width:1000px) { .pt-10{ padding-top: 5px;} .pl-10{ padding-left: 5px;} .pr-10{ padding-right: 5px;} .pb-10{ padding-bottom: 5px;} .p10{ padding: 5px;} .pt-15{ padding-top:8px;} .pl-15{ padding-left:8px;} .pr-15{ padding-right:8px;} .pb-15{ padding-bottom:8px;} .p15{ padding:8px;} .pt-20{ padding-top: 15px;} .pl-20{ padding-left: 15px;} .pr-20{ padding-right: 15px;} .pb-20{ padding-bottom: 15px;} .p20{ padding: 15px;} .pt-25{ padding-top: 15px;} .pl-25{ padding-left: 15px;} .pr-25{ padding-right: 15px;} .pb-25{ padding-bottom: 15px;} .p25{ padding: 15px;} .pt-30{ padding-top: 18px;} .pl-30{ padding-left: 18px;} .pr-30{ padding-right: 18px;} .pb-30{ padding-bottom: 18px;} .p30{ padding: 18px;} .pt-40{ padding-top: 20px;} .pl-40{ padding-left: 20px;} .pr-40{ padding-right: 20px;} .pb-40{ padding-bottom: 20px;} .p40{ padding: 20px;} .pt-50{ padding-top: 25px;} .pl-50{ padding-left: 25px;} .pr-50{ padding-right: 25px;} .pb-50{ padding-bottom: 25px;} .p50{ padding: 25px;} .pt-60{ padding-top: 30px;} .pl-60{ padding-left: 30px;} .pr-60{ padding-right: 30px;} .pb-60{ padding-bottom: 30px;} .p60{ padding: 30px; } .pt-70{ padding-top: 35px;} .pl-70{ padding-left: 35px;} .pr-70{ padding-right: 35px;} .pb-70{ padding-bottom: 35px;} .p70{ padding: 35px;} /* margin */ .mt-10{ margin-top: 5px;} .ml-10{ margin-left: 5px;} .mr-10{ margin-right: 5px;} .mb-10{ margin-bottom: 5px;} .m10{ margin: 5px;} .mt-15{ margin-top:8px;} .ml-15{ margin-left:8px;} .mr-15{ margin-right:8px;} .mb-15{ margin-bottom:8px;} .m15{ margin:8px;} .mt-20{ margin-top: 15px;} .ml-20{ margin-left: 15px;} .mr-20{ margin-right: 15px;} .mb-20{ margin-bottom: 15px;} .m20{ margin: 15px;} .mt-25{ margin-top: 15px;} .ml-25{ margin-left: 15px;} .mr-25{ margin-right: 15px;} .mb-25{ margin-bottom: 15px;} .m25{ margin: 15px;} .mt-30{ margin-top: 18px;} .ml-30{ margin-left: 18px;} .mr-30{ margin-right: 18px;} .mb-30{ margin-bottom: 18px;} .m30{ margin: 18px;} .mt-40{ margin-top: 20px;} .ml-40{ margin-left: 20px;} .mr-40{ margin-right: 20px;} .mb-40{ margin-bottom: 20px;} .m40{ margin: 20px;} .mt-50{ margin-top: 25px;} .ml-50{ margin-left: 25px;} .mr-50{ margin-right: 25px;} .mb-50{ margin-bottom: 25px;} .m50{ margin: 25px; } .mt-60{ margin-top: 30px;} .ml-60{ margin-left: 30px;} .mr-60{ margin-right: 30px;} .mb-60{ margin-bottom: 30px;} .m60{ margin: 30px; } .mt-70{ margin-top: 35px;} .ml-70{ margin-left: 35px;} .mr-70{ margin-right: 35px;} .mb-70{ margin-bottom: 35px;} .m70{ margin: 35px; } } @media screen and (max-width:750px) { .pt-40{ padding-top: 20px;} .pl-40{ padding-left: 20px;} .pr-40{ padding-right: 20px;} .pb-40{ padding-bottom: 20px;} .p40{ padding: 20px;} .pt-50{ padding-top: 20px;} .pl-50{ padding-left: 20px;} .pr-50{ padding-right: 20px;} .pb-50{ padding-bottom: 20px;} .p50{ padding: 20px;} .pt-60{ padding-top: 20px;} .pl-60{ padding-left: 20px;} .pr-60{ padding-right: 20px;} .pb-60{ padding-bottom: 20px;} .p60{ padding: 20px; } .pt-70{ padding-top: 20px;} .pl-70{ padding-left: 20px;} .pr-70{ padding-right: 20px;} .pb-70{ padding-bottom: 20px;} .p70{ padding: 20px;} /* margin */ .mt-40{ margin-top: 20px;} .ml-40{ margin-left: 20px;} .mr-40{ margin-right: 20px;} .mb-40{ margin-bottom: 20px;} .m40{ margin: 20px;} .mt-50{ margin-top: 20px;} .ml-50{ margin-left: 20px;} .mr-50{ margin-right: 20px;} .mb-50{ margin-bottom: 20px;} .m50{ margin: 20px; } .mt-60{ margin-top: 20px;} .ml-60{ margin-left: 20px;} .mr-60{ margin-right: 20px;} .mb-60{ margin-bottom: 20px;} .m60{ margin: 20px; } .mt-70{ margin-top: 20px;} .ml-70{ margin-left: 20px;} .mr-70{ margin-right: 20px;} .mb-70{ margin-bottom: 20px;} .m70{ margin: 20px; } .radius8{ border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .radius10,.radius20{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } } @media screen and (max-width:420px) { }