@charset "UTF-8"; .header, .header-box { height: 72px } .index .about-right { margin-top: 10px; } .index .about-right__item--icon img, .mobile-hd__logo img, .solution .page-smart2__guide--item-box img { max-height: 100% } .cooperation-photo__item img, .mobile-hd__btn span, .mobile-nav__item--text span::after, .my-hide, .my-show, .news-item, .news-item__icon span, .news-item__thumbnail img, .page-detail__mask, .photo-item__box, .photo-item__box img { transition: all .5s ease } .flex { display: flex } .flex-wrap { flex-wrap: wrap } .flex-column { flex-direction: column; align-items: stretch } .flex-content-center { align-content: center } .flex-item-top { align-items: flex-start } .flex-item-center { align-items: center } .flex-item-end { align-items: flex-end } .flex-item-stretch { align-items: stretch } .flex-justify-end { justify-content: flex-end } .flex-justify-center { justify-content: center } .flex-item { flex: 1 } .flex-col__1 { flex: 0 0 8.333333333333333%; max-width: 8.333333333333333%; width: 8.333333333333333% } .flex-col__2 { flex: 0 0 16.66666666666667%; max-width: 16.66666666666667%; width: 16.66666666666667% } .flex-col__3 { flex: 0 0 25%; max-width: 25%; width: 25% } .flex-col__4 { flex: 0 0 33.33333333333333%; max-width: 33.33333333333333%; width: 33.33333333333333% } .flex-col__5 { flex: 0 0 41.66666666666667%; max-width: 41.66666666666667%; width: 41.66666666666667% } .flex-col__6 { flex: 0 0 50%; max-width: 50%; width: 50% } .flex-col__7 { flex: 0 0 58.33333333333333%; max-width: 58.33333333333333%; width: 58.33333333333333% } .flex-col__8 { flex: 0 0 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667% } .flex-col__9 { flex: 0 0 75%; max-width: 75%; width: 75% } .flex-col__10 { flex: 0 0 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333% } .flex-col__11 { flex: 0 0 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667% } .flex-col__12 { flex: 0 0 100%; max-width: 100%; width: 100% } .nav_box{ font-size: 0; text-align: center; } .nav_box .nav_item{ display: inline-block; vertical-align: top; font-size: 14px; color: #333333; margin: 0 10px; } .nav_box .nav_item.on{ color: #f06b00; } @media screen and (max-width:1199px) { .flex-col__1--md { flex: 0 0 8.333333333333333%; max-width: 8.333333333333333%; width: 8.333333333333333% } .flex-col__2--md { flex: 0 0 16.66666666666667%; max-width: 16.66666666666667%; width: 16.66666666666667% } .flex-col__3--md { flex: 0 0 25%; max-width: 25%; width: 25% } .flex-col__4--md { flex: 0 0 33.33333333333333%; max-width: 33.33333333333333%; width: 33.33333333333333% } .flex-col__5--md { flex: 0 0 41.66666666666667%; max-width: 41.66666666666667%; width: 41.66666666666667% } .flex-col__6--md { flex: 0 0 50%; max-width: 50%; width: 50% } .flex-col__7--md { flex: 0 0 58.33333333333333%; max-width: 58.33333333333333%; width: 58.33333333333333% } .flex-col__8--md { flex: 0 0 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667% } .flex-col__9--md { flex: 0 0 75%; max-width: 75%; width: 75% } .flex-col__10--md { flex: 0 0 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333% } .flex-col__11--md { flex: 0 0 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667% } .flex-col__12--md { flex: 0 0 100%; max-width: 100%; width: 100% } } @media screen and (max-width:991px) { .flex-col__1--sm { flex: 0 0 8.333333333333333%; max-width: 8.333333333333333%; width: 8.333333333333333% } .flex-col__2--sm { flex: 0 0 16.66666666666667%; max-width: 16.66666666666667%; width: 16.66666666666667% } .flex-col__3--sm { flex: 0 0 25%; max-width: 25%; width: 25% } .flex-col__4--sm { flex: 0 0 33.33333333333333%; max-width: 33.33333333333333%; width: 33.33333333333333% } .flex-col__5--sm { flex: 0 0 41.66666666666667%; max-width: 41.66666666666667%; width: 41.66666666666667% } .flex-col__6--sm { flex: 0 0 50%; max-width: 50%; width: 50% } .flex-col__7--sm { flex: 0 0 58.33333333333333%; max-width: 58.33333333333333%; width: 58.33333333333333% } .flex-col__8--sm { flex: 0 0 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667% } .flex-col__9--sm { flex: 0 0 75%; max-width: 75%; width: 75% } .flex-col__10--sm { flex: 0 0 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333% } .flex-col__11--sm { flex: 0 0 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667% } .flex-col__12--sm { flex: 0 0 100%; max-width: 100%; width: 100% } } @media screen and (max-width:767px) { .flex-col__1--xs { flex: 0 0 8.333333333333333%; max-width: 8.333333333333333%; width: 8.333333333333333% } .flex-col__2--xs { flex: 0 0 16.66666666666667%; max-width: 16.66666666666667%; width: 16.66666666666667% } .flex-col__3--xs { flex: 0 0 25%; max-width: 25%; width: 25% } .flex-col__4--xs { flex: 0 0 33.33333333333333%; max-width: 33.33333333333333%; width: 33.33333333333333% } .flex-col__5--xs { flex: 0 0 41.66666666666667%; max-width: 41.66666666666667%; width: 41.66666666666667% } .flex-col__6--xs { flex: 0 0 50%; max-width: 50%; width: 50% } .flex-col__7--xs { flex: 0 0 58.33333333333333%; max-width: 58.33333333333333%; width: 58.33333333333333% } .flex-col__8--xs { flex: 0 0 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667% } .flex-col__9--xs { flex: 0 0 75%; max-width: 75%; width: 75% } .flex-col__10--xs { flex: 0 0 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333% } .flex-col__11--xs { flex: 0 0 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667% } .flex-col__12--xs { flex: 0 0 100%; max-width: 100%; width: 100% } } .flex-pd-lr { margin-right: -10px } .flex-pd-lr>.flex-col__1, .flex-pd-lr>.flex-col__10, .flex-pd-lr>.flex-col__11, .flex-pd-lr>.flex-col__12, .flex-pd-lr>.flex-col__2, .flex-pd-lr>.flex-col__3, .flex-pd-lr>.flex-col__4, .flex-pd-lr>.flex-col__5, .flex-pd-lr>.flex-col__6, .flex-pd-lr>.flex-col__7, .flex-pd-lr>.flex-col__8, .flex-pd-lr>.flex-col__9 { padding-right: 10px } body { padding-top: 72px } .header-logo { width: 150px } .header { position: fixed; font-family: Arial, Sans-serif; top: 0; left: 0; width: 100%; z-index: 99; background-color: rgba(24, 24, 24, .95) } .header-middle, .header-nav__item { position: relative } .header-nav__item--text { display: block; padding: 0 20px; height: 72px; line-height: 72px; color: #fff; font-size: 16px; font-weight: 300 } .header-nav__item .level2-nav { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: rgba(32, 33, 33, .8); display: none } .header-nav__item .level2-nav__item a { display: block; padding: 15px 25px; color: #fff; font-size: 16px; font-weight: 300; white-space: nowrap; border-bottom: 1px solid #656565 } .header-nav__item .level2-nav__item.active>a, .header-nav__item .level2-nav__item:hover>a { color: #fff; background-color: #ea5520 } .header-nav__item .level2-nav__item:last-child { margin-bottom: 0 } .header-nav__item .level2-nav__item:last-child a { border-bottom: 0 } .header-nav__item.active>a, .header-nav__item:hover>a { color: #ea5520; background-color: #202121 } .header-nav__item--active text { color: #ea5520 } .header-search { margin-left: 20px; color: #fff; cursor: pointer } .header .search { position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-color: #505050; padding: 8px 20px; border-radius: 2px; width: 70% } .header .search-icon { margin-right: 5px; padding: 0 10px } .header .search-middle { flex: 1 } .header .search-middle input { padding: 6px 10px; width: 450px; border: none; outline: 0; color: #969797; font-size: 16px; background-color: transparent } .header .search-middle input::-webkit-input-placeholder { color: #969797 } .header .search-middle input::-moz-placeholder { color: #969797 } .header .search-middle input:-moz-placeholder { color: #969797 } .header .search-middle input:-ms-input-placeholder { color: #969797 } .header .search-close { position: relative; width: 20px; height: 20px; cursor: pointer } .header .search-close::after, .header .search-close::before { content: ""; position: absolute; top: 50%; left: 50%; width: 1px; height: 100%; background-color: #969797; transform: translate(-50%, -50%) rotate(45deg) } .header .search-close::after { transform: translate(-50%, -50%) rotate(-45deg) } .header-zw { display: none; height: 72px; background-color: #000 } .advertisement-item { position: relative; height: 950px; overflow: hidden } .advertisement-item img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; max-width: initial; width: auto!important } .advertisement-item__content { position: absolute; top: 50%; transform: translateY(-50%) } .advertisement-item__content h4 { font-size: 32px } .advertisement-item__content div { margin-top: 20px; font-size: 18px } .is_all{ height: auto !important; } .is_long{ height: 570px !important; } @media screen and (max-width:1199px) { .is_long{ height: 490px !important; } .header, .header-zw { display: none } body { padding-top: 0 } .advertisement-item { height: auto } .advertisement-item img { position: relative; top: 0; left: 0; transform: translate(0, 0); height: auto; max-width: 100%; width: 100%!important } .advertisement-item__content h4 { font-size: 24px } .advertisement-item__content div { font-size: 14px } } .mobile-hd { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 50px; z-index: 999; padding: 0 20px; background-color: #fff; border-bottom: 1px solid #eee } .mobile-hd__logo { height: 35px } .mobile-hd__btn { position: relative; width: 30px; height: 24px; cursor: pointer } .mobile-hd__btn span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 2px; background-color: #595758 } .mobile-hd__btn span:first-child { margin-top: -10px } .mobile-hd__btn span:last-child { margin-top: 10px } .mobile-hd__btn--active span:first-child { margin-top: 0; transform: translate(-50%, -50%) rotate(45deg) } .mobile-hd__btn--active span:nth-child(2) { opacity: 0 } .mobile-hd__btn--active span:last-child { margin-top: 0; transform: translate(-50%, -50%) rotate(-45deg) } .mobile-hd__zw { display: none; height: 50px } .mobile-nav { display: none; position: fixed; top: 0; left: 0; z-index: 998; width: 100vw; height: 100vh; padding-top: 50px; background-color: #fff; overflow-y: auto } .mobile-nav__item { border-top: 1px solid #c8c8c8 } .mobile-nav__item a { padding: 8px 40px; display: block } .mobile-nav__item--text { position: relative; color: #595758; font-size: 18px } .mobile-nav__item--text span { width: 34px; height: 34px; position: absolute; top: 0; right: 20px } .mobile-nav__item--text span::after { content: ''; position: absolute; top: 50%; right: 50%; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg); border-top: 2px solid #211813; border-right: 2px solid #211813 } .mobile-nav__item .level2-nav { background-color: #d2d2d2 } .mobile-nav__item .level2-nav__item a { color: #666464 } .mobile-nav__item .level2-nav__item a:hover, .mobile-nav__item .level2-nav__item.active a { color: #ea5520 } .mobile-nav .active .mobile-nav__item--text span::after { transform: translateY(-50%) rotate(135deg) } .mobile-nav .active .level2-nav { display: block } @media screen and (max-width:1199px) { .mobile-hd__zw, .mobile-nav { display: block } .mobile-hd { display: flex } } .flex.footer-category__item--ul-li-a { display: flex!important } .footer-category__item--ul-li-a, .footer-copyright__href { display: inline-block; color: #818181 } .footer { position: relative; z-index: 2; background-color: #3c3d3d; padding: 50px 0 40px } .footer-category__item { font-size: 16px; margin-right: 100px; font-weight: 300 } .footer-category__item--title { color: #ddd; text-transform: uppercase } .footer-category__item--ul-li { margin-top: 20px } .footer-category__item:last-child { margin-right: 0 } .footer-copyright { margin-top: 60px; padding-top: 15px; border-top: 1px solid #7e7f7f; font-size: 16px; font-weight: 300 } .footer-copyright__text { color: #818181; margin-bottom: 10px; } .footer-copyright__right { text-align: right } .footer-copyright__href { position: relative; vertical-align: middle; padding: 0 10px } .footer-copyright__href::after { content: ''; position: absolute; right: 0; top: 0; height: 100%; width: 1px; background-color: #aaa; transform: rotate(15deg) } .footer-copyright__href:last-child { padding-right: 0; border-right: 0 } .footer-copyright__href:last-child::after { display: none } .share-url.flex { display: flex } @media screen and (max-width:1199px) { .footer { padding: 30px 0 } .footer-category { flex-wrap: wrap } .footer-category__item { padding: 15px 0; width: 100%; flex: 0 0 100%; border-bottom: 1px solid #626262 } .footer-category__item--title { position: relative; font-size: 24px } .footer-category__item--title::after, .footer-category__item--title::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; background-color: #fff } .footer-category__item--title::before { width: 2px; transform: translate(-4px, -50%) } .footer-category__item--title::after { height: 2px } .footer-category__item--ul { display: none; margin-top: 10px } .footer-category__item--ul-li { margin-top: 0 } .footer-category__item--ul-li-a { display: block; padding: 5px 0; font-size: 24px } .footer-copyright { margin-top: 30px; padding-top: 0; border-top: 0; font-size: 14px } .footer-copyright__right { text-align: left } .footer-copyright__href { border: none; padding: 0 10px 0 0 } } .search-hd { height: 77px; line-height: 77px; color: #3b3b3b; font-size: 17px; font-weight: 700; border-bottom: 1px solid #a0a0a0 } .search-bd { padding: 60px 0 } .search-bd__left { padding-right: 45px; font-weight: 700; font-size: 19px } .search-bd__left a { display: block; margin-bottom: 40px; color: #8d8d8d } .search-bd__left a.active { color: #f06b00 } .search-content { padding-left: 45px; border-left: 1px solid #a0a0a0 } .search-content__item { margin-bottom: 70px; font-size: 19px; line-height: 38px } .search-content__item--title { color: #8d8d8d; font-weight: 700; margin-bottom: 30px; line-height: 1; vertical-align: top; } .search-content__item--title.active { color: #ea5520 } .search-page { font-size: 34px } .search-page a { padding: 0 10px; color: #8d8d8d } @media screen and (max-width:991px) { .is_long{ height: 370px !important; } .search-hd { height: 50px; line-height: 50px; font-size: 16px } .search-bd { padding: 30px 0 } .search-bd__left { font-size: 14px; padding-right: 15px } .search-bd__left a { margin-bottom: 10px } .search-content { padding-left: 15px } .search-content__item { font-size: 14px; margin-bottom: 20px } .search-content__item--title { margin-bottom: 20px } .search-page { font-size: 14px } } .index .about { margin-top: 125px } .index .about-left { padding-right: 60px } .index .about-left__text { color: #696969; font-size: 16px; line-height: 30px; font-weight: 300 } .index .about-left__text:first-child { margin-bottom: 50px } .index .about-right__item { margin-bottom: 80px } .index .about-right__item--icon { height: 64px } .index .about-right__item--text { margin-top: 35px; color: #f06b00; font-size: 18px; font-weight: 300 } .index .news-box { padding: 81px 0; background-color: #f6f6f6 } .index .news-box__title { font-size: 22px; text-align: center; color: #333; font-weight: 300 } .index .news-box__wrap { margin-top: 50px; } @media screen and (max-width:1199px) { .index .about { margin-top: 65px; margin-bottom: 15px } } @media screen and (max-width:991px) { .index .about { margin-top: 35px; margin-bottom: 10px } .index .about-left { display: none } .index .about-right__item { margin-bottom: 40px } .index .about-right__item--text { margin-top: 15px; font-size: 18px } .index .news-box { padding: 30px 0 } } .solution .advertisement { height: 950px } .solution .advertisement>div { position: fixed } .solution .page-type { position: relative; z-index: 2; background-color: #3c3d3d } .solution .page-overview, .solution .page-solution { background-color: #fff; position: relative; z-index: 2 } .solution .page-type__item { padding: 40px; border-right: 3px solid #fff } .solution .page-type__item--photo img { height: 85px } .solution .page-type__item--title { margin-top: 40px; font-size: 20px; color: #fff; line-height: 1.5rem } .solution .page-type__item:first-child { border-left: 3px solid #fff } .solution .page-overview__title { color: #f06b00; font-size: 35px; font-weight: 400 } .solution .page-overview__content { margin-top: 30px; color: #696969; font-size: 16px; line-height: 1.5em } .solution .page-overview__ft { margin-top: 50px } .solution .page-overview__ft--item { padding: 0 50px } .solution .page-overview__ft--item-photo { height: 147px; line-height: 147px } .solution .page-overview__ft--item-text { margin-top: 25px; color: #ea5520; font-size: 22px } .solution .page-solution__title { margin-bottom: 40px; color: #898989; font-size: 20px } .solution .page-solution__item--thumbnail { width: 450px; height: 300px; overflow: hidden } .solution .page-secure3__bd--image img, .solution .page-sercure2__photo--item img { width: 100% } .solution .page-solution__item--info-title { color: #f06b00; font-size: 18px; font-weight: 400 } .solution .page-solution__item--info-content { margin-top: 20px; color: #696969; line-height: 30px; font-size: 16px; letter-spacing: -1px; font-weight: 300 } .solution .page-solution__item--info-href { display: inline-block; vertical-align: middle; margin-top: 30px; padding: 10px 30px; color: #fff; font-size: 16px; font-weight: 400; background-color: #f06b00; border-radius: 25px } .solution .page-solution__item:nth-child(odd) { background-color: #e8e8e8 } .solution .page-solution__item:nth-child(even) { padding: 20px 0 } .solution .page-sercure2__box p { margin-bottom: 30px; color: #898989; font-size: 16px; line-height: 30px } .solution .page-sercure2__box p:last-child { margin-bottom: 0 } /*.solution .page-sercure2__photo{margin-top:40px}*/ .solution .page-sercure2__photo--item { margin-bottom: 20px } .solution .page-sercure2__photo--item:last-child { margin-bottom: 0 } .solution .page-secure3__hd { padding: 40px 0 60px; color: #c9caca; background-color: #3c3d3d } .solution .page-secure3__hd--title { font-size: 50px; line-height: 1 } .solution .page-secure3__hd--content { margin-top: 60px; font-size: 20px; line-height: 40px } .solution .page-secure3__bd--content { margin: 40px 0; color: #221815; font-size: 20px; line-height: 40px } .solution .page-secure3__bd--wrap { margin: 0 -7.5px; overflow: hidden } .solution .page-secure3__bd--photo { width: 50%; float: left; padding: 0 7.5px; height: 348px; overflow: hidden } .solution .page-secure3__bd--title { margin-top: 40px; color: #ea5520; font-size: 40px; line-height: 65px } .solution .page-secure3__section--left { padding-left: 40px } .solution .page-secure3__section--title { color: #ea5520; font-size: 38px; line-height: .9 } .solution .page-secure3__section--smail { margin-top: 40px; color: #3c3d3d; font-size: 34px } .solution .page-secure3__section--function { margin-top: 60px; color: #ea5520; font-size: 34px; font-weight: 700 } .solution .page-secure3__section ul { margin-top: 30px } .solution .page-secure3__section ul li { position: relative; margin-bottom: 10px; padding-left: 30px; color: #ea5520; font-size: 20px } .solution .page-secure3__section ul li::before { content: ''; position: absolute; top: 5px; left: 0; width: 10px; height: 10px; background-color: #ea5520; transform: rotate(45deg) } .solution .page-secure3__section ul li:last-child { margin-bottom: 0 } .solution .page-secure3__section.bg1 { background-image: url(../images/secure-bg1.png); background-repeat: no-repeat; background-position: right center; background-size: cover } .solution .page-secure3__section:nth-child(odd) { background-color: #cdcdcd } .solution .page-smart2__guide--item-box { height: 75px; line-height: 75px } .solution .page-smart2__guide--item-content { margin-top: 30px; color: #ea5520; font-size: 22px } .solution .page-smart2__guide .inline-block { padding: 0 50px } .solution .page-smart2__guide .inline-block .page-smart2__guide--item-content { color: #332c2b; font-size: 14px } .solution .page-smart2__guide--xs { position: relative; height: 140px } .solution .page-smart2__guide--xs span, .solution .page-smart2__guide--xs::after, .solution .page-smart2__guide--xs::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 2px; background-color: #f5dabb } .solution .page-smart2__guide--xs::before { width: 65px } .solution .page-smart2__guide--xs::after { height: 65px } .solution .page-smart2__guide--xs span { width: 15px; height: 15px; background-color: #fff; z-index: 2 } .solution .page-smart2__photo { margin-right: -10px; overflow: hidden } .solution .page-smart2__photo--item { padding-right: 10px; float: left; width: 100%; height: 280px; overflow: hidden; margin-bottom: 10px; } .photo-item__box .suspen{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all .5s; z-index: 9; } .photo-item__box .suspen:hover{ background-color: rgba(0,0,0,.2); } .index .news-box__title{ font-size: 24px; color: #333333; font-weight: bold; margin-bottom: 10px; } .index .news-box__detail{ font-size: 16px; color: #666666; line-height: 1.4; text-align: center; margin-bottom: 30px; } .solution .page-smart2__photo--item:nth-child(2n) { margin-right: 0; } .solution .page-smart2__photo--item:last-child { margin-right: 0; } .solution .page-smart2__photo--item img { width: 100% } .solution .page-smart2__photo .smailPhoto { width: 36.2% } .solution .page-smart2__photo .mediumPhoto { width: 50% } .solution .page-smart2__photo .bigPhoto { width: 63.8% } .solution .page-election2__photo { overflow: hidden } .solution .page-election2__photo--left { margin-right: 10px } .solution .page-election2__photo--left .photo-item { width: 389px } .solution .page-election2__photo--right .photo-item:first-child { margin-right: 10px; width: 324px } @media screen and (max-width:1199px) { .solution .page-smart2__photo--item { height: 240px; } .solution .advertisement { height: auto } .solution .advertisement>div { position: static } .solution .page-election2__photo--left .photo-item { width: 319px } .solution .page-election2__photo--right .photo-item:first-child { width: 267px } } @media screen and (max-width:991px) { .solution .page-smart2__photo--item { height: 180px; } .solution .page-overview__ft--item-photo img, .solution .page-smart2__guide--item-box img { max-height: 100% } .solution .page-type { margin-top: 0 } .solution .page-type .container { padding: 0; width: 100% } .solution .page-type__item { padding: 20px; border-top: 6px solid #fff } .solution .page-type__item--photo img { height: 75px } .solution .page-type__item--title { margin-top: 20px; font-size: 16px; line-height: 1.4 } .solution .page-type__item:nth-child(odd) { border-left: 0; border-right: 3px solid #fff } .solution .page-type__item:nth-child(even) { border-left: 3px solid #fff; border-right: 0 } .solution .page-overview__title { font-size: 36px } .solution .page-overview__content { margin-top: 20px; font-size: 18px; line-height: 1.4em } .solution .page-overview__ft { margin-top: 40px } .solution .page-overview__ft--item { padding: 0 20px } .solution .page-overview__ft--item-photo { height: 100px; line-height: 100px } .solution .page-overview__ft--item-text { margin-top: 20px; font-size: 16px } .solution .page-solution .container { width: 100%; padding: 0 } .solution .page-solution__title { margin-bottom: 30px; font-size: 36px } .solution .page-solution__item { margin-top: 0 } .solution .page-solution__item--thumbnail { width: 45%; height: auto } .solution .page-solution__item--thumbnail img { height: auto } .solution .page-solution__item--info-title { font-size: 18px } .solution .page-solution__item--info-content { margin-top: 20px; font-size: 16px; line-height: 1.4; height: 4.2em; overflow: hidden } .solution .page-solution__item--info-href { margin-top: 20px; padding: 10px 20px; font-size: 14px } .solution .page-sercure2__box, .solution .page-solution__item:nth-child(even) { padding: 0 } .solution .page-sercure2__box p { margin-bottom: 20px; font-size: 16px; line-height: 1.4 } .solution .page-sercure2__box p:last-child { margin-bottom: 0 } .solution .page-sercure2__photo { margin-top: 40px } .solution .page-sercure2__photo--item { margin-bottom: 20px } .solution .page-sercure2__photo--item img { width: 100% } .solution .page-sercure2__photo--item:last-child { margin-bottom: 0 } .solution .page-secure3__hd { padding: 40px 0; background-color: #fff } .solution .page-secure3__hd--title { font-size: 36px; color: #ea5520 } .solution .page-secure3__hd--content { margin-top: 30px; font-size: 18px; line-height: 1.4; color: #221816 } .solution .page-secure3__bd--content { margin: 30px 0; font-size: 18px; line-height: 1.4 } .solution .page-secure3__bd--title { margin-top: 40px; font-size: 40px } .solution .page-secure3__section--left { padding-left: 0 } .solution .page-secure3__section--title { font-size: 36px } .solution .page-secure3__section--smail { margin-top: 20px; font-size: 24px } .solution .page-secure3__section--function { margin-top: 20px; font-size: 20px } .solution .page-secure3__section ul { margin-top: 20px } .solution .page-secure3__section ul li { padding-left: 25px; font-size: 20px } .solution .page-secure3__section ul li::before { top: 5px; width: 10px; height: 10px } .solution .page-secure3__section:nth-child(odd) img { margin-top: 20px } .solution .page-smart2__guide--item-box { height: 50px; line-height: 50px } .solution .page-smart2__guide--item-content { margin-top: 15px; font-size: 16px } .solution .page-smart2__guide .inline-block { padding: 0 20px } .solution .page-smart2__guide--xs { height: 60px } .solution .page-smart2__guide--xs::before { width: 30px } .solution .page-smart2__guide--xs::after { height: 30px } .solution .page-smart2__guide--xs span { width: 5px; height: 5px } .solution .page-election2__photo .photo-item { overflow: hidden } .solution .page-election2__photo .photo-item img { object-fit: cover; height: 200px } .solution .page-election2__photo--left { margin-right: 0 } .solution .page-election2__photo--left .photo-item { width: 100% } .solution .page-election2__photo--right .photo-item:first-child { margin-right: 0; width: 100% } } @media screen and (max-width:767px) { .index .news-box__detail{ text-align: left; } .repair-section__map{ display: none; } .footer-category__item--title { font-size: 18px; } .footer-category__item--ul-li-a{ font-size: 16px; } .index .news-box__wrap{ margin-top: 30px; } .page-server__column--item-photo img{ height: 40px !important; } .process-section{ border-left: 0; } .banner-content--title{ font-weight: bold; } .solution .page-overview__title { font-size: 28px } .solution .page-solution__item--thumbnail { width: 50% } .solution .page-solution__item--info { padding: 0 20px } .solution .page-solution__item--info-title { font-size: 16px } .solution .page-solution__item--info-content { display: none } .solution .page-solution__item--info-href { margin-top: 10px; padding: 10px 20px; font-size: 12px } .solution .page-secure3__hd { padding-bottom: 0 } .solution .page-secure3__section--title { font-size: 24px } .solution .page-secure3__section--smail { font-size: 18px } .solution .page-secure3__section--function { font-size: 16px } .solution .page-secure3__section ul { margin-top: 20px } .solution .page-secure3__section ul li { padding-left: 15px; font-size: 16px } .solution .page-secure3__section ul li::before { top: 4px; width: 8px; height: 8px } } @media screen and (max-width:414px) { .solution .page-smart2__photo--item { height: 94px; } .is_long{ height: 198px !important; } } @media screen and (max-width:375px) { .solution .page-smart2__photo--item { height: 80px; } .is_long{ height: 170px !important; } } @media screen and (max-width:414px) { .solution .page-smart2__photo--item { height: 94px; } } @media screen and (max-width:320px) { .solution .page-smart2__photo--item { height: 69px; } .is_long{ height: 148px !important; } } .page-detail { padding: 30px 0 } .page-detail__content { margin-top: 30px; line-height: 1.5rem; color: #696969; font-size: 16px; font-weight: 300 } .page-detail__content p { margin-bottom: 15px } .page-detail__content ul { color: #ea5520 } .page-detail__content ul li { margin-bottom: 20px; font-weight: 700 } .page-detail__content ul li::before { content: ''; margin-right: 15px; display: inline-block; width: 10px; height: 10px; background-color: #ea5520; border-radius: 50% } .page-detail__title { color: #f06b00; font-size: 36px } .page-detail__image { margin-bottom: 20px; display: block; position: relative } .page-detail__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .6); opacity: 0 } .page-detail__image:hover .page-detail__mask { opacity: 1 } .page-detail__image--text { position: absolute; padding: 10px; top: 50%; left: 50%; color: #fff; font-size: 18px; transform: translate(-50%, -50%) } @media screen and (max-width:1199px) { .page-detail { padding: 30px 0 } .page-detail__title { font-size: 24px } .page-detail__content { margin-top: 30px } .page-detail__content p { margin-bottom: 20px; font-size: 14px; line-height: 1.6 } } @media screen and (max-width:991px) { .page-detail { padding: 20px 0 } .page-detail__content { margin-top: 20px } .page-detail__content p { margin-bottom: 10px } } .case-item { margin-bottom: 30px; position: relative } .case-item__href { display: block } .case-item__title { position: absolute; bottom: 0; left: 0; padding: 32px 50px; width: 100%; color: #fff; font-size: 35px } .case-main { background-color: #f6f6f6 } .case-main__hd { padding: 40px 0; color: #f06b00; font-size: 24px; font-weight: 400; background-color: #e5e5e5 } .case-main__item--box { font-size: 16px; text-align: center; background-color: #fff } .case-main__item--name { font-size: 18px; line-height: 1.5rem } .case-main__item:nth-child(2n) .case-main__item--box, .case-main__item:nth-child(2n+1) .case-main__item--box { color: #fff; background-color: #3c3d3d } .case-main__item:nth-child(4n) .case-main__item--box, .case-main__item:nth-child(4n+1) .case-main__item--box { color: #696969; background-color: #fff } .case-main__item--box:hover { color: #ea5520!important } @media screen and (max-width:991px) { .case-main__hd { padding: 20px 0 } } .case-detail { padding: 60px 0 } .case-detail h3 { font-size: 35px; font-weight: 400; color: #333 } .case-detail__content { margin-top: 30px; color: #696969; font-size: 16px; line-height: 1.5em } .case-detail__content p { margin-bottom: 15px } @media screen and (max-width:991px) { .case-detail { padding: 30px 0 } .case-detail h3 { font-size: 24px; font-weight: 400 } .case-detail__content { margin-top: 20px } } .page-server__column { margin-top: 80px } .page-server__column--item { width: 20% } .page-server__column--item-photo { height: 64px; line-height: 64px } .page-server__column--item-text { margin-top: 30px; color: #f06b00; font-size: 18px; font-weight: 300 } .page-server__title { color: #f06b00; font-size: 30px; font-weight: 300 } .page-server__content { margin-top: 40px; color: #696969; font-size: 16px; line-height: 1.5em; font-weight: 300 } .server-title { color: #fff; font-size: 64px; background-color: #e5e5e5; height: 300px; line-height: 450px; background-size: cover; font-weight: 300; text-align: center; } .server-title.maintenance-bg { color: #fff; background-image: url(../images/Maintenance_02.jpg) } .server-title.product-bg { color: #fff; background-image: url(../images/Customization-Service_02.jpg) } .server-title.downfile-bg { color: #fff; background-image: url(../images/Download-Center_02.jpg) } .product-section__title { color: #f06b00; font-size: 18px; line-height: 30px; text-align: center; font-weight: 400 } .product-section__item { padding: 40px 0; overflow: hidden } .product-section__item--left { float: left; width: 25%; padding-top: 100px; color: #f06b00; font-size: 22px; font-weight: 400 } .product-section__item--right { float: left; width: 75% } .product-section__item:nth-child(even) { background-color: #e8e8e8 } .product .owl-nav { font-size: 24px } .product .owl-nav button { outline: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 60px; line-height: 60px; text-align: center; color: #fff; border-radius: 50%; opacity: .6 } .product .owl-nav button:hover { opacity: 1 } .product .owl-nav button.owl-prev { left: 0; font-size: 35px; font-weight: 300; color: #696969 } .product .owl-nav button.owl-next { right: 0; font-size: 35px; font-weight: 300; color: #696969 } .product-item__thumbnail { height: 130px; line-height: 130px } .product-item__thumbnail img { margin: 0 auto; width: auto!important; max-height: 130px } .product-item__name { margin-top: 50px; color: #696969; font-size: 16px; font-weight: 300 } .product-item:hover .product-item__name { color: #ea5520 } .repair-section__filter--name { color: #f06b00; font-size: 18px; font-weight: 400 } .repair-section__filter--select { margin-top: 40px; width: 100%; padding: 10px 15px; color: #b1b1b1; border: 1px solid #b1b1b1; outline: 0 } .repair-section__map { margin-top: 40px } .m-repair-section{ display: none; } .m-repair-section .drop-down{ padding: 0 15px; display: none; } .m-repair-section .name{ font-size: 18px; color: #333333; font-weight: bold; line-height: 50px; border-bottom: 1px solid #aaa; } .m-repair-section .name2{ font-size: 18px; color: #333333; line-height: 40px; border-bottom: 1px dashed #aaa; } .m-repair-section .drop-down2{ display: none; } .m-repair-section .drop-down3{ display: none; } .m-repair-section .name3{ font-size: 16px; color: #333333; line-height: 40px; padding: 0 15px; border-bottom: 1px dashed #eee; } .m-repair-section .words{ font-size: 14px; color: #333; line-height: 24px; padding: 10px 0; border-bottom: 1px dashed #eee; } .m-repair-section .drop-down3 .words{ padding: 10px 15px; } .download-section__item--hd { padding: 40px 0; color: #ea5520; font-size: 24px; background-color: #e5e5e5; font-weight: 400; } .download-section__item--box { padding: 40px 0 } .downfile-item { padding: 10px 20px; border-bottom: 1px solid #8c8c8c; cursor: pointer; } .downfile-item__content { width: 0 } .downfile-item__name { font-size: 16px; font-weight: 400 } .downfile-item__intro { margin-top: 5px; font-size: 16px; font-weight: 300; color: #696969 } .after-item__content, .guide-item__content { margin-top: 20px } .guide-item { margin-bottom: 40px } .guide-item__title { color: #ea5520; font-size: 30px } .guide-item__content p { margin-bottom: 20px; color: #332c2b; font-size: 20px; line-height: 40px } .guide-item:last-child, .guide-item__content p:last-child { margin-bottom: 0 } .guide-item__good a { margin-right: 20px; padding: 0 20px 0 60px; display: inline-block; border: 1px solid #322c2b; border-radius: 5px; width: 130px; height: 50px; line-height: 50px; color: #322c2b; font-size: 30px; text-align: center; background: 10px center no-repeat } .guide-item__good a:first-child, .guide-item__good a:last-child { background-image: url(../images/4-4_03.png) } .after-item { margin-bottom: 40px } .after-item__title { color: #ea5520; font-size: 30px } .after-item__content p { margin-bottom: 20px; color: #332c2b; font-size: 20px; line-height: 40px } .after-item:last-child, .after-item__content p:last-child { margin-bottom: 0 } .after-process { position: relative; margin-top: 40px; overflow: hidden } .after-process::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; border-bottom: 4px dotted #dadada } .after-process__item { position: relative; float: left; width: 25% } .after-process__item--box { margin: 0 auto; width: 170px; padding: 25px 0; color: #ea5520; border: 2px solid #dadada; border-radius: 10px; text-align: center; background-color: #fff } .after-process__item--number { font-size: 30px } .after-process__item--text { margin-top: 20px; font-size: 20px } @media screen and (max-width:991px) { .server-title { padding: 30% 0 10px; color: #d0d0d0; font-size: 24px; line-height: 1.4; background-color: #e5e5e5 } .page-server__column { margin-top: 50px } .page-server__column--item-photo img { height: 80% } .page-server__column--item-text { margin-top: 20px; font-size: 14px } .product-section__title { text-align: left } .product-section__item { padding: 30px 0 } .product-section__item--left, .product-section__item--right { width: 100% } .product-section__item--left { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #b0b0b0 } .product-item__name { margin-top: 20px } .repair-section__filter--name { font-size: 16px; height: 2em } .repair-section__filter--select, .repair-section__map { margin-top: 30px } .download-section__item { margin-bottom: 40px } .download-item, .guide-item { margin-bottom: 30px } .download-section__item--title { font-size: 24px } .download-section__item--wrap { margin-top: 40px } .download-item { display: block; text-align: center } .download-item__photo { width: 80px } .download-item__name { margin-top: 15px; font-size: 14px } .guide-item__title { font-size: 24px } .guide-item__content { margin-top: 10px } .guide-item__content p { margin-bottom: 10px; font-size: 16px; line-height: 1.4 } .after-item { margin-bottom: 60px } .after-process { position: relative; margin-top: 30px } .after-process::before { display: none } .after-process__item { width: 50%; margin-bottom: 30px } .after-process__item--number { font-size: 30px } .after-process__item--text { margin-top: 20px; font-size: 20px } .after-process__item:last-child, .after-process__item:nth-last-child(2) { margin-bottom: 0 } } @media screen and (max-width:767px) { .after-process__item { width: 50%; margin-bottom: 30px } .after-process__item--box { width: 120px } .after-process__item--number { font-size: 24px } .after-process__item--text { margin-top: 15px; font-size: 16px } .m-repair-section{ display: block; } } .down-sort a { color: #696969; font-size: 18px; font-weight: 400 } .email-item { position: absolute; width: 17%; top: 0; left: 0; cursor: pointer } .email-item div { padding-bottom: 10% } .email-item.united { top: 65%; left: 29% } .email-item.shenzhen { top: 15.5%; left: 44% } .email-item.belarus { top: 19.5%; left: 9% } .email-item.russia { top: 14.5%; left: 76% } .email-item.nigeria { top: 84.5%; left: 36% } .email-item.lndia { top: 72%; left: 13% } .news .page-box { padding-bottom: 0 } .news-item { margin-bottom: 24px } .news-item__box { padding: 25px } .news-item__category { color: #ea5520; font-size: 16px; margin-bottom: 10px } .news-item__date { font-size: 14px; font-weight: 300 } .news-item__title { margin-top: 10px; font-size: 18px; line-height: 1.5em; font-weight: 300 } .news-item__thumbnail { position: relative; width: 50%; max-height: 280px; overflow: hidden } .news-item__thumbnail img { width: 100%; height: 100%; object-fit: cover; } .news-item__thumbnail .img-2{ position: absolute; top: 0; left: 0; z-index: 2; } .news-item__thumbnail::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-color: rgba(0, 0, 0, .4); background-size: 50px 50px; background-position: center; opacity: 0; transition: all .5s ease } .news-item__icon { font-size: 0 } .detail-hd, .detail-title { font-size: 22px; color: #ea5520 } .news-item__icon span { margin-right: 5px; opacity: 0 } .my-show, .news-item:hover .news-item__thumbnail::after, .news-item:hover span { opacity: 1 } .news-item__icon span:last-child { margin-right: 0 } .news-item:hover { cursor: pointer; box-shadow: 0 2px 5px #ccc } .news-item:hover img { transform: scale(1.1) } .news-item--white { color: #696969; background-color: #fff } .news-item--white span.iconfont { color: #3c3d3d } .news-item--black { color: #fff; background-color: #3c3d3d } .news-item--black span.iconfont { color: #fff } .detail-hd { margin-top: 40px; padding: 40px 0; background-color: #e5e5e5 } .detail-title { font-family: 'Adobe 榛戜綋 Std' } .detail-content, .detail-date { font-size: 16px; line-height: 30px; font-family: 'Adobe 榛戜綋 Std' } .detail-date { margin-top: 30px; color: #ea5520 } .detail-content { color: #898989 } .detail-content p { margin-top: 60px } .detail-more { margin-top: 40px; text-align: center } .detail-more a { margin: 0 auto; display: block; width: 18px; height: 18px; border-top: 4px solid #ea5520; border-right: 4px solid #ea5520; transform: rotate(-45deg) } .page-news .news-box { padding: 24px 0; background-color: #f6f6f6 } .page-news__title { padding: 40px; color: #f06b00; font-size: 24px; background-color: #e5e5e5; font-weight: 400 } @media screen and (max-width:1199px) { .news-item { margin-bottom: 15px } .news-item__box { padding: 15px } .news-item__title { font-size: 16px; line-height: 1.4 } .page-news .news-box { padding: 30px 0; background-color: #f6f6f6 } .page-news__title { padding: 20px 0 } .detail-date { margin-top: 15px } .detail-content P { margin-top: 15px; color: #565656 } .detail-more { margin-top: 30px } } .news-detail__hd { font-size: 22px; border-bottom: 1px solid #959595 } .news-detail__title { font-size: 26px; font-weight: 600; color: #333 } .news-detail__date { color: #787878; font-size: 16px; font-weight: 300 } .news-detail__content { padding: 40px 0; line-height: 1.6 } .news-detail__content p { color: #333; font-size: 18px; margin-bottom: 15px; font-weight: 300 } @media screen and (max-width:1199px) { .news-detail__content { padding: 30px 0; font-size: 16px } .news-detail__content p { font-size: 14px } } .page-about__content { color: #898989!important; } .page-about__content p { color: #898989; margin-bottom: 15px } .process-title { color: #f06b00; font-size: 24px; font-weight: 400 } .process-move { position: absolute; top: 50%; left: 0; transform: translate(-41px, -50%); width: 20px; height: 20px; background-color: #f06b00; border-radius: 50%; box-shadow: 0 0 0 4px #f4aa8f; cursor: pointer } .process-move::after { content: ''; position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; transform: translate(-50%, -70%) rotate(45deg); border-right: 2px solid #fff; border-bottom: 2px solid #fff } .process-section { margin-top: 60px; padding-left: 30px; border-left: 2px solid #f06b00; } .process-section__item { padding-top: 30px; padding-bottom: 150px } .process-section__item--hd { position: relative; color: #ea5520 } .process-section__item--date { font-size: 30px; font-weight: 400; line-height: 1; color: #333; margin-bottom: 10px } .process-section__item--intro { font-size: 26px; font-weight: 300; line-height: .8; color: #333 } .process-section__item--bd { margin-top: 30px; padding-left: 150px } .process-section__item ul { color: #333; font-size: 16px; line-height: 30px; font-weight: 300 } .process-section__item ul li { position: relative } .process-section__item ul li::before { content: ''; position: absolute; top: 0; left: 0; transform: translate(-20px, 10px); width: 8px; height: 8px; background-color: #ea5520; border-radius: 50% } .process-section__item--photo { margin-top: 20px } .process-hd { padding-top: 30px } .cooperation-hd { color: #f06b00; font-size: 24px; font-weight: 400 } .cooperation-photo { margin-top: 30px; margin-right: -15px } .cooperation-photo__item { margin-bottom: 15px; padding-right: 15px; float: left; width: 25% } .cooperation-photo__item--box { overflow: hidden; height: 110px } .cooperation-photo__item img { width: 100%; max-height: 100% } .cooperation-photo__item:hover img { transform: scale(1.1) } .cooperation-content { margin-top: 30px; color: #898989; font-size: 20px; line-height: 40px } .process-box { padding: 0 170px } .m-img { display: none; } @media screen and (max-width:1199px) { .cooperation-photo__item { width: 33.33% } .cooperation-photo__item--box { height: 90px } .process-box { padding: 0 } } @media screen and (max-width:991px) { .page-about__content p { color: #898989; line-height: 1.4; font-size: 16px; margin-bottom: 20px } .process-move { display: none } .process-section { margin-top: 30px; padding-left: 0; border-left: 0; } .process-section__item { padding-top: 0; padding-bottom: 30px } .process-section__item--hd::after { transform: translate(-31px, -50%) } .process-section__item--bd { padding-left: 30px } .process-section__item--date { font-size: 24px } .process-section__item--intro { font-size: 16px } .cooperation-photo { margin-right: -5px } .cooperation-photo__item { margin-bottom: 5px; padding-right: 5px; width: 50% } .cooperation-photo__item--box { height: 80px } .cooperation-content { margin-top: 30px; font-size: 16px; line-height: 1.4 } } .location, .location-mask { top: 0; left: 0; width: 100%; height: 100% } .contact .banner { position: fixed; left: 0; width: 100% } .contact-item { margin-bottom: 30px } .contact-item:last-child { margin-bottom: 0 } .contact-item__name { color: #f06b00; font-size: 16px; font-weight: 300 } .contact-item__box { line-height: 1.6; font-size: 16px; font-weight: 300; color: #333 } .page-contact { position: relative } .page-contact__left { font-size: 15px; line-height: 28px } .page-contact__left--address { margin-bottom: 15px; padding: 0 15px 15px; color: #ea5520; border-bottom: 1px solid #c9caca } .page-contact__left--text { padding: 0 15px } .page-contact__form--item { margin-bottom: 40px } .page-contact__form--item-name { color: #f06b00; font-size: 18px; font-weight: 400 } .page-contact__form--item-input { margin-top: 15px } .page-contact__form--item-input input, .page-contact__form--item-input select, .page-contact__form--item-input textarea { min-height: 40px; padding: 10px; border: none; outline: 0; width: 100%; background-color: #efefef } .page-contact__form--item-input textarea { resize: none; min-height: 180px } .page-contact__form--item:last-child { margin-bottom: 0 } .page-contact__form--ft button { font-size: 16px; font-weight: 400; padding: 12px 20px; color: #fff; background-color: #f06b00; border: none; outline: 0 } .jjfa-page3-hd, .main-crumbs { border-bottom: 1px solid #a0a0a0 } .page-contact__form--ft p { margin-top: 30px; color: #696969; font-size: 16px; font-weight: 300 } .page-contact__moblie--address { display: none } @media screen and (max-width:1199px) { .page-contact__form--item { margin-bottom: 20px } .page-contact__moblie--address { display: block; padding-top: 15px; font-size: 18px; color: #ea5520; line-height: 1.4; border-top: 1px solid #c9caca } } .location { position: fixed; z-index: 99 } .location-mask { position: fixed; background-color: rgba(0, 0, 0, .6) } .location-main { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px; overflow: hidden; width: 70% } .location-main__hd { padding: 15px; background-color: #f5f5f5 } .location-main__close { position: relative; width: 20px; height: 20px; transform: rotate(45deg); cursor: pointer } .location-main__close::after, .location-main__close::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: #747474 } .location-main__close::before { width: 2px } .location-main__close::after { height: 2px } .location-main__title { font-size: 32px } .location-main__intro { margin-top: 10px; font-size: 18px } .location-main__box { margin-top: 10px; overflow: hidden } .location-item { float: left; padding: 10px; width: 20% } .location-item__name { padding: 10px; color: #757575; background-color: #eee; cursor: pointer } .location-item__name:hover { color: #fff; background-color: #ea5520 } @media screen and (max-width:1199px) { .location-main { width: 90% } .location-item { width: 33.333333% } .page-box { padding: 40px 0 } } @media screen and (max-width:991px) { .location-main { width: 95% } .location-item { width: 50% } .location-main__box { max-height: 300px; overflow-y: auto } } body { font-family: Arial, Sans-serif; font-weight: 300; color: #696969; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } a { color: #000 } a:active, a:hover { text-decoration: none; color: #f06b00 } a:focus { color: none; text-decoration: none } .image-full { width: 100%; height: 100%; object-fit: cover } .page-box { padding: 40px 0 } @media screen and (max-width:991px) { .page-box { padding: 30px 0 } } @media screen and (max-width:767px) { .page-box { padding: 30px 0 } .p-img { display: none; } .m-img { display: block; } } .text-wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .margin-reset { margin: 0!important } .margin-top-reset { margin-top: 0!important } .margin-bottom-reset { margin-bottom: 0!important } .margin-left-reset { margin-left: 0!important } .margin-right-reset { margin-right: 0!important } .padding-reset { padding: 0!important } .padding-top-reset { padding-top: 0!important } .padding-bottom-reset { padding-bottom: 0!important } .padding-left-reset { padding-left: 0!important } .padding-left5, .padding-right5, .pl5 { padding-left: 5px } .padding-right-reset { padding-right: 0!important } .section-title { font-size: 35px; line-height: 48px; color: #f06b00; font-weight: 400 } .section-photo { margin-top: 40px } .section-content { margin-top: 20px; color: #696969; font-size: 16px; line-height: 1.5em; font-weight: 300 } .my-show { visibility: inherit } .my-hide { opacity: 0; visibility: hidden } @media screen and (max-width:991px) { .section-title { font-size: 24px; line-height: 1.4 } .section-photo { margin-top: 20px } .section-content { margin-top: 20px; font-size: 18px; line-height: 1.4 } } .inline-block { display: inline-block } .text-white { color: #fff } .text-gray { color: #65696e } .text-mainColor { color: #ea5520 } .text-darkBlue { color: #185369 } .photo-item__box { position: relative; margin-bottom: 10px; overflow: hidden } .photo-item__box:hover { box-shadow: 2px 2px 5px #bbb } .photo-item__box:hover img { transform: scale(1.1) } .photo-item img { width: 100% } .photo-item__content { font-size: 35px; font-weight: 300; color: #fff; z-index: 10; } .photo-item .top-left { position: absolute; top: 30px; left: 30px } .photo-item .top-right { position: absolute; top: 30px; right: 30px } .photo-item .bottom-left { position: absolute; bottom: 30px; left: 30px } .photo-item .bottom-right { position: absolute; bottom: 30px; right: 30px } @media screen and (max-width:991px) { .photo-item__content { font-size: 18px } .photo-item .top-left { top: 15px; left: 15px } .photo-item .top-right { top: 15px; right: 15px } .photo-item .bottom-left { bottom: 15px; left: 15px } .photo-item .bottom-right { bottom: 15px; right: 15px } } @media screen and (max-width:767px) { .photo-item__content { font-size: 14px } } .iconfont { vertical-align: middle } .bg-white { background-color: #fff } .bg-dark { background-color: #3c3d3d } .no-margin { margin: 0!important } .ml5, .mlr5 { margin-left: 5px } .mlr5, .mr5 { margin-right: 5px } .mt5, .mtb5 { margin-top: 5px } .mb5, .mtb5 { margin-bottom: 5px } .mg5 { margin: 5px } .ml10, .mlr10 { margin-left: 10px } .mlr10, .mr10 { margin-right: 10px } .mt10, .mtb10 { margin-top: 10px } .mb10, .mtb10 { margin-bottom: 10px } .mg10 { margin: 10px } .ml20, .mlr20 { margin-left: 20px } .mlr20, .mr20 { margin-right: 20px } .mt20, .mtb20 { margin-top: 20px } .mb18 { margin-bottom: 18px } .mb20, .mtb20 { margin-bottom: 20px } .mg20 { margin: 20px } .ml30, .mlr30 { margin-left: 30px } .mlr30, .mr30 { margin-right: 30px } .mt30, .mtb30 { margin-top: 30px } .mb30, .mtb30 { margin-bottom: 30px } .mg30 { margin: 30px } .ml40, .mlr40 { margin-left: 40px } .mlr40, .mr40 { margin-right: 40px } .mt40, .mtb40 { margin-top: 40px } .mb40, .mtb40 { margin-bottom: 40px } .mg40 { margin: 40px } .pd5 { padding: 5px } .pt5 { padding-top: 5px } .pt10, .ptb10 { padding-top: 10px } .pr5 { padding-right: 5px } .plr10, .pr10 { padding-right: 10px } .pb5 { padding-bottom: 5px } .pb10, .ptb10 { padding-bottom: 10px } .pl10, .plr10 { padding-left: 10px } .plr5 { margin-left: 5px; margin-right: 5px } .ptb5 { margin-top: 5px; margin-bottom: 5px } .pd10 { padding: 10px } .pt18 { padding-top: 18px } .pd20 { padding: 20px } .pd25 { padding: 25px } .pl20, .plr20 { padding-left: 20px } .plr20, .pr20 { padding-right: 20px } .pt20, .ptb20 { padding-top: 20px } .pb20, .ptb20 { padding-bottom: 20px } .pl30, .plr30 { padding-left: 30px } .plr30, .pr30 { padding-right: 30px } .pt30, .ptb30 { padding-top: 30px } .pb30, .ptb30 { padding-bottom: 30px } .pd30 { padding: 30px } .pl40, .plr40 { padding-left: 40px } .plr40, .pr40 { padding-right: 40px } .pt40, .ptb40 { padding-top: 40px } .pb40, .ptb40 { padding-bottom: 40px } .pd40 { padding: 40px } .main-crumbs { color: #3b3c3c; font-size: 18px } .main-crumbs a { margin: 0 5px; font-size: 22px } .main-crumbs a:first-child { margin-left: 0 } .no-transition { transform: none!important } .banner-content { position: absolute; top: 50%; left: 15%; transform: translate(0, -60%); color: #fff; line-height: 1.4 } .banner-content.two { left: 50%; transform: translate(-50%, -50%) } .banner-content--intro, .banner-content--title { color: #fff; transform: translateX(10%); opacity: 0; font-weight: 300 } .banner-content--title { font-size: 48px; transition: all 1.5s ease } .banner-content--intro { margin-top: 30px; font-size: 24px; transition: all 2s ease 1.3s } .intro-div { padding-left: 4px; border-left: 1px solid #fff } .banner-content.contact .banner-content--intro, .banner-content.contact .banner-content--title { color: #FFFF } .swiper-slide-active .banner-content .banner-content--intro, .swiper-slide-active .banner-content .banner-content--title { transform: translateX(0); opacity: 1 } @media screen and (max-width:991px) { .banner-content { color: #fff; line-height: 1.3; width: 100%; text-align: center; top: 50%; left: 50% } .swiper-slide-active .banner-content { transform: translate(-50%, -50%); opacity: 1 } .banner-content--title { font-size: 18px } .banner-content--intro { margin-top: 10px; font-size: 14px } .swiper-button-next, .swiper-button-prev { display: none!important } } .jjfa-page3-hd { padding: 30px 0 } .jjfa-page3-hd a { padding: 0 10px; color: #333; font-size: 22px; font-weight: 300 } .jjfa-page3-hd a:first-child { padding-left: 0 } .jjfa-page3-hd a:last-child { color: #ea5520 } .jjfa-page3-title { color: #333; font-size: 35px; font-weight: 400 } @media screen and (max-width:991px) { .jjfa-page3-hd { padding: 15px 0 } .jjfa-page3-hd a { padding: 0 5px; font-size: 12px } .jjfa-page3-title { font-size: 18px; font-weight: 700 } } .banner-fixed-main { position: static; } .banner-fixed-hide { opacity: 0 } .case-main__item--image{ overflow: hidden; position: relative; } .case-main__item--image .suspen{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.2); display: none; transition: all .5s; z-index: 2; } .case-main__item--image img{ transition: all .5s; } .case-main__item:hover .suspen{ display: block; } .case-main__item:hover img{ transform: scale(1.1); }