/* header */ .header { position: fixed; left: 0; top: 0; width: 100%; z-index: 999; background: #fff; border-bottom: 1px solid #e6e6e6; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; } .header .content { width: 95%; height: 100%; margin: auto; position: relative; } .header .content .left { position: relative; height: 84px; } .header .content .left .logo { display: block; width: 80px; height: 56px; position: absolute; left: 0; top: 50%; margin-top: -28px; } .header .content .left .logo img { height: 100%; position: absolute; left: 0; top: 0; } .header .content .left .stockcode { font-size: 12px; color: #666; margin-left: 85px; margin-top: 30px; padding-left: 20px; position: relative; } .header .content .left .stockcode::before { content: ''; display: block; width: 1px; height: 30px; background: #ccc; position: absolute; left: 0; top: 0; } .header .content .left .stockcode p { text-decoration: underline; } .header .content .center { text-align: center; position: absolute; left: 15%; width: 70%; height: 100%; top: 0; } .header .content .center .nav { margin: 0; margin-left: 0px; padding: 0; list-style: none; font-size: 0; /*margin-top: 22px;*/ } .header .content .center .nav li { display: inline-block; margin: 0; list-style: none; position: relative; } .header .content .center .nav li a { display: block; color: #fff; font-size: 16px; height: 85px; line-height: 85px; padding: 0px 20px; position: relative; text-transform: uppercase; /* top: 22px; */ } .header .content .center .nav li .a1:hover { color: var(--colors); border-bottom: 3px solid #43964e; } .header .content .right { text-align: right; font-size: 0; padding-top: 30px; } .header .content .right .search { display: inline-block; vertical-align: middle; width: 0px; position: relative; } .header .content .right .search .icon { display: block; width: 18px; height: 18px; position: absolute; right: 10px; top: 50%; margin-top: -9px; background: url("../images/ss.png") center no-repeat; background-size: 100%; cursor: pointer; } .header .content .right .search .icon:hover { opacity: .5; } .header .content .right .search .search-input { border: none; /*border: 1px solid #ccc;*/ /*padding: 0 12px;*/ border-radius: 30px !important; overflow: hidden; background: none; width: 100%; height: 30px; font-size: 12px; outline: none; } .header .content .right .language { display: inline-block; vertical-align: middle; margin: 0 0px 0 30px; overflow: hidden; cursor: pointer; } .header .content .right .language .icon { display: block; width: 75px; height: 22px; line-height: 22px; padding-left: 30px; color: #1a1a1a; font-size: 14px; background: url("../images/ll.png") left center no-repeat; } .header .content .right .language .language-show { display: none; position: absolute; width: 100px; padding: 20px 10px 10px 10px; right: -40px; text-align: center; top: 60px; background: #fff; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); } .header .content .right .language .language-show:before { content: ''; position: absolute; top: -10px; left: 50%; margin-left: -15px; border-right: 15px solid transparent; border-left: 15px solid transparent; border-bottom: 15px solid #fff; } .header .content .right .language .language-show a { display: block; color: #000; font-size: 12px; line-height: 20px; margin-bottom: 5px; opacity: .5; } .header .content .right .language .language-show a:hover { opacity: 1; } .header .content .right .language .language-show.cur { display: block; } .header.scroll-down { top: -100px; } .header.scroll-down .header-nav-show { display: none; } /* header - menu */ .header .content .center .nav li.cur a::after { width: 100%; } .header .content .center .nav li.cur .a1 { color: var(--colors); border-bottom: 3px solid #43964e; } /*.header .content .center .nav li a.cur{color: var(--colors);}*/ .header-nav-show { position: absolute; left: 50%; top: 85px; background: #fff; width: 1200px; height: auto; transform: translate(-50%, 0%); overflow: hidden; z-index: 999; box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 10%); } .header-nav-show .content { overflow: hidden; width: 74.5%; margin: auto; } .header-nav-show .content .nav-content.Hide { display: none; } .header-nav-show .content .nav-content { display: block; /* padding: 5% 0; */ min-height: 100px; } .item-nav { position: relative; overflow: hidden; } .item-nav .left { overflow: hidden; height: auto !important; width: 30%; padding-right: 7%; position: relative; } .item-nav .left::after { content: ''; display: block; width: 1px; height: 100%; background: #e5e5e5; position: absolute; right: 0; top: 0; } .item-nav .left .ntitle { padding-bottom: 10px; } .item-nav .left .ntitle h3 { font-weight: bold; font-size: 24px; color: #1a1a1a; text-transform: uppercase; margin: 0; } .item-nav .left .img { display: block; } .item-nav .left .text { padding: 20px 0; overflow: hidden; font-size: 14px; line-height: 24px; color: #666; } .item-nav .left .btn { font-size: 0; border: 1px solid #ccc; display: inline-block; padding: 15px 20px; position: relative; } .item-nav .left .btn span { font-size: 14px; color: #666; display: inline-block; vertical-align: middle; margin-right: 10px; z-index: 3; position: relative; } .item-nav .left .btn i { width: 9px; height: 12px; display: inline-block; vertical-align: middle; margin-right: 10px; background: url("../img/right2.png"); background-size: 100% 100%; margin-top: 3px; position: relative; z-index: 3; opacity: .5; } .item-nav .left .btn::before { content: ''; display: block; width: 0px; height: 100%; position: absolute; left: 0; top: 0; background: var(--colors); z-index: 1; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; } .item-nav .left a { display: block; overflow: hidden; } .item-nav .left a:hover .btn::before { width: 100%; } .item-nav .left a:hover .btn span { color: #fff; } .item-nav .left a:hover .btn i { background: url("../img/right3.png"); background-size: 100% 100%; opacity: 1; } .item-nav .cnav { float: left; overflow: hidden; width: 20%; padding: 0 5%; position: relative; } .item-nav .cnav::after { content: ''; display: block; width: 1px; height: 100%; background: #e5e5e5; position: absolute; right: 0; top: 0; } .item-nav .cnav:last-child::after { display: none; } .item-nav .cnav li { list-style: none; padding: 0px 0 12px 0; overflow: hidden; position: relative; } .item-nav .cnav li a { position: relative; display: block; padding-bottom: 12px; overflow: hidden; } .item-nav .cnav li a::before, .item-nav .cnav li a::after { content: ''; display: block; width: 100%; height: 1px; background: #e5e5e5; position: absolute; left: 0; bottom: 0; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; } .item-nav .cnav li a::before { width: 0px; height: 2px; z-index: 3; } .item-nav .cnav li a:hover::before { width: 100%; background: var(--colors); } .item-nav .cnav li a h4 { font-size: 16px; color: #999999; margin: 0; font-weight: bold; } .item-nav .cnav li a i { width: 9px; height: 12px; position: absolute; top: 50%; right: 5%; margin-top: -15px; background: url("../img/right2.png"); background-size: 100% 100%; display: block; opacity: 0; } .item-nav .cnav li a:hover i { display: block; opacity: .5; right: 0; } .item-nav .cnav li a:hover h4 { color: #000; } .item-nav .cnav li a.cur h4 { color: #000; } .item-nav .cnav li a.cur i { display: block; opacity: .5; right: 0; } .item-nav .cnav li a.cur::before { width: 100%; background: var(--colors); } .item-nav .left.w50 { width: 60%; } .item-nav .left.w50 .img { float: left; width: 45%; } .item-nav .left.w50 .text { float: left; width: 55%; padding: 0px 0 20px 5%; } .item-nav .left.w50 .btn { margin-left: 5%; } .item-nav .cnav ul { list-style: none; margin: 0; padding: 0; } .item-nav .cnav ul.cnav-show { display: none; } .item-nav .cnav ul.cnav-show.cur { display: block; } .item-nav .cnav .email { overflow: hidden; padding-top: 10px; } .item-nav .cnav .email h4 { font-size: 24px; color: #1a1a1a; margin: 10px 0; } .item-nav .cnav .email h3 { margin: 0; } .item-nav .cnav .email h3 a { font-size: 24px; color: var(--colors); margin: 0; } .item-nav .cnav.cnav2.w25 { width: 25%; padding: 0 0 0 5%; } .item-nav .cnav.cnav2.w25 .cnav-show.cnav20 { width: 80%; } .item-nav .cnav.cnav2.w25 .cnav-show.cnav24 { width: 80%; } .item-nav .cnav.cnav2.w25 .cnav-show.cnav25 { width: 80%; } .newsnav { list-style: none; margin: 0; padding: 0; } .newsnav a { display: block; overflow: hidden; } .newsnav a .txt { width: 100%; overflow: hidden; } .newsnav a .txt h5 { margin: 0; font-size: 14px; line-height: 20px; font-weight: normal; color: #1a1a1a; } .newsnav a .txt h6 { margin: 0; font-size: 12px; font-weight: normal; color: #999999; padding-top: 8px; } .newsnav.top .img { display: block; overflow: hidden; position: relative; float: left; width: 25%; } .newsnav.top .txt { float: left; width: 70%; padding-left: 5%; } .newsnav.top .txt h5 { font-size: 16px; } .logoa, .logob { transition: all 0.3s ease; } .logoa { opacity: 0; } .header .content .center .nav li a { color: rgba(0, 0, 0, 0.9); } .header .content .right .language .icon { color: #666; background: url("../img/language_icon_1.gif") left center no-repeat; } .header .content .right .search .icon { opacity: 0.3; } .inside-pages .header-height { height: 0px; } .inside-pages .logoa { opacity: 1; } .inside-pages .logob { opacity: 0; } .inside-pages .header { background: none; border-bottom: 1px solid rgba(255, 255, 255, .1); } .inside-pages .header .content .right .search .icon { background: url("../images/ss1.png") center no-repeat; background-size: 100%; } .inside-pages .header .content .right .search .icon { opacity: 1; } .inside-pages .header .content .right .language .icon { color: #fff; background: url("../img/language_icon_2.gif") left center no-repeat; } /*.inside-pages .header .content .right .search .search-input {*/ /* border: 1px solid rgba(255, 255, 255, .6);*/ /*}*/ .inside-pages .header .content .right .search .search-input { color: rgba(255, 255, 255, .6); } .inside-pages .header .content .left .stockcode { color: #fff; opacity: .8; } .inside-pages .header .content .left .stockcode::before { background: #fff; opacity: .2; } .inside-pages .header.scroll-top .logoa, .inside-pages .header:hover .logoa { opacity: 0; } .inside-pages .header.scroll-top .logob, .inside-pages .header:hover .logob { opacity: 1; } .inside-pages .header.scroll-top, .inside-pages .header:hover { background: #fff; border-bottom: 1px solid #e6e6e6; } .inside-pages .header .content .center .nav li a { color: rgba(255, 255, 255, 0.9) } .inside-pages .header.scroll-top .header .content .center .nav li a, .inside-pages .header:hover .content .center .nav li a { color: #333; } .inside-pages .header:hover .content .center .nav li.cur a { color: var(--colors) } .inside-pages .header.scroll-top .content .right .search .search-input, .inside-pages .header:hover .content .right .search .search-input { color: #666; } .inside-pages .header.scroll-top .content .right .search .icon, .inside-pages .header:hover .content .right .search .icon { background: url("../images/ss.png") center no-repeat; background-size: 100%; } .inside-pages .header.scroll-top .content .right .language .icon, .inside-pages .header:hover .content .right .language .icon { color: #1a1a1a; background: url("../img/language_icon_1.gif") left center no-repeat; } .inside-pages .header.scroll-top .content .right .search .search-input, .inside-pages .header:hover .content .right .search .search-input { border-bottom: 1px solid #ccc; } .inside-pages .header.scroll-top .content .left .stockcode, .inside-pages .header:hover .content .left .stockcode { color: #666; opacity: 1; } .inside-pages .header.scroll-top .content .left .stockcode::before, .inside-pages .header:hover .content .left .stockcode::before { background: #ccc; opacity: 1; } .header .content .right .language .icon { background-size: 22px auto !important; } .header-nav-show .content { width: 100%; } .item-nav .cnav, .item-nav .left.w50 { box-sizing: content-box; } @keyframes w100 { 0% { width: 0%; } 100% { width: 100%; } } .index-scroll { position: absolute; left: 1%; top: 85%; z-index: 70; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .index-scroll h6 { margin: 0; font-weight: normal; font-size: 0; position: relative; padding-bottom: 7px; padding-left: 30px; } .index-scroll h6::after { content: ''; display: block; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0; -webkit-animation: w100 3000ms infinite ease-in-out; animation: w100 3000ms infinite ease-in-out; } .index-scroll h6 span { font-size: 12px; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-right: 10px; display: inline-block; vertical-align: middle; } .index-scroll h6 i { width: 12px; height: 10px; background: url("../img/d.png"); display: inline-block; vertical-align: middle; -webkit-animation: op01 1000ms infinite ease-in-out; animation: op01 1000ms infinite ease-in-out; } @keyframes op01 { 0% { opacity: 0; } 100% { opacity: 1; } } /* 棣栭〉banner */ /* index */ .index-banner-swiper { height: 100vh; } .banner-slide .txt { position: absolute; width: 900px; left: 10%; top: 50%; margin-top: -167px; z-index: 33; } .banner-slide .txt h1 { font-size: 45px; font-weight: bold; color: #fff; margin: 0; padding: 0; padding-bottom: 20px; position: relative; text-transform: uppercase; } .banner-slide .txt .line { width: 80px; height: 4px; background: var(--colors); margin: 10px 0; } .banner-slide .txt h4 { font-size: 16px; color: #fff; padding: 30px 0; margin: 0; font-weight: normal; line-height: 30px; } .banner-slide .txt.center { text-align: center; width: 100%; left: 0; top: 20%; margin: 0; } .banner-slide .txt h4 span { opacity: 0.7; } .banner-slide .txt.none { display: none; } .banner-slide .txt.center .line { margin-left: auto; margin-right: auto; } .banner-slide .txt.right { text-align: right; left: auto; right: 10%; } .banner-slide .txt.right .line { float: right; clear: both; } .banner-slide .txt.right .banner-btn a { display: inline-block; vertical-align: middle; float: none; text-align: right; margin-right: 0px; margin-left: 15px; } .banner-slide .img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover; } .banner-slide .img { background-position: center; background-repeat: no-repeat; } .banner-slide .txt .img { text-align: left; } .banner-btn-ul { display: flex; width: 460px; justify-content: space-between; } .banner-btn-ul i { display: inline-block; position: relative; width: 60px; height: 60px; } .banner-btn-ul i img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .banner-btn-ul i img { max-width: 80%; max-height: 80%; } .banner-btn-ul p { font-size: 16px; font-weight: bold; margin-top: 12px; color: #fff; opacity: 0.7; } .banner-btn-ul li { padding-right: 35px; text-align: center; } .banner-btn-ul li:last-child { padding-right: 0; } .banner-btn-ul span { display: block; font-weight: normal; font-size: 12px; margin-top: 5px; } .banner-btn { clear: both; } .banner-btn a { display: inline-block; margin-right: 15px; padding: 15px 35px; font-size: 0; background: var(--colors); } .banner-btn a span { color: #fff; font-size: 14px; display: inline-block; vertical-align: middle; margin-right: 10px; } .banner-btn a i { display: inline-block; vertical-align: middle; width: 18px; height: 10px; background: url("../upload/right4.png"); } .banner-btn a:hover { background: #008b62; } .banner-slide .txt h1 { transform: translateY(200px); opacity: 0; transition: all .5s; } .banner-slide .txt h4, .banner-slide .txt .hdlogo { transform: translateY(200px); opacity: 0; transition: all 0.7s; } .banner-slide .txt .line { transform: translateY(200px); opacity: 0; transition: all 0.9s; } .banner-slide .txt .banner-btn { transform: translateY(200px); opacity: 0; transition: all 1.2s; } .index-banner-swiper .swiper-slide-active .txt h4, .index-banner-swiper .swiper-slide-active .txt h1, .index-banner-swiper .swiper-slide-active .txt .line, .index-banner-swiper .swiper-slide-active .banner-btn, .index-banner-swiper .swiper-slide-active .txt .hdlogo { transform: translateY(0px); opacity: 1; } .swiper-banner-pagination { bottom: 35px; width: 100%; display: block; z-index: 90; } .swiper-banner-pagination .swiper-pagination-bullet { width: 60px; height: 10px; margin: 0 0 0 10px; border-radius: 0; opacity: 1; background: none; position: relative; z-index: 11; outline: none; } .swiper-banner-pagination .swiper-pagination-bullet:before { content: ''; display: block; width: 100%; height: 2px; position: absolute; left: 0; top: 5px; background: #fff; opacity: 0.3; } .swiper-banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after { opacity: 1; } .swiper-banner-pagination .swiper-pagination-bullet:after { content: ''; display: block; position: absolute; left: 0; top: 5px; width: 0; height: 2px; background: var(--colors); -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; z-index: 10; } .swiper-banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after { -webkit-animation: w100 4000ms 1; animation: w100 4000ms 1; } .index-about .content { width: 80%; min-width: 1200px; margin: 0 auto; margin-top: 45px; border: 1px solid rgba(255, 255, 255, .3); overflow: hidden; background: rgba(0, 0, 0, 0.2) } .index-about .left { padding: 5% 3% 0 5%; overflow: hidden; width: 43%; height: 90%; position: relative; } .index-about .right:before { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; left: 0; top: 0; opacity: .3; } .index-about .left .title { overflow: hidden; } .index-about .left .title h2 { font-size: 34px; text-transform: uppercase; margin: 0; color: #fff; } .index-about .left .title .line { width: 80px; height: 4px; background: var(--colors); margin: 15px 0; } .index-about .left .text { font-size: 16px; margin-top: 10px; line-height: 26px; color: #fff; } .index-about .left .play { display: inline-block; margin-top: 30px; } .index-about .left .play a { display: block; overflow: hidden; background: var(--colors); border: 1px solid var(--colors); padding: 15px 20px; font-size: 0; } .index-about .left .play i { width: 13px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 10px; background: url("../upload/play.png") center no-repeat; background-size: 100%; } .index-about .left .play span { font-size: 14px; color: #fff; display: inline-block; vertical-align: middle; margin-right: 10px; } .index-about .left .play a:hover { background: #00e5a1; border: 1px solid #00e5a1; } .index-about .left .play a:hover span, .index-about .left .play a:hover i { opacity: 1; } .index-about .right { overflow: hidden; width: 49%; position: relative; } .index-about .right:after { content: ''; display: block; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; top: 50%; margin-top: -0.5px; opacity: .3; } .index-about .right .item { position: relative; float: left; width: 33.3333333%; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; } .index-about .right .item:hover { background: var(--colors); } .index-about .right .item li { color: #fff; list-style: none; position: absolute; left: 0; top: 0; width: 80%; padding: 20% 10% 0 10%; height: 80%; } .index-about .right .item li h2 { font-weight: normal; margin: 0; } .index-about .right .item li h2 strong { font-size: 45px; } .index-about .right .item li h2 span { font-size: 18px; font-weight: normal; margin-left: 5px; } .index-about .right .item li h6 { font-weight: normal; margin: 0; font-size: 14px; line-height: 24px; opacity: .7; } .index-about .right .item .img img { display: block; width: 100%; height: auto; opacity: 0; } .index-about .right .item:after { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; right: 0; top: 0; opacity: .3; } .index-about .right .item:last-child::after, .index-about .right .item:nth-child(3)::after { display: none; } .index-about .img {} .index-about .img img { display: block; width: 100%; height: auto; } .index-about .left, .index-about .right, .index-about .right .item li { box-sizing: content-box; } .index-about .right .item li { top: 50%; transform: translateY(-50%); height: auto; padding-top: 0; } @media screen and (max-width:1600px) { .index-about .right .item li h2 strong { font-size: 40px; } } @font-face { font-family: 'Helvetica Neue LT W05_47 Lt Cn'; src: url(../fonts/5663704/083e1179-98b4-4cbd-a13a-50a7c78d6fea.woff2) format('woff2'), url(../fonts/5663704/239170e6-7f0d-4c35-97d4-490b362e4ef7.woff) format('woff'); font-display: swap } /*@font-face {*/ /* font-family: 'Helvetica Neue LT W05_57 Cond';*/ /* src: url(../fonts/5663732/9516ef74-4fe9-45fe-a09f-493cb9518f71.woff2) format('woff2'), url(../fonts/5663732/5b99bc59-1b2e-446b-961e-2e1dbdfcd641.woff) format('woff');*/ /* font-display: swap*/ /*}*/ /*@font-face {*/ /* font-family: 'Helvetica Neue LT W05_67 Md Cn';*/ /* src: url(../fonts/5663739/1a559dd9-e51e-45d5-86eb-f343223bacef.woff2) format('woff2'), url(../fonts/5663739/581fae27-b5f4-44ab-b5b1-92f11d4f9838.woff) format('woff');*/ /* font-display: swap*/ /*}*/ body { font-family: 'Noto Sans SC',"Source Han Sans CN","Microsoft YaHei","PINGFANGHK","PingFang-HK",PingFang SC,'Hiragino Sans GB',Open Sans,arial, Helvetica, Arial, sans-serif; } /**/ .xynav_con2 { display: none; } .xynav_con2.on { display: block; } .xynav_list { display: flex; height: 660px; } .xynav_main { width: 20%; background: #004098; padding: 30px 0; color: #fff; position: relative; } .xynav_item, .xynav_item2 { margin-left: 20px; } .xynav_item p { padding: 15px 0 15px 15px; /*font-weight: bold;*/ margin-top: 10px; } .xynav_item.on { background: #f1f1f1; color: #004098; border-radius: 10px 0 0 10px; } .xynav_items { color: #fff !important; background: #004098 !important; border-radius: 7px 0 0 7px; } .xynav_items:hover { background: #fff !important; color: #004098 !important; border-radius: 11px 0 0 11px; cursor: pointer; } .xynav_mainpr .xynav_item.on { background: #fff; } .xynav_p1 { margin: 30px 0; } .xynav_con { width: 80%; background: #f1f1f1; } .xynav_title { display: flex; } .xynav_main2 { width: 110%; height: 100%; background: #f1f1f1; padding: 35px 0; color: #004098; position: absolute; top: 0; left: 100%; } .xynav_main2 p a{display:block;width:100%;box-sizing:border-box;} .xynav_main2 p a{color: #004098;} .xynav_item2 p { padding: 10px 0 10px 10px; font-weight: bold; margin-top: 10px; display: flex; flex-flow: wrap; } .xynav_item2.on { background: #004098; color: #fff; border-radius: 10px 0 0 10px; } .xynav_item2.on p a,.xynav_item2.on p a:hover{color: #fff;} .xynav_con4 { position: absolute; top: 0; left: 100%; display: none; background: #fff; padding: 0 20px; width: 700px; } .xynav_con4.on { display: block; } /* .xynav_con3 { width: 74%; background: #fff; } .xynav_con3 { padding: 40px 40px 40px 25px; } */ .xynav_con4_p1 { font-size: 28px; font-weight: bold; color: #004098; } .xynav_con4_p2 { margin-top: 30px; color: #000; opacity: 0.8; } .xynav_con4_p3 { font-size: 20px; font-weight: bold; margin: 90px 0 10px 0 !important; color: #004098; } .xynav_con4_p4 span { display: inline-block; width: 130px; color: #004098 !important; margin-top: 10px; } .xynav_con4_p4 span a{ color: #004098 !important; } .xynav_con4a1 { display: inline-block; /*width: 130px;*/ /*height: 43px;*/ /*line-height: 43px;*/ padding: 10px 20px; text-align: center; border: 1px solid #004098; border-radius: 6px; margin: 30px 0 0px 10px; color: #004098; background: #fff; transition: all 0.3s ease; } .xynav_con4a1:hover { color: #fff; background: #004098; } .xynav_pr { position: absolute; top: 0; left: 100%; width: 700px; height: 100%; display: none; padding: 0 20px; } .xynav_pr.on { display: block; } /**/