.flex-box-v { display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-justify-content: center; justify-content: center; } #w_grid-1616658788459 .p_gridbox{ overflow: inherit; } #content_box-1615282454793-0{ border:1px solid #eeeeee; } #content_box-1615282454799-0{ border:1px solid #eeeeee; } #content_box-1615282454804-0{ border:1px solid #eeeeee; } #content_box-1615282454809-0{ border:1px solid #eeeeee; } #content_box-1615282454814-0{ border:1px solid #eeeeee; } #content_box-1615282454821-0{ border:1px solid #eeeeee; } #content_box-1615282454827-0{ border:1px solid #eeeeee; } #content_box-1615282454832-0{ border:1px solid #eeeeee; } #content_box-1615282454837-0{ border:1px solid #eeeeee; } #content_box-1615282454843-0{ border:1px solid #eeeeee; } #content_box-1615282454847-0{ border:1px solid #eeeeee; } #content_box-1615282454853-0{ border:1px solid #eeeeee; } /*banner*/ .Banner-container { height: 100vh; min-height: 600px; max-height: 1600px; width: 100vw; } #w_grid-1615274842130 .p_gridbox { overflow: inherit; } #w_grid-1615283043278{ border-top: 6px solid #e9e9e9; padding-top: 20px; } #w_common_text-1615280897128{ opacity: 0.08; } #w_common_text-1615282263972{ opacity: 0.08; } .banner-background { background-size: cover; background-position: center; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .banner-slide { display: flex; flex-flow: column; justify-content: center; overflow: hidden; } .banner-text { margin: 0 auto; width: 90%; max-width: 1480px; transform: translate3d(0, 0, 0); will-change: transform; display:block; } .banner-text h1 { font-weight: normal; font-size: 54px; margin-bottom: 30px; color: #fff; } .banner-text h2 p{ position:relative; margin-top: 1rem; padding-top: 30px; color: #fff; font-size: 24px; font-weight: normal; } .banner-text .text-line{ height:1px; width:100px; background:#fff; z-index:1; } .banner-text h2 span{ font-size: 18px; display: inline-block; margin-top: 15px; color:#fff; } .banner-bg-ss { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background: rgba(0, 0, 0, 0.1); } .banner-text { z-index: 10; } .banner-text:before { content: ""; position: absolute; width: 300px; height: 400px; display: block; border: 10px solid rgba(255, 255, 255, 0.2); top: 4.5rem; margin-top: -200px; left: -6rem; display:none; } .small-title { color: #fff; margin-bottom: 1rem; font-size: 40px; font-weight:200; font-family: 'Oswald', sans-serif; } /*.banner-warpper.swiper-wrapper { transition-timing-function: cubic-bezier(0.75, 0.22, 0.25, 1); } .banner-warpper.swiper-wrapper .banner-background { transition-timing-function: cubic-bezier(0.75, 0.22, 0.25, 1); will-change: transform; }*/ .banner-switch { position: absolute; z-index: 30; right: auto; bottom: 10px; height: 70px; color: #fff; right: 0; display: flex; margin-top: 0px; background: rgba(197,39,48,0); width: 45%; justify-content: flex-end; align-items: center; text-transform: uppercase; } .banner-switch > div > * { display: inline-block; vertical-align: middle; } .sL_icon { background-size: contain; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; } .banner-switch > div > span { margin: 0 0.5rem; font-size: 0.825rem; } .banner-switch > div { margin: 0.3rem 2rem; } .banner-switch > div { cursor: pointer; transition: 0.5s; } .swiper-button-disabled { opacity: 0.4; } .Banner-A1 { z-index: 1; } .banner-background { transition: 1s 2.5s; transform: perspective(1000px) translate3d(0, 0, 100px); } .swiper-slide.banner-slide.swiper-slide-active .banner-background { transition: 5s 0s; transform: perspective(1000px) translate3d(0, 0, 0px); } .banner-text:before { transition-delay: 2s; transition-duration: 2s; transform: translate3d(-80px, 0, 0); opacity: 0; } .swiper-slide.banner-slide.swiper-slide-active .banner-text:before { animation-name: fadeInUp; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: both; opacity: 0; } .swiper-slide.banner-slide.swiper-slide-active .banner-text * { animation-name: lv-fadeInUp; animation-duration: 1.5s; animation-delay: 1s; animation-fill-mode: both; } .swiper-slide.banner-slide.swiper-slide-active .banner-text *:nth-child(1) { animation-delay: 1.1s; } .swiper-slide.banner-slide.swiper-slide-active .banner-text *:nth-child(2) { animation-delay: 1.2s; } .swiper-slide.banner-slide.swiper-slide-active .banner-text *:nth-child(3) { animation-delay: 1.3s; } .swiper-slide.banner-slide.swiper-slide-active .banner-text h2 *:nth-child(1) { animation-delay: 1.5s; } .swiper-slide.banner-slide.swiper-slide-active .banner-text h2 *:nth-child(2) { animation-delay: 1.6s; } @media screen and (max-width: 1600px) { .banner-text { max-width: 1200px; width: 80%; } } @media screen and (max-width: 1200px) { .banner-text:before { content: ""; position: absolute; width: 300px; height: 400px; display: block; border: 10px solid rgba(255, 255, 255, 0.2); top: 4.5rem; margin-top: -200px; left: 50%; margin-left: -150px; display:none; } .banner-text .text-line{ height:1px; width:100px; background:#fff; z-index:1; margin:0px auto; } .banner-text { text-align: center; } .banner-text h2 { font-size: 1.5rem; } } @media screen and (min-width: 769px) { .banner-background.mo-img{ display:none; } } @media screen and (max-width: 768px) { .c_portalResnav_main-01001002 .navName1 { font-size: 14px; color: rgba(255, 255, 255, 1); transition: all 1s ease 0s; } #c_portalResFriendlink_list-16166610445118071 .p_articles { width: calc((100% - 20px)/2); position: relative; height: 0; float: left; padding-bottom: 25%; } #c_portalResFriendlink_list-16166610445118071 .js_thumb { max-width: 100%; } #c_portalResFriendlink_list-16166610445118071 .p_articles { width: calc((100% - 20px)/2); position: relative; height: 0; float: left; padding-bottom: 30%; } #content_box-1616658836521-1{ display:none; } #content_box-1616658836521-2{ display:none; } #c_portalResnav_main-16166587927179128 .clearfix{ margin-top: 20px; } #content_box-1616658788459-0{ width:65%; float:left; clear: inherit !important; } #content_box-1616658788459-1{ width:35%; float:left; clear: inherit !important; } #content_box-1616657684561-2{ display:none; } #content_box-1616657684561-1{ display:none; } #w_grid-1615282454770> div > .p_gridbox > .p_gridCell:nth-child(3n+0) { width: 50%; margin-left: 0%; margin-right: 0px; clear: initial !important; float: left; } #w_grid-1615282454770> div > .p_gridbox > .p_gridCell:nth-child(3n+1) { margin-left: 0px; clear: initial !important; margin-right: 0px; width: 50%; float: left; } #w_grid-1615282454770> div > .p_gridbox > .p_gridCell:nth-child(3n+2) { width: 50%; margin-left: 0%; margin-right: 0px; clear: initial !important; float: left; } #w_common_text-1616657169974{ margin-top:30px; } #w_common_text-1616657169974 span{ font-size: 28px !important; } #w_grid-1616656354179 { margin-bottom: 30px; } #c_portalResNews_list-16152787792428626 .listBoxs .list { width: calc((100% - 20px)/1); float: left; margin-left: 10px; margin-right: 10px; transition: all .5s ease; } #w_common_text-1616656354163{ margin-top:30px; } #w_common_text-1616656354163 span{ font-size: 28px !important; } #w_grid-1616655224499 { margin-bottom: 30px; } #c_portalResPublic_codeContainer-16166558762669946 .sz_div { width: 33.3%; float: left; text-align: left; font-size: 13px; color: #575757; } #c_portalResPublic_codeContainer-16166558762669946 .counter { font-family: Oswald; font-size: 24px; color: #005bac; line-height: 32px; } #w_common_text-1616655100450{ margin-top:30px; } #w_common_text-1616655100450 span{ font-size: 28px !important; } #content_box-1616652964204-0{ width:30px; float:left; clear: inherit !important; } #content_box-1616652964204-1{ width:65%; float:left; clear: inherit !important; } #w_grid-1616652964204 { margin-top: 20px; } #w_common_text-1616652964197{ margin-top: 10px; } #w_common_text-1616652964190 span{ font-size: 24px !important; } #w_common_text-1616652964190{ margin-top: 0px; } #w_common_text-1616652964169{ margin-top: 20px; } #w_grid-1616652964153{ margin-left: 20px; margin-bottom: 20px; margin-right: 20px; margin-bottom: 20px; } #content_box-1616652562442-0{ width:30px; float:left; clear: inherit !important; } #content_box-1616652562442-1{ width:65%; float:left; clear: inherit !important; } #w_grid-1616652562442 { margin-top: 20px; } #w_common_text-1616651996151{ margin-top: 10px; } #w_common_text-1616644932952 span{ font-size: 24px !important; } #w_common_text-1616644932952{ margin-top: 0px; } #w_common_text-1616644879950{ margin-top: 20px; } #w_grid-1616644817659{ margin-left: 20px; margin-bottom: 20px; margin-right: 20px; margin-bottom: 20px; } #content_box-1616652958693-0{ width:30px; float:left; clear: inherit !important; } #content_box-1616652958693-1{ width:65%; float:left; clear: inherit !important; } #w_grid-1616652958693 { margin-top: 20px; } #w_common_text-1616652958689{ margin-top: 10px; } #w_common_text-1616652958685 span{ font-size: 24px !important; } #w_common_text-1616652958685 { margin-top: 0px; } #w_common_text-1616652958664{ margin-top: 20px; } #w_grid-1616652958649{ margin-left: 20px; margin-bottom: 20px; margin-right: 20px; margin-bottom: 20px; } .w_tabswitchbox-001 > .layout_2 .p_box002 { width: calc(100% - 100px); height: auto; } #content_box-1616652951801-0{ width:30px; float:left; clear: inherit !important; } #content_box-1616652951801-1{ width:65%; float:left; clear: inherit !important; } #w_grid-1616652951801 { margin-top: 20px; } #w_common_text-1616652951796 { margin-top: 10px; } #w_common_text-1616652951790 { margin-top: 0px; } #w_common_text-1616652951790 span{ font-size: 24px !important; } #w_common_text-1616652951773 { margin-top: 20px; } #w_grid-1616652951760 { margin-left: 20px; margin-bottom: 20px; margin-right: 20px; margin-bottom: 20px; } .w_tabswitchbox-001 > .layout_2 .p_box001 { width: 100px; height: 100px; min-height: auto; display: inline-block; vertical-align: top; } #w_tabswitchbox-1616636247788 > .layout_2 .p_box002 { width: 100%; } .w_tabswitchbox-001 .p_relationbtntab .iconfont:before { content: ""; font-size: 40px; } .w_tabswitchbox-001 .p_relationbtntab .font { width: 100%; height: auto; font-size: 16px; background-color: inherit; color: inherit; display: inline-block; vertical-align: middle; } .w_tabswitchbox-001 > .layout_2 > div > .e_link-000 { width: 25%; float: left; height: 100px; display: block; } #w_tabswitchbox-1616636247788 > .layout_2 .p_box001 { width: 100%; } #w_common_text-1616635928887 { margin-top: 30px; } #c_portalResProduct_list-16166046619088631 .p_Product { width: calc((100% - 0px)/2); } #content_box-1616603872965-0{ display:none; } #w_common_text-1616603521127 { margin-top: 30px; } #w_common_text-1616635928887 span{ font-size: 28px !important; } #w_common_text-1616603521127 span{ font-size: 28px; } .bannerBox { width: 140% !important; height: auto; margin-left:-20%; } #c_portalResnav_main-16152753234672510 .clearfix { clear: both; *zoom: 1; margin-top: 20px; } #content_box-1615274842130-0{ width:65%; float:left; clear: inherit !important; } #content_box-1615274842130-1{ width:35%; float:left; clear: inherit !important; } .banner-background.mo-img{ display:block; } .banner-background.pc-img{ display:none; } .banner-switch { top: auto; bottom: 2rem; left: 5%; right: 5%; justify-content: center; align-items: center; display: none; } .banner-text h2:before { left: calc((100% - 60px)/2); width:60px; } .banner-text h1 { font-size: 24px; line-height: 1.2; } .banner-text h2 p{ font-size:16px; padding-top:5px; } .banner-text h2 span{ font-size:14px; } .banner-text h2 { font-size: 14px; line-height: 1.4; } .banner-text .text-line{ width:50px; } .small-title { font-size: 22px; } .banner-text:before { opacity: 0; } } /*banner*/