@charset "utf-8"; /*color*/ body { color: #444444; } a{ color: var(--first_color); } a:hover, a:active, a:focus { color: var(--first_color); } h1, h2, h3, h4, h5, h6 { color: #444444; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--first_color); } .page .text-primary { color: var(--first_color); } .page .text-dark { color: #444444; } .button-link{ color: var(--first_color); } .button-link:hover, .button-link:active, .button-link:focus { color: var(--first_color); } .btn-primary:active:hover { background-color: var(--first_color); border-color: var(--first_color); } .btn-info:hover { color: #ffffff; background-color:var(--first_color); border-color:var(--first_color);} /*banner*/ .banner .swiper-slide{ height: 700px;} /*position*/ .breadcrumbs-custom{position:relative;background:#f8f8f8} .breadcrumbs-custom__inner{padding:20px 0px 20px 0px;text-align:center} .breadcrumbs-custom__inner>*+*{margin-top:10px} .breadcrumbs-custom__title{color:#000;font-size:20px;line-height:1.2} .breadcrumbs-custom__path{ line-height: 21px;} .breadcrumbs-custom__path li{ height: 21px; line-height: 21px; padding:0px 2px; font-size: 14px; } .breadcrumbs-custom__path li a{position:relative; font-size: 14px; height: 21px; line-height: 21px; } .breadcrumbs-custom__path li a{display:inline;vertical-align:middle} .breadcrumbs-custom__path li a,.breadcrumbs-custom__path li a:active,.breadcrumbs-custom__path li a:focus,.breadcrumbs-custom__path li a:hover{color:#000} @media (min-width:768px){ .breadcrumbs-custom__inner{display:-ms-flexbox;display:-webkit-flex;display:flex;margin-right:-15px;margin-left:-15px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between} .breadcrumbs-custom__inner>*{padding:0 15px} .breadcrumbs-custom__inner>*+*{margin-top:0} .breadcrumbs-custom__title{font-size:24px;line-height:1.54167} } /*subnavbar*/ .subnavlist{ font-size: 14px; padding-top:20px;} .subnavlist ul{ padding: 0px 20px;} .subnavlist ul li{ float:left; margin:10px;} .subnavlist ul li a, .subnavlist ul li a:active, .subnavlist ul li a:focus { color: #444444; } .subnavlist ul li a:hover, .subnavlist ul li a:focus { color: var(--first_color); } .subnavlist ul li a.active{ color: var(--first_color); } .subnavlist ul li .dropdown-menu a.active,.subnavlist ul li .dropdown-menu a:focus{ background-color: #f8f9fa; color: var(--first_color);} .subnavlist .swiper{ height: 50px !important; min-height: 50px !important; width: 100%; overflow: visible;} .subnavlist .swiper .swiper-wrapper{ height: 50px !important; margin: 0; padding: 0; justify-content: flex-start!important;} .subnavlist .swiper .swiper-slide{ height: 50px !important; width: auto; margin: 0; padding:0px 15px;} .subnavlist .swiper .swiper-slide a{ color: #444444;} .subnavlist .swiper .swiper-slide a.active{ color: var(--first_color);} .subnavlist .swiper .swiper-slide .dropdown-item.active{ background: #ececee; color: var(--first_color);} .subnavlist .swiper-subnav .dropdown-item.active, .swiper-subnav .dropdown-item:active { color: var(--first_color); text-decoration: none; background-color: #ececee;} .subnavlist .swiper-subnav .dropdown-menu.show{ margin-top:15px;} .subnavlist .swiper-subnav .swiper-scrollbar{ background: rgba(0,0,0,.1); width: 92%; margin-left:4%; z-index: -1;} @media (max-width:767px){ /* .subnavlist{display: none;} */ } /*page*/ .pagination{display:flex;padding-left:0;list-style:none;border-radius:0} .page-link,.page-num{position:relative;display:block;padding:10px 15px;line-height:24px;color:var(--first_color);background-color:#fafafa; margin:3px;} .page-link:hover,.page-num:hover{z-index:2;color:#fff;text-decoration:none;background-color:var(--first_color);border-color:var(--first_color)} .page-link:focus,.page-num:focus{z-index:2;outline:0;} .page-link:not(:disabled):not(.disabled),.page-num:not(:disabled):not(.disabled){cursor:pointer} .page-item:first-child .page-link{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0} .page-item:last-child .page-link{border-top-right-radius:0;border-bottom-right-radius:0} .page-item.active .page-link{z-index:1;color:#ffffff;background-color:var(--first_color);border-color:var(--first_color)} .page-item.disabled .page-link{color:#ffffff;pointer-events:none;cursor:auto;background-color:var(--first_color);border-color:var(--first_color)} .page-num-current{ z-index:2;color:#fff;text-decoration:none;background-color:var(--first_color);border-color:var(--first_color)} .page-num{ padding: 10px 15px;} .page-link.nohref:hover{ cursor: unset; background-color: #fafafa;} @media (max-width:767px){ .page-num{ display: none;} } /*newslist*/ .pages{ padding:30px 20px;} .product-visit{ margin-left:15px;} .newslist{background:#fff;padding:30px} .newslist h4{margin:0px} .newslist ul{padding:0px;list-style:none} .newslist ul li{ padding:20px 0px; position: relative; margin-bottom: 15px;} .newslist ul li h4{font-weight:300} .newslist ul li h4 a{color:#2a333c;text-decoration:none;font-size: 20px;color: #2a333c;} .newslist ul li h4 a:hover{color:#444} .newslist ul li h4 a:active, .newslist ul li h4 a:focus, .newslist ul li h4 a:hover{text-decoration:none} .newslist ul li p{margin-bottom:10px;margin-top:5px;} .newslist ul li p.des{color:#76838f;font-size:16px;font-weight:300;margin:10px 0;line-height: 24px; width: 95%;} .newslist ul li p.info{color:#a3afb7;font-size:16px;font-weight:300} .newslist ul li p.info i{color:#444} .media-lg .media-object{width: 240px;} .newslist ul li.media .media-left{ padding-right:20px;} .newslist ul li:hover{box-shadow:0 0 60px -10px rgba(0,0,0,.1)} .newslist ul li:hover:before{width:100%;opacity:1} .newslist ul li:hover p.des,.newslist ul li:hover h4,.newslist ul li:hover p.info,.newslist ul li:hover .media-left{margin-left:20px; transition:all .30s ease;} .newslist ul li p.des,.newslist ul li h4,.newslist ul li p.info,.newslist ul li .media-left{ transition:all .30s ease;} .newslist ul li:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid var(--first_color);opacity:0} @media (max-width:767px){ .newslist{padding:10px;padding-top:20px} .newslist ul li{padding-bottom:20px;margin-bottom:20px} .newslist ul li h4{font-size:18px;margin-bottom:10px} .newslist ul li.media .media-left{padding-right:10px;display:table-cell} .newslist ul li.media p.des{display:none} .newslist ul li.media.media-lg .media-object{width:100px} .newslist ul li:hover p.des,.newslist ul li:hover h4,.newslist ul li:hover p.info,.newslist ul li:hover .media-left{ transition: none; margin-left:0px;} } /*shownews*/ .shownews{ padding:30px 20px;} .shownews h2{ margin:0px;margin-bottom:5px;font-size:32px;line-height:1.5;font-weight:300;} .shownews .product-date,.shownews .product-visit{ color:#a3afb7;font-size:16px;font-weight:300 margin-right:15px;} .shownews .content{ padding-top:20px; font-size: 14px; color: #444; line-height: 24px;} .shownews .turnpages{ display: block; width: 100%; height: auto; margin: 0 auto; text-align: center; overflow: hidden;} .shownews .turnpages p{ border-radius: 5px; border: 1px solid #e4eaec; margin: 0px 0px 10px 0px; display: block;} .shownews .turnpages p a{ padding:10px; display: block;} .shownews .turnpages p.prev{ float: left; } .shownews .turnpages p.next{ float: right; } .shownews .turnpages p:hover{ background-color: #f3f7f9; color:var(--first_color);} .shownews .recommend span.toptitle{ font-size: 24px; margin-bottom: 40px; margin-top: 15px; width: 100%; height: 40px; line-height: 40px; text-align: left; display: block; overflow: hidden;} .shownews .recommend ul li.item_block{ width: 100%; height: auto; float: left; margin: 0px auto 5px auto; padding:20px 0px; border-bottom: 1px solid #dedede; display: block; overflow: hidden; position: relative;} .shownews .recommend ul li.item_block a{ display:block} .shownews .recommend ul li.item_block a .item_wrapper{ display:block} .shownews .recommend ul li.item_block a p.item_date{ color: #999999; height: 30px; line-height: 30px; font-size: 16px; width: 50px; float: left;} .shownews .recommend ul li.item_block a .item_info{ max-width: 200px; float: left; color: #444; font-size: 16px; padding-left: 10px; margin: 0; height: 30px; line-height: 30px;} .ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block;} .shownews .recommend ul li.item_block a .item_des{ width:260px; height: 70px; font-size: 12px; line-height: 24px; text-align: left; color: #999999; padding-top:10px; clear: both;} .shownews .recommend ul li.item_block a:hover p.item_date span,.shownews .recommend ul li.item_block a:hover .item_info{ color: var(--first_color);} .shownews .recommend ul li.item_block:hover{box-shadow:0 0 60px -10px rgba(0,0,0,.1)} .shownews .recommend ul li.item_block:hover:before{width:100%;opacity:1} .shownews .recommend ul li.item_block:hover .item_wrapper{margin-left:20px; transition:all .30s ease;} .shownews .recommend ul li.item_block:hover .item_des{padding-left:5px; transition:all .30s ease;} .shownews .recommend ul li.item_block:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid var(--first_color);opacity:0} .shownews .recommend ul li.item_block,.shownews .recommend ul li.item_block .item_wrapper,.shownews .recommend ul li.item_block .item_des{ transition:all .30s ease;} /*productlist*/ .productparams{ margin-bottom: 3.5rem;} .productlist .card{ position: relative; margin-bottom: 25px;} .productlist .card .card-img{ overflow: hidden;} .productlist .card .card-img img{ transition:all .30s ease;} .productlist .card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.1);} .productlist .card .card-img img:hover{ transform: scale(1.1); transition:all .30s ease;} .productlist .card .card-body{ padding: 0.5rem 0.5rem 0.5rem 0.5rem !important; } .productlist .card .card-body .card-title a{ font-size: 16px; font-weight: normal; color: #444444; text-align: center; } .productlist .card:hover:before{width:100%;opacity:1} .productlist .card:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid var(--first_color);opacity:0} /*showproduct*/ .showproduct{ padding:30px 20px; margin-bottom: 60px;} .showproduct .product-title{ padding-bottom:20px; font-size: 24px;} .showproduct .product-date,.showproduct .product-visit{ font-size: 16px; color: #444444; margin-right:15px;} .showproduct .turnpages{ display: block; width: 100%; height: auto; margin: 0 auto; text-align: center; overflow: hidden;} .showproduct .turnpages p{ border-radius: 5px; border: 1px solid #e4eaec; margin: 0px 0px 10px 0px; display: block;} .showproduct .turnpages p a{ padding:10px; display: block;} .showproduct .turnpages p.prev{ float: left; } .showproduct .turnpages p.next{ float: right; } .showproduct .turnpages p:hover{ background-color: #f3f7f9; color:var(--first_color);} .showproduct .tabs-custom.swiper{ height: 60px !important; min-height: 60px !important; width: 100%; overflow: visible;} .showproduct .tabs-custom .nav{ display: flex !important; flex-wrap: nowrap; padding:0; border-bottom: 1px solid #ececee;} .showproduct .tabs-custom .nav-item{ height: 60px !important; width: auto; margin: 0; line-height: 60px;} .showproduct .tabs-custom .nav-item a{ display: block; overflow:hidden; height: 60px; padding:0px 25px; line-height: 60px;} .showproduct .tabs-custom .nav-item a.active{ border-bottom: 2px solid var(--first_color);} .showproduct .tab-content{ padding: 30px;} @media (max-width:767px){ .showproduct .tab-content{ padding: 30px 0px;} } @media (max-width:767px){ .leftrecommend,.rightrecommend{ display: none;} } .showproduct .recommend span.toptitle{ font-size: 24px; margin-bottom: 40px; margin-top: 15px; width: 100%; height: 40px; line-height: 40px; text-align: left; display: block; overflow: hidden;} .showproduct .recommend ul li.item_block{ width: 100%; height: auto; float: left; margin: 0px auto 5px auto; padding:20px 0px; border-bottom: 1px solid #dedede; display: block; overflow: hidden; position: relative;} .showproduct .recommend ul li.item_block a{ display:block} .showproduct .recommend ul li.item_block a .item_wrapper{ display:block} .showproduct .recommend ul li.item_block a p.item_date{ color: #999999; height: 30px; line-height: 30px; font-size: 16px; width: 50px; float: left;} .showproduct .recommend ul li.item_block a .item_info{ max-width: 200px; float: left; color: #444; font-size: 16px; padding-left: 10px; margin: 0; height: 30px; line-height: 30px;} .ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block;} .showproduct .recommend ul li.item_block a .item_des{ width:260px; height: 70px; font-size: 12px; line-height: 24px; text-align: left; color: #999999; padding-top:10px; clear: both;} .showproduct .recommend ul li.item_block a:hover p.item_date span,.showproduct .recommend ul li.item_block a:hover .item_info{ color: var(--first_color);} .showproduct .recommend ul li.item_block:hover{box-shadow:0 0 60px -10px rgba(0,0,0,.1)} .showproduct .recommend ul li.item_block:hover:before{width:100%;opacity:1} .showproduct .recommend ul li.item_block:hover .item_wrapper{margin-left:20px; transition:all .30s ease;} .showproduct .recommend ul li.item_block:hover .item_des{padding-left:5px; transition:all .30s ease;} .showproduct .recommend ul li.item_block:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid var(--first_color);opacity:0} .showproduct .recommend ul li.item_block,.showproduct .recommend ul li.item_block .item_wrapper,.showproduct .recommend ul li.item_block .item_des{ transition:all .30s ease;} .showproduct .recommend ul li.item_block a .item_img{ max-width: 300px; float: left; margin: 0; } .showproduct .recommend ul li.item_block a .item_img img{ width:100%; display: block;} .showproduct .recommend ul li.item_block a .item_link{ height: 30px; font-size: 12px; line-height: 30px; text-align: left; color: #999999; padding-top:10px; clear: both;} .showproduct .recommend ul li.item_block a .item_link p{ font-size: 16px; text-align: center; line-height: 30px; color: #444444;} /*caselist*/ .caselist .card{ position: relative; margin-bottom: 25px;} .caselist .card .card-img{ overflow: hidden;} .caselist .card .card-img img{ transition:all .30s ease;} .caselist .card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.1);} .caselist .card .card-img img:hover{ transform: scale(1.1); transition:all .30s ease;} .caselist .card .card-body{ padding: 0.5rem 0.5rem 0.5rem 0.5rem !important; } .caselist .card .card-body .card-title a{ font-size: 16px; font-weight: normal; color: #444444; text-align: center; } .caselist .card:hover:before{width:100%;opacity:1} .caselist .card:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:-1px;width:40%;border:1px solid var(--first_color);opacity:0} /*showcase*/ .showcase{ padding:30px 20px; margin-bottom: 60px;} .showcase .product-date,.showproduct .product-visit{ font-size: 16px; color: #444444; margin-right:15px;} .showcase .turnpages{ display: block; width: 100%; height: auto; margin: 0 auto; text-align: center; overflow: hidden;} .showcase .turnpages p{ border-radius: 5px; border: 1px solid #e4eaec; margin: 0px 0px 10px 0px; display: block;} .showcase .turnpages p a{ padding:10px; display: block;} .showcase .turnpages p.prev{ float: left; } .showcase .turnpages p.next{ float: right; } .showcase .turnpages p:hover{ background-color: #f3f7f9; color:var(--first_color);} .showcase .tabs-custom.swiper{ height: 60px !important; min-height: 60px !important; width: 100%; overflow: visible;} .showcase .tabs-custom .nav{ display: flex !important; flex-wrap: nowrap; padding:0; border-bottom: 1px solid #ececee;} .showcase .tabs-custom .nav-item{ height: 60px !important; width: auto; margin: 0; line-height: 60px;} .showcase .tabs-custom .nav-item a{ display: block; overflow:hidden; height: 60px; padding:0px 25px; line-height: 60px;} .showcase .tabs-custom .nav-item a.active{ border-bottom: 2px solid var(--first_color);} .showcase .tab-content{ padding: 30px;} @media (max-width:767px){ .showcase .tab-content{ padding: 30px 0px;} } /*searchlist*/ .form-control{ border-radius: 0 !important;} .searchcomponent{ width: 100%; margin-bottom: 3.5rem;} .searchcomponent .form-group{ width: 85%; float: left; margin: 0 !important;} .searchcomponent .form-group input{ width: 100%;} .searchcomponent button{ width: 15%; float: right; margin: 0 !important;} .searchlist .card-body{ border-bottom: 1px solid #ececee;} .searchlist .search-link{ margin-top: 15px;} /*form*/ .messagelist select{ height: 34px; padding:0.375rem 0.75rem; border: 1px solid #ced4da; border-radius: 0.25rem;} /*joblist*/ .joblist ul li{ border-bottom: 1px solid #dedede; margin-bottom: 70px; position: relative;} .joblist ul li h4 span{ font-size: 20px; padding-bottom: 10px;} .joblist ul li .des{ color: #686868 !important; padding-top:25px;} .joblist ul li:hover{ transition:all .30s ease; box-shadow:0 8px 20px rgba(0,0,0,.1);} .joblist ul li h4 span,.joblist ul li .des,.joblist ul li span.subtitle{ transition:all .30s ease;} .joblist ul li:hover h4 span,.joblist ul li:hover .des,.joblist ul li:hover span.subtitle{ margin-left:25px; transition:all .30s ease;} .joblist ul li:hover:before{width:100%;opacity:1} .joblist ul li:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:0px;width:40%;border:1px solid var(--first_color);opacity:0} /*downloadlist*/ .downloadlist ul li{ margin-bottom: 30px; position: relative;} .downloadlist ul li p.info{color:#a3afb7;font-size:16px;font-weight:300} .downloadlist .downloadtitle{ font-size: 20px; height: 42px; line-height: 42px;} .downloadlist .downloadbtn{ float: right; background: #ffffff; border: 1px solid var(--first_color); color: var(--first_color); font-weight: normal; margin-top: 7px;} .downloadlist .downloadbtn:hover{ background-color: var(--first_color); color:#ffffff; border: 1px solid var(--first_color);} .downloadlist p.info{ margin-top:15px;} .downloadlist ul li:hover{ transition:all .30s ease; box-shadow:0 8px 20px rgba(0,0,0,.1);} .downloadlist ul li .downloadtitle,.downloadlist ul li p.info,.downloadlist ul li .downloadbtn{ transition:all .30s ease;} .downloadlist ul li:hover .downloadtitle,.downloadlist ul li:hover p.info{ margin-left:15px; transition:all .30s ease;} .downloadlist ul li:hover .downloadbtn{ margin-right: 15px; margin-top: 15px; transition:all .30s ease;} .downloadlist ul li:hover:before{width:100%;opacity:1} .downloadlist ul li:before{content:"";transition:all .30s ease;position:absolute;left:0;right:0;margin:auto;bottom:0px;width:40%;border:1px solid var(--first_color);opacity:0} /*botmenu*/ .botmenu{ text-align: center !important; background: var(--first_color);} .botmenu a{ margin: 0; padding: 0;} /*online*/ .online{position:fixed;bottom:30%;right:10px;width:60px;z-index:999;color:#999} .online i,.botmenu i{ font-style: normal !important;} .online a{color:#666} .online a:hover{text-decoration:none} .online dl{background:var(--first_color);padding:10px 5px;margin-bottom:1px;position:relative} .online dl dd{color:#fff;text-align:center;font-size:12px;cursor:pointer} .online dl dd i{font-size:25px} .online dl:hover{background:var(--first_color)} .online dl dt{position:absolute;top:0;right:60px;background:#fff;border:1px solid #ccc;z-index:9999;display:none;padding:10px 15px;font-weight:400} .online dl dt h3{display:block;font-size:16px;color:#666;border-bottom:1px solid #ccc;padding-bottom:5px} .online dl dt h3 i{margin-right:5px} .online dl dt h3 span{float:right;cursor:pointer} .online dl dt input{border:1px solid #ccc;border-radius:5px;margin-top:15px;height:40px;line-height:40px;padding:3px 5px;width:100%} .online dl dt button{margin:10px 0;border:none;border-radius:5px;width:100%;font-size:18px;height:40px;line-height:40px;background:var(--first_color);color:#fff;cursor:pointer} /* header1 */ /* header start */ header.header1 {position: relative;top: 0;left: 0;z-index: 999;padding: 0 0;width: 100%; background-color: #fff;} header.header1:before {position: absolute;top: 0;left: 0;z-index: 0;width: 100%; height: 100%; background-color: #fff;content: ""; opacity: .7;} /* header end */ .header1 .header_mid_box {display: flex;justify-content: space-between;align-items: center;} /* header left start */ .header1 .header_mid_left {} .header1 .header_mid_left img {} .header1 .header_mid_left a {position: relative;display: block;overflow: hidden;} /* header left end */ /* header middle start */ .header1 .header_mid_mid {position: relative;display: flex;} .header1 .header_mid_mid ul {display: flex;} .header1 .header_mid_mid ul li {position: relative;white-space: nowrap;} .header1 .header_mid_mid ul li a.biga {position: relative;display: block;padding: 2.8571rem 0;font-size: 1rem;color: #333;line-height: 1.5;} .header1 .header_mid_mid ul li a.biga>span {padding: 0 12px;} .header1 .header_mid_mid ul li a.biga.down {padding-right: 15px;} .header1 .header_mid_mid ul li a.biga.down:after {position: absolute;top: 50%; right: 10px;margin-top: -3px;width: 12px;height: 6px;-webkit-mask: url(../images/down.svg) no-repeat 50% 50%; mask: url(../images/down.svg) no-repeat 50% 50%; -webkit-mask-size: cover;mask-size: cover;content: ''; background-color: #333;} .header1 .header_mid_mid ul li:last-child {cursor: pointer;} .header1 .header_mid_mid ul li.ss .search-box {width: 820px;opacity: 1;} .header1 .header_mid_mid ul li a.biga:hover, .header1 .header_mid_mid ul li a.biga.action, .header1 .header_mid_mid ul li a.bigaon {color: var(--first_color);} .header1 .header_mid_mid ul li a.biga:before {position: absolute;bottom: 30px;left: 0;right: 0;margin: 0 auto;width: 0;height: 1px;background-color: var(--first_color); content: ''; opacity: 0;transition: all .5s cubic-bezier(.215, .61, .355, 1) 0s;} .header1 .header_mid_mid ul li a.biga:hover:before, .header1 .header_mid_mid ul li a.biga.action:before, .header1 .header_mid_mid ul li a.bigaon:before {width: 80%; opacity: 1;} .header1 .header_mid_mid ul li a.biga.down:hover:after, .header1 .header_mid_mid ul li a.biga.down.action:after, .header1 .header_mid_mid ul li a.down.bigaon:after {background-color: var(--first_color);} header.header1.cur .header_mid_mid ul li a.biga.down:hover:after, header.header1.cur .header_mid_mid ul li a.down.bigaon:after {background-color: var(--first_color);} /*nav son dl label*/ .header1 .header_mid_mid ul li dl {position: absolute;z-index: 100;display: none;padding: 1.5em 0 1em 0;padding-top: .9em;width: max-content;background: rgba(255, 255, 255, .93); background-color: #fff;box-shadow: 0 10px 10px rgba(0, 0, 0, .15); min-width: 100%;} .header1 .header_mid_mid ul li dl dd a {display: block;padding: 7px 2.0714rem 7px 1rem;color: #000;text-align: left;font-size: .9375em;transition: all .5s cubic-bezier(.215, .61, .355, 1) 0s;} .header1 .header_mid_mid ul li dl dd a:hover {background-color: var(--first_color); color: #fff;} .header1 .header_mid_mid ul li dl dd:last-child {border: none;} .header1 .header_mid_mid ul li dl dd:hover p, .header1 .navigate ul li dl dd:hover p {z-index: 1000;display: block;} .header1 .header_mid_mid ul li dl dd:hover .showsub, .header1 .navigate ul li dl dd:hover p .mobile_p_c {color: var(--first_color);} /*nav son p label*/ .header1 .header_mid_mid ul li dl dd {position: relative;} .header1 .header_mid_mid ul li dl dd p a {float: left;display: block;padding-right: 0;width: 50%; color: #666;font-size: .9375em;} .header1 .header_mid_mid ul li dl dd p a {position: relative;float: none;display: block;padding-right: 0;padding-left: 1.5em;width: auto;color: #333;} .header1 .header_mid_mid ul li dl dd p a.action, .header1 .header_mid_mid ul li dl dd p a:hover {background-color: var(--first_color); color: #fff;} .header1 .header_mid_mid ul li dl dd p a span {position: relative;display: inline-block;padding: 0 0;} .header1 .header_mid_mid ul li dl dd p a span:after {position: absolute;bottom: 0;left: 0;display: none;width: 0;height: 1px;background-color: var(--first_color); content: ''; -webkit-transition-duration: .5s;-moz-transition-duration: .5s;-o-transition-duration: .5s;transition-duration: .5s;-ms-transition-duration: .5s;} .header1 .header_mid_mid ul li dl dd p a:hover span:after {width: 100%;} .header1 .header_mid_mid ul li dl dd:hover a.showsub {background-color: var(--first_color); color: #fff;} .header1 .header_mid_mid ul li dl dd p a b {font-size: 15px;} .header1 .header_mid_mid ul li p {display: none;overflow: hidden;position: absolute;top: 0;left: 100%; width: 199px;background-color: #fff;height: max-content;padding-bottom: 20px;} /*nav son*/ .header1 .header_mid_mid ul li dl dd a.showsub {width: 190px;} .header1 .header_mid_mid ul li dl {padding-bottom: 1em;} .header1 .header_mid_mid ul li dl:before {position: absolute;top: 0;left: 0;z-index: 1;width: 190px;height: 100%; background-color: #fff;content: ''} .header1 .header_mid_mid ul li dl {width: 190px;background: 0 0;} .header1 .header_mid_mid ul li dl dd a.showsub {position: relative;z-index: 10;background-color: #fff} .header1 .header_mid_mid ul li dl dd:hover a.showsub, .header1 .header_mid_mid ul li dl dd a.action.showsub {background-color: var(--first_color); color: #fff;} /* header middle end */ /* lang */ .header1 .header_mid_mid ul li.header_lang {display: flex;align-items: center;} /* lang */ /* mobile nav button start */ .header1 .mobilenav {position: relative;display: none;} .header1 .site__navi {position: relative;left: 0;z-index: 100;width: 23px;height: 16px;color: var(--first_color); cursor: pointer;} .header1 .site__navi .text {position: absolute;right: 0;padding-right: 30px;} .header1 .site__navi .icon {top: 9px;right: 0;display: block;cursor: pointer;} .header1 .site__navi .icon{position: absolute;width: 23px;height: 1px;background: var(--first_color);} .header1 .site__navi .icon:before {left: 0;content: ""; -webkit-transition: -webkit-transform .35s;-o-transition: transform .35s;transition: -webkit-transform .35s;transition: transform .35s;transition: transform .35s, -webkit-transform .35s;} .header1 .site__navi .icon:before {position: absolute;top: -5px;width: 23px;height: 1px;background: var(--first_color);} .header1 .site__navi .icon:after {left: 0;content: ""; -webkit-transition: -webkit-transform .35s;-o-transition: transform .35s;transition: -webkit-transform .35s;transition: transform .35s;transition: transform .35s, -webkit-transform .35s;} .header1 .site__navi .icon:after {position: absolute;top: 5px;width: 23px;height: 1px;background: var(--first_color);} .header1 .has-menu .site__navi .icon {background: 0 0;} .header1 .has-menu .site__navi .icon:before {top: 0;-webkit-transform: rotate(45deg); transform: rotate(45deg); -ms-transform: rotate(45deg);} .header1 .has-menu .site__navi .icon:after {top: 0;-webkit-transform: rotate(-45deg); transform: rotate(-45deg); -ms-transform: rotate(-45deg);} .header1 .site__navi:hover .text {color: #fff;-webkit-transition: color .35s;-o-transition: color .35s;transition: color .35s;} .header1 .has-menu .site__navi .text, .header1 .has-menu .site__navi:hover .text {color: #000;} /* mobile nav button end */ /* mobile nav start */ .header1 .navigate {position: fixed;top: 67.4px;left: 100%; z-index: 777;visibility: hidden;overflow-y: auto;width: 62%; height: calc(100% - 67.4px); background-color: #fff;opacity: 0;transition: all .5s cubic-bezier(.215, .61, .355, 1) 0s;padding-bottom: 70px;} .header1 .navigate.show {left: 39%; visibility: visible;opacity: 1;} .header1 .navigate ul li {border-bottom: 1px #e0e0e0 solid;} .header1 .navigate ul li a {position: relative;display: block;margin: 0 7.2vw;padding: .875em 0;color: #555;font-size: 1.5em;} .header1 .navigate ul li a.action {color: var(--first_color);} .header1 .navigate ul li a.mobile_alink {padding-right: 25px;} .header1 .navigate ul li a.mobile_alink:after {position: absolute;top: 0;bottom: 0;margin: auto 0;right: 0;width: 20px;height: 13px;-webkit-mask: url(../images/down.svg) no-repeat center center/contain;mask: url(../images/down.svg) no-repeat center center/contain;-webkit-mask-size: contain;mask-size: contain;background-color: #333;content: ''; transform: rotate(-90deg); transition: all .5s ease;} .header1 .navigate ul li dl dd a {padding: .5em 0;color: #888;font-size: 1.375em;} .header1 .navigate ul li dl {display: none;padding: 1em 0;background-color: #f5f5f5;} .header1 .navigate ul li dl dd a:after {display: none;} .header1 .navigate ul li.on a {color: var(--first_color);} .header1 .navigate ul li.on dl dd a {color: #888;} .header1 .navigate ul li.on dl dd a.action {color: var(--first_color);} .header1 .navigate ul li.on a.mobile_alink:after {transform: rotate(0deg); background-color: var(--first_color);} .header1 .navigate ul li.on dl dd.on a.mobile_p_c {color: var(--first_color);} .header1 .navigate ul li.on dl dd p {display: none;} .header1 .navigate ul li.on dl dd.on p {display: block;} .header1 .navigate ul li.on dl dd p {padding: 10px;background-color: #ececec;} .header1 .navigate ul li dl dd a.showsub.mobile_p_c {padding-right: 25px;} .header1 .navigate ul li dl dd a.showsub.mobile_p_c::after {content: ''; position: absolute;top: 0;bottom: 0;margin: auto 0;right: 0;width: 20px;height: 13px;display: block;-webkit-mask: url(../images/down.svg) no-repeat center center/contain;mask: url(../images/down.svg) no-repeat center center/contain;-webkit-mask-size: contain;mask-size: contain;background-color: #333;transform: rotate(-90deg); transition: all .5s ease;} .header1 .navigate ul li.on dl dd.on a.mobile_p_c::after {transform: rotate(0deg); background-color: var(--first_color);} .header1 .navigate ul li a {font-size: 1.25em;} .header1 .navigate ul li dl dd a {font-size: 1em;} .header1 .navigate ul li.header_moble_lang {display: flex;justify-content: center;align-items: baseline;margin: 0 7.2vw;padding: .875em 0;border-bottom: unset;} .header1 .navigate ul li.header_moble_lang a {margin: 0 5px;padding: 0;} .header1 .navmask {position: fixed;top: 0;right: 0;z-index: 666;visibility: hidden;width: 100%; height: 100%; background-color: #000;opacity: 0;transition: all .5s cubic-bezier(.215, .61, .355, 1) 0s;display: none;} .header1 .navmask.show {visibility: visible;opacity: 0;display: block;} .header1 .ovh {overflow: hidden;} /* mobile nav end */ @media screen and (max-width:1024px) { .page {padding-top: 70px;} header.header1{position: fixed; height: 70px;} header.header1 .container {display: flex; justify-content: space-between; align-items: center;height: 100%;} .header1 .header_mid_box {width: 80%; } .header1 .header_mid_left {margin-top: 0;} .header1 .header_mid_left img{max-height: 60px;max-width: 100%;} header.header1:before {display: none;} .header1 .mobilenav {display: block;} .header1 .header_mid_mid {display: none;} .header1 .header_mid_left {float: none; width: 100%; text-align: left;} .header1 .header_mid_left a {display: inline-block;} header.header1 {padding: 5px 0; background-color: #fff;} header.header1 .header_mid_left a:after {top: 0; opacity: 1;} } @media screen and (max-width:480px) { .header1 .navigate ul li dl {padding: .875em 0;} .header1 .navigate ul li a {font-size: 1.125em;} } /* header1 */ /* header2 */ /* header start */ header.header2 {position: relative;top: 0;left: 0;z-index: 999;padding: 0 0;width: 100%; background-color: #fff;} header.header2 > div{position: relative;} header.header2:before {position: absolute;top: 0;left: 0;z-index: 0;width: 100%; height: 100%; background-color: #fff;content: ""; opacity: .7;} /* header end */ .header2 .header_mid_box {display: flex;justify-content: space-between;align-items: center;} /* header left start */ .header2 .header_mid_left {} .header2 .header_mid_left img {} .header2 .header_mid_left a {position: relative;display: block;overflow: hidden;} /* header left end */ /* header middle start */ .header2 .header_mid_mid {position: relative;display: flex;} .header2 .header_mid_mid ul {display: flex;} .header2 .header_mid_mid ul li {position: relative;white-space: nowrap;} .header2 .header_mid_mid ul li a.biga {position: relative;display: block;padding: 2.8571rem 0;font-size: 1rem;color: #333;line-height: 1.5;} .header2 .header_mid_mid ul li a.biga>span {padding: 0 12px;} .header2 .header_mid_mid ul li a.biga.down {padding-right: 15px;} .header2 .header_mid_mid ul li a.biga.down:after {position: absolute;top: 50%; right: 10px;margin-top: -3px;width: 12px;height: 6px;-webkit-mask: url(../images/down.svg) no-repeat 50% 50%; mask: url(../images/down.svg) no-repeat 50% 50%; -webkit-mask-size: cover;mask-size: cover;content: ''; background-color: #333;} .header2 .header_mid_mid ul li:last-child {cursor: pointer;} .header2 .header_mid_mid ul li.ss .search-box {width: 820px;opacity: 1;} .header2 .header_mid_mid ul li a.biga:hover, .header2 .header_mid_mid ul li a.biga.action, .header2 .header_mid_mid ul li a.bigaon {color: var(--first_color);} .header2 .header_mid_mid ul li a.biga:before {position: absolute;bottom: 30px;left: 0;right: 0;margin: 0 auto;width: 0;height: 1px;background-color: var(--first_color); content: ''; opacity: 0;transition: all .5s cubic-bezier(.215, .61, .355, 1) 0s;} .header2 .header_mid_mid ul li a.biga:hover:before, .header2 .header_mid_mid ul li a.biga.action:before, .header2 .header_mid_mid ul li a.bigaon:before {width: 80%; opacity: 1;} .header2 .header_mid_mid ul li a.biga.down:hover:after, .header2 .header_mid_mid ul li a.biga.down.action:after, .header2 .header_mid_mid ul li a.down.bigaon:after {background-color: var(--first_color);} header.header2.cur .header_mid_mid ul li a.biga.down:hover:after, header.header2.cur .header_mid_mid ul li a.down.bigaon:after {background-color: var(--first_color);} /*nav son dl label*/ .header2 .header_mid_mid ul li dl {position: absolute;z-index: 100;display: none;padding: 1.5em 0 1em 0;padding-top: .9em;width: max-content;background: rgba(255, 255, 255, .93); background-color: #fff;box-shadow: 0 10px 10px rgba(0, 0, 0, .15); min-width: 100%;} .header2 .header_mid_mid ul li dl dd a {display: block;padding: 7px 2.0714rem 7px 1rem;color: #000;text-align: left;font-size: .9375em;transition: all .5s cubic-bezier(.215, .61, .355, 1) 0s;} .header2 .header_mid_mid ul li dl dd a:hover {background-color: var(--first_color); color: #fff;} .header2 .header_mid_mid ul li dl dd:last-child {border: none;} .header2 .header_mid_mid ul li dl dd:hover p, .header2 .navigate ul li dl dd:hover p {z-index: 1000;display: block;} .header2 .header_mid_mid ul li dl dd:hover .showsub, .header2 .navigate ul li dl dd:hover p .mobile_p_c {color: var(--first_color);} /*nav son p label*/ .header2 .header_mid_mid ul li dl dd {position: relative;} .header2 .header_mid_mid ul li dl dd p a {float: left;display: block;padding-right: 0;width: 50%; color: #666;font-size: .9375em;} .header2 .header_mid_mid ul li dl dd p a {position: relative;float: none;display: block;padding-right: 0;padding-left: 1.5em;width: auto;color: #333;} .header2 .header_mid_mid ul li dl dd p a.action{background-color: var(--first_color);color: #fff;} .header2 .header_mid_mid ul li dl dd p a.action span{color: #fff;} .header2 .header_mid_mid ul li dl dd p a:hover{background-color: var(--first_color); color: #fff;} .header2 .header_mid_mid ul li dl dd p a:hover span{ color: #fff;} .header2 .header_mid_mid ul li dl dd p a span {position: relative;display: inline-block;padding: 0 0;} .header2 .header_mid_mid ul li dl dd p a span:after {position: absolute;bottom: 0;left: 0;display: none;width: 0;height: 1px;background-color: var(--first_color); content: ''; -webkit-transition-duration: .5s;-moz-transition-duration: .5s;-o-transition-duration: .5s;transition-duration: .5s;-ms-transition-duration: .5s;} .header2 .header_mid_mid ul li dl dd p a:hover span:after {width: 100%;} .header2 .header_mid_mid ul li dl dd:hover a.showsub {background-color: var(--first_color); color: #fff;} .header2 .header_mid_mid ul li dl dd p a b {font-size: 15px;} .header2 .header_mid_mid ul li p {display: none;overflow: hidden;position: absolute;top: 0;left: 100%; width: 199px;background-color: #fff;height: max-content;padding-bottom: 20px;} /*nav son*/ .header2 .header_mid_mid ul li dl dd a.showsub {width: 190px;} .header2 .header_mid_mid ul li dl {padding-bottom: 1em;} .header2 .header_mid_mid ul li dl:before {position: absolute;top: 0;left: 0;z-index: 1;width: 190px;height: 100%; background-color: #fff;content: ''} .header2 .header_mid_mid ul li dl {width: 190px;background: 0 0;} .header2 .header_mid_mid ul li dl dd a.showsub {position: relative;z-index: 10;background-color: #fff} .header2 .header_mid_mid ul li dl dd:hover a.showsub, .header2 .header_mid_mid ul li dl dd a.action.showsub {background-color: var(--first_color); color: #fff;} /* header middle end */ /* lang */ .header2 .header_mid_mid ul li.header_lang {display: flex;align-items: center;} /* lang */ /* mobile nav button start */ .header2 .mobilenav {position: relative;display: none;} .header2 .site__navi {position: relative;left: 0;z-index: 100;width: 23px;height: 16px;color: var(--first_color); cursor: pointer;} .header2 .site__navi .text {position: absolute;right: 0;padding-right: 30px;} .header2 .site__navi .icon {top: 9px;right: 0;display: block;cursor: pointer;} .header2 .site__navi .icon{position: absolute;width: 23px;height: 1px;background: var(--first_color);} .header2 .site__navi .icon:before {left: 0;content: ""; -webkit-transition: -webkit-transform .35s;-o-transition: transform .35s;transition: -webkit-transform .35s;transition: transform .35s;transition: transform .35s, -webkit-transform .35s;} .header2 .site__navi .icon:before {position: absolute;top: -5px;width: 23px;height: 1px;background: var(--first_color);} .header2 .site__navi .icon:after {left: 0;content: ""; -webkit-transition: -webkit-transform .35s;-o-transition: transform .35s;transition: -webkit-transform .35s;transition: transform .35s;transition: transform .35s, -webkit-transform .35s;} .header2 .site__navi .icon:after {position: absolute;top: 5px;width: 23px;height: 1px;background: var(--first_color);} .header2 .has-menu .site__navi .icon {background: 0 0;} .header2 .has-menu .site__navi .icon:before {top: 0;-webkit-transform: rotate(45deg); transform: rotate(45deg); -ms-transform: rotate(45deg);} .header2 .has-menu .site__navi .icon:after {top: 0;-webkit-transform: rotate(-45deg); transform: rotate(-45deg); -ms-transform: rotate(-45deg);} .header2 .site__navi:hover .text {color: #fff;-webkit-transition: color .35s;-o-transition: color .35s;transition: color .35s;} .header2 .has-menu .site__navi .text, .header2 .has-menu .site__navi:hover .text {color: #000;} /* mobile nav button end */ /* mobile nav start */ .header2 .navigate {position: fixed;top: 67.4px;left: 100%; z-index: 777;visibility: hidden;overflow-y: auto;width: 62%; height: calc(100% - 67.4px); background-color: #fff;opacity: 0;transition: all .5s cubic-bezier(.215, .61, .355, 1) 0s;padding-bottom: 70px;} .header2 .navigate.show {left: 39%; visibility: visible;opacity: 1;} .header2 .navigate ul li {border-bottom: 1px #e0e0e0 solid;} .header2 .navigate ul li a {position: relative;display: block;margin: 0 7.2vw;padding: .875em 0;color: #555;font-size: 1.5em;} .header2 .navigate ul li a.action {color: var(--first_color);} .header2 .navigate ul li a.mobile_alink {padding-right: 25px;} .header2 .navigate ul li a.mobile_alink:after {position: absolute;top: 0;bottom: 0;margin: auto 0;right: 0;width: 20px;height: 13px;-webkit-mask: url(../images/down.svg) no-repeat center center/contain;mask: url(../images/down.svg) no-repeat center center/contain;-webkit-mask-size: contain;mask-size: contain;background-color: #333;content: ''; transform: rotate(-90deg); transition: all .5s ease;} .header2 .navigate ul li dl dd a {padding: .5em 0;color: #888;font-size: 1.375em;} .header2 .navigate ul li dl {display: none;padding: 1em 0;background-color: #f5f5f5;} .header2 .navigate ul li dl dd a:after {display: none;} .header2 .navigate ul li.on a {color: var(--first_color);} .header2 .navigate ul li.on dl dd a {color: #888;} .header2 .navigate ul li.on dl dd a.action {color: var(--first_color);} .header2 .navigate ul li.on a.mobile_alink:after {transform: rotate(0deg); background-color: var(--first_color);} .header2 .navigate ul li.on dl dd.on a.mobile_p_c {color: var(--first_color);} .header2 .navigate ul li.on dl dd p {display: none;} .header2 .navigate ul li.on dl dd.on p {display: block;} .header2 .navigate ul li.on dl dd p {padding: 10px;background-color: #ececec;} .header2 .navigate ul li dl dd a.showsub.mobile_p_c {padding-right: 25px;} .header2 .navigate ul li dl dd a.showsub.mobile_p_c::after {content: ''; position: absolute;top: 0;bottom: 0;margin: auto 0;right: 0;width: 20px;height: 13px;display: block;-webkit-mask: url(../images/down.svg) no-repeat center center/contain;mask: url(../images/down.svg) no-repeat center center/contain;-webkit-mask-size: contain;mask-size: contain;background-color: #333;transform: rotate(-90deg); transition: all .5s ease;} .header2 .navigate ul li.on dl dd.on a.mobile_p_c::after {transform: rotate(0deg); background-color: var(--first_color);} .header2 .navigate ul li a {font-size: 1.25em;} .header2 .navigate ul li dl dd a {font-size: 1em;} .header2 .navigate ul li.header_moble_lang {display: flex;justify-content: center;align-items: baseline;margin: 0 7.2vw;padding: .875em 0;border-bottom: unset;} .header2 .navigate ul li.header_moble_lang a {margin: 0 5px;padding: 0;} .header2 .navmask {position: fixed;top: 0;right: 0;z-index: 666;visibility: hidden;width: 100%; height: 100%; background-color: #000;opacity: 0;transition: all .5s cubic-bezier(.215, .61, .355, 1) 0s;display: none;} .header2 .navmask.show {visibility: visible;opacity: 0;display: block;} .header2 .ovh {overflow: hidden;} /* mobile nav end */ .header2_nav{background-color: var(--first_color);} .header2 .header_mid_mid ul{width: 100%;justify-content: space-between;} .header2 .header_mid_mid ul li{width: 100%;} .header2 .header_mid_mid ul li a.biga:hover, .header2 .header_mid_mid ul li a.biga.action, .header2 .header_mid_mid ul li a.bigaon{color: #fff;} .header2 .header_mid_mid ul li a.biga.down:hover:after, .header2 .header_mid_mid ul li a.biga.down.action:after, .header2 .header_mid_mid ul li a.down.bigaon:after{background-color: #fff;} .header2 .header_mid_mid ul li a.biga{padding: 10px 0;text-align: center;} .header2 .header_mid_mid ul li a.biga.down:after{right: unset;} .header2 .header_mid_mid ul li a.biga.down>span{padding-right: 5px;} @media screen and (max-width:1024px) { .page {padding-top: 70px;} header.header2 {position: fixed; height: 70px;} header.header2 .container {display: flex; justify-content: space-between; align-items: center;} .header2 .header_mid_box {width: 80%;padding: 0!important; } header.header2 .container{height: 100%;} .header2 .header2_nav{display: none;} .header2 .header_mid_left {margin-top: 0;} .header2 .header_mid_left img{max-height: 60px;max-width: 100%;} header.header2:before {display: none;} .header2 .mobilenav {display: block;} .header2 .header_mid_mid {display: none;} .header2 .header_mid_left {float: none; width: 100%; text-align: left;} .header2 .header_mid_left a {display: inline-block;} header.header2 {padding: 5px 0; background-color: #fff;} header.header2 .header_mid_left a:after {top: 0; opacity: 1;} } @media screen and (max-width:480px) { .header2 .navigate ul li dl {padding: .875em 0;} .header2 .navigate ul li a {font-size: 1.125em;} } /* header2 */