@media (max-width: 768px) { .row, .container { width: 100%; padding: 0; margin: 0; } * { font-size: 12px; } body { overflow-x: hidden; } .two-nav { position: absolute; width: 120%; top: 100%; left: 0px; z-index: 9999; background-color: rgba(255, 255, 255, .8); display: none; } .two-nav li { width: 100%; display: inline-block; position: relative; } .two-nav a { width: 100%; display: block; color: rgb(66, 66, 66); font-size: 16px; padding: 12px; line-height: 30px; } .two-nav a:hover { background-color: #D6252C; color: #FFF; } .carousel-indicators { bottom: 5%; } .carousel-indicators li { width: 50px; height: 6px; border: 1px solid #E62129; margin: 0; background-color: transparent; border-radius: 0; } .carousel-indicators .active { width: 50px; height: 6px; background-color: #E62129; } #LoutiNav { border: 1px solid gray; width: 40px; position: fixed; z-index: 0; opacity: 0; top: 100px; left: 5px; display: none; background: rgba(255, 255, 255, 0.8); color: black; } #LoutiNav li { width: 100%; height: 40px; border-bottom: 1px solid gray; line-height: 40px; text-align: center; cursor: pointer; } #LoutiNav span { display: none; } #LoutiNav .active { background: darkred; color: white; } #LoutiNav li:hover span { display: block; font-size: 12px; background: darkred; color: white; } #LoutiNav li:hover i { display: none; } #goTop { width: 40px; height: 40px; line-height: 40px; text-align: center; background: gray; position: fixed; bottom: 30px; right: 30px; cursor: pointer; border-radius: 5px; display: none; } #goTop:hover { background: darkred; color: white; } #goTop:hover span { display: block; } #header { display: none; } .louceng { width: 100%; text-align: center; font-size: 12px; margin: 0 auto; position: relative; padding-top: 20px; } .louceng:nth-child(1) { padding: 0px; padding-bottom: 30px; } .louceng:nth-child(2) { height: 3020px; } .container { /* margin: 0% 10%; */ } a { color: #444444; } a:hover { text-decoration: none; } #header>div { width: 90%; margin: 0 auto; } #header>div>div { display: inline-block; float: left; } .logo { width: 10%; padding: 0px 20px; } .logo>img {} .navbox { width: 80%; } .nav { width: 100%; } .nav>li { display: inline-block; width: calc(100%/7); float: left; } .nav>li>a { width: 100%; color: white; font-size: 18px; padding: 31px 0px; } .nav>li>a:focus, .nav>li>a:hover, .nav>li>a.active { background-color: rgba(214, 47, 35, 0.8); } .dropdown { width: 10%; padding: 23px 0px; } .dropdown>.btn { width: 100%; height: 100%; background-color: #D6252C; } .dropdown>.btn.focus, .dropdown>.btn:focus, .dropdown>.btn:hover { color: white; } .dropdown>.btn>.caret { transform: rotate(90deg); } .dropdown.open>.btn>.caret { transition: all 0.1s linear 0s; transform: rotate(0deg); } .top_greet { width: 100%; margin: 0 auto; padding: 10px; background-color: white; box-shadow: 8px 8px 3px -3px rgba(0, 0, 0, 0.3); text-align: left; } .top_greet>div { display: inline-block; vertical-align: middle; line-height: 26px; text-align: left; } .top_greet>div:nth-child(1) { width: 8%; } .top_greet>div:nth-child(2) { width: 90%; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; color: #5F5F5F; } .top_greet>div:nth-child(3) { width: 100%; } .top_greet>div:nth-child(3) input { text-indent: 1em; width: 80%; height: 30px; line-height: 30px; color: #4E4E4E; font-size: 14px; border: 1px solid #4E4E4E; } .top_greet>div:nth-child(3) button { background-color: transparent; height: 100%; text-align: center; line-height: 30px; width: 18%; font-size: 14px; color: white; background-color: #D6252C; } .top_greet>div>img { width: 100%; } .top_greet>div>span { font-size: 12px; } .icono-search { color: #E62129; border: 2px solid; width: 22px; height: 22px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin: 4px 4px 8px 8px; } [class*="icono-"] { display: inline-block; vertical-align: middle; position: relative; font-style: normal; text-align: left; text-indent: -9999px; direction: ltr; } [class*="icono-"], [class*="icono-"] * { box-sizing: border-box; } [class*=icono] { opacity: .6; } [class*="icono-"]:before, [class*="icono-"]:after { content: ''; pointer-events: none; } .icono-search:before { width: 4px; height: 11px; box-shadow: inset 0 0 0 32px; top: 19px; -webkit-border-radius: 0 0 1px 1px; -moz-border-radius: 0 0 1px 1px; -o-border-radius: 0 0 1px 1px; border-radius: 0 0 1px 1px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .fl { float: left; } .fr { float: right; } .box_hd { width: 100%; margin: 0; padding-bottom: 5px; } .box_hd>.title { width: 90%; margin: 0 auto; } .box_hd>.title>h2 { margin: 0 auto; text-align: left; height: 42px; font-size: 24px; color: #000000; line-height: 42px; } .box_hd>.title>p { margin: 0 auto; margin-top: 10px; text-align: left; height: 25px; font-size: 16px; color: #D5242B; line-height: 25px; } .box_hd>.line { margin-left: 10%; margin-top: 20px; width: 60px; height: 2px; background-color: #5e5e5e; } .yyly_conent { background: url('../img/yyly_cbg.png'); width: 100%; /* height: 200px; */ } .trade-black { height: 650px; } .trade-box { margin: 0 auto; position: relative; z-index: 700; transition: all .3s ease; } .trade-box-list { /* display: flex; */ flex-direction: row; justify-content: center; align-items: center; } .trade-box-item { /* flex: 1; */ display: inline-block; width: 100%; text-align: center; position: relative; height: 57rem; background: no-repeat center; background-size: 100% auto; } .yyly_conent .trade-box-item:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, .6); transition: all .4s cubic-bezier(.4, 0, .2, 1); } .trade-box-item a { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } a, button, input, textarea { -moz-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; } .item-logo { margin: 0 auto; display: block; } .yyly_conent .trade-box-item .item-logo { position: relative; margin-top: 20px; /* height: 60px; */ transition: all .4s cubic-bezier(.4, 0, .2, 1); } .item-logo img { display: block; width: 25%; margin: 0 auto; max-width: 100%; } .item-title { font-size: 20px; font-weight: bold; color: #fff; padding: 20px 0; position: relative; } .yyly_conent .item-title:before { content: ""; position: relative; display: block; width: 20px; border-bottom: 2px solid #fff; margin: 0 auto 20px; transition: all .4s cubic-bezier(.4, 0, .2, 1); } .item-text { position: relative; transition: all .4s cubic-bezier(.4, 0, .2, 1); opacity: 1; margin-top: 10px; } .item-text p { color: #fff; font-size: 16px; margin: 10px auto; } .item-text .more { display: none; margin: 20px auto; width: 120px; color: white; text-align: center; font-size: 16px; border: 1px solid white; } .item-text img { width: 100%; } .yyly_conent .item01 { background-image: url(../images/icon-at01.png); } .yyly_conent .item02 { background-image: url(../images/icon-at02.png); } .yyly_conent .item03 { background-image: url(../images/icon-at03.png); } .yyly_conent .item04 { background-image: url(../images/icon-at04.png); } .yyly_conent .item05 { background-image: url(../images/icon-at05.png); } .yyly_conent .trade-box-item:hover .item-text { display: block; opacity: 1; margin-top: 0; } .yyly_conent .trade-box-item:hover:before { background-color: rgba(226, 49, 56, .9); } .yyly_conent .trade-box-item:hover .item-logo { margin-top: 90px; } .yyly_conent .trade-box-item:hover .item-title:before { opacity: 0; margin-bottom: 0; } .product_title { position: relative; } .product_title>.product_nav { position: absolute; right: 0; top: 0; width: 100%; padding: 5px; display: none; } .product_nav1 { width: 100%; padding: 5px; padding-top: 20px; } .product_nav1>div { display: inline-block; width: 80px; height: 35px; text-align: center; background-color: #D5242B; /* margin-left: 15px; */ margin-bottom: 20px; } .product_nav1>div>a { line-height: 35px; color: white; } .product_title>.product_nav>div { display: inline-block; float: right; width: 110px; height: 35px; text-align: center; border: 1px solid #D5242B; margin-left: 20px; } .product_title>.product_nav>div.active { background-color: #D5242B; } .product_title>.product_nav>div>a { line-height: 35px; font-size: 16px; } .product_title>.product_nav>div.active>a { color: white; } .product_conent { /* width: 70%; */ margin: 0px auto; /* margin-top: 30px; */ } .product_conent main { display: none; } .product_conent main.active { display: block; } .product_conent .items li:first-child { width: 100%; } .items li { width: 49%; } figure.effect-winston img { opacity: 0.6; } figure.effect-winston h2 { opacity: 1; -webkit-transition: opacity 0.45s, -webkit-transform 0.45s; transition: opacity 0.45s, transform 0.45s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } figure.effect-winston figcaption::before { opacity: 0.7; -webkit-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg); } figure.effect-winston p i { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } figure.effect-winston p a:nth-child(2) i { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.effect-winston p a:first-child i { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .conent_foot { width: 100%; /* margin: 20px auto; */ } .conent_foot>div { display: inline-block; width: 44%; margin: 1%; padding: 10px; font-size: 0; height: 130px; /* background-color: #D5242B; */ background-color: #F5F5F5; vertical-align: middle; position: relative; cursor: pointer; } .conent_foot>div>.zzc { background-color: #D5242B; width: 100%; padding: 10px; height: 130px; position: absolute; top: 100%; right: 0; opacity: 0; transition: all 0.2s ease 0.1s; } .conent_foot>div img { width: 40px; } .conent_foot>div>div { width: 100%; height: 100%; border: 1px solid #B9B9B9; padding: 20px; /* transition: all 0.8s linear 0s; */ } .conent_foot>div>div>div { height: 40px; } .conent_foot>div>div p { font-size: 18px; line-height: 22px; color: #676767; text-align: center; margin-top: 10px; } .conent_foot>div>.zzc>div { width: 100%; height: 110px; border: 1px solid white; padding: 20px; } .conent_foot>div>.zzc>div p { font-size: 18px; line-height: 22px; color: white; text-align: center; margin-top: 10px; } .conent_foot>div>.zzc>div a { color: white; } .conent_foot>div:hover>div { opacity: 0; } .conent_foot>div:hover>.zzc { top: 0%; opacity: 1; } /* @keyframes myborder { 0% { border-top: 1px solid white; } 25% { border-right: 1px solid white; } 50% { border-bottom: 1px solid white; } 100% { border-left: 1px solid white; } } */ .conent_foot>div:hover>div { border: 1px solid white; } .conent_foot>div:hover>div>p { color: white; } .qyys_conent { width: 90%; margin: 0px auto; margin-top: 35px; margin-bottom: 35px; } .qyys_conent .chatu { display: inline-block; width: 100%; float: left; } .qyys_conent .chatu>img { width: 100%; } .qyys_conent .tuwen { display: inline-block; width: 100%; float: left; padding: 10px; padding-left: 30px; } .qyys_conent .tuwen>h3 { color: #E62129; font-size: 18px; text-align: left; font-weight: 600; } .qyys_conent .tuwen>div { margin-top: 20px; margin-bottom: 20px; width: 60px; height: 3px; background-color: #E62129; } .qyys_conent .tuwen>p { color: #484848; text-align: left; } #myCarousel_qyys { padding-bottom: 120px; } #myCarousel_qyys>.carousel-indicators { width: auto; left: auto; margin-left: 0%; /* left: 60%; */ bottom: 0%; margin-bottom: 0; } #myCarousel_qyys>.carousel-indicators>div { display: inline-block; width: 100px; height: 100px; background-color: #484848; color: #ADADAD; position: relative; cursor: pointer; } #myCarousel_qyys>.carousel-indicators>div.active { background-color: #E62129; color: white; } #myCarousel_qyys>.carousel-indicators>div>div { position: absolute; right: 0; top: 0; font-size: 50px; width: 100%; line-height: 100px; } #myCarousel_qyys>.carousel-indicators>div>.caret { position: relative; bottom: 20px; border-bottom: 20px dashed #E62129; border-top: none; border-right: 20px solid transparent; border-left: 20px solid transparent; opacity: 0; } #myCarousel_qyys>.carousel-indicators>div.active>.caret { opacity: 1; } .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -ms-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .zzry_conent { /* width: 80%; */ margin: 0 auto; } #myCarousel_zzry1 .item { font-size: 0; } #myCarousel_zzry1 .item div { display: inline-block; width: calc(100%/2 - 20px); margin: 10px; border: 1px solid; } #myCarousel_zzry1 .carousel-control.left, #myCarousel_zzry1 .carousel-control.right { background-image: none; display: none; } #myCarousel_zzry1 .carousel-control .glyphicon-chevron-left { left: 0%; color: #D6252C; } #myCarousel_zzry1 .carousel-control .glyphicon-chevron-right { right: 0%; color: #D6252C; } .hzhb_conent { /* width: 70%; margin: 30px auto; */ } .hzhb_conent figure.effect-jazz { z-index: 5; } .hzhb_conent .items>li>.effect-jazz>div { width: 100%; background-color: #C7C7C7; text-align: center; z-index: 9; position: relative; color: #8D8B87; } .hzhb_conent .items>li>.effect-jazz>div>h1 { margin: 0; padding-top: 10px; } .hzhb_conent .items>li>.effect-jazz>div>p { margin: 0; margin-top: 10px; font-size: 16px; opacity: 1; } .hzhb_conent .items>li>.effect-jazz>div>div { width: 24%; height: 28px; border: 5px solid rgb(224, 224, 224); border-bottom: none; background-color: #C7C7C7; border-radius: 50px 50px 0 0; position: absolute; bottom: 100%; left: 38%; /* width: 50px; height: 50px; margin: 0 auto; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.6); */ } .hzhb_conent .items>li>.effect-jazz>div, .hzhb_conent .items>li>.effect-jazz>div>div { color: white; background-color: #E62129; } .about_conent { /* width: 70%; */ margin: 0 auto; font-size: 0; } .about_text, .about_img { display: inline-block; vertical-align: top; } .about_text { width: 100%; } .about_img { width: 100%; } .about_text>p { font-size: 16px; letter-spacing: 2px; line-height: 26px; text-align: left; text-indent: 2em; padding: 10px; } .about_text>div { margin-top: 50px; width: 130px; height: 40px; background-color: #E62129; } .about_text>div>a { color: white; font-size: 18px; line-height: 40px; } .about_img { /* position: relative; */ /* bottom: 130px; */ /* left: 90px; */ border: 1.5px solid #E62129; /* padding-top: 60px; */ /* padding-bottom: 60px; */ cursor: pointer; } .about_img>img { width: 100%; /* transform: translate(-70px, 20px); */ /* transition: all .4s; */ } .about_img:hover>img { transform: translate(0px); } .about_trait { width: 100%; margin: 10px auto; /* padding-left: 30px; */ /* padding-right: 30px; */ font-size: 0; position: relative; /* bottom: 20px; */ } .about_trait .four_trait { display: inline-block; /* width: calc(100%/4 - 80px); */ margin: 5px 40px; /* margin-bottom: 40px; */ cursor: pointer; } .hexagon { margin: 0 auto; width: 94px; height: 108px; padding: 30px 20px; background: url('../img/trait_icon.png') no-repeat center center; background-size: 100% 100%; transition: all 0.1s linear; } .about_trait .four_trait>a>p { font-weight: 400; font-size: 22px; color: #E62129; margin-top: 15px; } .about_trait .four_trait .hexagon { background: url('../img/trait_icon1.png') no-repeat center center; background-size: 100% 100%; } .hexagon1 { width: 40px; height: 40px; line-height: 108px; margin: 0 auto; background: url('../img/about_icon1.png') no-repeat center center; background-size: 100% 100%; } .about_trait .four_trait .hexagon .hexagon1 { background: url('../img/about_icon01.png') no-repeat center center; background-size: 100% 100%; } .four_trait:nth-child(2) .hexagon1 { background: url('../img/about_icon2.png') no-repeat center center; background-size: 100% 100%; } .four_trait:nth-child(3) .hexagon1 { background: url('../img/about_icon3.png') no-repeat center center; background-size: 100% 100%; } .four_trait:nth-child(4) .hexagon1 { background: url('../img/about_icon4.png') no-repeat center center; background-size: 100% 100%; } .about_trait>.four_trait:nth-child(2) .hexagon .hexagon1 { background: url('../img/about_icon02.png') no-repeat center center; background-size: 100% 100%; } .about_trait>.four_trait:nth-child(3) .hexagon .hexagon1 { background: url('../img/about_icon03.png') no-repeat center center; background-size: 100% 100%; } .about_trait>.four_trait:nth-child(4) .hexagon .hexagon1 { background: url('../img/about_icon04.png') no-repeat center center; background-size: 100% 100%; } .news_conent { /* width: 80%; */ margin: 0 auto; /* height: 600px; */ } .news_conent>div { width: 100%; margin-bottom: 20px; /* display: inline-block; */ /* float: right; */ } .navtitle_box { width: 40%; } .conent_box { width: 60%; } .news_type { width: 100%; margin-bottom: 20px; } .news_type>div { width: 130px; margin-right: 30px; display: inline-block; text-align: left; height: 40px; /* border: 1px solid #E62129;*/ text-align: center; background-color: #E62129; } .news_type>div.active { } .news_type>div>a { font-size: 16px; line-height: 40px; color: white; } .news_type>div.active>a { } .news_rightimg { width: 100%; } .news_rightimg>img { width: 100%; display: none; } .history { background: url(/static/storage/css//images/line04.jpg) repeat-y 20px 0; } .history-date ul li { background: url(/static/storage/css//images/icon07.jpg) no-repeat 11px 0; } .history-date ul li.green dl dt { width: auto; } .history-date ul li dl dt { width: auto; } .footer-box { background: #222132; overflow: hidden; width: 100%; color: #888; padding: 30px 0 35px; } .footer-container { width: 100%; margin: 0 auto; padding: 0; } .footer-service { display: none; margin-right: -26px; margin-bottom: 38px; padding-left: 69px; } .footer-service-item { float: left; height: 60px; width: 240px; margin-right: 26px; } .footer-service-item i { width: 50px; height: 45px; float: left; margin: 17px 17px 0 29px; opacity: .8; -webkit-transform: scale(.6); -moz-transform: scale(.6); transform: scale(.6); } .footer-service-item span { font-size: 16px; color: #ccc; float: left; margin-top: 29px; } .footer-icon-001 i { background: url(../images/icon-footer01.png) no-repeat center center; background-size: contain; } .footer-icon-002 i { background: url(../images/icon-footer02.png) no-repeat center center; background-size: contain; } .footer-icon-003 i { background: url(../images/icon-footer03.png) no-repeat center center; background-size: contain; } .footer-icon-004 i { background: url(../images/icon-footer04.png) no-repeat center center; background-size: contain; } .footer-line { display: none; height: 0; display: block; clear: both; border-bottom: 1px solid #393854; } .footer-links { /* padding-top: 40px; */ padding-left: 10px; } .footer-article-item { width: 100%; /* height: 226px; */ float: left; margin-right: 23px; line-height: 2; font-size: 14px; } .footer-article-item dt { color: #ccc; /* font-size: 16px; */ margin-bottom: 10px; line-height: 2; font-weight: 300; } .footer-article-item dd { line-height: 2; } .footer-article-item dd>img{ width: 12rem; display: block; margin: 0 auto; } .footer-article-item dd>h2{ font-size: 24px; text-align: center } .footer-article-item dd a { color: #888; transition: all .1s; } .footer-article-item dd a:hover { color: #fff; } .footer-contact-item { } .footer-contact-item h3 { text-align: center; /* font-size: 16px; */ color: #ccc; line-height: 2; margin-bottom: 10px; font-weight: 400; } .footer-contact-item p { font-size: 22px; color: #fff; font-family: Arial, "Microsoft Yahei", "HanHei SC", PingHei, "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif; margin-bottom: 15px; } .footer-ewm { width: 100%; margin-right: 18px; text-align: center; } .footer-ewm img { width: 15rem; margin: 0 auto; display: block; border: none; } .footer-ewm p { /* font-size: 14px; */ color: #ccc; margin-top: 12px; } .footer-friend { width: 100%; height: 20px; line-height: 20px; margin: 30px auto; } .footer-friend-title { text-indent: 2em; font-size: 14px; color: #ccc; /* font-size: 14px; */ } .footer-friend-title-list { float: left; width: 100%; padding: 5px; } .footer-friend-title-list li { float: left; } .footer-friend-title-list li a { color: #888; transition: all .1s; display: inline-block; padding: 0 10px; /* font-size: 14px; */ } .footer-friend-title-list li a:hover { color: #fff; } .footer-friend-more { color: #ccc; transition: all .1s; float: left; /* font-size: 14px; */ } .footer-copyright { line-height: 20px; /* font-size: 14px; */ text-align: center; } .footer-copyright p { margin-bottom: 9px; /* font-size: 14px; */ color: #888; } .foot_top { width: 100px; height: 100px; position: relative; left: calc(50% - 50px); bottom: 60px; cursor: pointer; } .xs_nav { position: fixed; background-color: #F82725; width: 100%; height: 40px; bottom: 0px; left: 0px; z-index: 999; text-align: center; } .xs_nav>ul { font-size: 0px; } .xs_nav>ul>li { display: inline-block; width: calc(100% / 4); border-left: 1px solid #fff; position: relative; } .xs_nav>ul>li:nth-of-type(1) { border-left: 1px solid #F82725; } .xs_nav>ul>li>img { width: 20%; vertical-align: top; margin: 12% 0px; margin-right: 5px; } .xs_nav>ul>li>a { cursor: pointer; display: inline-block; color: #fff; line-height: 40px; font-size: 1.2rem; } .xs_nav>ul>li>div { position: absolute; width: 100%; left: 0px; bottom: 100%; background-color: rgba(248, 39, 37, 0.9); display: none; } .xs_nav>ul>li>div>ul { display: block; } .xs_nav>ul>li>div>ul>li { border-top: 1px solid #ffffff; } .xs_nav>ul>li>div>ul>li>a { display: block; color: #fff; line-height: 40px; font-size: 1.2rem; } }