input { vertical-align: middle; border: 0; /*-webkit-appearance: none;*/ outline: none; } select,button:focus{ outline: none; } body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, input, textarea, html { margin: 0; padding: 0; /*font-size: 100%;*/ } body, html { background: #fff; /*font-family: "SourceHanSansCN",arial;*/ font-family: "NotoSansHant","Microsoft Sans Serif",arial,'Hiragino Sans GB',sans-serif,"San Francisco"; color: #3d3d3d; font-size: .16rem; width: 100%; height: 100%; } .irm_body{ font-size: .18rem; } @font-face { font-family: 'SourceHanSansCN'; src: url('../../fonts/SourceHanSansCN-Regular.otf'); font-weight: normal; font-style: normal; } ul, li { list-style: none; } img, input { border: none; max-width: 100%; } a { text-decoration: none; transition: .3s; } a:hover { text-decoration: none; } a:focus { text-decoration: none; } .clearfix:after { /*content:"200B"; height:0; font-size:0; */ content: ""; display: block; clear: both; } .clearfix { *zoom: 1; } .inner{ max-width: 13.6rem; margin: 0 auto; } .banner{ margin-top: .8rem; } header{ position: fixed; top: 0; background: #fff; z-index: 999; width: 100%; box-shadow: 0 0 8px #e2e2e2; } header .content{ display: flex; justify-content: space-between; align-items: center; } header ul{ display: flex; } header ul li{ margin-left: .35rem; position: relative; } header ul li a.name:before { content: ""; display: block; position: absolute; left: 50%; right: 50%; top: .77rem; height: 2px; background: #b1841d; opacity: 0; } header ul li a.name.on:before { opacity: 1; left: .03rem; right: .03rem; } header ul li:hover a.name:before { opacity: 1; left: .02rem; right: .02rem; } header ul li a{ display: block; color: #666; height: 100%; transition: 0.3s; line-height: .8rem; position: relative; } /*header ul li a:hover:before{*/ /*opacity: 1;*/ /*left: .33rem;*/ /*right: .33rem;*/ /*width: 100%;*/ /*}*/ header ul li a:hover{ color: #b1841d; } header ul li a.active{ color: #b1841d; } header ul li:nth-child(1) .list{ transform: translateX(-30%); } header ul li:nth-child(2) .list{ transform: translateX(-30%); } .g-nav .list { width: .82rem; background: #fff; position: absolute; z-index: 10; left: 50%; transform: translateX(-54%); right: auto; top: 0.79rem; bottom: auto; /*margin-left: -2.06rem;*/ padding: 0 .1rem .1rem; opacity: 0; visibility: hidden; /*transition: opacity 0.3s ease;*/ /*-webkit-transition: opacity 0.1s ease;*/ /*-moz-transition: opacity 0.1s ease;*/ /*-o-transition: opacity 0.1s ease;*/ } header ul li:last-child .list-1{ transform: translateX(-69%); } .g-nav .list-2 a { display: block; text-align: center; border-bottom: #ccc solid 1px; line-height: .43rem; font-size: .14rem; color: #666; } .g-nav .list-2 a:hover { color: #b1841d; border-color: #b1841d; } .g-nav .list-1 { width: 10rem; /*margin-left: -3.2rem;*/ display: flex; display: -webkit-flex; justify-content: flex-start; align-items: center; padding: 0 .5rem; height: 2.95rem; } .g-nav .list-1 .text{ margin-left: .74rem; } .g-nav .list-1 .text a{ color: #808080; font-size: 16px; line-height: 16px; margin-bottom: 20px; border-left: 1px solid #999999; padding-left: 9px; transition: 0.3s; } .g-nav .list-1 .text a:hover{ border-left: 1px solid #ab8221; color: #ab8221; } .g-nav .list-1 .text a.active{ border-left: 1px solid #ab8221; color: #ab8221; } header ul li:hover .list { opacity: 1; visibility: visible; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } .g-nav .touzhi{ height: auto; align-items: flex-start; padding: .5rem; } .g-nav .touzhi .text{ display: flex; justify-content: space-between; } .g-nav .list-1 .text .menuone{ display: flex; flex-flow: column; width: 1.8rem; margin-right: .6rem; } .g-nav .list-1 .text .menuone li{ margin-left: 0; } .g-nav .list-1 .text .menuone li a{ height: 16px; } .g-nav .list-1 .text .menuone li a{ display: flex; justify-content: space-between; } .g-nav .list-1 .text .menuone li a i{ font-style: initial; } .g-nav .list-1 .text .menutwo{ display: none; } .g-nav .list-1 .text .menutwo ul{ display: flex; flex-flow: column; } .g-nav .list-1 .text .menutwo ul li{ border-bottom: 1px solid #d2d2d2; margin-left: 0; width: 1.95rem; } .g-nav .list-1 .text .menutwo ul li a{ margin-bottom: 0; border-left: none; line-height: 30px; padding-left: 4px; } .banner .item{ /*position: relative;*/ } .banner .item:nth-child(2) .text h3{ color: #b1841d; margin-bottom: .16rem; } .banner .item:nth-child(3) .text{ text-align: center; } .banner .text{ position: absolute; width: 13.6rem; top: 30%; left: 50%; transform: translateX(-50%); margin: 0 auto; color: #fff; } .banner .text h3{ font-size: .48rem; font-weight: bold; margin-bottom: .22rem; text-shadow: 1px 1px 1px #555; } .banner .text p{ font-size: .3rem; margin-bottom: .22rem; text-shadow: 1px 1px 1px #555; } .banner .text h4{ font-size: .36rem; font-weight: bold; text-shadow: 1px 1px 1px #555; } .header_right{ display: flex; align-items: center; margin-left: .3rem; } .header_right .search{ margin-right: .22rem; } .header_right .search i{ color: #666666; font-weight: bold; font-size: .19rem; } .header_right .language{ display: flex; align-items: center; justify-content: center; width: 1.97rem; height: .38rem; border-radius: .16rem; background: #f2f2f2; } .header_right .language a{ color: #808080; margin-left: 0.08rem; } .header_right .language a.active{ color: #b1841d; } footer{ background: #f2f2f2; padding-bottom: .5rem; padding-top: .36rem; } footer .content .footer_top{ display: flex; justify-content: space-between; } footer .content .footer_top ul:nth-child(4){ /*display: none;*/ } .footer_top li:first-child a{ color: #333; font-size: .18rem; line-height: .5rem; } .footer_top li a{ color: #808080; font-size: .14rem; line-height: .32rem; } .footer_top li a:hover{ color: #ae841e; } .footer_bot{ display: flex; align-items: center; border-top: 1px solid #d9d9d9; padding-top: .28rem; margin-top: .4rem; } .footer_bot ul{ display: flex; width: 5.1rem; } .footer_bot ul a{ text-decoration: underline; padding: 0 .1rem; } .footer_bot a{ color: #808080; font-size: .14rem; transition: all 0.3s; } .footer_bot a:hover{ color: #ab8222; } .footer_bot p{ color: #808080; font-size: .14rem; margin-left: 20px; text-indent: 0; } /* 侧导航栏*/ #sidenav { position: fixed; top: 0; left: -100%; background-color: #fff; width: 100%; height: 100%; z-index: 999999; transition: all 0.5s; -webkit-transition: all 0.5s; overflow-x: hidden; overflow-y: scroll; } #sidenav.active { left: 0; } #sidenav .top { /*border-bottom: 1px solid #cdcdcd;*/ line-height: 55px; position: relative; /*padding: 10px 0;*/ /*margin-bottom: 0.9375rem;*/ } #sidenav .top img { margin-top: -2px; } #sidenav .top .logo { width: 3.8rem; vertical-align: middle; margin-left: 0.4rem; } #sidenav .top .close-btn img { width: 18px; position: absolute; right: 0.4rem; top: 20px; margin-top: 0; } #sidenav .search-box { width: 92%; height: 3.125rem; line-height: 3.0625rem; margin: 0 auto 0.9375rem; border: 1px solid #cdcdcd; border-radius: 1.5625rem; overflow: hidden; position: relative; font-size: 0; } #sidenav .search-box input { padding: 0 0.9375rem; width: 83%; height: 100%; font-size: 0.9375rem; color: #666; vertical-align: top; } #sidenav .search-box a { display: inline-block; vertical-align: top; text-align: center; width: 17%; height: 100%; } #sidenav .search-box img { vertical-align: middle; width: 1.4375rem; } #sidenav .nav { margin: 0 auto; width: 98%; } #sidenav .nav .level1 { font-size: 16px; color: #38444a; line-height: 52px; display: block; padding-left: 0.4rem; position: relative; border-bottom: 1px solid #e6e6e6; transition: all 0.5s; -webkit-transition: all 0.5s; font-weight: bold; } #sidenav .nav .level1:nth-child(8){ /*display: none;*/ } #sidenav .nav .level1 a{ color: #38444a; } #sidenav .nav .level1:first-child { border-top: 1px solid #e6e6e6; } #sidenav .nav .level1.active { background-color: #313739; color: #fff; } #sidenav .nav .level1 a.active { color: #fff; } #sidenav .nav .level1 span { color: #aaa; font-family: 'acrom'; margin-left: 0.75rem; font-weight: normal; transition: all 0.5s; -webkit-transition: all 0.5s; } #sidenav .nav .level1.active span { color: #fff; } #sidenav .nav .level1 .plus-box { width: 17px; height: 17px; position: absolute; right: 15px; top: 50%; margin-top: -7px; } #sidenav .nav .level1 .plus-box .hor { width: 100%; height: 2px; background-color: #cdcdcd; position: absolute; left: 0; top: 50%; margin-top: -2px; transition: all 0.5s; -webkit-transition: all 0.5s; } #sidenav .nav .level1.active .plus-box .hor { background-color: #fff; } #sidenav .nav .level1 .plus-box .ver { height: 100%; width: 2px; background-color: #cdcdcd; position: absolute; top: 0; left: 50%; margin-left: -1px; transition: all 0.5s; -webkit-transition: all 0.5s; } #sidenav .nav .level1.active .plus-box .ver { background-color: #fff; transform: scale(1, 0); -webkit-transform: scale(1, 0); } #sidenav .nav ul { background-color: #f5f5f5; display: none; } #sidenav .nav ul li > a { padding-left: 0.4rem; font-size: 14px; line-height: 46px; display: block; color: #313739; border-bottom: 1px solid #e6e6e6; } /*#sidenav .nav ul:nth-child(6){*/ /*display: none!important;*/ /*}*/ /*#sidenav .nav ul:nth-child(10) li:last-child{*/ /*display: none!important;*/ /*}*/ #sidenav .nav ul li.active > a { background-color: #e6e6e6; } #sidenav .bottom { font-size: 0.9375rem; color: #38444a; text-align: center; padding: 2rem 0; } #sidenav .bottom img { width: 1.125rem; vertical-align: middle; margin-right: 0.5625rem; } #sidenav .nav .ul2 { display: block; border-bottom: 1px solid #e6e6e6; } #sidenav .nav .ul2 a { display: block; width: 100%; padding-left: 2rem; font-size: 14px; line-height: 46px; color: #313739; } .sj-menu{ display: none; float: right; width: 30px; height: 22px; cursor: pointer; margin-left: .2rem; } .img_gallery{ display: none; overflow: hidden; } #btn_prev{ position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 30px; font-family: SimSun; font-weight: bold; display: none; } #btn_next{ position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 30px; font-family: SimSun; font-weight: bold; display: none; } .img_gallery .point{ display: flex; justify-content: center; position: absolute; bottom: 30px; z-index: 999; width: 100%; } .img_gallery .point a{ width: 10px; height: 10px; background: #eee; border-radius: 100%; margin-right: 10px; transition: 0.3s; } .img_gallery .point a.on{ width: 26px; height: 10px; background: #eb6143; border-radius: 10px; } @media screen and (max-width: 1440px){ header ul li{ margin-left: .3rem; } .inner{ max-width: 90%; } } @media screen and (max-width: 1366px){ header ul li{ margin-left: .3rem; } header .logo{ width: 2.8rem; } .footer_bot ul{ width: 4.5rem; } } @media screen and (max-width: 1200px){ .footer_bot{ flex-flow: column; padding-top: .5rem; } .footer_bot ul{ display: flex; justify-content: center; width: 100%; margin-top: .2rem; margin-bottom: .1rem; } } @media screen and (max-width: 992px){ .banner { margin-top: .98rem; } header{ padding: .3rem 0; } header ul{ display: none; } .sj-menu{ display: block; } header .logo { width: 3.8rem; } .header_right .language{ width: 2.5rem; } footer .content .footer_top{ display: none; } .footer_bot p{ text-align: center; } .banner .text{ width: 93%; } } @media screen and (max-width: 800px){ .inner{ width: 93%; } } @media screen and (max-width: 768px){ .footer_bot p{ margin-left: 0; } .banner .text h3{ font-size: .30rem; } .header_right .language{ display: none; } .header_right .search{ display: none; } .footer_bot ul a{ font-size: 14px; } .footer_bot p{ font-size: 14px; } .footer_bot{ border-top: none; padding-top: 0; } } @media screen and (max-width: 375px){ .img_gallery{ display: block; height: 596px; position: relative; } } @media screen and (max-width: 360px){ .img_gallery{ display: block; height: 573px; position: relative; } .footer_bot ul{ flex-flow: wrap; } } @media screen and (max-width: 320px){ .img_gallery{ display: block; height: 510px; position: relative; } }