/* * Author: E鏉挅鍟 * Date: 2010-3-15 * */ /* ***************************reset & public************************************ */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent } body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, select, table, td, textarea, ul { margin: 0; padding: 0; -webkit-text-size-adjust: none; font-family: "microsoft yahei", Arial } body { font-family: "microsoft yahei", Arial; color: #555; background: #fff; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; background-color:#F8F8F8; } .wrap { width: 100%; max-width: 1320px; margin: 0 auto } ins { display: none } ul { list-style: none } a { color: #414141; text-decoration: none; outline: none } a:hover { color: #c7000b } img { max-width: 100%; vertical-align: top; height: auto; -ms-interpolation-mode: bicubic; border: none } ::-moz-selection { color: #fff; background: red } ::selection { color: #fff; background: red } .el { overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .fix:after, .fix:before { display: table; clear: both; content: '' } .fl { float: left } .fr { float: right } .hide { display: none } .hidetext { font-size: 0; line-height: 0; letter-spacing: -9px; overflow: hidden } .placeholder { color: #aaa } .mart10 { margin-top: 10px } .mart20 { margin-top: 20px } .mart30 { margin-top: 30px } .mart40 { margin-top: 40px } .marb10 { margin-bottom: 10px } .marb20 { margin-bottom: 20px } .marb30 { margin-bottom: 30px } .marb40 { margin-bottom: 40px } .marr10 { margin-right: 10px } .marr20 { margin-right: 20px } .marl10 { margin-left: 10px } .marl20 { margin-left: 20px } .padt20 { padding-top: 20px } .padt30 { padding-top: 30px } .padb10 { padding-bottom: 10px } .padb20 { padding-bottom: 20px } .paddingr10 { padding-right: 10px } .paddingl10 { padding-left: 10px } .more_btn { text-align: center; margin: 0 auto } .more_btn .more { display: inline-block; margin-top: 20px; padding: .45em 2em; font-size: 93%; color: #333; border-radius: 2em; border: 2px solid #878787; background: 0 0 } .m_bg { background-color: #f6f6f6 } .bort { border-top: #f0f0f0 .5px solid } .borr { border-right: #ddd 1px solid } .borb { border-bottom: #ddd 1px solid } /* font-icon */ @font-face { font-family: 'iconfont'; /* project id 891179 */ src: url('font/iconfont20210129.eot'); src: url('font/iconfont20210129.eot?#iefix') format('embedded-opentype'), url('font/iconfont20210129.woff2') format('woff2'), url('font/iconfont20210129.woff') format('woff'), url('font/iconfont20210129.ttf') format('truetype'), url('font/iconfont20210129.svg#iconfont') format('svg'); } [class^="ico-"] { font-family: "iconfont"; display: inline-block; vertical-align: middle; margin: 0 .3em; font-size: inherit; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } /*********************************** header & footer & side-bar*************************************** */ /* header */ .head { position: fixed; top: 0; z-index: 10000; width: 100%; background-color: #fff } .head>.wrap { position: relative } /* .head.scroll .nav>ul>li>a{color:#fff} */ .head, .head .logo a, .head .logo a:after, .head .logo a:before, .head .nav, .head .nav-btn-plu span, .head .nav>ul>li, .head .nav>ul>li>a, .head .top_search { height: 80px; line-height: 80px; transition: .3s } .head .nav .sevNav { top: 80px } .head.scroll { border-bottom: .5px solid #F0F0F0; box-shadow: 0 6px 24px rgba(0, 0, 0, .1); } .head.scroll, .head.scroll .logo a, .head.scroll .logo a:after, .head.scroll .logo a:before, .head.scroll .nav, .head.scroll .nav-btn-plu span, .head.scroll .nav>ul>li, .head.scroll .nav>ul>li>a, .head.scroll .top_search { height: 60px; line-height: 60px } .head .nav .sevNav { top: 79px; display: block !important; display: none !important\9; border-top: 1px solid #c7000b; visibility: hidden; opacity: 0; transform: translateY(10px); transition: .46s ease-in-out; } .nav ul li:hover .sevNav { visibility: visible; opacity: 1; transform: translateY(0); } .head.scroll .logo a:after, .head.scroll .logo a:before { font-size: 48px; } .head.scroll .nav .sevNav { top: 59px } .head.scroll .nav>ul>li.cur>a { height: 59px; border-bottom-width: 1px; color: red } .head.scroll .nav-btn-plu span:before { font-size: 20px } /* header -> nav -> logo */ .logo { float: left; width: 20% } .logo a { font-family: iconfont; display: block; height: 80px; font-weight: 400 } .logo a:before { content: '\e61e'; display: inline-block; float: left; height: 80px; line-height: 80px; font-size: 52px; color: red } .logo a:after { content: '\e623'; display: inline-block; float: left; height: 80px; padding: 0 10px; line-height: 80px; font-size: 52px; color: #000 } .head_r { float: left; width: 70% } .head .head_r .head_topmess { width: auto; height: 28px; color: #333; padding-top: 15px; margin-bottom: 10px; background-color: inherit; float: right } .head .head_r .head_topmess ul { margin: 0; padding: 0; list-style: none } .head .head_r .head_topmess ul li { float: left; height: 28px; line-height: 28px; margin-left: 20px; position: relative; z-index: 90 } .head .head_r .head_topmess ul li.tmess_line { width: 1px; height: 16px; margin-top: 6px; background-color: #b3b3b3 } .nav { width: 100%; height: 80px; display: block } .nav ul { list-style: none; text-align: center } .nav>ul>li { display: inline-block; position: relative; padding: 0 10px; margin: 0 14px; } .nav>ul>li a { display: block; position: relative; z-index: 1000; padding: 0 5px; color: #444; font-size: 16px } .mobil-drop-btn { display: none } .nav { position: relative; } .nav-marker { display: block; position: absolute; bottom: 0; z-index: 10001; height: 3px; background: #c7000b; transition: .3s; } .nav-hide .nav-marker { -ms-transform: scaleY(0); transform: scaleY(0); } /* nav -> right side */ .nav-btn-plu { float: left; width: 10%; text-align: right } .nav-btn-plu span { display: inline-block; float: left; width: 50%; text-align: center; font-family: iconfont; font-size: 24px; color: #666 } .nav-btn-plu span:hover { cursor: pointer } #menu-mobile-btn { display: none; width: 0\9; height: 0\9; overflow: hidden\9; } .nav-search-btn:before { content: '\e73f' } .nav-side-btn { position: relative } .nav-side-btn:before { display: none; display: inline-block\9; content: '\e76a' } .head #language { width: 24px; height: 24px; line-height: 24px; margin: 28px auto; font-size: 26px; font-family: 'iconfont'; transition: .3s } .head #language:before { content: '\e6d5'; } .head #language.is-active:before { content: '\e65e'; } .head.scroll #language { margin: 18px auto } #lan-select:before { display: inline-block; content: ''; position: absolute; top: -21px; right: 20px; z-index: 9999999999999; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent transparent #F0F0F0 transparent } #lan-select:after { display: inline-block; content: ''; position: absolute; top: -19px; right: 20px; z-index: 9999999999999; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent transparent #fff transparent } .head #language .line { display: none; width: 24px; height: 2px; border-radius: 2px; background-color: #999; margin: 3px auto; transition: .3s ease-in-out } .is-active .line:nth-child(2) { opacity: 0 } .is-active .line:nth-child(1) { transform: translateY(8px) rotate(45deg) } .is-active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg) } .head #lan-select { display: none\9; visibility: hidden; position: absolute; bottom: -82px; right: 0; z-index: 9999999999; width: 120px; background-color: #fff; border: 1px solid #F0F0F0; border-radius: 3px; overflow: visible !important; transform: scale(.86) translateY(6px); opacity: 0; transform-origin: center top; transition: .3s ease-in-out } .lan-select-show { display: block\9; visibility: visible !important; transform: scaleY(1) translateY(0) !important; transform-origin: center top; opacity: 1 !important } #lan-select a { display: block; float: left; width: 100%; line-height: 40px; font-size: 14px; text-align: center } #lan-select a:first-child { border-bottom: 1px solid #F6F6F6 } .search-btn-toggle:before { content: '\e7ca' } /* nav -> slide-down */ .sevNav { display: none; position: absolute; left: 0; z-index: 9999; width: 580px; background-color: #fff; transition: 1s ease; border: 1px #ccc solid } .sevNav ul { float: left; width: 45%; padding: 10px } .sevNav ul li { display: block; float: left; margin-left: 5%; border-bottom: 1px #e9e9e9 solid; overflow: hidden } .sevNav ul li.wide { width: 90% } .sevNav ul li.side { width: 45% } .sevNav ul li a { display: block; height: 40px; font-size: 16px; line-height: 40px; color: #555; text-align: center; font-weight: 400 } .nav>ul>li:hover>a { color: #c7000b } .sevNav ul li a:hover { color: #fff; background-color: #c7000b; border-radius: 2px } .sevNav ul li.scurr a { color: #fff; background-color: #d80010; border-radius: 2px } .sevNav .img { float: left; width: 55%; padding: 10px; overflow: hidden } .sevNav .img img { width: 100% } .nav .nav01 { left: -85px } .nav .nav02 { left: -85px } .nav .nav03 { left: -40px } .nav .nav04 { left: -60px } .nav .nav05 { left: auto; right: -80px } .nav .nav06 { left: auto; right: 0 } /* nav -> search */ .nav ul li { opacity: 1; -ms-transform: scaleX(1); transform: scaleX(1); transform-origin: center center; transition: .3s } .nav-hide ul li { display: none\9; opacity: 0; transform: opacity:0; } .head .top_search { display: none\9; position: absolute; top: 0; right: calc(10% + 10px); right: 10%\9; z-index: 1100; width: 40%; background-color: transparent; opacity: 0; -ms-transform: scaleX(0); transform: scaleX(0); -ms-transform-origin: right; transform-origin: right; transition: .4s } .head .top-search-show { display: block\9; opacity: 1; -ms-transform: scaleX(1); transform: scaleX(1) } .top_search form { width: 100%; height: 46px; margin-top: 17px; border: .5px solid #EEEEEE; background-color: #fcfcfc; overflow: hidden; transition: .3s } .top_search #searchSubmit { -ms-transform: scale(0); transform: scale(0); transition: .2s .3s } .top_search #keywords { opacity: 0; -ms-transform: scaleY(0); transform: scaleY(0); -ms-transform-origin: left; transform-origin: left; transition: .2s .35s } .head.scroll .top_search form { height: 40px; margin-top: 10px; } .top-search-show #searchSubmit { -ms-transform: scale(1); transform: scale(1); line-height: normal; } .head.scroll .top-search-show #searchSubmit { color: #F9F9F9; line-height: normal; } .top-search-show #keywords { opacity: 1; -ms-transform: scaleY(1); transform: scaleY(1) } #keywords { display: inline-block; float: left; width: 90%; height: 100%; padding: 0 16px; font-size: 16px; color: #888; border: none; outline: 0; background-color: transparent } #keywords::-webkit-input-placeholder { font-size: 15px; color: #B3B3B3 } #keywords::-ms-input-placeholder { font-size: 15px; color: #B3B3B3 } #searchSubmit { float: left; width: 10%; height: 100%; padding-right: 16px; border: none; outline: 0; text-align: right; background-color: transparent } #searchSubmit:hover { cursor: pointer } #searchSubmit:before { content: '\e73f'; font-family: iconfont; font-size: 20px; color: #888; transition: .2s } #searchSubmit:hover:before { color: #F63B2E } /* footer */ .index_foot { width: 100%; min-width: 1200px; display: inline-table; background-color: #2e3033; } .foot_mess { position: relative; z-index: 5; padding: 60px 0 50px } .foot_mess .footNav { width: 77% } .foot_mess .footSites { width: 23% } .foot_mess .col_23 { width: 26% } .foot_mess .col_19 { width: 20% } .col_nav { float: left; min-height: 190px; padding-right: 5% } .col_tit, .sites_tit { font-size: 16px; line-height: 2.4; color: #DDDDDD } .col_nav a { display: inline-block; width: 100%; font-size: 14px; line-height: 2.4; color: #888888; transition: .4s } .col_nav a:hover { text-decoration: underline } .f_sites { padding-left: 15%; border-left: #5a5a5a 1px solid } .f_sites ul li { float: left; width: 45%; margin: 10px 5% 5px 0 } .col_a { display: block; width: 100%; text-align: center; font-size: 14px; line-height: 2; color: #888888; background-color: rgba(255,255,255,.1); transition: .3s } .col_a:hover { background-color: #8c8c8c; color: #F9F9F9 } .foot_txt { border-top: #3c3c3c .5px solid; color: #888888; } .foot_txt p { display: inline-block; width:100%; /*float: left;*/ text-align:center; font-size: 13px; line-height: 3.2 } .foot_txt p a { display:inline-block; /*float:right;*/ color: #999 } .foot_txt p a:hover { color: #F9F9F9 } /* side-bar */ .side-pannel { position: fixed; right: 10px; bottom: 100px; z-index: 9999; background: 0 0 } .side-model { width: 50px; height: 50px; margin-top: 6px; cursor: pointer } .side-model a { display: block; position: relative; width: 50px; height: 50px; line-height: 50px; border: 1px solid #666; font-size: 40px; color: #666; text-align: center } .sub-link , .sub-link img{ display:block; width:50px; height:140px; } .code-side{ background-color:#ffffff; } .code-main { position: relative; right: 126px; top: -76px; width: 120px; height: 120px; visibility: hidden; transform: translateX(40px) scale(.1); transform-origin: right center; opacity: 0; transition: .4s } a.code-side:hover { border-color: #F63B2E; color: #F63B2E } a.code-side:before { content: '\e600'; font-family: iconfont } a.code-side:hover .code-main { visibility: visible; opacity: 1; transform: translateX(0) scale(1) } .code-con { width: 112px; padding: 5px; border: 1px solid #ddd; border-radius: 4px; background-color: #F6F6F6 } .code-main s { display: block; position: absolute; top: 42px; right: -12px; height: 0; width: 0; font-size: 0; line-height: 0; border-color: transparent transparent transparent #ddd; border-style: dashed dashed dashed solid; border-width: 10px } .code-main i { display: block; position: absolute; top: -10px; right: -8px; height: 0; width: 0; font-size: 0; line-height: 0; border-color: transparent transparent transparent #F6F6F6; border-style: dashed dashed dashed solid; border-width: 10px } .code-con p { color: #646464; font-size: 12px; text-align: center; line-height: 1 } a.gotop-side { background-color: #666; color: #fff } .gotop-side:before { content: '\e769'; font-family: iconfont; font-size: 28px } .gotop-side:hover { background-color: #F63B2E; border-color: #F63B2E } /* ***********************home page******************* */ /* home page -> banner */ .sliderContainer { padding-top: 80px !important; background: url(../images/loading.svg) center center no-repeat; background-color: #F9F9F9; overflow: hidden } .rsMinW .rsArrow { height: 104px; width: 70px; position: absolute; display: block; cursor: pointer; z-index: 21; transition: .4s; } .rsMinW .rsArrowLeft { left: 10px; top: 50%; margin-top: -52px; transform: translateX(-60px); } .rsMinW .rsArrowRight { right: 10px; top: 50%; margin-top: -52px; transform: translateX(60px); } .sliderContainer:hover .rsArrow { transform: translateX(0); } .rsMinW .rsArrowIcn { width: 70px; height: 104px; line-height: 104px; font-size: 32px; text-align: center; color: #fff; position: absolute; cursor: pointer; border-radius: 2px; font-family: "iconfont"; background-color: rgba(0, 0, 0, .3) } .rsMinW.rsHor .rsArrowIcn:hover { color: #c7000b; background-color: rgba(0, 0, 0, .4); } .rsMinW.rsHor .rsArrowLeft .rsArrowIcn:before { content: '\e656' } .rsMinW.rsHor .rsArrowRight .rsArrowIcn:before { content: '\e603' } .rsArrowDisabled .rsArrowIcn { opacity: .9 !important; filter: alpha(opacity=90) } .rsBullets { position: absolute; bottom: 20px; left: 25%; z-index: 35; width: 50%; height: auto; text-align: center; overflow: hidden } .rsBullet { width: 20px; width: 60px\9; height: 10px; margin: 0 5px; border-radius: 5px; display: inline-block; overflow: hidden; transition: .4s } .rsBullet span { display: block; height: 100%; background: #CCC; background: rgba(255, 255, 255, .5); box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1); cursor: pointer } .rsBullet.rsNavSelected { width: 60px; height: 10px } .rsBullet.rsNavSelected span { background: #c7000b } .rsThumbsHor { width: 100%; height: auto } .rsThumbsVer { width: 96px; height: 100%; position: absolute; top: 0; right: 0 } .rsMinW.rsWithThumbsHor .rsThumbsContainer { position: relative; height: 100% } .rsMinW.rsWithThumbsVer .rsThumbsContainer { position: relative; width: 100% } .rsThumb { float: left; overflow: hidden; width: 96px; height: 72px } .rsThumb img { width: 100%; height: 100% } .rsThumb.rsNavSelected { background: #333 } .rsThumb.rsNavSelected img { filter: alpha(opacity=40); opacity: .7 } .rsThumb.rsNavSelected span.thumbIco { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 2px solid #FFF; border: 2px solid rgba(255, 255, 255, .9); -webkit-backface-visibility: hidden } .rsTmb { display: block } .rsThumbsArrow { height: 100%; width: 20px; position: absolute; display: block; cursor: pointer; z-index: 21 } .rsMinW.rsWithThumbsVer .rsThumbsArrow { width: 100%; height: 20px } .rsMinW.rsWithThumbsVer .rsThumbsArrowLeft { top: 0; left: 0 } .rsMinW.rsWithThumbsVer .rsThumbsArrowRight { bottom: 0; left: 0 } .rsMinW.rsWithThumbsHor .rsThumbsArrowLeft { left: 0; top: 0 } .rsMinW.rsWithThumbsHor .rsThumbsArrowRight { right: 0; top: 0 } .royalSlider { width: 1920px; height: 625px; position: relative; left: 0; right: 0; direction: ltr } .royalSlider>* { float: left } .rsWebkit3d .rsSlide { -webkit-transform: translateZ(0) } .rsWebkit3d .rsABlock, .rsWebkit3d .rsAbsoluteEl, .rsWebkit3d .rsBtnCenterer, .rsWebkit3d .rsContainer, .rsWebkit3d .rsLink, .rsWebkit3d .rsOverflow, .rsWebkit3d .rsPreloader, .rsWebkit3d .rsSlide, .rsWebkit3d .rsThumbs, .rsWebkit3d img { -webkit-backface-visibility: hidden } .rsFade.rsWebkit3d .rsContainer, .rsFade.rsWebkit3d .rsSlide, .rsFade.rsWebkit3d img { -webkit-transform: none } .rsOverflow { width: 100%; height: 100%; position: relative; overflow: hidden; float: left; -webkit-tap-highlight-color: transparent } .rsVisibleNearbyWrap { width: 100%; height: 100%; position: relative; overflow: hidden; left: 0; top: 0; -webkit-tap-highlight-color: transparent } .rsVisibleNearbyWrap .rsOverflow { position: absolute; left: 0; top: 0 } .rsContainer { position: relative; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent } .rsArrow, .rsThumbsArrow { cursor: pointer } .rsThumb { float: left; position: relative } .rsArrow, .rsNav, .rsThumbsArrow { opacity: 1; -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear } .rsHidden { opacity: 0; visibility: hidden; -webkit-transition: visibility 0s linear .3s, opacity .3s linear; -moz-transition: visibility 0s linear .3s, opacity .3s linear; -o-transition: visibility 0s linear .3s, opacity .3s linear; transition: visibility 0s linear .3s, opacity .3s linear } .rsGCaption { width: 100%; float: left; text-align: center } .royalSlider.rsFullscreen { position: fixed !important; height: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 2147483647 !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important } .royalSlider .rsSlide.rsFakePreloader { opacity: 1 !important; -webkit-transition: 0s; -moz-transition: 0s; -o-transition: 0s; transition: 0s; display: none } .rsSlide { position: absolute; left: 0; top: 0; display: block; overflow: hidden; height: 100%; width: 100% } .royalSlider.rsAutoHeight, .rsAutoHeight .rsSlide { height: auto } .rsContent { width: 100%; height: 100%; position: relative } .rsPreloader { position: absolute; z-index: 0 } .rsNav { -moz-user-select: -moz-none; -webkit-user-select: none; user-select: none } .rsNavItem { -webkit-tap-highlight-color: rgba(0, 0, 0, .25) } .rsThumbs { cursor: pointer; position: relative; overflow: hidden; float: left; z-index: 22 } .rsTabs { float: left; background: 0 0 !important } .rsTabs, .rsThumbs { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent } .rsVideoContainer { width: auto; height: auto; line-height: 0; position: relative } .rsVideoFrameHolder { position: absolute; left: 0; top: 0; background: #141414; opacity: 0; -webkit-transition: .3s } .rsVideoFrameHolder.rsVideoActive { opacity: 1 } .rsVideoContainer .rsVideoObj, .rsVideoContainer embed, .rsVideoContainer iframe, .rsVideoContainer video { position: absolute; z-index: 50; left: 0; top: 0; width: 100%; height: 100% } .rsVideoContainer.rsIOSVideo embed, .rsVideoContainer.rsIOSVideo iframe, .rsVideoContainer.rsIOSVideo video { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 44px } .rsABlock { left: 0; top: 0; position: absolute; z-index: 15 } img.rsImg { max-width: none } .rsNoDrag { cursor: auto } .rsLink { left: 0; top: 0; position: absolute; width: 100%; height: 100%; display: block; z-index: 20; background: url(blank.html) } #full-width-slider { width: 100%; min-width: 1200px; height: 625px; color: #000 } .coloredBlock { padding: 12px; background: rgba(255, 0, 0, .6); color: #FFF; width: 200px; left: 20%; top: 5% } .infoBlock { width: 1200px; margin: 0 auto; text-align: right; background: 0 0; overflow: hidden } .infoBlockLeftBlack { color: #FFF; position: absolute; top: 270px; right: 10px } .infoBlock h4 { padding-right: 10px; font-size: 78px; color: #fc0; line-height: 9rem; margin: 0; padding-bottom: 3px } .infoBlock p { font-size: 36px; font-size: 3.6rem; line-height: 40px; line-height: 4rem; letter-spacing: .4rem; margin: 4px 6px 0 0 } .infoBlock a { color: #FFF; text-decoration: underline } .fullWidth { height: 0; padding-bottom: 31.758530%; margin: 0 auto; overflow: hidden; } /*homepage -> roll-news*/ .newsBox { position: relative; z-index: 1; width: 100%; height: 42px; margin: 6px auto 15px; } .newsBox_con { height: 100%; border: 1px solid #F0F0F0; border-radius: 32px; background-color: #fff; box-shadow: 0 2px 14px #F9F9F9; overflow: hidden; } .lastNews_tit { width: 10%; height: 100%; line-height: 40px; font-size: 19px; text-align: center; color: red; background-color: #F6F6F6; } .lastNews_tit:before { content: '鐑偣鏂伴椈'; display: inline-block; float: left; width: 70%; font-size: 14px; text-align: center; color: #888; background-color: #F0F0F0; } .lastNews_tit i { display: inline-block; width: 30%; float: left; margin: 0; text-align: center; color: #999; } .lastNews { position: relative; width: 90%; height: 40px; padding: 0 20px; overflow: hidden } .lastNews li { height: 40px; line-height: 40px; font-size: 14px; color: #333 } .lastNews li a { display: inline-block; color: #2e2e57; transition: .4s } .lastNews li a:hover { color: red } .lastNews li a span { margin: 0 18px; color: #888 } .lastNews li ._title { display: inline-block; vertical-align: middle } .lastNews li ._time { color: #a9a9a9; vertical-align: middle } .lastNews li a.more { display: inline-block; height: 22px; padding: 0 10px; line-height: 22px; font-size: 10px; border-radius: 50px; color: #888; cursor: pointer; transition: .3s } .lastNews li a.more:hover { background-color: #f63b2e; color: #fff !important } .lastNews .arrs { display: block; position: absolute; top: 0; width: 32px; height: 40px; line-height: 40px; text-align: center; font-family: iconfont; font-size: 14px; color: #ddd; background-color: #F9F9F9; cursor: pointer } .lastNews .arrs:hover { background-color: red; border-color: red; color: #fff; } .lastNews .arr_prev { right: 32px; border-right: 1px solid #F0F0F0; } .lastNews .arr_next { right: 0; } .lastNews .arr_prev:before { content: '\e656' } .lastNews .arr_next:before { content: '\e603' } /*homepage -> slogan*/ .vision_tit { font-size: 36px; line-height: 2.6; color: #333; font-weight: 400; text-align: center } .vision_con { font-size: 16px; line-height: 1.8; text-align: justify } .vision_con span a { font-size: 14px; color: #c7000b } /*homepage ->section title*/ .rows { margin-top: 15px } .index_rows_tit .rows_tit { text-align: left } .rows_tit h3 { display: inline-block; font-size: 28px; height: 60px; line-height: 60px; font-weight: 800; color: #282828 } .rows_tit a { float: right; height: 60px; line-height: 80px; font-size: 16px; color: #282828 } .rows_tit a:hover { color: red } .rows_tit a:after { content: '\e730'; display: inline-block; float: right; width: 0; text-align: center; font-family: iconfont; overflow: hidden; -ms-transform: scale(0); transform: scale(0); transition: .3s } .rows_tit a:hover:after { width: 24px; -ms-transform: scale(1); transform: scale(1) } /*homepage -> business*/ .index_core { width: 100%; margin-top:20px; padding:40px 0 100px; background-color: #F8F8F8; } .bussiness-list{ position:relative; width:1320px; margin:0 auto; background-color:#F9F9F9; overflow:hidden; border: 1px solid rgba(0,0,0,.08); border-radius:10px; box-shadow:0 8px 100px rgba(0,0,0,.06); overflow:hidden; } .bussiness-tab{ position:absolute; bottom:30px; left:50%; z-index:10; margin-left:90px; overflow:hidden; } .bussiness-tab li{ display:inline-block; float:left; width:8px; height:8px; border-radius:50%; margin:5px; background-color:#d6d6d6; cursor: pointer; transition: .3s; } .bussiness-tab li.cur{ background-color:#E62129; transition: .3s; } .menu-list{ position:relative; float: left; width:268px; padding:20px 0; overflow:hidden; background-color:#F9F9F9; } .menu-list li{ float:left; width:100%; height:55px; padding:0 40px; line-height:55px; cursor: pointer; } .menu-list li a{ position:relative; z-index:2; display:block; height:100%; color:#666666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:.4s; } .menu-list li.cur a{ color:#E62129; transition:.4s; } .menu-list .cur-bg{ position:absolute; top:20px; left:0; width:100%; height:60px; background-color:#FFFFFF; border:1px solid rgba(0,0,0,.05); border-left:3px solid #E62129; border-right:none; box-shadow:0 4px 40px rgba(0,0,0,.04); } .content-list{ position: relative; z-index:2; float:left; width:1050px; height:480px; box-shadow:-10px 0 12px 6px rgba(0,0,0,.03); } .bussiness-content{ display:none; position:relative; float:left; width:100%; height:480px; padding:50px 60px; background-color:#FFFFFF; background-position: 60px 174px; background-size:300px; background-repeat: no-repeat; } .content-list li:nth-child(1){ background-image: url(../images/bussiness-bg2.png); } .content-list li:nth-child(2){ background-position: 80px 160px; background-image: url(../images/bussiness-bg3.png); } .content-list li:nth-child(3){ background-position: 60px 160px; background-image: url(../images/bussiness-bg4.png); } .content-list li:nth-child(4){ background-position: 60px 160px; background-image: url(../images/bussiness-bg5.png); } .content-list li:nth-child(5){ background-position: 60px 160px; background-image: url(../images/bussiness-bg1.png); } .content-list li:nth-child(6){ background-position: 60px 160px; background-image: url(../images/bussiness-bg7.png); } .content-list li:nth-child(7){ background-position: 60px 160px; background-image: url(../images/bussiness-bg8.png); } .content-list li:nth-child(8){ background-position: 60px 160px; background-image: url(../images/bussiness-bg9.png); } .bussiness-content.cur{ display: block; } .bussiness-detail{ position: absolute; bottom:110px; left:60px; padding:8px 26px; font-size:14px; border:1px solid #AAAAAA; background-color:#F6F6F6; color:#E62129; } .bussiness-detail:hover{ background-color:#E62129; color:#FFFFFF; border-color:#E62129; } .bussiness-title { position:relative; width: 100%; } .content-number{ position: absolute; top:-14px; right:0; font-size:36px; color:#F6F6F6; } .bussiness-title h3{ margin-bottom:30px; font-size:20px; font-weight: normal; color:#444444; } .bussiness-desc{ overflow:hidden; } .bussiness-info{ float:left; width:530px; } .bussiness-info p{ font-size:15px; line-height:1.8; color:#888888; text-align: justify; } .bussiness-cover{ float:left; width:370px; margin-left:30px; } .rows_con ul { float: left; width: 102%; margin: 0; padding: 0; list-style: none } .rows_con ul li { float: left; width: 12.28%; height: auto; margin: 10px 2% 0 0; border-radius: 4px; overflow: hidden; transition: .6s } a.pic_push { display: block; width: 100%; height: 0; padding-bottom: 60%; overflow: hidden } a.pic_push img { width: 100%; transition: 1s linear } a.pic_push~h3 a { display: block; font-size: 16px; line-height: 2.4; font-weight: 400; color: #444; text-align: center; background-color: #F4F4F4 } .rows_con ul li:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .1); } .rows_con ul li:hover h3>a { background-color: #be1e2d; color: #fff !important } .rows_con ul li:hover img { filter: saturate(2); -ms-transform: scale(1.04); transform: scale(1.04) } /*homepage -> introduction*/ .conpany_intr { position: relative; width: 100%; height: 0; padding-bottom: 30%; overflow: hidden; background-color: #FAFAFA } .intr { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-image: url(../images/video_cover.png); background-color: rgba(0, 0, 0, .1) } .intr h3 { height: 170px; text-align: center; font-size: 36px; line-height: 240px; font-weight: 400; color: #fff } .intr p { width: 1280px; margin: 0 auto; font-size: 15px; line-height: 2; font-weight: 400; text-align: justify; text-indent: 30px; color: rgba(255, 255, 255, .8); color: #F9F9F9\9 } .intr a { display: inline-block; height: 20px; line-height: 17px; padding: 0 8px; text-indent: 0; border: 1px solid rgba(255, 255, 255, .6); border: 1px solid #F9F9F9\9; border-radius: 20px; font-size: 10px; color: #ddd } .intr a:hover { color: #F63B2E; background-color: rgba(255, 255, 255, .6) } #video-mask { width: 100%; filter: blur(6px); -ms-transform: scale(1.2); transform: scale(1.2) } #media-video { display: none } #video-btn { width: 200px; height: 60px; margin: 60px auto 0; border: 1px solid #f5f5f5; border-radius: 4px; text-align: center; transition: .4s } #video-btn:hover { cursor: pointer; background-color: rgba(255, 255, 255, .6); box-shadow: 0 3px 20px rgba(255, 255, 255, .4); transform: translate3d(0, -3px, 0); transition: .6s } #video-btn:after { display: inline-block; content: ""; width: 0; height: 0; margin: 9px auto; border-width: 20px 0 20px 30px; border-style: solid; border-color: transparent transparent transparent #F9F9F9 } #video-btn:hover:after { border-color: transparent transparent transparent #F63B2E; transition: .4s } #back-intr { display: none; position: absolute; top: 30px; right: 30px; z-index: 100; padding: 0 10px 0 6px; border: 1px solid #F9F9F9; border-radius: 4px; font-size: 14px; color: #fff; opacity: .6 } #back-intr:hover { opacity: .8; background-color: rgba(255, 255, 255, .4); cursor: pointer } #back-intr:before { display: inline-block; float: left; content: "\e752"; font-family: "iconfont"; display: inline-block; width: 28px; line-height: 28px; text-align: center; color: #F9F9F9 } #back-intr:after { display: inline-block; float: left; content: "杩斿洖"; height: 28px; line-height: 28px; font-size: 14px; color: #fff } #esc-btn { position: absolute; top: 30px; left: 50%; z-index: 99999999999; width: 200px; margin-left: -100px; text-align: center; color: #fff } #media-video, .ppq-video-player { display: none; margin: 0 auto; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFwmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0xMC0xOVQwOToyOTowMSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0xMC0xOVQwOToyOTowMSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMTAtMTlUMDk6Mjk6MDErMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZDk5NzAyYWMtM2YzYy1lMjQ0LTgwN2QtNGNjZjkzNWJjMGIxIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDFkM2NlZTctMTAzZi04YTQyLWEwMTUtZjhlMDA4OGFiOGQxIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YjhhNzVkYWYtMDNkNy0zNzQzLTkwNzEtM2UwOTFmN2YyZTRiIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjhhNzVkYWYtMDNkNy0zNzQzLTkwNzEtM2UwOTFmN2YyZTRiIiBzdEV2dDp3aGVuPSIyMDE4LTEwLTE5VDA5OjI5OjAxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpkOTk3MDJhYy0zZjNjLWUyNDQtODA3ZC00Y2NmOTM1YmMwYjEiIHN0RXZ0OndoZW49IjIwMTgtMTAtMTlUMDk6Mjk6MDErMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+88fY4wAAAM1JREFUSA1j+P //PwM9McOohaMW0spCbiDuAeINtLaQFYhzgPjFfwi4RCsLJYC4AIgf/UcFV4A4CIiDoTgUSjsAsSAlFu78Tx7YAcRS5FioBA3K22gGngViSyC2gmIY2x+IZyGpsyQ3DhmBOBWIb0ANukdAvSIQ/wLiv7iCmJQILwHiSUSoU4Y6bik98+FJqKV0s7CJ3hbOp7eFP4D4Ib0shGUPN1payAbEFkC8G2rZVFLzIagM7QPidUTiA0D8BWpZ+Wh9OGrhqIWD20IA9WdorOy4G/sAAAAASUVORK5CYII=) left center no-repeat } .ppq-video-player .play-btn { z-index: 10; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; cursor: pointer } .ppq-video-player .play-btn button { position: absolute; width: 100%; height: 100%; padding: 10px; border-radius: 50%; background-color: rgba(255, 0, 0, .5); display: inline-block; border: 0 none; text-align: center; font-size: 0; cursor: pointer; box-sizing: border-box } .ppq-video-player .play-btn span { display: block; width: 60px; height: 60px } .ppq-video-player .play-btn svg { fill: #fff; width: 100%; height: 100% } video#media-video::-webkit-media-controls { display: none !important } video#media-video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none !important; appearance: none !important } video#media-video::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none !important; appearance: none !important } video#media-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none !important; appearance: none !important } .ppq-video-player { position: relative; width: 100%; height: 0; padding-bottom: 30%; overflow: hidden; background: #000 } .ppq-video-player .screen-box { position: absolute; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0 } .ppq-video { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain } .video-hidden { width: 0; height: 0; overflow: hidden } .tool-box { z-index: 10; position: absolute; bottom: 0; width: 100%; height: 48px; background: 0 0; -webkit-transition: .5s; transition: .5s } .tool-box:before { content: ' '; position: absolute; bottom: 0; width: 100%; height: 48px; pointer-events: none; background: rgba(0, 0, 0, .5); -webkit-transition: .5s; transition: .5s } .player-bar { position: relative; margin: 22px 89.5px 0 83.5px; height: 4px; background: rgba(255, 255, 255, .3); -webkit-transition: .5s; transition: .5s } .player-bar-loaded { position: absolute; height: 4px; width: 0; background-image: -webkit-gradient(linear, left top, right top, from(#ff4b3d), to(#ff9641)); background-image: -webkit-linear-gradient(left, #ff4b3d 0, #ff9641 100%); background-image: linear-gradient(to right, #ff4b3d 0, #ff9641 100%); min-width: 0; max-width: 100% } .player-bar-dot { position: absolute; width: 20px; height: 20px; right: -10px; top: -8px; background: 0 0; opacity: 1; -webkit-transition: .5s; transition: .5s } .player-bar-dot:after { content: ' '; display: block; width: 12px; height: 12px; background: #fff; border-radius: 12px; margin: 4px 0 0 4px } .play-pause-btn { position: absolute; width: 40px; height: 48px; left: 0; top: 0; opacity: 1; -webkit-transition: .5s; transition: .5s } .play-pause-btn:hover { cursor: pointer; -ms-transform: scale(1.2); transform: scale(1.2) } .play-pause-btn:before { content: ' '; display: block; margin: 16px 0 0 17px; background-position: 0 0; width: 16px; height: 16px } .play-pause-btn.playing:before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFwmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0xMC0xOVQwODo0NTo1NyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0xMC0xOVQwODo0NTo1NyswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMTAtMTlUMDg6NDU6NTcrMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YmQxNjRhMmUtZjRjZS1mYjQ1LTk0OWMtM2E0ZWRlMDlmYTk3IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YWViZTBkNTQtMDFmNC03NzRlLTkxZDktM2Y3ZWIxMzFlNzg2IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YjcyYjg1YTgtMTlhMS05MTRkLWIwMDYtODg0ZTdhZjBjZjc3IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjcyYjg1YTgtMTlhMS05MTRkLWIwMDYtODg0ZTdhZjBjZjc3IiBzdEV2dDp3aGVuPSIyMDE4LTEwLTE5VDA4OjQ1OjU3KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZDE2NGEyZS1mNGNlLWZiNDUtOTQ5Yy0zYTRlZGUwOWZhOTciIHN0RXZ0OndoZW49IjIwMTgtMTAtMTlUMDg6NDU6NTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7jSgkgAAABlJREFUGBlj+P//P8N/VMCATYxhVCF9FQIAdedmqKfJL3IAAAAASUVORK5CYII=) center center no-repeat; } .play-pause-btn.paused:before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAqklEQVQ4T8XTPQ5BQRSG4ffdlnWoRYcGnQUoNRSELbAHlUrQqxV3AxKNGLlyJxGR6/4UpjyZ75nMmTkChBCawAY4AB31lNaLLDNgBvSzwANYAiP1+guJwALofWxOgKG6zkPygJjbAm318g0qAqS5GzAGJur9HSoKxMwZaKn7WCgLvHoOzNOmq6EKEA/vqqu/ALWuULmJtZ6x8kcq9ZWnwKDOMDWAHXAsO85PeChkEQFQUtAAAAAASUVORK5CYII=); } .player-enlarge-btn { position: absolute; width: 40px; height: 48px; right: 0; top: 0; opacity: 1; -webkit-transition: .5s; transition: .5s } .player-enlarge-btn:before { content: ' '; display: block; margin: 16px 0 0 7px; background-position: 0 0; width: 16px; height: 16px; background: url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAaUlEQVQ4T2P8 ////SgYGhjAGVGDEyMh4Hk2M4f///38YGBiYkcTvMzIyKjFS2xBPRkbGHei2Y+P///9fmIGB4Q0DAwOGSwbYEGKcT0gNIyEFxMiPGoIZSsgpdoDTCVLeoYpLkD1L/1wMAHO/ZBE/6w2hAAAAAElFTkSuQmCC) } .player-time-current, .player-time-duration { position: absolute; top: 0; color: #fff; font-size: 20px; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); line-height: 48px; opacity: 1; -webkit-transition: .5s; transition: .5s } .player-time-current { left: 37px } .player-time-duration { right: 39px } .tool-box-hide { height: 0; -webkit-transition: .5s; transition: .5s } .tool-box-hide .player-bar { margin: 0; -webkit-transition: .5s; transition: .5s } .tool-box-hide .play-pause-btn, .tool-box-hide .player-bar-dot, .tool-box-hide .player-enlarge-btn, .tool-box-hide .player-time-current, .tool-box-hide .player-time-duration { opacity: 0; -webkit-transition: .5s; transition: .5s } .tool-box-hide:before { bottom: -50px; -webkit-transition: .5s; transition: .5s } @-webkit-keyframes loading { from { -webkit-transform: rotate(0) translateZ(0) } to { -webkit-transform: rotate(360deg) translateZ(0) } } @keyframes loading { from { transform: rotate(0) translateZ(0) } to { transform: rotate(360deg) translateZ(0) } } .ppq-video-player .player-loading { position: absolute; top: 50%; left: 50%; -webkit-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(0); width: 48px; height: 48px; margin-left: -24px; margin-top: -24px; text-indent: -999em; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAolBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ELnaCAAAANXRSTlMA+0DA3WQL5n5VOCeWGhH2787GpU4VBwPq0611XC4jupCFPfPhw4l5ch/ZynBsZ0tHKZ0zMc0Zbz8AAAIwSURBVFjD3NNtWwFBFMbxe2WRzS6LQvIQpUhdyv/7f7XsDLKx7PSy3+uZM/c51xn9Q2Hfr+lQUCgUHu+U11sEXiVdwR8/UR7ef+WocveJ0dcvq/Ecui/BpfhXWA0da8XAU1VntBtsTXXKdQfoZad4LbIzzHihCXizjFncdtm7VoZWBMShTmmyM+0r00MZKA507J6tia9zanOgsz7OxlYz1Hm1MjCpKq3Uwei0dNE6AqJHpYwx5q/KwQeop46GExKNULkMzeFb/ajY+yXlM/AARtor1QGmbeV1Q6KabioKlFvNRIj3K7kA8OVgxOGVwH5AFwMSRVkzwKvKSXwY4Qroyc0LiViGZybqJsB42PUTy1WdxFgbH8BSroYkutp4B9pydYMR2j1eyFkFo2WXYiRnS4xnG6YvZz5GzxZY/TGBneIzlORshlH/7rVudhoEoigAn4Fx+ClYlEJbEH/QVk2aFjXn/V/NQE1kAWPLjf22kzOLc+/idks1x+QSCSDgCudz2OrmV9HDBBu2GgC5SjBBFmm1PqDlKsj4jCESMoSMdwWZpwgy2RpC0QdkslcI3UHIxLiw3EDGgUwQCvORMH9jIFE+f1narXchrEyqLA3GmqRuMK7WDDCuYCetMGyWUtm29po/VDH0xeGBTBxYvPOX9mfouy9fjoe6zdJj38r1nU5Qfh5fUgO7gDZ6gT8tEo7xdkucwOzd4fhbjlNVj5s5+9RtGeNM9X5buJ2t3+T4R99UyG9EAeEmOQAAAABJRU5ErkJggg==); background-size: contain; background-position: 0 0; -webkit-animation: loading 1.2s linear infinite; animation: loading 1.2s linear infinite } @media screen and (max-width:1680px) { .intr h3 { height: 100px; line-height: 140px } #video-btn { width: 160px; height: 50px; margin: 30px auto 0 } #video-btn:after { margin: 5px auto } } /*homepage -> news*/ .index_news { margin: 40px 0 80px } .index_rows_tit { margin-bottom: 10px } /* news -> carousel */ .news_pbox { position: relative; width: 47%; margin-top: 10px; border-radius: 8px; box-shadow: 4px 6px 20px rgba(0, 0, 0, .2); overflow: hidden; transition: .4s } .news_pbox:hover { filter: saturate(1.2); } .news_pbox:hover ol li { -ms-transform: scale(1); transform: scale(1); } .news_pbox:before { content: ''; display: inline-block; float: left; width: 0; padding: 28% 0 } .news_pbox ul, .news_pbox ul li { float: left; width: 100%; height: 100%; border-radius: 8px; overflow: hidden } .news_pbox ul li { display: none; position: absolute; } .news_pbox ul li a { display: block; overflow: hidden; } .news_pbox ul li img { width: 100%; transition: 1s linear } .news_pbox ul li p { display: inline-block; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; padding: 12px 14px 6px; font-size: 13px; line-height: 2; font-weight: 400; text-align: justify; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); background-color: #666\9 } .news_pbox ol { position: absolute; top: 12px; left: 50%; z-index: 10; margin-left: -110px } .news_pbox ol li.active { background-color: #c7000b } .news_pbox ol li { float: left; width: 40px; height: 8px; margin: 4px; border-radius: 4px; font-size: 0; background-color: rgba(255, 255, 255, .8); background-color: #F5F5F5\9; cursor: pointer; -ms-transform: scale(0); transform: scale(0); opacity: .6; transition: .4s } .news_pbox:hover img { -ms-transform: scale(1.04); transform: scale(1.04) } .inews_list { width: 50%; margin-top: 10px } .inews_list li { float: left; width: 100%; margin: 0 0 16px; padding: 0 0 16px 0; border-bottom: 1px #e6e6e6 solid; overflow: hidden; transition: margin-left .4s } .inews_time { float: left; width: 16% } .inews_intr { display: block; float: left; width: 84% } .inews_intr h3 { height: 40px; line-height: 20px; font-size: 18px } .inews_intr p { height: 48px; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; text-align: justify; overflow: hidden } .inews_time span { display: block; width: 100%; text-align: center } .inews_Day { line-height: 52px; font-size: 52px; color: #be1e2d } .inews_Year { padding-top: 15px; line-height: 20px; font-size: 14px; color: #a0a0a0 } .inews_list li:hover { margin-left: -10px } .inews_intr:hover p { color: #444 } .inews_intr:hover h3 { color: #be1e2d } /* ie8 suggestion */ .ie-alert { position: fixed; top: 0; left: 0; z-index: 99999999999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000); } .browser-box { position: fixed; top: 50%; left: 50%; z-index: 999999999999; width: 550px; margin: -275px 0 0 -275px; padding-top: 30px; background-color: #F9F9F9; } .browser-box p { width: 100%; text-align: center; font-size: 16px; line-height: 1.8; color: #888; } .browser-box span { display: block; width: 100%; font-size: 13px; line-height: 1.6; text-align: center; color: #999; } .browser-box span a { color: #c7000b; } .wap { width: 200px; height: 200px; margin: 30px auto 26px; background: url(../images/wap.png) no-repeat; } .browser { width: 384px; height: 60px; margin: 15px auto 30px; overflow: hidden; } .browser a { display: inline-block; float: left; width: 160px; height: 60px; margin: 0 15px; border: 1px solid #E3E3E3; background: url(../images/icons.png) no-repeat; } .browser a:hover { background-color: #EEEEEE; } .browser #chrome { background-position: 0 0; } .browser #mozilla { background-position: 0 -60px; } .browser-box>a { display: block; width: 100%; padding: 15px; background-color: #E6E6E6; text-align: center; font-size: 12px; color: #888; line-height: 2; } .browser-box>a span { display: inline; padding: 0 10px; font-size: 12px; color: #999; } .browser-box>a:hover span { color: #c7000b; text-decoration: underline; } /* ************************home page response*********************************** */ @media screen and (max-width:1320px) { .nav>ul>li.cur>a { border-bottom: 3px solid red } .wrap { padding: 0 40px } .newsBox { padding: 0 30px; } .newsBox_con { padding: 0; } .head .top_search { right: calc(10% + 40px) } .index_foot { min-width: 100% } a.pic_push~h3 a { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .intr { padding: 0 30px } .intr p { width: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden } .inews_intr h3 { height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bussiness-list{ width:calc(100vw - 80px) } .menu-list{ width: 230px; } .content-list{ width: calc(100% - 230px); } .bussiness-info{ width: calc(100% - 300px); } .bussiness-info p{ overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; } .bussiness-cover{ width:280px; margin-left:20px; } } /* small screen computer */ @media screen and (max-width:1200px) { .head, .head .logo a, .head .logo a:after, .head .logo a:before, .head .nav, .head .nav-btn-plu span, .head .nav>ul>li, .head .nav>ul>li>a, .head .top_search { height: 60px; line-height: 60px } .head .wrap { float: left; height: 100%; padding: 0 } .logo { position: absolute; top: 0; left: 0; z-index: 10001; width: 100%; padding: 0 20px } .nav-btn-plu { position: absolute; top: 0; right: 0; z-index: 10002; min-width: 120px } .head .nav { position: fixed; top: 60px; right: 0; z-index: 10000; height: 100vh; padding-top: 2px; background-color: #F6F6F6; transform: translate3d(-100vw, 0, 0); opacity: 0; transition: .4s ease-in-out } .head .nav-show { opacity: 1; transform: translate3d(0, 0, 0) } .nav .fix>li:nth-child(0) { transform: translate3d(-60px, 0, 0); transition: .8s .3s } .head .logo a { display: inline-block; width: auto; } .head.scroll .nav { top: 60px; height: 100vh; padding-bottom: 60px; } .head .top_search { z-index: 10010; } .top_search form { height: 40px; margin-top: 10px; } .mobil-drop-btn { display: inline-block; float: left; width: 45px; height: 46px; line-height: 46px; color: #999; text-align: center; transition: .2s } .mobil-drop-btn:before { display: inline-block; content: '\e62b'; font-family: iconfont; transition: .2s } .mobil-drop-btn-active { background-color: #F6F6F6 } .mobil-drop-btn-active:before { -ms-transform: rotate(180deg); transform: rotate(180deg); color: #F63B2E } .nav ul li { width: 100%; height: auto !important; margin: 0; padding: 0; border-bottom: 1px solid #F6F6F6; background-color: #fff } .head.scroll .nav>ul>li>a, .nav>ul>li>a { float: left; width: calc(100% - 46px); height: auto !important; padding: 15px; border: none !important; line-height: 1 !important; color: #333; font-size: 16px !important; text-align: left } .nav>ul>li>a { border-right: 1px solid #f6f6f6 !important } .nav>ul>li:first-child>a { border: none !important } .head .nav .sevNav { display: block; position: static; float: left; width: 100%; border: none; opacity: 1; visibility: visible; transform: translate(0); overflow: hidden; background-color: #F8F8F8; } .head .nav .sevNav ul { display: none } .sevNav ul, .sevNav ul li a, .sevNav ul li.side, .sevNav ul li.wide { float: left; width: 100%; margin: 0; padding: 0; text-align: left; text-indent: 20px; background-color: #f3f3f3; border-color: #eee } .sevNav ul li:last-child { border: none; } .sevNav .img { display: none } .head .nav-btn-plu span:after { content: ''; display: inline-block; float: right; width: 1px; height: 32px; margin-top: 14px; background-color: #eee } .nav-side-btn { display: none !important } #menu-mobile-btn { display: inline-block } #full-width-slider, .rsContainer>div, .rsOverflow, .sliderContainer { width: 100% !important; min-width: 100%; height: 0 !important; padding-bottom: 50% } .sliderContainer { padding-top: 60px !important } .rsContent a { height: 0 !important; padding-bottom: 50% } img.rsImg { display: block; width: 158% !important; height: auto !important; margin-top: 0 !important; margin-left: -30% !important } .news_pbox:before { padding: 32% 0 } .news_pbox ul li img { -ms-transform: scale(1.3); transform: scale(1.3) } /* menu button */ .inews_Year { padding-top: 5px } .ham { display: inline-block; float: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .4s; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none } .hamRotate.active { -ms-transform: rotate(45deg); transform: rotate(45deg) } .hamRotate180.active { -ms-transform: rotate(180deg); transform: rotate(180deg) } .ham-line { fill: none; transition: stroke-dasharray .4s, stroke-dashoffset .4s; stroke: #999; stroke-width: 4; stroke-linecap: round } .ham.active .ham-line { stroke: red } .ham .ham-top { stroke-dasharray: 40 160 } .ham .ham-middle { stroke-dasharray: 40 142; transform-origin: 50%; transition: transform .4s } .ham .ham-bottom { stroke-dasharray: 40 85; transform-origin: 50%; transition: transform .4s, stroke-dashoffset .4s } .ham.active .ham-top { stroke-dashoffset: -64px } .ham.active .ham-middle { transform: rotate(90deg) } .ham.active .ham-bottom { stroke-dashoffset: -64px } } /* pad */ @media screen and (max-width:1024px) { img { pointer-events: none } /*绉诲姩绔姝㈠浘鐗囨斁澶?/ .intr h3, .vision_tit { font-size: 28px } .intr p, .rows_tit a, .vision_con { font-size: 14px } .index_core { margin: 20px 0 } .rows_tit h3 { height: 40px; line-height: 40px; font-size: 24px } .rows_tit a { height: 40px; line-height: 50px } .newsBox { display: none } .intr h3 { height: 80px; line-height: 90px } .index_news { margin: 20px 0 } } @media screen and (max-width:900px) { .bussiness-info{ width: calc(100% - 220px); } .bussiness-cover{ width:200px; margin-left:20px; } .index_rows_tit { margin: 30px 0 20px } .rows_tit h3 { font-size: 32px } .rows_tit a { font-size: 18px } .rows_tit a:after { width: 24px; transform: scale(1) rotate(90deg); content: '\e609' } .intr p { -webkit-line-clamp: 3 } .inews_list, .news_pbox { width: 100%; margin-bottom: 10px } .news_pbox:before { padding: 24% 0 } .news_pbox ul li img { transform: scale(1) } .inews_list { margin-top: 20px } .foot_mess { padding: 20px 0 } .foot_mess .footNav, .foot_mess .footSites { width: 100%; border: none } .col_tit, .sites_tit { font-size: 22px; font-weight: 400 } .foot_mess .col_19 { width: 100%; min-height: 100%; padding: 18px 0 } .foot_mess .footSites { padding: 20px 0 } .col_nav a { float: left; width: 50% } .f_sites { padding: 0; border: none } .f_sites ul li, .f_sites ul li a { width: 100%; margin: 0; line-height: 2.4; text-align: left; background-color: transparent } .f_sites ul li a:after { display: inline-block; content: '\e609'; font-family: iconfont; transform: rotate(90deg) translateY(-5px) } } @media screen and (max-width:768px) { .content-list,.bussiness-tab{ display: none; } .bussiness-list{ width: calc(100% - 40px); } .menu-list{ display: flex; flex-wrap: wrap; width:100%; } .menu-list li{ display: flex; flex-direction: column; align-items: center; width:calc(25% - 2px); height: auto; padding:0; border-right: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; } .menu-list li.cur a{ color:#666666; } .menu-list li::before{ font-family: 'iconfont'; display:inline-block; font-size:40px; height:40px; } .menu-list li:nth-child(2)::before{ content: '\e60e'; } .menu-list li:nth-child(3)::before{ content: '\e60f'; } .menu-list li:nth-child(4)::before{ content: '\e61b'; } .menu-list li:nth-child(5)::before{ content: '\e657'; } .menu-list li:nth-child(6)::before{ content: '\e7cc'; } .menu-list li:nth-child(7)::before{ content: '\e62f'; } .menu-list li:nth-child(8)::before{ content: '\e645'; } .menu-list li:nth-child(9)::before{ content: '\e622'; } .menu-list li:nth-child(5),.menu-list li:nth-child(9){ border-right: transparent; } .menu-list li:nth-child(6),.menu-list li:nth-child(7),.menu-list li:nth-child(8),.menu-list li:nth-child(9){ padding-top:10px; border-bottom-color:transparent; } .cur-bg{ display:none; } .nav { overflow-y: scroll; } .nav>ul>li { position: relative; z-index: 10002; } .nav .fix>li:nth-child(1) { transform: translate3d(-60px, 0, 0); transition: .8s .3s } .nav .fix>li:nth-child(2) { transform: translate3d(-100px, 0, 0); transition: .82s .3s } .nav .fix>li:nth-child(3) { transform: translate3d(-160px, 0, 0); transition: .84s .3s } .nav .fix>li:nth-child(4) { transform: translate3d(-240px, 0, 0); transition: .86s .3s } .nav .fix>li:nth-child(5) { transform: translate3d(-340px, 0, 0); transition: .88s .3s } .nav .fix>li:nth-child(6) { transform: translate3d(-460px, 0, 0); transition: .9s .3s } .nav .fix>li:nth-child(7) { transform: translate3d(-600px, 0, 0); transition: .92s .3s } .nav-show .fix>li:nth-child(1), .nav-show .fix>li:nth-child(2), .nav-show .fix>li:nth-child(3), .nav-show .fix>li:nth-child(4), .nav-show .fix>li:nth-child(5), .nav-show .fix>li:nth-child(6), .nav-show .fix>li:nth-child(7) { transform: translate3d(0, 0, 0) } .logo a:before, .logo a:after, .head.scroll .logo a:before, .head.scroll .logo a:after { font-size: 42px; } .wrap { padding: 0 20px } .intr h3, .vision_tit { font-size: 24px; line-height: 3 } .index_core { margin: 0; padding:20px 0 40px; } .vision_con { line-height: 1.6 } .conpany_intr { padding-bottom: 42% } .news_pbox, .news_pbox ul, .news_pbox ul li { border-radius: 4px; } .media { width: 140%; margin-left: -16% } .intr { padding: 0 16px } .intr h3 { height: 100px; line-height: 120px; font-size: 24px } .intr p { font-size: 14px; -webkit-line-clamp: 4; line-height: 1.6 } .index_news { margin: 0 0 40px } } @media screen and (max-width:667px) { .menu-list li { padding-left:10px; padding-right:10px; } .menu-list li a{ font-size:13px; line-height:14px; height:28px; margin-top:20px; text-align: center; } .head.scroll .nav>ul>li>a, .nav>ul>li>a { width: calc(100% - 50px); font-size: 14px !important; padding: 18px 24px } .sevNav ul li a { text-indent: 36px } .mobil-drop-btn { height: 50px; line-height: 50px } .sevNav ul li a { font-size: 14px; height: 48px; line-height: 48px } .sevNav ul li a:last-child { border: none } .mobil-drop-btn { width: 50px; font-size: 10px } #video-mask { display: none } #media-video, .ppq-video-player { display: block !important } } @media screen and (max-width:640px) { .rsMinW .rsBullet, .rsMinW .rsBullet.rsNavSelected { height: 8px } .rows_con ul { width: calc(100% + 20px); margin-left: -10px } .rows_con ul li { width: 33.333333%; margin: 0; padding: 10px } .rows_con ul li:last-child { display: none } .rows_con ul li:hover { box-shadow: none } .intr h3 { display: none } .intr { padding: 5% 20px 0 } .news_pbox:before { padding: 28% 0 } .news_pbox ol { margin-left: -70px } .news_pbox ol li { width: 20px; transform: scale(1) } .news_pbox ul li p { line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .head .top_search { width: 100%; height: 52px !important; left: 0; top: 60px; background-color: #F0F0F0; padding: 0 16px; transform: scale(1, 0); transform-origin: top left; } .head .top-search-show { transform: scale(1, 1); } .top_search form { height: 32px !important; margin: 10px 0 !important; background-color: #FFFFFF !important; border-color: rgba(255, 255, 255, .1); } .top-search-show #keywords { width: calc(100% - 40px); padding: 0 5px; font-size: 13px; color: #333; } .top_search #searchSubmit { width: 40px; padding: 0; text-align: center; background-color: #AAAAAA; transform: scale(1); opacity: 1; transition: none; } #searchSubmit:before { color: #FFFFFF; font-size: 16px; transition: none; } } @media screen and (max-width:520px) { .inews_list { margin-top: 10px; } .inews_list li { position: relative; margin-bottom: 12px; } .inews_time { position: absolute; top: 32px; left: 0; z-index: 2; width: 100% } .inews_intr { width: 100%; } .inews_intr h3 { font-size: 16px; height: 32px; line-height: 32px; } .inews_intr p { height: auto; margin-top: 24px; font-size: 13px; line-height: 1.6; } .inews_time span { display: inline-block; width: auto; padding: 0; font-size: 12px; line-height: 1.6; color: #888; } .inews_Year:before { content: '鍙戝竷鏃ユ湡锛?; } .inews_Day:before { content: '-'; } .inews_Year { float: left; } .rsMinW .rsArrow { display: none !important; } } @media screen and (max-width:420px) { .index_core{ padding:0; } .menu-list{ padding:20px; } .menu-list li { width:50%; padding:20px 0; } .menu-list li:nth-child(3),.menu-list li:nth-child(7){ border-right-color: transparent; } .menu-list li:nth-child(6),.menu-list li:nth-child(7){ border-bottom-color:#F0F0F0; } .menu-list li a{ font-size:13px; line-height:28px; margin-top:20px; text-align: center; } .rsArrow { display: none } .rsMinW .rsBullets { bottom: 8px } .rsMinW .rsBullet, .rsMinW .rsBullet.rsNavSelected { height: 4px } .nav:before { content: '涓哄埗閫犵殑鏇撮珮鑽h€€'; display: inline-block; position: fixed; bottom: 46vw; left: 0; width: 100%; font-size: 20px; color: #fff; text-align: center; letter-spacing: 2px; opacity: 0; transform: translateY(80px); transition: 1s 1s } .nav:after { content: ''; display: inline-block; position: fixed; bottom: 20px; left: 0; width: 100%; height: 0; padding-bottom: 47%; background: url(../images/navbg.png) no-repeat; background-size: contain; opacity: 0; transform: translateY(400px); transition: 1s .3s } .nav-show:before { transform: translate(0); opacity: 1 } .nav-show:after { transform: translate(0); opacity: .2 } .rows_con ul li { position: relative; width: calc(100% - 20px); padding: 0; margin-left: 10px; margin-bottom: 10px } .rows_con ul li:last-child { display: block } .rows_con h3 { position: absolute; top: 50%; left: 0; z-index: 2; width: 100%; height: 200px; margin-top: -100px; line-height: 200px; text-align: center; background-color: rgba(0, 0, 0, .6) } a.pic_push { position: relative; padding-bottom: 22% } a.pic_push img { position: absolute; top: 50%; transform: translateY(-60%); } .rows_con ul li:hover img { transform: translateY(-70%); } .rows_con ul li:hover h3>a { background-color: transparent; } a.pic_push~h3 a { display: inline; font-size: 18px; line-height: 200px; font-weight: 600; color: #fff; background-color: transparent; letter-spacing: 4px } .vision_tit { font-size: 20px; font-weight: 600 } .vision_con { font-size: 12px } .rows_tit h3 { font-size: 24px } .rows_tit a { font-size: 16px } .intr p { display: none } #video-btn { width: 120px; height: 60px; border-radius: 4px; margin: 35px auto 0; background-color: rgba(255, 255, 255, .3); border-color: rgba(255, 255, 255, .3) } #video-btn:after { margin: 8px auto } .index_rows_tit { margin: 28px 0 8px } .index_core { margin: 0 0 30px } .col_tit, .sites_tit { font-size: 16px; font-weight: 800 } .col_nav a { font-size: 14px; line-height: 2 } .foot_copy, .foot_txt { float: left; border: none; background-color: rgba(0, 0, 0, .1) } .foot_txt p { font-size: 12px; line-height: 1.6; padding: 6px } .side-pannel { bottom: 5px; right: 5px; transform: scale(.8) } .side-model a { background-color: #FFF } a.gotop-side { background-color: #666 } .f_sites ul li { width: 50% } .f_sites ul li a { font-size: 14px; line-height: 2 } .foot_mess .col_19, .foot_mess .footSites { padding: 5px 16px } } /* iPhone X series */ @media only screen and (device-width:375px)and(device-height:812px)and(-webkit-device-pixel-ratio:3) { body { padding-bottom: constant(safe-area-inset-bottom) } } /* 1px border */ @media screen and (-webkit-min-device-pixel-ratio:2) { .nav ul li { border-bottom: .5px solid #F6F6F6 } } @media screen and (-webkit-min-device-pixel-ratio:3) { .nav ul li { border-bottom: .333333px solid #F6F6F6 } }