/** * Name: booNavigation.css * Date:Sun 16 Feb 2014 * Author: Noemi Losada Estrella * Creative Commons License */ /** General ================================================== */ * { margin: 0; padding: 0; } /*font-family: "Microsoft YaHei" , sans-serif; */ body {font-size: 1.2em; font-weight: 400; color: #333; background-color: #f2f2f2; } .wrapper { /*margin: 50px auto;*/ /*width: 960px;*/ } ul li { list-style-type: none; } .wrapper a { color: #333; text-decoration: none; } /** Navigation theme .search_content { width: 100%; margin: 0 auto; background-color: #FFF; border-radius: 8px; display: block; } /*.tabs-vertical{*/ /* font: bold 13px sans-serif;*/ /* background-color: #f7f7f7;*/ /* box-shadow: 0 0 22px #E2E2E2 inset, 2px 2px 3px #E8E8E8;*/ /* border: 1px solid #CECECE;*/ /* margin: 30px auto 30px;*/ /* max-width: 580px;*/ /* text-align: center;*/ /* border-radius: 2px;*/ /*}*/ /* The tabs */ .tabs-vertical ul{ float: left; list-style: none; text-align: center; width: 20%; margin: 0; padding-left: 0; } /*.tabs-vertical ul li{*/ /* margin-right: -1px;*/ /*}*/ .tabs-vertical ul li a{ display: block; text-decoration: none; color: #656a6d; border: 1px solid transparent; border-right: 0; border-left: 0; padding: 16px 40px 16px 20px; } .tabs-vertical ul li a.tab-active { border-color: #dddddd; background-color: #ffffff; box-shadow: 0px 2px 0px #EFEFEF; } .tabs-vertical ul li:first-child a{ border-top: 0; } /* The content */ .tabs-vertical .tabs-content-placeholder{ min-height: 460px; max-height: 660px; overflow: scroll; border-left: 1px solid #dddddd; font-weight: normal; background-color: #fff; /*padding: 20px 40px 45px;*/ margin: 0 auto; box-shadow: -3px 0 0px #F3F3F3; text-align: left; } .tabs-vertical .tabs-content-placeholder dd a{ /*margin-left: 1.5%;*/ } .tabs-vertical .tabs-content-placeholder div{ display: none; } .tabs-vertical .tabs-content-placeholder div.tab-content-active{ display: block; } .tabs-vertical .tabs-content-placeholder div p{ color: #565a5c; line-height: 1.5; text-align: left; margin: 5px 0 20px; } .tabs-vertical .tabs-content-placeholder div img{ max-width: 100%; } @media (max-width: 600px) { .tabs-vertical ul{ float: none; } .tabs-vertical ul li{ display: inline-block; margin-bottom: -1px; } .tabs-vertical ul li a{ border: 1px solid transparent; border-bottom: 0; border-top: 0; padding: 12px 15px; } .tabs-vertical ul li a.tab-active { border-color: #dddddd; background-color: #ffffff; box-shadow: 2px 0px 0px #EFEFEF; } .tabs-vertical ul li:first-child a{ border-left: 0; } .tabs-vertical .tabs-content-placeholder{ padding: 15px 30px 30px; border-left: 0; border-top: 1px solid #dddddd; box-shadow: 0px -3px 0px #F3F3F3; } } /*================================================== */ .booNavigation { position: relative; font-family: Montserrat !important; } .booNavigation li.navItem { width: 12.5%; height: 60px; line-height: 60px; text-align: center; color: #000000; float: left; font-size: 1rem; text-decoration: none; transition: all .3s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; } .booNavigation li.navItem:hover { /*background-color: #444;*/ /*border-color: #000;*/ cursor: pointer; /*color: #45c9fc !important;*/ } .booNavigation li.navItem > a { color: #fff; padding-right:5px; } .booNavigation li.navItem > a:hover { /*color: #45c9fc !important;*/ } .a1{ width: 100% !important; position: relative; } .a1 div:first-child{ background-color: white; border-right:1px solid grey; width: 30% !important; float: left; } .jspop{ margin: 0 !important; position: fixed; height: auto; /*padding: 0 0 100px 0 !important;*/ background-color: #f2f2f2 !important; max-height: 660px; /*box-shadow: 3px 3px 40px 3px #88909A*/ border: 1px solid lightgray; } .booNavigation li.navItem .navContent { /*padding: 0 !important;*/ background-color: #fff; color: black; left: 0; top: 60px; width: 100%; z-index: 9999; } .booNavigation li.navItem .navContent1 { background-color: #fff; color: black; position: absolute; top: 60px; width: auto !important; height: auto !important; z-index: 9999; border-radius: 5px; box-shadow: 0 0 1px 0 #88909A } .booNavigation li.navItem .navContent2 { background-color: #fff; color: black; left: 49%; position: fixed; top: 60px; width: auto !important; height: auto !important; z-index: 9999; border-radius: 5px; box-shadow: 0 0 1px 0 #88909A /*box-shadow: 5px 5px 10px 2px #88909A*/ /*min-height: 220px;*/ } .navContent2 li,.navContent1 li,.navContent3 li{ width: 100%; padding: 0 10px; } .booNavigation li.navItem .navContent3 { background-color: #fff; color: black; left: 59%; position: fixed; top: 60px; width: auto !important; height: auto !important; z-index: 9999; border-radius: 5px; box-shadow: 0 0 1px 0 #88909A } .downimg{height:12px;} .booNavigation .navContent > li { color: #fff; float: left; text-align: left; line-height: 1.5rem; padding: 0.5rem; } .booNavigation .jspop > li { color: #fff; float: left; /*padding: 10px;*/ width: 30%; } .booNavigation .navContent ul li a { /*color: #fff;*/ display: block; padding: 0 !important; line-height: 2.75rem !important; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; } .booNavigation .navContent ul li a:hover { /*background-color: #555;*/ /*padding-left: 2px;*/ color: #004BFA !important; } /** Navigation examples ================================================== */ .nav-example { clear: left; } .navItem{ position:relative; display: grid; grid-template-columns: auto auto; /* 设置两列 */ align-items: center; /* 垂直居中对齐 */ /* 可选:如果需要水平居中对齐图片和文字 */ justify-content: center; } #allbtntop{ position: relative; } /*.navItem a{*/ /* position: absolute;*/ /* left: 35%;*/ /*}*/ /*.navItem .downimg{*/ /* position: absolute;*/ /* left: 120px;*/ /* top: 22px;*/ /*}*/ /*.downimg1{*/ /* margin-left: 130px;*/ /* margin-top: -37px;*/ /*}*/ .hc_lnav .allbtn ul{z-index:99999;position:absolute;background-color:#60a411;width:190px;display:none;height:top:36px;left:0px} body.hc_home .hc_lnav .allbtn ul{display:block} body.hc_list .hc_lnav .allbtn ul{display:block} .allbtn ul li{zoom:1;clear:both;cursor:default; cursor: pointer;} .allbtn ul li .tx{line-height:35px;padding-left:10px;background-repeat:no-repeat;background-position:right center;height:35px;_background-image:none} .allbtn ul li .tx a{font-family:微软雅黑, 黑体;color:#ffffff;font-size:14px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s} .allbtn ul li .tx a i{line-height:25px;margin-top:5px;width:25px;background-position:0px 0px;float:left;height:25px;margin-right:10px;text-decoration:none} .allbtn ul li dl{zoom:1;color:#ffffff;clear:both;overflow:auto;padding-top:4px} .allbtn ul li dl a{line-height:22px;white-space:nowrap;float:left;color:#d9e7ce;margin-left:6px;margin-right:6px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s} .allbtn ul li dt{padding-left:10px;width:30px;float:left;padding-top:1px} .allbtn ul li dd{line-height:22px;width:150px;float:left;padding-top:2px} /*二级导航隐藏*/ .allbtn ul li .pop{position:absolute;border-left:medium none;padding-bottom:10px;background-color:#ffffff;display:none;border-top:medium none;top:0px;padding-top:10px;width:70%;padding-left:20px } .allbtn ul li .pop1{position:absolute;border-left:medium none;padding-bottom:10px;background-color:#ffffff;display:block ;border-top:medium none;top:0px;padding-top:10px;width:70%;padding-left:20px ;left:30%} .allbtn ul li .pop h3{display:none;font-size:14px} .allbtn ul li .pop dl{padding-bottom:6px;color:#666666;padding-top:6px} /*.allbtn ul li .pop dl:hover{background-color:#f3f3f3}*/ .allbtn ul li .pop dl a{color:#666666;margin-left:12px;margin-right:12px} .allbtn ul li .pop dl a.un{color:#a5a5a5} .allbtn ul li .pop dt{padding-left:0px;width:72px;} .allbtn ul li .pop dd{width:100%;margin-left:-12px;} .allbtn ul li .pop .act{width:100%;height:80px;overflow:hidden;padding-top:10px} .allbtn:hover ul{display:block}/*控制一级菜单显示隐藏*/ /*.allbtn ul li:hover{background-color:#fcfcfc}*/ .allbtn ul li:hover .tx{background-color:#f5f5f5} .allbtn ul li:hover .tx a{color:#333333} .allbtn ul li:hover .tx a i{background-position:0px -25px} /*控制二级菜单显示隐藏*/ .allbtn ul li:hover .pop{display:block;top:0px;left:30%} .allbtn ul li:hover .pop dl a.un{color:#a5a5a5;text-decoration:none} .allbtn ul li:hover dl{color:#6e6e6e} .allbtn ul li:hover a{color:#666666} .allbtn ul li:hover a:hover{color:#004BFA} .modal-fade-enter-active { animation: dialog-fade-in .3s; } .modal-fade-leave-active { animation: dialog-fade-out .3s; } @keyframes dialog-fade-in { 0% { transform: translate3d(0, -20px, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes dialog-fade-out { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(0, -20px, 0); opacity: 0; } } .m-modal__wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; margin: 0; background: rgba(0, 0, 0, .5); } .m-modal__container { width: 25%; position: relative; margin: 0 auto 50px; background: #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-sizing: border-box; margin-top: 15vh; animation: dialog-fade-in .3s; } .m-modal__header { padding: 20px 20px 10px; } .m-modal__title { line-height: 24px; font-size: 18px; color: #303133; } button { -webkit-appearance: button; -webkit-writing-mode: horizontal-tb !important; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; align-items: flex-start; cursor: default; box-sizing: border-box; margin: 0; } .m-modal__headerbtn { position: absolute; top: 20px; right: 20px; padding: 0; background: transparent; border: none; outline: none; cursor: pointer; font-size: 16px; } .m-modal__close { color: #909399; } .m-modal__headerbtn:hover .m-modal__close { color: #409EFF; } .m-modal__body { padding: 30px 20px; color: #606266; font-size: 14px; word-break: break-all; } .m-modal__footer { padding: 10px 20px 20px; text-align: right; box-sizing: border-box; } .m-modal__footer button:first-child { margin-right: 10px; } .m-modal-button { display: none; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 20px; font-size: 14px; border-radius: 4px; } .head-nav{ position: absolute; top: 0; width: 100%; /* height: 60px; */ /*background: rgba(255,255,255,0.2);*/ display: flex; z-index: 99999; max-width:1920px; margin: 0 auto; } @media screen and (min-width:1930px){ .head-nav{ left: 50%; display: flex; z-index: 99999; max-width:1980px; margin: 0 auto; margin-left: -990px; } } .nav-1{ position: relative; width: 20%; background-color: transparent; } .nav-1 img{ margin-left: 50%; /*height: 60px;*/ width:45%; margin-top:10px; } @media screen and (max-width:1459px){ .nav-1 img{ margin-top:15px; } } .nav-2{ width: 60%; background-color: transparent; } .nav-3{ position: relative; width: 20%; background-color: transparent; display: flex; } .nav-3 div{ width: 10%; position: relative; margin-left:15%; } .nav-3 .searchimg{ position: absolute; top: 50%; left: 5%; } .nav-3 .checkimg{ position: absolute; top: 50%; left: 20%; margin-top: -10px; cursor: pointer; } .nav-3 .checkimg:hover .top-country{ display: block; } .hidden { display: none; } #top-country{ width: 330px; /*height: 100px;*/ background-color: white; position: fixed; right: 5%; top: 60px; border-radius: 15px; box-shadow: 2px 2px 10px 1px #88909A; } #top-country li{ width: 100%; height: 50px; line-height: 50px; /*background-color: red;*/ text-align: center; } .desktopli{ display: flex; /*border: 1px solid red;*/ } .desktopli1{ height: 30px !important; } .desktopli .desktop-2{ width: 22%; margin-left: 0; } .desktopli .desktop-2 img{ margin-left: 20px; margin-top: 15px; } .desktopli .desktop-10{ font-family: Montserrat !important; font-size: 1rem; width: 70%; text-align: left; margin-left: 10px; } .openModalBtn{ cursor: pointer; } .modal_1 { font-family: Montserrat !important; margin-top: 5%; margin-left: 10%; width: 80%; display: flex; position: relative; } .modal_2 { font-family: Montserrat !important; margin-top: 5%; margin-left: 10%; width: 80%; display: flex; position: relative; text-align: left; } .modal_1 div{ margin-top: 10%; margin-left: 1%; } .modal_2 div{ text-align: center; margin-top: 10%; margin-left: 1%; } .modal_2 .title{ font-size: 14px; font-weight: 600; /*height: 45px;*/ overflow: hidden; /* 隐藏溢出部分的文字 */ display: -webkit-box; -webkit-line-clamp: 1; /* 显示两行 */ -webkit-box-orient: vertical; /* 文本在垂直方向排列 */ } .modal_2 .title p{ margin:0; padding: 0; } .modal_2 .title :hover{ overflow: visible; } .modal_2 .subtitle{ margin-top: 0; font-size: 10px; color: #000000; } .tit1{ position: absolute; left: 0; top: 1%; font-size: 16px; color: #989898; } /* 背景模态框样式 */ .modal { /*display: none;*/ position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; } /* 弹出框内容样式 */ .modal-content { background-color: #fff; padding: 20px; border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); position: fixed !important; right: 2%; width: 35%; top: 60px; height: 80%; z-index: 9999; } /* 关闭按钮样式 */ .close-btn { color: #aaa; float: right; font-size: 24px; cursor: pointer; } .close-btn1 { color: #aaa; float: right; margin-top: -5px; cursor: pointer; height: 20px; width: 20px; margin-right: 10px; font-size: 20px; } .close-btn:hover { color: #000; } .picture21{ width: 33%; /*border: 1px solid red;*/ } .picture21-img{ width: 7.1875rem; height: 7.1875rem; margin-left: 13%; }