@font-face { font-family: 'iconfont'; /* Project id 2618685 */ src: url('//at.alicdn.com/t/font_2618685_oyys0mc9tb8.woff2?t=1634546229721') format('woff2'), url('//at.alicdn.com/t/font_2618685_oyys0mc9tb8.woff?t=1634546229721') format('woff'), url('//at.alicdn.com/t/font_2618685_oyys0mc9tb8.ttf?t=1634546229721') format('truetype'); }
.iconfont { font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }

body { font-family: "PingFang SC", "等线"; }

@font-face { font-family: 'GraphikLCG'; src: url('/shuwon/assets/fonts/GraphikLCG-Regular.woff2'); }

@font-face { font-family: 'Alibaba'; src: url('/shuwon/assets/fonts/Alibaba-PuHuiTi-Regular.woff2'); }

@font-face { font-family: 'montserrat'; src: url('/shuwon/assets/fonts/montserrat-bold-webfont.woff2'); }

@font-face { font-family: akrobatblack; src: url(/shuwon/assets/fonts/akrobat-black-webfont.woff2) format('woff2'), url(/shuwon/assets/fonts/akrobat-black-webfont.woff) format('woff'); font-weight: 400; font-style: normal }


* { margin: 0px; padding: 0px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.onlineTel { width: 100px; height: auto; position: fixed; right: 0%; top: 50%; -webkit-transform: translateY(-50%); background: #4612a4; color: #fff; display: block; z-index: 100; text-align: center; font-size: 24px; padding: 15px 0px; border-radius: 10px 0px 0px 10px; box-shadow: 0px 0px 25px rgb(0 0 0 / 30%); }
.onlineTel p { font-size: 14px; display: block; margin-top: 5px; }
::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; }

::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #F5F5F5; }

::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #555; }

.ul_1, .ul_2 li:nth-child(1) { opacity: 0; }
html, body { overflow-x: hidden; }

footer .footer_bgImg .phone a span { font-size: 14px; }

.marks { font-size: 12px; width: auto; position: absolute; left: 0; top: 0px; padding: 10px; background: #cb2100; color: #fff; }

.marks::before { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #cb2100; position: absolute; right: -20px; bottom: 0; content: ''; }

.marks::after { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #cb2100; position: absolute; right: -20px; top: 0; content: ''; }

.cpList, .hyList { width: 100%; height: auto; position: relative; }

.cpList ul, .hyList ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
.hyList ul li { width: 23.5%; height: auto; position: relative; }
.hyList ul li .name { text-align: center; line-height: 55px; }
.contactWarp { position: relative; }
.map { width: 100%; height: 450px; position: relative; background: #f9f9f9; }

.mapBox { width: 350px; height: auto; background: #fff; position: absolute; right: 40px; top: 50%; box-shadow: 0px 0px 15px rgba(0, 0, 0, .1); padding: 25px; border-radius: 10px; -webkit-transform: translateY(-50%); }

.infos { width: 100%; height: auto; position: relative; }

.infos ul li { width: 100%; height: auto; position: relative; margin-bottom: 10px; display: flex; }

.infos ul li { width: 100%; display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, .1); margin-bottom: 20px; }

.infos ul li:last-child { padding-bottom: 0px; border-bottom: none; margin-bottom: 0px; }

.infos ul li .icon { width: 30px; height: 30px; line-height: 40px; text-align: center; font-size: 28px; color: #582bb9; }

.infos ul li .info { width: calc(100% - 40px); }

.infos ul li .info .b { font-size: 18px; font-weight: bold; margin-bottom: 5px; }

.infos ul li .info .p { line-height: 1.7; font-family: Arciform; }
.xsTips { width: 100%; margin-top: 25px; }
.xsTips .dh { width: 100%; font-size: 30px; display: flex; margin-bottom: 15px; }
.mss { width: 100%; opacity: .7; font-size: 16px; }
.xsTips .dh a { font-size: 50px; display: block; margin-right: 25px; font-family: 'montserrat'; text-decoration: underline; }
.cpList ul li { width: 23%; height: auto; position: relative; border-radius: 10px; background-color: #fff; padding: 25px; text-align: center; margin-bottom: 25px; }

.cpList ul li .icon { width: 80px; height: auto; line-height: 80px; text-align: center; margin: 0px auto; }
.cpList ul li .info { width: 100%; margin-top: 30px; }
.cpList ul li .info .name { font-size: 18px; line-height: 24px; }
.cpList ul li .info .des { margin-top: 15px; font-size: 14px; height: auto; opacity: .5; line-height: 1.7; }
.testNews { width: 94%; height: auto; position: relative; overflow: hidden; margin-left: 3%; margin-bottom: 125px; padding-top: 35px; }

.testNews ul li { width: 23.5%; height: auto; float: left; margin-right: 2%; margin-bottom: 25px; position: relative; background: #fff; }

.testNews ul li:nth-child(4n) { margin-right: 0%; }

.testNews ul li .bgs { width: 100%; height: 100%; position: relative; background: #000 center center no-repeat; background-size: cover; }

.testNews ul li .bgColor { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: #000000; opacity: 0; filter: alpha(opacity=0); }

.seoSwiper { height: 100vh; background: #0c0c48 url(/shuwon/assets/images/seoBg.jpg?v=2) center center no-repeat; background-size: cover; background-attachment: fixed; }

.seoSwiper .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff; opacity: 1; -webkit-transform: scale(1); }

.seoSwiper .swiper-pagination-bullet { background: rgba(255, 255, 255, .5); -webkit-transform: scale(0.7); }

.innerBox { width: 80%; display: flex; justify-content: center; position: absolute; left: 10%; top: 50%; -webkit-transform: translateY(-50%); color: #fff; flex-wrap: wrap; }

.innerBox .firstLab { width: 100%; display: block; text-align: center; }

.innerBox .firstLab .img { width: 100%; font-family: akrobatblack; font-size: 16vw; line-height: 1; color: #fff; }

.innerBox .firstLab .txt { width: 100%; position: relative; height: auto; display: block; }

.innerBox .secondLab span:last-child::after { display: none; }

.innerBox .firstLab .txt p { display: block; width: 100%; font-size: 2.5vw; font-weight: bold; }

.innerBox .secondLab { width: 100%; height: auto; display: flex; justify-content: center; margin-bottom: 15px; }

.innerBox .secondLab span { font-size: 3.5vw; position: relative; padding-right: 35px; margin-left: 35px; font-weight: bold; }

.innerBox .secondLab span:first-child { margin-left: 0px; }

.innerBox .secondLab span::after { width: 8px; height: 8px; position: absolute; right: -4px; top: 50%; -webkit-transform: translateY(-50%); content: ''; background: #fff; border-radius: 50%; }

.innerBox .secondLab span:last-child { padding-right: 0%; }

.innerBox .threeLab { display: flex; font-size: 1.4vw; }

.innerBox .threeLab span { margin-right: 20px; }

.innerBox .threeLab span:last-child { margin-right: 0%; }

.ysList { width: 100%; }

.czList { width: 100%; }

.ysList ul,
.czList ul { display: flex; flex-wrap: wrap; justify-content: space-between; }

.ysList ul li { width: 23.5%; height: auto; position: relative; }

.seoSwiper .hzlc { width: 100%; }

.seoSwiper .hzlc ul { justify-content: space-between; }

.seoSwiper .hzlc ul li { background-image: none; color: #3e3e3e; width: 18%; height: auto; border-radius: 50%; }

.seoSwiper .hzlc ul li::before { width: 100%; height: 100%; left: 50%; }

.seoSwiper .hzlc ul li .txt { width: 80%; left: 10%; top: 50%; -webkit-transform: translateY(-50%); }

.seoSwiper .hzlc ul li .txt b { margin-bottom: 5px; }

.seoSwiper .hzlc ul li .num { right: auto; top: auto; bottom: -25px; left: 50%; -webkit-transform: translateX(-50%); }

.czList ul { justify-content: space-between; }

.czList ul li { width: 26%; position: relative; text-align: center; }

.czList ul li .txt { font-size: 1.2vw; margin-top: 10px; font-weight: bold; }

.ysList ul li::before { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: rgba(255, 255, 255, .1); content: ''; border-radius: 50%; -webkit-transform: scale(0.95); }

.innerBox .conImg { max-width: 1200px; }

.innerBox .conLeft { width: 100%; max-width: 1200px; text-align: left; margin-top: 20px; line-height: 1.6; }

.innerBox .conLeft a { font-size: 50px; display: block; width: 100%; font-family: 'montserrat'; color: #fff; }
.innerBox .conLeft a span { font-size: 30px; }
.innerBox .conLeft p { font-size: 16px; display: block; width: 100%; }

.innerBox .conLeft p:nth-child(2) { margin-bottom: 5px; }

.ysList ul li .txt { width: 100%; height: auto; position: absolute; top: 50%; -webkit-transform: translateY(-50%); text-align: center; line-height: 1.6; }

.ysList ul li .txt b { font-size: 2vw; }

.ysList ul li .txt p { font-size: 1.1vw; opacity: .7; }

.seoTitle { width: 100%; text-align: center; margin-bottom: 5vw; }

.seoTitle.z { margin-bottom: 2vw; }

.seoTitle b { font-size: 3vw; display: block; }

.seoTitle p { text-transform: uppercase; font-family: montserrat; font-size: 1.4vw; opacity: .7; }

.testNews ul li .nBox { width: 100%; padding: 10px; box-sizing: border-box; color: #fff; height: auto; position: absolute; left: 0%; bottom: 0%; background: rgba(0, 0, 0, 0.5); }

.testNews ul li .nBox .date { width: 100%; line-height: 20px; font-size: 12px; opacity: 0.5; }

.testNews ul li .nBox .title { width: 100%; line-height: 24px; font-size: 18px; height: 24px; }

.testNews ul li .nBox .des { width: 100%; line-height: 20px; font-size: 14px; opacity: 0.6; margin-top: 5px; height: 20px; overflow: hidden; display: none; }

.sub_content { width: 94%; height: auto; padding: 0px 3%; color: #3e3e3e; /* font-family: "microsoft yahei", "氓戮庐猫陆炉茅鈥衡€γ┞烩€�"; */ background: #fff; overflow: hidden; }

.sub_content .left { width: calc(100% - 380px); float: left; margin-top: 50px; }

.sub_content .left h1 { font-size: 24px; font-weight: normal; padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: relative; padding-right: 120px; }

.back_list { position: absolute; background-color: rgba(0, 0, 0, 0.1); font-size: 14px; width: 100px; display: block; line-height: 40px; text-align: center; right: 0; top: 50%; margin-top: -20px; cursor: pointer; }

.back_list:hover { background: #ec2079; color: #FFFFFF; }

.sub_content .left .con { margin: 30px 0 80px 0; line-height: 1.7; }

.sub_content .left .con img { display: inline-block; width: auto; max-width: 500px; cursor: pointer; margin-bottom: 20px; }

.sub_content .left .con a { color: #ec2079; }

.sub_content .left .con a:hover { text-decoration: underline; }

.sub_content .left .con p { margin-bottom: 20px; }

.sub_content .right h2 { font-size: 24px; font-weight: normal; text-indent: 20px; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 15px; }

.sub_content .right h2:after { width: 5px; height: 26px; background: rgba(0, 0, 0, 0.6); display: block; content: ""; position: absolute; left: 0; top: 5px; }

.sub_content .right .d { margin: 0 0 80px 0; }

.sub_content .right ul a { display: block; position: relative; padding: 20px 0 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.sub_content .right ul a:hover { color: #ec2079; }

.sub_content .right li .icon { width: 100%; height: auto; overflow: hidden; margin-bottom: 10px; background-position: center center; -webkit-background-size: cover; background-size: cover; }

.sub_content .right li p { opacity: 0.8; line-height: 1.6; }

.sub_content .right { width: 300px; padding: 20px; float: right; margin-top: 45px; background-color: #fafafa; }

.page_seo { width: 100%; height: auto; overflow: hidden; padding: 25px 0px; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 100px; }

.page_seo .p_ele { width: 50%; height: auto; float: left; }

.m-mouse-icon { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid; border-color: #FFF; border-radius: 20px; bottom: 3vh; height: 40px; left: 0; margin: 0 auto; position: absolute; right: 0; opacity: 0; width: 25px; cursor: pointer; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear }

.m-mouse-icon:hover { opacity: .3 !important; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear }

.m-mouse-icon .m-wheel { -webkit-animation: 1.5s ease 0s normal none infinite magic-mouse-icon; -moz-animation: 1.5s ease 0s normal none infinite magic-mouse-icon; -o-animation: 1.5s ease 0s normal none infinite magic-mouse-icon; animation: 1.5s ease 0s normal none infinite magic-mouse-icon; border-radius: 100%; height: 5px; left: 0; margin-left: auto; margin-right: auto; margin-top: 0px; width: 5px; background: #fff; }

@-webkit-keyframes magic-mouse-icon {
    0% { margin-top: 6px; opacity: 0 }

    30% { opacity: 1 }

    100% { margin-top: 18px; opacity: 0 }
}

.ms { width: auto; height: auto; line-height: 20px; color: rgba(0, 0, 0, 0.4); font-size: 12px; background: rgba(0, 0, 0, 0.05); display: inline-block; padding: 10px; margin-top: 10px; }

.ms span { padding: 0px 5px; color: rgba(0, 0, 0, 0.7); }

header { position: absolute; display: flex; justify-content: space-between; padding: 30px 5%; width: 100%; z-index: 300; align-items: center; top: 0px; -webkit-transition: all 0.5s; }

header .logo { width: 250px; position: relative; -webkit-transition: all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; opacity: 1; top: 0px; }


header nav { width: auto; -webkit-transition: all 2000ms cubic-bezier(0.215, 0.61, 0.355, 1) 1s; opacity: 1; top: 0px; position: relative; }

header nav ul { display: flex; justify-content: space-between; }

header nav ul li { width: auto; position: relative; }

header nav ul li a { color: #fff; display: block; font-size: 16px; line-height: 40px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); position: relative; padding: 0px 20px; }

header nav ul li a::after { width: 0px; height: 4px; position: absolute; left: 50%; margin-left: 0px; bottom: 0px; background: #fff; border-radius: 20px; content: ''; -webkit-transition: all .5s; opacity: 0; }

header nav ul li:hover a::after, header nav ul li.active a::after { opacity: 1; width: 20px; margin-left: -10px; }


.header_active { display: none; }

.header_active2 .logo,
.header_active2 nav { display: none; }

.header_active nav ul li a { color: #000 !important; }


header::before { width: 100%; height: 0px; position: absolute; left: 0%; top: 0%; background: rgba(0, 0, 0, 0.7); content: ''; -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); }

.stripe__background-bottom { left: 50%; position: absolute; top: 100%; transform: translateX(-50%); transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 4; }

.stripe__action { left: 50%; margin-top: 10px; position: absolute; text-align: center; transform: translateX(-50%); top: 100%; z-index: 4; }

.stripe__action .scroll-down { width: 35px; height: 45px; display: block; margin-left: auto; margin-right: auto; overflow: hidden; padding-top: 15px; position: relative; }

.stripe__action .scroll-down .scroll-down__item { -webkit-animation: scroll-down 2s infinite; animation: scroll-down 2s infinite; margin-top: -10px; margin-left: auto; margin-right: auto; }

.stripe__action .scroll-down .scroll-down__item .arrow { width: 100%; height: 100%; border-color: currentColor; border-style: solid; display: inline-block; border-top-width: 2px; border-right-width: 2px; border-left: transparent; border-bottom: transparent; }

.stripe__action .scroll-down .scroll-down__item .arrow_bottom { transform: rotate(135deg); }

.stripe__action .scroll-down .scroll-down__item:nth-child(1) { width: 15px; height: 15px; }

.stripe__action .scroll-down .scroll-down__item:nth-child(2) { width: 20px; height: 20px; -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }

@keyframes scroll-down {
    0% { opacity: 0; transform: translateY(-10px); }

    50% { opacity: 1; }

    100% { opacity: 0; transform: translateY(5px); }
}

.f1 { background: #effcff; width: 100%; height: 100vh; display: flex; }

.f1 .left { width: 55vw; padding-left: 5vw; padding-top: 30vh; margin-right: 5vw; }

.f1 .left .text img { width: 38vw; }

.f1 .left .text p { padding-top: 4vh; font-size: 1.5vw; color: #2f2f2f; }

.f1 .left .bgImg { width: 50vw; position: absolute; bottom: 0; }

.f1 .right .imgBox { width: 22vw; position: absolute; bottom: 0vw; overflow: hidden; }

.f1 .right .imgBox iframe { position: absolute; z-index: 10; bottom: 0; width: 21vw; height: 38.7vw; left: 0.5vw; border-top-left-radius: 50px; border-top-right-radius: 50px; }

.f2 { width: 100%; padding: 100px 5% 30px; position: relative; /* background: linear-gradient( 135deg, #1fcab4, #4bb1ea, #6adf91) left center/400% 400%;
	-webkit-animation: lightAnimate 20s infinite; */ /* background: #4612a4; */ /* margin-top: 100vh; */ /* background-color: rgba(0, 0, 0, .1);
	backdrop-filter: blur(5px) contrast(1.1); */ }

@-webkit-keyframes lightAnimate {

    0%, 100% { background-position-x: left; }

    50% { background-position-x: right; }
}

.f2 .itemBox { width: 100%; z-index: 10; position: relative; }

.f2 .itemBox .ul_1,
.f2 .itemBox .ul_2,
.f2 .itemBox .ul_3,
.f2 .itemBox .ul_4 { display: flex; margin-bottom: 2vw; width: 100%; height: auto; }

.f2 .itemBox .ul_1 li,
.f2 .itemBox .ul_2 li,
.f2 .itemBox .ul_3 li,
.f2 .itemBox .ul_4 li { position: relative; width: 18%; background: #fff; border-radius: 50%; margin-right: 2%; overflow: hidden; height: auto; box-shadow: 0 4px 40px rgb(70 18 164 / 20%); }

.f2 .itemBox .pic { width: 100%; height: 100%; background: center center no-repeat; background-size: cover; }

.f2 .itemBox .ul_4 { margin-bottom: 0; }
.hzList { width: 100%; padding: 0px 0%; position: relative; perspective: 1000px; -webkit-perspective: 1000px; }

.f2::before { width: 100%; height: 40vh; position: absolute; left: 0%; top: -40vh; content: ''; display: none; /* background: linear-gradient(0deg, rgba(70, 18, 164, 1), rgba(70, 18, 164, 0)); */ }
.f2::after { display: none; width: 100%; height: 100%; position: absolute; right: 0%; top: 0%; content: ''; /* background: linear-gradient(0deg, rgba(70, 18, 164, 1), rgba(70, 18, 164, 0)); */ z-index: 1; pointer-events: none; }
.hzList ul { display: flex; position: relative; flex-wrap: wrap; /* margin-top: 100px; */ transform: perspective(1000px) rotateX(52deg); transform-style: preserve-3d; }
.hzList ul li { width: 13%; margin-right: 1.5%; margin-bottom: 1vw; background-color: #fff; border-radius: 5px; overflow: hidden; -webkit-transition: all .5s; }
.hzList ul li:hover { transform: translateZ(20px); }

.hzList ul li .tips { width: 100%; height: auto; text-align: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); font-size: 16px; font-weight: bold; transform: translateZ(20px); color: #fff; text-shadow: 0px 0px 5px rgba(0,0,0,.1); }

.conImg { width: 100%; height: 420px; position: relative; background: center center no-repeat; }
.hzList ul li:nth-child(7n) { margin-right: 0%; }

.hzList ul li .pic { background: center center no-repeat; background-size: cover; }
.f2 .textBox { position: relative; z-index: 10; width: 55%; text-align: center; color: #fff; margin-left: 22.5%; }

.f2 .textBox .tit { font-size: 2vw; }

.f2 .textBox .en { font-size: 70px; color: #fff; font-family: montserrat; position: relative; margin-bottom: 3vw; text-transform: uppercase; }

.f2 .textBox .en b { color: transparent; font-size: 5vw; position: relative; -webkit-text-stroke: 1px rgba(255, 255, 255, .1); display: block; width: 100%; }

.f2 .textBox .en p { position: absolute; top: 50%; -webkit-transform: translateY(-50%); font-size: 3vw; width: 100%; text-align: center; font-weight: bold; }

.f2 .textBox .en .l-c { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; }

.f2 .textBox .text { position: relative; }

.f2 .textBox .text p:nth-child(1) { font-size: 1.5vw; color: #ffffff; margin-bottom: 1vw; letter-spacing: 1px; }

.f2 .textBox .text p:nth-child(2) { font-size: 1vw; color: #ffffff; }


.f2 .btnBox { width: 18%; height: auto; border-radius: 50%; position: absolute; right: 0%; bottom: 0%; cursor: pointer; z-index: 10; display: block; }

.f2 .btnBox::before { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: #4612a4; border-radius: 50%; content: ''; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); }

.f2 .btnBox:hover::before { transform: scale(1.2); }

.f2 .btnBox svg { position: absolute; top: 50%; left: 50%; width: 70px; -webkit-transform: translate(-50%, -50%); fill: #6adf91; }

.f2 .btnBox:hover .background { transform: scale(4); transition: transform 0.58s cubic-bezier(0.25, 1, 0.5, 1); }

.f3 { width: 100%; background: #d4f1f9; padding-top: 10vw; padding-bottom: 5vw; }

.f3 .stripe__background-bottom,
.f3 .stripe__action { top: inherit; margin-top: -10vw; }

.f3 .titBox { position: absolute; right: 6vw; cursor: pointer; margin-top: 25vw; }

.f3 .titBox .title { font-size: 2vw; color: #064458; padding-bottom: 1vw; font-family: SemiBold; }

.f3 .titBox .info { font-size: 1vw; line-height: 1.7; letter-spacing: 1px; color: #5b5b5b; position: relative; }

.f3 .titBox .en { font-size: 8vw; color: transparent; font-family: SemiBold; -webkit-text-stroke: 1px #38bcd3; transition: 0.5s all ease-in-out; }

.f3 .titBox .year { font-size: 1vw; color: #064458; font-family: SemiBold; }

.f3 .titBox:hover .en { color: #38bcd3; }

.f3 .itemBox { width: 50%; margin-bottom: 3vw; padding-left: 12vw; margin-top: 10vw; }

.f3 .itemBox .imgBox { margin-top: 5vw; margin-bottom: 3vw; overflow: hidden; }

.f3 .itemBox .imgBox img:nth-child(1) { width: 30vw; transform: translateY(0px) scale(1.2); transition: 1s all ease-in-out; }

.f3 .itemBox .imgBox img:nth-child(2) { width: 20vw; position: absolute; margin-top: -15.75vw; margin-left: 15vw; transition: 1s all ease-in-out; }

.f3 .itemBox .textBox .title { font-size: 5vw; color: transparent; padding-bottom: 1vw; font-family: SemiBold; -webkit-text-stroke: 1px #38bcd3; }

.f3 .itemBox .textBox .info { padding-bottom: 2vw; }

.f3 .itemBox .textBox .info p:nth-child(1) { font-size: 1.5vw; color: #383838; padding-bottom: 1vw; font-weight: bold; }

.f3 .itemBox .textBox .info p:nth-child(2) { font-size: 1vw; color: #7f7f7f; }

.f3 .itemBox .textBox .more { width: 5vw; height: 5vw; border: 1px solid #43b5e0; border-radius: 50%; cursor: pointer; }

.f3 .itemBox .textBox .more img { width: 1vw; height: 1vw; margin: 2vw auto; transition: 0.5s all ease-in-out; }

.f3 .itemBox .imgBox:hover img:nth-child(1) { transform: translateY(30px) scale(1.2); }

.f3 .itemBox .imgBox:hover img:nth-child(2) { transform: translateY(-40px); }

.f3 .itemBox .textBox:hover .more img { transform: translateX(20px); }

.f3 .itemBox02 { width: 50%; position: absolute; right: 6vw; margin-top: -5vw; }

.f3 .itemBox02 .imgBox img:nth-child(2) { width: 22vw; margin-top: -25vw; margin-left: 11vw; }

.f3 .itemBox:last-child { margin-top: -5vw; margin-bottom: 0; }

.f3 .itemBox:last-child .imgBox img:nth-child(2) { width: 15vw; margin-top: -18vw; margin-left: 18vw; }



.subTitle { text-align: center; font-family: montserrat; position: relative; margin-bottom: 20px; }

.subTitle b { color: transparent; font-size: 11vw; position: relative; -webkit-text-stroke: 1px rgba(0, 0, 0, .2); display: block; width: 100%; }

.subTitle p { position: absolute; top: 50%; -webkit-transform: translateY(-50%); font-size: 3vw; width: 100%; text-align: center; font-family: 'Alibaba'; font-weight: bold; }

.newsBox { display: flex; flex-wrap: wrap; }

.newsBox .itemBox { width: 31%; display: block; margin-right: 3.5%; margin-bottom: 35px; }

.newsBox .itemBox .thum { position: relative; overflow: hidden; margin-bottom: 20px; }

.newsBox .itemBox .img { width: 100%; height: auto; overflow: hidden; background: center center no-repeat; background-size: cover; -webkit-transition: all .5s; }

.newsBox .itemBox .img::before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; }

.newsBox .itemBox:hover .img::before { /* animation: gradient-rectangle 1s 1;
	animation-delay: 0s;
	-webkit-animation-timing-function: cubic-bezier(0, 0, 0.18, 0.96); */ }

.newsBox .itemBox:hover .img { -webkit-transform: scale(1.05); }

.newsBox .itemBox:hover .textBox .name { color: #000; }

@-webkit-keyframes gradient-rectangle {
    0% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: bottom; transform-origin: bottom; background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); background: -webkit-linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); opacity: 1; }

    100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); background: -webkit-linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); opacity: 0; }
}

.newsBox .itemBox .textBox { width: 100%; }

.newsBox .itemBox .textBox .name { font-size: 18px; margin-bottom: 10px; min-height: 54px; line-height: 1.4; }

.newsBox .itemBox .textBox .detail { font-size: 14px; line-height: 1.7; opacity: .7; margin-bottom: 15px; height: 46px; }

.newsBox .itemBox .textBox .tab { font-size: 0.9vw; color: #246fa9; margin-bottom: 1vw; }

.newsBox .itemBox .textBox .more { width: 100%; height: auto; display: flex; justify-content: space-between; opacity: .7; padding-top: 15px; border-top: 1px solid rgba(0, 0, 0, .1); }

.newsBox .itemBox .textBox .more .read { width: 75px; display: flex; justify-content: space-between; align-items: center; line-height: 20px; }

.newsBox .itemBox .textBox .more .time { font-family: 'GraphikLCG'; }

.newsBox .itemBox:nth-child(3n) { margin-right: 0; }

.newsBox .itemBox:hover img { transform: scale(1.1); }

.newsBox .itemBox:hover .more img { transform: translateX(10px); }

footer { width: 100%; height: auto; background-color: #000; position: relative; }

footer .bgImg { }

footer .subTitle p { color: #fff; }

footer .bgImg .title { text-align: center; font-family: montserrat; position: relative; margin-bottom: 20px; }

footer .bgImg .title p:nth-child(1) { color: transparent; font-size: 11vw; position: relative; -webkit-text-stroke: 1px #cddade; transition: 0.5s all ease-in-out; }

footer .bgImg .title p:nth-child(2) { position: absolute; margin-top: -10vw; margin-left: 45vw; font-size: 3vw; transition: 0.5s all ease-in-out; }

footer .footer { width: calc(100% - 360px); height: 25vw; position: absolute; text-align: center; color: white; transition: 0.5s all ease-in; background: url('/shuwon/assets/images/img21.jpg') center no-repeat; background-size: cover; margin: 300px 180px 0; }

footer .footer_bgImg { text-align: center; color: white; position: relative; z-index: 1; background: linear-gradient(135deg, #F5D9FF, #ff9804, #00cbcb, #f37a6b, #4612a4) left center/400% 400%; -webkit-animation: lightAnimate 20s infinite; max-width: 1400px; width: 90%; margin: 0px auto; padding: 100px 50px; border-radius: 50px 50px; }

footer .footer_bgImg .title { font-size: 20px; position: relative; }

footer .footer_bgImg .title::before { content: ''; width: 42px; height: 4px; background-color: #ffffff; position: absolute; left: 50%; margin-left: -21px; bottom: -20px; border-radius: 5px; opacity: .5; }

footer .footer_bgImg .phone { font-size: 50px; padding-top: 35px; font-family: 'montserrat'; margin-bottom: 50px; font-weight: bold; }

footer .footer_bgImg .phone a { color: white; }

footer .footer_bgImg .phone a:nth-child(n+2) { margin-left: 15px; }

footer .footer_bgImg .address { font-size: 1vw; padding-top: 1vw; }

.footerInfo { text-align: center; padding: 0px 5%; padding-bottom: 15px; font-size: 12px; color: rgba(255, 255, 255, .5); }

.footerInfo a { color: rgba(255, 255, 255, .5); margin-left: 10px; }

.friends { width: 100%; margin-top: 25px; margin-bottom: 10px; text-align: center; color: rgba(255, 255, 255, .5); padding: 0px 5%; font-size: 12px; }

.friends ul { width: 100%; }

.friends ul li { text-align: center; display: inline-block; margin-right: 1vw; }

.friends ul li a { color: rgba(255, 255, 255, .5); }

footer .bgImg:hover .title p:nth-child(2) { color: #333333; }

.case header nav ul li a { color: white; }

.case header .navBar { color: white; border: 1px solid white; }

.case_f1 { width: 100%; background: url('/shuwon/assets/images/img25.jpg') center no-repeat; background-size: cover; height: 40vh; position: relative; }

.case_f1 .itemBox { position: absolute; width: 100%; top: 55%; -webkit-transform: translateY(-50%); text-align: center; }

.commonTitle { color: white; font-size: 60px; font-family: SemiBold; display: flex; justify-content: center; position: relative; overflow: hidden; font-weight: bold; }

.commonTitle span { position: relative; padding: 0px 2px; -webkit-transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translateY(100%); }

.commonTitle.active span { -webkit-transform: translateY(0%); }

.commonTitle span:nth-child(2) { -webkit-transition-delay: 0.03s; }

.commonTitle span:nth-child(3) { -webkit-transition-delay: 0.06s; }

.commonTitle span:nth-child(4) { -webkit-transition-delay: 0.09s; }

.commonTitle span:nth-child(5) { -webkit-transition-delay: 0.12s; }

.commonTitle span:nth-child(6) { -webkit-transition-delay: 0.15s; }

.commonTitle span:nth-child(7) { -webkit-transition-delay: 0.18s; }

.commonTitle span:nth-child(8) { -webkit-transition-delay: 0.21s; }

.commonTitle span:nth-child(9) { -webkit-transition-delay: 0.24s; }

.commonTitle span:nth-child(10) { -webkit-transition-delay: 0.27s; }

.commonTitle span:nth-child(11) { -webkit-transition-delay: 0.3s; }

.commonTitle span:nth-child(12) { -webkit-transition-delay: 0.33s; }

.commonTitle span:nth-child(6) { margin-right: 35px; }

.case_f1 .itemBox .logoBox { width: 100%; display: table; padding: 5vw 10% 0px; }

.case_f1 .itemBox .logoBox .item { width: 10vw; display: inline-table; margin-right: 5vw; margin-bottom: 3vw; }

.case_f1 .itemBox .logoBox .item img { width: 100%; }

.caseNav { width: 100%; display: flex; justify-content: center; margin-bottom: 50px; }

.caseNav.pos { position: absolute; left: 0px; top: -60px; margin-bottom: 0px; }
.caseNav.fixed { position: fixed; top: 20px; }
.caseNav.pos a { color: #fff; border: 1px solid rgba(255,255,255,.3); }
.caseNav a { width: auto; height: auto; position: relative; line-height: 35px; padding: 5px 25px; border-radius: 60px; margin: 0px 10px; color: #000; font-size: 16px; border: 1px solid #000; }
.caseNav a.active, .caseNav a:hover { background: #000; color: #fff; border: 1px solid #000; }
.case_f2 { width: 100%; height: auto; background: #ffffff; padding: 7vw; display: flex; position: relative; display: none; }

.case_f2 .left { width: 32vw; height: 100vh; margin-top: -2.2vw; position: sticky; top: 80px; }

.case_f2 .left .title { font-size: 8vw; color: transparent; font-family: SemiBold; -webkit-text-stroke: 1px #5dc9db; transition: 0.5s all ease-in-out; }

.case_f2 .left .info { font-size: 1vw; line-height: 1.7; letter-spacing: 1px; color: #5b5b5b; }

.case_f2 .left .vue { margin-top: 2vw; display: flex; }

.case_f2 .left .vue div { margin-right: 1vw; }

.case_f2 .left .vue .p { font-size: .9vw; color: #5a5a5a; line-height: 3vw; }

.case_f2 .left .vue .vue1 { width: 3vw; height: 3vw; /*border: 1px solid #e5e5e5;*/ border-radius: 50%; cursor: pointer; }

.case_f2 .left .vue .vue1 div { width: 0.2vw; height: 0.2vw; background-color: #e5e5e5; border-radius: 50%; margin: 0.1vw auto; position: relative; top: 0.8vw; left: -3px; }

.case_f2 .left .vue .vue1 div:nth-child(4) { position: absolute; margin-top: -0.1vw; top: inherit; margin-left: 1.6vw; left: inherit; }

.case_f2 .left .vue .vue1 div:nth-child(5) { position: absolute; margin-top: 0.5rem; top: inherit; margin-left: 1.6vw; left: inherit; }

.case_f2 .left .vue .vue2 { width: 3vw; height: 3vw; border: 1px solid #e5e5e5; border-radius: 50%; cursor: pointer; }

.case_f2 .left .vue .vue2 div:nth-child(odd) { width: 0.3vw; height: 0.3vw; /*background-color: #e5e5e5;*/ border-radius: 50%; margin: 0.1vw auto; position: relative; top: 0.6vw; left: -0.5vw; }

.case_f2 .left .vue .vue2 div:nth-child(even) { width: 0.8vw; height: 0.15vw; background-color: #e5e5e5; position: relative; top: 0.3vw; left: 1.3vw; }

.case_f2 .left .tab { margin-top: 5vw; font-size: 1vw; }

.case_f2 .left .tab p { margin-bottom: 2vw; cursor: pointer; }

.case_f2 .left .tab p span { font-weight: bold; font-size: 1.5vw; }

.case_f2 .left .tab .tab_acitve { color: #38bcd3; }

.case_f2 .left .tab .tab_acitve::before { content: '+'; position: absolute; color: #38bcd3; font-size: 1.5vw; margin-top: -0.5vw; margin-left: 5vw; }

.case_f2 .left .tab p:hover { color: #38bcd3; }

.case_f2 .left .tab p:hover::before { content: '+'; position: absolute; color: #38bcd3; font-weight: bold; font-size: 1.5vw; margin-top: -0.5vw; margin-left: 5vw; }

.case_f2 .left:hover .title { color: #5dc9db; }

.case_f2 .right { margin-left: 8vw; position: relative; display: none; }

.case_f2 .right .title p:nth-child(1) { font-size: 2vw; color: #383838; padding-bottom: 1vw; }

.case_f2 .right .title p:nth-child(2) { font-size: 1vw; color: #7f7f7f; }

.case_f2 .right .itemBox { margin-top: 6vw; display: table; }

.case_f2 .right .itemBox a,
.case_f2 .right .itemBox a { display: inline-table; }

.case_f2 .right .itemBox .item,
.case_f2 .right .itemBox .item2 { width: 22vw; height: 22vw; border-radius: 50%; overflow: hidden; margin-right: 1vw; margin-bottom: 1vw; cursor: pointer; z-index: 50; }

.case_f2 .right .itemBox .item .more,
.case_f2 .right .itemBox .item2 .more { width: 3vw; height: 3vw; border-radius: 50%; background: white; margin: 1vw auto; color: #38bcd3; position: absolute; margin-top: 13vw; left: 9.5vw; opacity: 0; }

.case_f2 .right .itemBox .item .more img,
.case_f2 .right .itemBox .item2 .more img { width: 1vw; height: auto; padding-top: .5vw; margin-left: 1vw; transition: 0.3s all ease-in-out; position: relative; }

.case_f2 .right .itemBox .item .more p,
.case_f2 .right .itemBox .item2 .more p { text-align: center; transition: 0.3s all ease-in-out; }

.case_f2 .right .itemBox_list .item:hover .more p { opacity: 0; }

.case_f2 .right .itemBox .item2 { background: rgba(0, 0, 0); /*transition: 0.5s all ease-in-out;*/ }

.imgItemBox a:nth-child(even) { position: relative; /*top: 9vw;*/ }

.case_f2 .right .itemBox .item2 .name { width: 47%; position: absolute; color: white; margin-top: 9.5vw; font-size: 1.5vw; font-weight: bold; text-align: center; opacity: 0; /*transition: 0.5s all ease-in-out;*/ }

.case_f2 .right .itemBox .item2 .name p { width: 100%; text-align: center; }

.case_f2 .right .itemBox .item img,
.case_f2 .right .itemBox .item2 img { transition: 0.5s all ease-in-out; position: absolute; width: 22vw; height: 22vw; border-radius: 50%; overflow: hidden; object-fit: cover; }

.case_f2 .right .itemBox .item img:nth-child(2) { width: 20vw; height: 20vw; opacity: 0; margin-left: 1vw; margin-top: 1vw; }

.case_f2 .right .itemBox .item:hover img { transform: scale(1.1); }

.case_f2 .right .itemBox .item:hover .more,
.case_f2 .right .itemBox .item2:hover .more { opacity: 1; }

.case_f2 .right .itemBox .item2:hover .more { opacity: 1; }

.case_f2 .right .itemBox .item2:hover .more { opacity: 1; }

.case_f2 .right .itemBox .item2:hover .more img { width: 1.9vw !important; margin-left: .6vw; opacity: 1; }

.case_f2 .right .itemBox .item2:hover .more p,
.case_f2 .right .itemBox .item:hover .more p { opacity: 0; }

.case_f2 .right .itemBox .item2:hover img { transform: scale(1); opacity: .3; }

.case_f2 .right .itemBox .item2:hover .name { opacity: 1; /*width: 100%;*/ }

.case_f2 .right .itemBox .item2:hover { /*animation: shake 1s forwards;*/ transition: 0.5s all ease-in-out; }

.case_f2 .right .itemBox .item:hover img:nth-child(1) { opacity: 0; }

.case_f2 .right .itemBox .item:hover img:nth-child(2) { opacity: 1; }

.case_f2 .right .itemBox a:nth-child(even) { position: relative; top: 9vw; }

.case_f2 .right .itemBox_list { width: 100%; margin-top: 4.5vw; display: table; }

.case_f2 .right .itemBox_list .item { width: 100%; margin-bottom: 1vw; overflow: hidden; cursor: pointer; display: inline-table; }

.case_f2 .right .itemBox_list .item .img { width: 47.5vw; height: 18vw; overflow: hidden; margin-bottom: 1vw; background: rgba(0, 0, 0); }

.case_f2 .right .itemBox_list .item .img img { transition: 0.5s all ease-in-out; opacity: 0.4; background: white; }

.case_f2 .right .itemBox_list .item .img img:nth-child(2) { opacity: 0; }

.case_f2 .right .itemBox_list .item .qrcode { width: 8vw; height: 8vw; position: absolute; margin-top: -17vw; left: 19.7vw; opacity: 0; border-radius: 50%; overflow: hidden; transition: 0.5s all ease-in-out; }

.case_f2 .right .itemBox_list .item .textBox { width: 100%; position: absolute; margin-top: -14vw; }

.case_f2 .right .itemBox_list .item .textBox .text { width: 100%; text-align: center; margin: 0 auto; }

.case_f2 .right .itemBox_list .item .textBox .text .name { color: white; font-size: 1.2vw; font-family: SemiBold; transition: 0.5s all ease-in-out; }

.case_f2 .right .itemBox_list .item .textBox .text .en { font-size: 2vw; color: white; font-family: SemiBold; font-weight: bold; transition: 0.5s all ease-in-out; }

.case_f2 .right .itemBox_list .item .textBox .text .more { width: 3vw; height: 3vw; border-radius: 50%; background: white; margin: 1vw auto; color: #38bcd3; }

.case_f2 .right .itemBox_list .item .textBox .text .more img { width: 1vw; margin: 0 auto; padding-top: 0.5vw; transition: 0.5s all ease-in-out; }

.case_f2 .right .itemBox_list .item .textBox .text .more p { transition: 0.5s all ease-in-out; }

.case_f2 .right .itemBox_list .item:hover .more p { opacity: 0; }

.case_f2 .right .itemBox_list .item:hover .more img { width: 1.9vw !important; }

.case_f2 .right .itemBox_list .item:hover .img img { transform: scale(1.05); }

.case_f2 .right .itemBox_list .item2:hover .text .name,
.case_f2 .right .itemBox_list .item2:hover .text .en { opacity: 0; }

.case_f2 .right .itemBox_list .item:hover .qrcode { opacity: 1; transform: translateY(45px); }

.case_f2 .right .itemBox_list .item2:hover .textBox .text .more { opacity: 0; }

.case_f2 .right .itemBox_list .item:last-child { margin-bottom: 0; }

.case_f2 .project_acitve { display: block; }

.case_f2 .tabActive { /*border: 1px solid #8b8b8b !important;*/ }

.case_f2 .tabActive div { /*background-color: #38bcd3 !important;*/ }

.showCase { width: 100%; height: auto; padding-bottom: 50px; position: relative; }

.showCase ul li { height: 50vh; position: relative; }

.showCase ul li:hover .info .icon::before { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: #fff; border-radius: 50%; content: ''; animation: scaleAnimate 1s ease infinite; -webkit-animation: scaleAnimate 1s ease infinite; }

@-webkit-keyframes scaleAnimate {
    from { -webkit-transform: scale(1); opacity: 0.5; }

    to { -webkit-transform: scale(2); opacity: 0; }
}

.showCase ul li .thum { height: 100%; position: relative; overflow: hidden; }

.showCase ul li .pic { width: 100%; height: 100%; }

.showCase ul li .img { position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; background: center center no-repeat; background-size: cover; }

.showCase ul li .pic::after { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; content: ''; background: rgba(0, 0, 0, .1); }

.showCase ul li .info { width: 60%; height: 100%; position: absolute; left: 20%; top: 0%; color: #fff; display: flex; align-items: center; justify-content: space-between; }

.showCase ul li .info .name { font-size: 2vw; font-weight: bold; text-shadow: 0px 0px 5px rgb(0 0 0 / 20%); -webkit-text-stroke: 1px rgba(0, 0, 0, .05); }

.showCase ul li .info .name b { display: block; width: 100%; }

.showCase ul li .info .name p { font-weight: normal; display: block; margin-top: 5px; font-family: 'montserrat'; font-size: 2.4vw; text-transform: uppercase; }

.h5Bg { width: 100%; height: 100vh; position: fixed; left: 0%; top: 0%; background: url(/shuwon/assets/images/Background.svg) center center no-repeat; background-size: cover; overflow: hidden; }

.h5Top { width: 100%; height: 100vh; position: relative; overflow: hidden; }

.h5Top .title { width: auto; height: auto; position: absolute; left: 10%; top: 40%; color: #fff; font-size: 60px; display: flex; justify-content: center; overflow: hidden; z-index: 2; flex-wrap: wrap; text-align: center; }

.h5Ball { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; }

.h5Ball .bg { height: 300%; background: url(/shuwon/assets/images/Planets.svg) no-repeat; background-size: cover; position: relative; }

.h5Top .title b { display: block; width: 100%; color: #fff; margin-bottom: 30px; }

.h5Top .title p { font-size: 20px; display: block; width: 100%; }

.h5Top .marks { width: 100%; padding-top: 15px; font-size: 16px; display: flex; flex-wrap: wrap; }

.h5Top .marks span { background: #fff; color: #0075ff; border-radius: 40px; padding: 3px 15px; margin-right: 5px; }

.appBanner { width: 100%; height: 100vh; position: relative; background: url(/shuwon/assets/images/appBg.jpg) center center no-repeat; background-size: cover; overflow: hidden; }

.appBanner .card { width: 100%; height: 100%; position: relative; }

.sloganTitle { color: white; font-size: 60px; font-family: SemiBold; display: flex; justify-content: center; position: absolute; overflow: hidden; width: 90%; left: 0%; text-align: center; top: 45%; z-index: 2; font-family: 'Alibaba'; flex-wrap: wrap; }
.h5Top .sloganTitle { font-size: 46px; }
.sloganTitle .b,
.sloganTitle .p { display: block; position: relative; width: 100%; overflow: hidden; }

.sloganTitle b { display: block; width: 100%; }

.sloganTitle .b { font-weight: bold; width: 100%; margin-bottom: 10px; }

.sloganTitle p { -webkit-transform: translateY(100%); -webkit-transition: all 1.5s cubic-bezier(.165, .84, .44, 1); }

.sloganTitle .p p { -webkit-transition: all 1.5s cubic-bezier(.165, .84, .44, 1) .5s; }

.sloganTitle.animated p { -webkit-transform: translateY(0%); }

.sloganTitle .p { font-size: 20px; }

.o-clients { width: 100%; display: block; padding-top: 0vw; position: relative; background-color: #fff; }

.o-clients__row { width: 100%; display: flex; position: relative; justify-content: flex-end; margin-top: 100px; }

.o-clients__col { display: table-cell; }

.o-clients__col.has-logos { width: 814px; }

.o-clients__title { display: block; line-height: 1.6; padding-top: 50px; font-family: 'montserrat'; font-weight: 400; font-size: 24px; text-transform: uppercase; }

.o-clients__logos { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; align-content: center; justify-content: space-evenly; }

.o-clients__logos li { width: 25%; padding: 40px 10px; text-align: center; }

.o-container { width: 100%; display: block; margin-left: auto; margin-right: auto; padding-left: 60px; padding-right: 60px; max-width: 1314px; position: relative; }

.o-projects { width: 100%; display: block; padding-top: 100px; position: relative; z-index: 1; }

.o-projects__shape-right { right: 0; top: -60px; z-index: 5; width: 12%; position: absolute; pointer-events: none; }

.o-projects__title { padding: 0 3%; display: block; line-height: .9; letter-spacing: -3.4px; font-family: montserrat; font-weight: 400; color: #eaeaea; font-size: 100px; text-transform: uppercase; }

.o-projects.o-projects--grid-home { z-index: 4; padding-top: 150px; }

.c-project__mask { display: block; position: absolute; top: 0; left: 0; width: 0; height: 0; }

.c-project__mask--md { display: none; }

.o-projects.o-projects--grid-home { z-index: 4; padding-top: 150px; }

.o-projects__row { display: flex; margin-top: -5.5%; }

.c-menu__close svg,
.c-project { width: 100%; display: block; position: relative; }

.c-project { font-size: 12px; line-height: 1.75; background-size: cover; font-family: ProximaNova-Regular; font-weight: 400; color: #000; background-position: 50%; background-repeat: no-repeat; background-color: #fff; padding-left: 60px; padding-right: 60px; }

.c-project.is-white { color: #fff; background-color: #000; }

.c-project.c-project--left { -webkit-clip-path: url(#projectClipLeft); clip-path: url(#projectClipLeft); }

.o-projects.o-projects--grid .c-project { font-size: 10px; padding: 0; }

.o-projects.o-projects--grid .c-project__inner { height: 0; padding-bottom: 78.47222%; padding-left: 60px; padding-right: 60px; }

.c-project__bg,
.c-project__img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.c-project__img { background-repeat: no-repeat; background-position: 50%; background-size: cover; will-change: opacity, visibility, transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.c-project__img:after,
.c-project__img:before { background-repeat: no-repeat !important; }

.c-project__img .bgs { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: opacity 0.5s ease 500ms; background-position: 95% 60%; background-repeat: no-repeat; background-size: 60%; background-position-x: 95%; background-position-y: 60%; background-repeat-x: no-repeat; background-repeat-y: no-repeat; }

.c-project__img .bgs { z-index: -100; opacity: 1; }

.o-clients__shape-left { left: 0; top: 2vw; width: 28%; z-index: 1; position: absolute; pointer-events: none; }

.o-projects.o-projects--grid .c-project__container { width: 100%; max-width: 360px; padding-bottom: 30px; padding-top: 15%; display: block; color: #fff; position: relative; }

.c-project__title { line-height: 1; padding-top: 20px; padding-bottom: 30px; letter-spacing: -1.2px; font-family: AvantGardeGothicITCW02Bd; font-weight: 400; font-size: 3.82353rem; }

.o-projects.o-projects--grid .c-project__title { font-size: 2vw; padding-bottom: 20px; }

.c-project__table { width: 190px; text-align: left; margin-bottom: 45px; table-layout: fixed; display: flex; flex-wrap: wrap; }

.o-projects.o-projects--grid .c-project__table { margin-bottom: 30px; }

.c-project.is-white .c-btninline { color: #fff; }

.c-project.c-project--right { margin-top: 1px; -webkit-clip-path: url(#projectClipRight); clip-path: url(#projectClipRight); }

.o-clients__shape-left { left: 0; top: 2vw; width: 28%; z-index: 1; position: absolute; pointer-events: none; }

.o-experts { display: block; padding-top: 100px; padding-bottom: 100px; position: relative; line-height: 1.65; color: #000; font-size: 1rem; background-color: #fff; z-index: 2; }

.o-clients__shape-left b { position: absolute; top: 50%; -webkit-transform: translateY(-50%); color: #fff; text-align: center; width: 60%; font-family: montserrat; text-transform: uppercase; font-size: 24px; }

.hzlc ul { display: flex; flex-wrap: wrap; justify-content: space-between; }

.hzlc ul li { width: 240px; height: 240px; position: relative; background: url(/shuwon/assets/images/lc1.png) no-repeat; background-size: cover; position: relative; }

.hzlc ul li:last-child { background-image: url(/shuwon/assets/images/lc2.png) }

.o-experts__wave { right: 0; top: -8%; z-index: 5; width: 30vw; position: absolute; pointer-events: none; }

.o-experts__wave svg { width: 100%; display: block; }

.o-experts__container { width: 100%; display: block; max-width: 830px; }

.o-experts__logo.show-mobile { display: none; margin-top: 0; }

.o-experts__title { line-height: .9; padding-bottom: 50px; letter-spacing: -1.5px; font-family: montserrat; font-weight: 400; font-size: 60px; text-transform: uppercase; text-align: center; color: #394374; }

.o-experts__title p { font-size: 28px; font-weight: bold; margin-top: 10px; }

.u-clearfix { display: block; }

.o-experts__col { width: 50%; padding-right: 25px; }

.o-experts__col.is-right { float: right; }

.o-experts__col p { margin-bottom: 30px; }

.o-experts__col.is-left { float: left; }

.o-experts__logo { width: 100%; display: block; max-width: 156px; margin-top: 50px; }

.card__comet { position: relative; width: 8px; height: 8px; background-color: #fff; border-radius: 100%; }

.card__cometOuter { position: absolute; top: 30%; left: 25%; }

.card__comet--second { right: -30px; top: -15px; transform: scale(0.6); }

.card__comet:before,
.card__comet:after { content: ""; position: absolute; left: 0; top: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 27%, rgba(255, 255, 255, 0) 100%); border-radius: 20px; transform: rotate(-45deg); }

.card__comet:before { width: 18px; height: 70px; transform-origin: -2px 13px; }

.card__comet:after { width: 12px; height: 80px; transform-origin: 0px 8px; }

.card__circle,
.card__smallCircle { position: absolute; border-radius: 100%; background-image: linear-gradient(-239deg, #3B4576 0%, #242A48 59%); box-shadow: -10px -15px 90px 0 #191C41; z-index: 2; }

.card__circle { right: 5vw; bottom: 2vw; width: 35vw; height: 35vw; }

.card__smallCircle { right: 40%; top: -2.5vw; width: 5vw; height: 5vw; -webkit-transform: scale(3); box-shadow: 0px 0px 30px 0 #191c41; }

.card__orangeShine,
.card__greenShine { position: absolute; background-repeat: no-repeat; background-size: cover; }

.card__orangeShine { background-image: url(/shuwon/assets/images/orange_shine.png); right: -30vw; top: -10vw; z-index: 2; width: 100vw; height: 100vw; }

.card__greenShine { background-image: url(/shuwon/assets/images/green_shine.png); left: 25%; top: 50%; -webkit-transform: translateY(-50%); z-index: 1; width: 50vw; height: 50vw; background-size: contain; }

.showCase ul li .info .icon { width: 50px; height: 50px; position: relative; line-height: 50px; text-align: center; color: #fff; display: block; border-radius: 50%; font-size: 18px; -webkit-transition: all .5s; }

.boxes.cbox { padding: 50px 0px 0px; }

.showCase ul li:hover .info .icon i { background: #000; }

.showCase ul li .info .icon:hover i { background: #eb635c; color: #fff; }

.showCase ul li .info .icon i { width: 100%; height: 100%; display: block; border-radius: 50%; background: #000; position: relative; }

.l-c { position: absolute; width: 100%; top: 0; left: 0; height: 100%; background-color: #fff; -webkit-transform: scaleX(0) translate3d(0, 0, 0); -moz-transform: scaleX(0) translate3d(0, 0, 0); transform: scaleX(0) translate3d(0, 0, 0); -webkit-transition: -webkit-transform 1.5s ease-in-out; transition: -webkit-transform 1.5s ease-in-out; -o-transition: -o-transform 1.5s ease-in-out; -moz-transition: transform 1.5s ease-in-out, -moz-transform 1.5s ease-in-out; transition: transform 1.5s ease-in-out; transition: transform 1.5s ease-in-out, -webkit-transform 1.5s ease-in-out, -moz-transform 1.5s ease-in-out, -o-transform 1.5s ease-in-out; -webkit-transform-origin: 0 center; -moz-transform-origin: 0 center; -ms-transform-origin: 0 center; -o-transform-origin: 0 center; transform-origin: 0 center }

/*.l-c.active{-webkit-animation:lc 1s ease-in-out forwards;-moz-animation:lc 1s ease-in-out forwards;-o-animation:lc 1s ease-in-out forwards;animation:lc 1s ease-in-out forwards}*/
.lcAnimation.active .l-c,
.lcAnimation2.active .l-c { -webkit-animation: lc 1s ease-in-out forwards; -moz-animation: lc 1s ease-in-out forwards; -o-animation: lc 1s ease-in-out forwards; animation: lc 1s ease-in-out forwards }

@-webkit-keyframes lc {
    0% { -webkit-transform: scaleX(0) translate3d(0, 0, 0); transform: scaleX(0) translate3d(0, 0, 0) }

    49% { -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); -webkit-transform-origin: 0 center; transform-origin: 0 center }

    50% { -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); -webkit-transform-origin: 100% center; transform-origin: 100% center }

    100% { -webkit-transform: scaleX(0) translate3d(0, 0, 0); transform: scaleX(0) translate3d(0, 0, 0); -webkit-transform-origin: 100% center; transform-origin: 100% center }
}

@-moz-keyframes lc {
    0% { -moz-transform: scaleX(0) translate3d(0, 0, 0); transform: scaleX(0) translate3d(0, 0, 0) }

    49% { -moz-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); -moz-transform-origin: 0 center; transform-origin: 0 center }

    50% { -moz-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); -moz-transform-origin: 100% center; transform-origin: 100% center }

    100% { -moz-transform: scaleX(0) translate3d(0, 0, 0); transform: scaleX(0) translate3d(0, 0, 0); -moz-transform-origin: 100% center; transform-origin: 100% center }
}

@-o-keyframes lc {
    0% { transform: scaleX(0) translate3d(0, 0, 0) }

    49% { transform: scaleX(1) translate3d(0, 0, 0); -o-transform-origin: 0 center; transform-origin: 0 center }

    50% { transform: scaleX(1) translate3d(0, 0, 0); -o-transform-origin: 100% center; transform-origin: 100% center }

    100% { transform: scaleX(0) translate3d(0, 0, 0); -o-transform-origin: 100% center; transform-origin: 100% center }
}

@keyframes lc {
    0% { -webkit-transform: scaleX(0) translate3d(0, 0, 0); -moz-transform: scaleX(0) translate3d(0, 0, 0); transform: scaleX(0) translate3d(0, 0, 0) }

    49% { -webkit-transform: scaleX(1) translate3d(0, 0, 0); -moz-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); -webkit-transform-origin: 0 center; -moz-transform-origin: 0 center; -o-transform-origin: 0 center; transform-origin: 0 center }

    50% { -webkit-transform: scaleX(1) translate3d(0, 0, 0); -moz-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); -webkit-transform-origin: 100% center; -moz-transform-origin: 100% center; -o-transform-origin: 100% center; transform-origin: 100% center }

    100% { -webkit-transform: scaleX(0) translate3d(0, 0, 0); -moz-transform: scaleX(0) translate3d(0, 0, 0); transform: scaleX(0) translate3d(0, 0, 0); -webkit-transform-origin: 100% center; -moz-transform-origin: 100% center; -o-transform-origin: 100% center; transform-origin: 100% center }
}



.banner-swiper .swiper-slide .parallax { overflow: hidden; height: 100%; }

.banner-swiper .swiper-slide { width: 100vw; height: 100vh; overflow: hidden; }

.banner-swiper .inner { width: 100%; height: 100%; background: center center no-repeat; background-size: cover; position: absolute; left: 0%; top: 0%; }

.inputBox { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0px 50px; }

.inputBox input { width: 21%; height: 50px; border: none; background: transparent; padding-bottom: 10px; -webkit-animation: input-wave 0.4s linear infinite; animation: input-wave 0.4s linear infinite; background-image: url(/shuwon/assets/images/input-bkg-green.png); background-repeat: repeat-x; color: #fff; outline: none; font-size: 16px; user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; }

.inputBox input::-webkit-input-placeholder { text-transform: uppercase; color: rgba(255, 255, 255, .5); }

.inputBox .submitBtn { width: 200px; margin: 0px auto; height: auto; border-radius: 50px; display: flex; align-items: center; line-height: 50px; justify-content: center; font-size: 16px; border: 2px solid #fff; margin-top: 50px; cursor: pointer; }
.iDes { display: block; width: 100%; position: relative; margin-top: 45px; font-size: 14px; text-decoration: wavy; color: rgba(255,255,255,.7); }
.iDes span { font-family: 'GraphikLCG'; font-size: 28px; padding: 5px 15px; text-decoration: none; color: #00cbcb; background: #fff; border-radius: 40px; margin: 0px 1px; }

.inputBox .submitBtn.active { opacity: .5; cursor: no-drop; }

.inputBox .submitBtn p { width: calc(100% - 50px); }

.inputBox .submitBtn .icon { width: 30px; }

.inputBox .submitBtn:hover { background: #a200ff; /* color: #4612a4; */ }

@keyframes input-wave {
    from { background-position: -0px bottom }

    to { background-position: 18px bottom }
}

@-webkit-keyframes input-wave {
    from { background-position: -0px bottom }

    to { background-position: 18px bottom }
}

.hzlc ul li::before { width: 160px; height: 160px; position: absolute; left: 45%; top: 50%; background: #fff; box-shadow: 0px 0px 15px rgb(0 0 0 / 5%); content: ''; -webkit-transform: translate(-50%, -50%); border-radius: 50%; }

.hzlc ul li .num { width: 45px; height: 45px; position: absolute; border-radius: 50%; color: #fff; line-height: 41px; text-align: center; right: 38px; top: 29px; font-family: GraphikLCG; font-size: 18px; background: #eb635c; border: 3px solid #fff; box-shadow: 0px 0px 15px rgb(0 0 0 / 10%); }

.hzlc ul li .txt { width: 50%; height: auto; left: 20%; top: 70px; text-align: center; position: absolute; }

.hzlc ul li .txt b { font-weight: bold; font-size: 1.6vw; margin-bottom: 10px; display: block; }

.hzlc ul li .txt p { font-size: 0.9vw; }

.c-btninline { border: 0; width: 150px; position: relative; border-radius: 100%; display: block; overflow: hidden; }

.c-header__link small,
.c-header__link span,
.c-project__container small { display: inline-block; vertical-align: middle; }

.c-header__link small,
.c-project__container small { width: 41px; height: 41px; padding-left: 5px; margin-left: 10px; text-align: center; padding-right: 5px; }

.c-btn:after,
.c-btn:before { top: 0; left: 0; right: 0; bottom: 0; content: "\A"; position: absolute; }

.c-btn:before { z-index: 1; background-image: linear-gradient(105deg, #c1212f, #f16835); }

.c-btn span { z-index: 3; position: absolute; width: 120px; padding: 10px; background: #fff; border-radius: 50%; top: 0px; left: 50%; margin-left: -50px; opacity: 1; visibility: visible; -webkit-transition: all .5s; overflow: hidden; }


.c-btn:before { top: 0; left: 0; right: 0; bottom: 0; content: ""; position: absolute; border-radius: 50%; display: none; }

.c-btn:after { width: 20px; height: 20px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); background: url(/shuwon/assets/images/arrow_down.png) no-repeat; background-size: cover; content: ''; z-index: 10; display: none; }

.c-btninline small { display: inline-block; vertical-align: middle; position: relative; }

.c-btninline small { width: 41px; height: 41px; padding-left: 5px; margin-left: 10px; text-align: center; padding-right: 5px; }

.o-projects.o-projects--grid .c-project__table span { display: block; width: 45%; line-height: 2; }

.b5 { background: transparent; }

.h5List ul { display: flex; flex-wrap: wrap; }

.h5List ul li { width: 48%; position: relative; margin-right: 4%; margin-bottom: 35px; }

.h5List ul li:nth-child(even) { margin-right: 0%; }

.h5List ul li .thum { position: relative; overflow: hidden; border-radius: 15px 15px 0px 0px; }

.h5List ul li .pic { position: relative; width: 100%; -webkit-transition: all 0.5s; }

.h5List ul li .title { width: 100%; height: auto; padding: 10px 0px; color: #fff; position: relative; display: flex; justify-content: space-between; align-items: center; }

.h5List ul li .title .n { width: calc(100% - 60px); height: auto; font-size: 18px; line-height: 50px; }

.h5List ul li .qrcode { position: absolute; width: 120px; top: 55%; left: 50%; -webkit-transform: translate(-50%, -50%); -webkit-transition: all .5s; text-align: center; color: #fff; opacity: 0; visibility: hidden; }

.h5List ul li .title .i { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }

.h5List ul li .pic::after { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; content: ''; background: #6522d4; opacity: 0; -webkit-transition: all .5s; }

.h5List ul li .qrcode img { display: block; box-shadow: 0px 0px 15px rgba(0, 0, 0, .1); margin-bottom: 5px; }

/*.h5List ul li:hover .pic::after { opacity: 0.9; }
.h5List ul li:hover .qrcode { top: 50%; opacity: 1; visibility: visible; }*/




.seoList ul { display: flex; flex-wrap: wrap; }
.seoList ul li { width: 30%; position: relative; margin-right: 5%; margin-bottom: 35px; }
.seoList ul li:nth-child(3n) { margin-right: 0%; }
.seoList ul li .thum { position: relative; overflow: hidden; border-radius: 15px 15px 0px 0px; }
.seoList ul li .pic { position: relative; width: 100%; -webkit-transition: all 0.5s; }
.seoList ul li .title { width: 100%; height: auto; padding: 10px 0px; color: #fff; position: relative; display: flex; justify-content: space-between; align-items: center; }
.seoList ul li .title .n { width: calc(100% - 60px); height: auto; font-size: 16px; line-height: 50px; }
.seoList ul li .qrcode { position: absolute; width: 120px; top: 55%; left: 50%; -webkit-transform: translate(-50%, -50%); -webkit-transition: all .5s; text-align: center; color: #fff; opacity: 0; visibility: hidden; }
.seoList ul li .title .i { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.seoList ul li .pic::after { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; content: ''; background: #6522d4; opacity: 0; -webkit-transition: all .5s; }
.seoList ul li .qrcode img { display: block; box-shadow: 0px 0px 15px rgba(0, 0, 0, .1); margin-bottom: 5px; }
/*.seoList ul li:hover .pic::after { opacity: 0.9; }
.seoList ul li:hover .qrcode { top: 50%; opacity: 1; visibility: visible; }*/



.boxes.b0 { background: #4612a4; padding-top: 200px; padding-bottom: 70px; }

.hotFocus .swiper-slide { display: flex; flex-wrap: wrap; justify-content: space-between; }

.hotFocus .swiper-slide .thum { width: 50%; overflow: hidden; }

.hotFocus .swiper-slide .pic { background: center center no-repeat; background-size: cover; }

.hotFocus .swiper-slide .info { width: 45%; color: #fff; }

.hotFocus .swiper-slide .info .title { font-size: 2vw; line-height: 1.4; margin-bottom: 25px; }

.hotFocus .swiper-slide .info .des { width: 100%; font-size: 14px; line-height: 2; opacity: .7; }

.hotFocus .swiper-slide .info .more { width: 165px; height: auto; background: transparent; border: 1px solid #fff; position: relative; display: block; line-height: 43px; text-align: center; color: #fff; margin-top: 5vw; }

.hotFocus .swiper-slide .info .more:hover { background: #fff; color: #002450; }

.hotFocus { padding-bottom: 50px; }

.hotFocus .swiper-pagination-bullet-active { background: #fff; }

#page { margin-bottom: 0px; }

#page li.xl-prevPage,
#page li.xl-nextPage { display: none; }

#page li { border-radius: 5px; }

#page li.xl-active { background-color: #20c9b6; border-color: #20c9b6; color: #FFF; }

#page li:hover { background-color: #20c9b6 !important; }

.detail_page { background: #fff; padding: 0px; }

.detailTop { width: 100%; height: auto; position: relative; padding-top: 250px; padding-bottom: 50px; background: #4612a4; color: #fff; }

.detailTop .title { display: block; margin-bottom: 20px; line-height: 1.4; font-size: 40px; font-weight: bold; width: 900px; max-width: 900px; }

.detailTop .info { display: block; line-height: 1; font-size: 14px; opacity: .7; font-family: 'GraphikLCG'; }

.detailTop .w1400::after { position: absolute; left: 4px; bottom: -64px; content: ""; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid #4612a4; }

.dpl { width: 100%; height: auto; background: #fff; padding: 50px 0px; }

.dpl .w1400 { display: flex; justify-content: space-between; }

.dpl .dpBox { max-width: 900px; width: 65%; }

.dpl .right { width: 30%; background: #fff; position: relative; top: -120px; padding: 20px 30px; }

.dpl .right h2 { display: block; line-height: 40px; font-size: 30px; border-bottom: 1px solid rgba(0, 0, 0, .05); padding-bottom: 10px; margin-bottom: 15px; }

.ndc_npnews { width: 100%; height: auto; display: flex; border: none; border-top: 1px solid rgba(0, 0, 0, .05); background: white; padding: 2vw 0; }

.ndc_npnews .w1400 { display: flex; justify-content: space-between; align-items: self-end; }

.ndc_npnews .post_next,
.ndc_npnews .post_prev { width: 48%; flex: 1; line-height: 20px; padding: 20px; box-sizing: border-box; display: block; }

.ndc_npnews .post_next .txt,
.ndc_npnews .post_prev .txt { font-size: 14px; padding-bottom: 1vw; }

.ndc_npnews .post_next a,
.ndc_npnews .post_prev a { font-size: 20px; line-height: 1.6; font-weight: bold; }

.ndc_npnews .post_next { direction: rtl; }

.same_news { width: 100%; }

.same_news a { display: block; position: relative; margin-bottom: 15px; }
.same_news a .pic { width: 100%; position: relative; margin-bottom: 10px; }

.same_news a .name { font-size: 16px; line-height: 1.6; border-bottom: 1px solid rgba(0, 0, 0, .05); padding-bottom: 10px; }

.same_news a .time { font-size: 14px; opacity: .7; font-family: 'GraphikLCG'; margin-top: 5px; }

.same_news a:last-child { border-bottom: none; }

.singePage p a { font-weight: bold; }

.detailTop .info span { margin-right: 15px; }

.singePage p a:hover { text-decoration: underline; }

.boxes.homeService { padding: 0px; }

.homeService ul li { height: 100vh; position: relative; overflow: hidden; background: #000; display: flex; }

.homeService ul li .bgs { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background-image: url(/shuwon/assets/images/homeAppBg.jpg); background-size: 100% auto; background-position: center center; /* background-attachment: fixed; */ /* opacity: .8; */ }

.homeService ul li:nth-child(1) .bgs { /* opacity: .8; */ }

.homeService ul li .bgs.bgs3 { background-image: url(/shuwon/assets/images/homeAppBg3.jpg); }

.homeService ul li .bgs.bgs2 { background-image: url(/shuwon/assets/images/homeAppBg2.jpg); }

.homeService ul li .bgs.bgs4 { background-image: url(/shuwon/assets/images/homeAppBg4.jpg); }


.homeService ul li .info .num { font-family: akrobatblack; font-size: 12rem; color: transparent; -webkit-text-stroke: 3px rgba(0, 0, 0, .3); line-height: 1.2; width: 100%; }

.homeService ul li .info .txt { width: 100%; position: relative; /* margin-bottom: 40px; */ }

.homeService ul li .info .txt .name { position: relative; font-size: 6.4rem; font-weight: bold; line-height: 1.3; /* margin-bottom: 10px; */ }

.homeService ul li .info .txt .des { font-size: 2rem; line-height: 1.35; margin-top: 2rem; color: #4C4C4C; }


@keyframes breathe {
    0% { transform: scale(.99); }

    50% { transform: scale(1.03); }

    100% { transform: scale(.99); }
}

.serviceList ul li:nth-child(even) .enter .byte { margin-left: 10px; margin-right: 0px; }

.homeService ul li .enter,
.serviceList ul li .enter { width: 200px; height: 60px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'GraphikLCG'; text-transform: uppercase; position: relative; float: left; }
.enterCase { width: 200px; height: 60px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'GraphikLCG'; text-transform: uppercase; position: relative; margin: 80px auto 0px; }
.homeService ul li .enter::before,
.serviceList ul li .enter::before, .enterCase::before { width: 100%; height: 100%; border-radius: 60px; background: #4612a4; position: absolute; left: 0%; top: 0%; content: ''; z-index: -1; -webkit-transition: all .35s; }

.homeService ul li .enter::after { /* content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url(/shuwon/assets/images/high-light.png) no-repeat center center;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
	animation: high 2.4s cubic-bezier(0.23, 0.04, 0.51, 0.8) 0s infinite; */ }

@-webkit-keyframes high {
    0% { left: -100%; }
    100% { left: 100%; }
}

.serviceList ul li .enter::before, .enterCase::before { z-index: 0; }


.homeService ul li .enter:hover::before,
.serviceList ul li .enter:hover::before, .enterCase:hover::before { -webkit-transform: scale(1.06, 1.12); }

.homeService ul li .enter .byte, .enterCase .byte,
.serviceList ul li .enter .byte { font-size: 16px; margin-right: 10px; position: relative; }

.homeService ul li .enter i,
.serviceList ul li .enter i, .enterCase i { font-size: 24px; position: relative; }

.serviceList ul li .info .num,
.serviceList ul li .enter .num { font-size: 60px; }

.rocket { width: 291px; height: 820px; position: fixed; left: 30%; margin-left: -145px; bottom: 0px; background: url(/shuwon/assets/images/shuwon_recket.png) no-repeat; background-size: auto 100%; -webkit-animation: rockets 0.5s steps(1) infinite; -webkit-transition: all 2s cubic-bezier(.165, .84, .44, 1); }

@-webkit-keyframes rockets {
    0% { background-position: 0 0%; }

    20% { background-position: 25% 0%; }

    40% { background-position: 50% 0%; }

    60% { background-position: 75% 0; }

    80% { background-position: 100% 0; }

    100% { background-position: 0 0%; }
}

.h5Top .sloganTitle { text-align: left; left: 40%; width: 45%; }



.h5Top .sloganTitle p { -webkit-transition: all 1.5s cubic-bezier(.165, .84, .44, 1) 0.5s; }

.h5Top .sloganTitle .p p { -webkit-transition: all 1.5s cubic-bezier(.165, .84, .44, 1) 1s; }

.singePage video { display: block; width: 100%; height: auto; }

.testSwiper { margin-left: 0px; }

.testSwiper .swiper-slide { padding-bottom: 0px; display: flex; }

.testSwiper .swiper-slide::before { width: calc(100% - 100px); height: 150px; position: absolute; left: 100px; top: 0px; background: #fff; border-radius: 0px 100px 100px 0px; content: ''; display: none; }

.testBox { width: 100%; position: relative; }

.testBox .controller { position: absolute; width: 100%; left: 0; top: calc(50% - 6rem); transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; z-index: 3; }

.testBox .controller .icon { cursor: pointer; transition: all .3s; pointer-events: all; width: 3rem; }

.testBox .controller .left { margin-left: -20rem; }
.testBox .controller .right { margin-right: -20rem; }

@media screen and (min-width: 1200px) {
    .testBox .controller .icon:hover { opacity: .5; }
}

.testSwiper .swiper-pagination-bullet.swiper-pagination-bullet-active { -webkit-transform: scale(1); }

.testSwiper .swiper-pagination-bullet { width: 10px; height: 10px; background: #fff; -webkit-transform: scale(0.7); }

.swiper-container-horizontal.testSwiper > .swiper-pagination-bullets .swiper-pagination-bullet + .swiper-pagination-bullet { margin: 0px; margin-left: 10px; }

.testSwiper .swiper-slide .content { height: auto; font-size: 2.2rem; line-height: 2; text-align: justify; color: #fff; position: relative; }
.testSwiper .swiper-slide .content .name { /* font-size: 22px; */ text-align: right; }
.testSwiper .swiper-slide .info { display: flex; width: 100px; align-items: center; height: 150px; position: relative; border-radius: 100px 0px 0px 100px; background: #fff; justify-content: center; display: none; }

.testSwiper .swiper-pagination { position: relative; height: 20px; margin-top: 20px; }

.testSwiper .swiper-slide .info .img { width: 60px; height: 60px; background: #4612a4; border-radius: 50%; line-height: 60px; font-size: 24px; }

.testSwiper .swiper-slide .info .name { width: calc(100% - 60px); margin-left: 10px; text-align: left; font-size: 12px; font-weight: normal; height: 32px; line-height: 16px; }

.testSwiper .swiper-slide .info .name b { font-weight: normal; font-size: 14px; text-transform: uppercase; font-family: 'GraphikLCG'; }

.testSwiper .swiper-slide .info .name p { opacity: .5; }

.testBox .yh { width: auto; position: absolute; left: 0%; top: 0%; color: #fff; font-size: 36px; }

.banner { height: 100vh; position: fixed; width: 100%; background: #4612a4; left: 0px; top: 0px; }

.caseNav.pos .swiper-wrapper { justify-content: center; }

#container-p5 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 1; z-index: 0; }

.slogan { width: 80%; height: auto; position: absolute; left: 5%; color: #fff; top: 50%; -webkit-transform: translateY(-50%); }

.slogan h1 { font-family: montserrat; text-transform: uppercase; font-size: 7vw; display: block; width: 100%; opacity: 0; }

.slogan h2 { position: relative; font-size: 4vw; font-weight: bold; width: 100%; margin-bottom: 1vw; opacity: 0; }

.slogan h3 { position: relative; font-size: 1.1vw; font-weight: normal; width: 100%; opacity: 0; color: rgba(255, 255, 255, .7); }

#myCanvas { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; }

.aboutBox { width: 100%; height: 100vh; position: relative; background: #1a0e60 url(/shuwon/assets/images/aboutBg.jpg) left bottom no-repeat; background-size: cover; background-attachment: fixed; }

.aSlogan { width: 60%; height: auto; position: absolute; left: 5%; top: 45%; -webkit-transform: translateY(-50%); color: #fff; line-height: 2; }

.aSlogan p { display: block; position: relative; width: 100%; font-size: 1.4vw; }

.aSlogan b { font-size: 6vw; width: 100%; line-height: 1.4; display: block; }

.aMarks { width: auto; height: auto; position: absolute; left: 60%; top: 45%; -webkit-transform: translateY(-50%); }

.aMarks .aBox { width: 210px; height: 170px; position: absolute; left: 0%; top: 0px; background: #d02c75; color: #fff; border-radius: 40px; text-align: center; }

.aMarks .aBox:nth-child(1) { top: -200px; }

.aMarks .aBox:nth-child(2) { left: 0px; top: 100px; background: #f4812e; }

.aMarks .aBox:nth-child(2)::before { background: #f4812e; -webkit-animation-delay: .5s; }

.aMarks .aBox:nth-child(3) { left: 250px; top: -50px; background: #582dd2; -webkit-animation-delay: 1s; }

.aMarks .aBox:nth-child(3)::before { background: #582dd2; }

.aMarks .aBox::before { width: 100%; height: 100%; position: absolute; left: 0%; top: 0px; background: #d02c75; opacity: .3; content: ''; -webkit-transform: rotate(15deg); border-radius: 40px; z-index: -1; -webkit-animation: rectAnimate 2s linear infinite; }

.boxes.us { padding: 0px; }


.boxes.us .singePage b { display: block; margin-bottom: 10px; text-decoration: underline; }

.boxes.service { background: #000; color: #fff; padding-top: 0px; overflow: hidden; padding-bottom: 200px; }

.aboutWarp { width: 100%; display: flex; justify-content: space-between; align-items: center; }

.aboutWarp .singePage { width: calc(100% - 550px); }

.aboutWarp .aboutImg { width: 500px; }

.bottomImg { position: absolute; width: 100%; height: auto; left: 0px; bottom: 0px; }

@-webkit-keyframes rectAnimate {

    0%, 100% { -webkit-transform: rotate(0deg); }

    50% { -webkit-transform: rotate(30deg); }
}

.aMarks .aBox .icon { margin-top: 20px; font-size: 36px; margin-bottom: 10px; }

.aMarks .aBox .txt { width: 100%; height: auto; position: relative; font-family: montserrat; text-transform: uppercase; margin-bottom: 10px; }

.aMarks .aBox .txt b { display: block; font-size: 24px; margin-bottom: 5px; }

.aMarks .aBox .txt p { font-size: 20px; font-weight: bold; }

.serviceList ul li { display: flex; justify-content: space-between; flex-wrap: wrap; color: #fff; margin-bottom: 5vw; position: relative; }

.serviceList ul li .thum { width: 50%; position: relative; overflow: hidden; }

.serviceList ul li .thum .pic { background: center center no-repeat; background-size: cover; }

.serviceList ul li .info { width: 45%; display: block; }

.serviceList ul li .info .title { width: 100%; position: relative; font-size: 40px; font-weight: bold; margin-bottom: 10px; }

.serviceList ul li .info .des { width: 100%; font-size: 18px; margin-bottom: 45px; line-height: 1.7; }

.serviceList ul li .info .num { font-family: akrobatblack; font-size: 180px; line-height: 180px; height: 90px; overflow: hidden; margin-bottom: 5px; color: transparent; -webkit-text-stroke: 2px #4727a2; }

.serviceList ul li:nth-child(even) { direction: rtl; }


.screenBox { width: 100%; height: auto; position: relative; color: #fff; margin-bottom: 100px; }

.screenBox .sDes { display: block; width: 100%; height: auto; position: relative; margin-bottom: 50px; }

.screenBox .sDes b { display: block; width: 100%; font-size: 50px; text-transform: uppercase; margin-bottom: 10px; }

.screenBox .sDes p { font-size: 16px; }

.earthBox { width: 100%; display: flex; position: relative; justify-content: space-between; align-items: center; }

.earthBox .earth { width: 400px; height: auto; position: relative; }

.earthNav { width: 120px; height: auto; position: absolute; top: 50%; -webkit-transform: translateY(-50%); left: 460px; }

.earthNav img { width: 300px; position: absolute; left: -270px; top: 10px; max-width: none; }

.earthNav a { display: block; width: 100%; height: auto; line-height: 40px; background: #fff; border-radius: 50px; text-align: center; margin-bottom: 10px; cursor: pointer; -webkit-transition: all .5s; position: relative; left: 0%; }

.earthNav a:hover,
.earthNav a.active { color: #4612a4; left: 20px; }

.earthNav a:nth-child(1) { top: -10px; }

.earthNav a:nth-child(2) { top: -7px; }

.screenImg { width: calc(100% - 700px); height: auto; position: relative; border-radius: 10px; }

.ptn { text-align: center; position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; line-height: 70px; transition: ease .5s; background: #b86dde; border-radius: 50%; cursor: pointer; margin-left: -35px; margin-top: -35px; -webkit-transition: all .5s; }

.ptn span { width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; background: url(/shuwon/assets/images/ptn_icon.png) no-repeat; background-size: 60px auto; }

.ptn:before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #b86dde; opacity: .5; transform: translate(-50%, -50%) scale(.9); transition: all .5s cubic-bezier(.215, .61, .355, 1) 0s; }

.ptn:after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; opacity: .3; border-radius: 50%; border: 1px solid #b86dde; transform: translate(-50%, -50%) scale(.9); transition: all .4s cubic-bezier(.215, .61, .355, 1) 50ms; }

.ptn:hover:before { transform: translate(-50%, -50%) scale(1.3); }

.ptn:hover:after { transform: translate(-50%, -50%) scale(1.6); }

.ptn.active { -webkit-transform: scale(0.5); left: 0%; }

.ptn.active span { background-position: -30px 0; }

.screenImg video { display: block; width: 100%; border-radius: 10px; }

.screenImg ul { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; }

.screenImg ul li { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: center center no-repeat; background-size: cover; opacity: 0; -webkit-transition: all .5s; }

.screenImg ul li.active { opacity: 1; }

.dowebok { width: 100% }

.dowebok .img { margin-left: 5px; display: inline-block; width: 60px; height: auto; background: center center no-repeat; background-size: cover; border-radius: 50%; }

.str_wrap { overflow: hidden; width: 100%; font-size: 12px; line-height: 16px; position: relative; -moz-user-select: none; -khtml-user-select: none; user-select: none; white-space: nowrap }

.str_move { white-space: nowrap; position: absolute; top: 0; left: 0; cursor: move }

.str_move_clone { display: inline-block; vertical-align: top; position: absolute; left: 100%; top: 0 }

.str_vertical .str_move_clone { left: 0; top: 100% }

.str_down .str_move_clone { left: 0; bottom: 100% }

.str_down .str_move,
.str_vertical .str_move { white-space: normal; width: 100% }

.menu_btn { position: fixed; right: 0%; top: 0px; height: 40px; font-size: 0; -webkit-text-size-adjust: none; width: 115px; user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; display: none; z-index: 10; }

.menu_btn p { position: absolute; width: 74%; line-height: 40px; font-size: 13px; background-color: #1d99c1; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; color: #fff; text-transform: uppercase; padding-left: 10px; letter-spacing: 1px; right: 0; top: 0; white-space: nowrap; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: width .25s ease-in-out; -o-transition: width .25s ease-in-out; -moz-transition: width .25s ease-in-out; transition: width .25s ease-in-out }

.menu_btn.active p { width: 100% }

.menu_btn p + p { opacity: 0 }

.menu_btn.active .menu_btn p + p { opacity: 1 }

.menu_btn .btn { width: 47px; height: 47px; position: relative; cursor: pointer; -webkit-transition: all .3s cubic-bezier(.445, .05, .55, .95); -o-transition: all .3s cubic-bezier(.445, .05, .55, .95); -moz-transition: all .3s cubic-bezier(.445, .05, .55, .95); transition: all .3s cubic-bezier(.445, .05, .55, .95); z-index: 20; top: -4px; margin-left: auto; margin-right: 0; border-radius: 50%; user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; }

.menu_btn::before { width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); background: url(/shuwon/assets/images/barNav.png) no-repeat; background-size: cover; animation: navBgRotate 5s linear infinite; content: ''; }

@keyframes navBgRotate {
    0% { transform: translate(-50%, -50%) rotate(0); }

    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.menu_btn .btn span { display: block; height: 3px; width: 20px; background-color: #fff; position: absolute; top: 50%; right: 13.5px; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all .3s cubic-bezier(.445, .05, .55, .95); -o-transition: all .3s cubic-bezier(.445, .05, .55, .95); -moz-transition: all .3s cubic-bezier(.445, .05, .55, .95); transition: all .3s cubic-bezier(.445, .05, .55, .95) }

.baby .menu_btn .btn span { background-color: #9a8ec3; }

.menu_btn .btn span:nth-child(1) { width: 20px; top: 15px }

.menu_btn .btn span:nth-child(2) { margin-top: -1.5px; }

.menu_btn .btn span:nth-child(3) { top: 29px }

.menu_btn.active .btn span:nth-child(1) { -webkit-transform: rotate(-45deg) translate3d(0, 0, 0); -moz-transform: rotate(-45deg) translate3d(0, 0, 0); transform: rotate(-45deg) translate3d(0, 0, 0); top: 50%; margin-top: -1.5px; }

.menu_btn.active .btn span:nth-child(2) { -webkit-transform: rotate(45deg) translate3d(0, 0, 0); -moz-transform: rotate(45deg) translate3d(0, 0, 0); transform: rotate(45deg) translate3d(0, 0, 0) }

.menu_btn.active .btn span:nth-child(3) { -webkit-transform: scaleX(0) translate3d(0, 0, 0); -moz-transform: scaleX(0) translate3d(0, 0, 0); transform: scaleX(0) translate3d(0, 0, 0) }

.mouseTips { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: rgba(0, 0, 0, .5); }

.navBar { display: none; }

.o-container .subTitle,
.o-clients .subTitle { display: none; }

.joinBox { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; }

.joinBox .joinInfo { width: 300px; height: 300px; position: relative; background: #582bb9; color: #fff; }

.joinBox .joinInfo .txt { width: 80%; height: auto; position: absolute; left: 10%; top: 50%; -webkit-transform: translateY(-50%); line-height: 1.6; }
.joinBox .joinInfo .txt b { font-family: akrobatblack; font-size: 30px; }
.joinBox .joinList { width: calc(100% - 350px); }
.joinList ul li { position: relative; width: 100%; border: 1px solid rgba(0,0,0,.05); margin-bottom: 25px; }
.joinList ul li .joinTop { width: 100%; height: auto; padding: 20px; display: flex; font-size: 16px; align-items: center; border-bottom: 1px solid rgba(0,0,0,.05); justify-content: space-between; }
.joinList ul li .joinTop .name { font-weight: bold; font-size: 20px; width: 250px; color: #582bb9; }
.joinList ul li .joinTop .des { display: flex; line-height: 20px; }
.joinList ul li .joinTop .des span { margin-right: 15px; position: relative; color: rgba(0,0,0,.5); font-size: 14px; padding-right: 15px; }
.joinList ul li .joinTop .des span:last-child { padding-right: 0px; margin-right: 0px; }
.joinList ul li .joinTop .des span:last-child::after { display: none; }
.joinList ul li .joinTop .des span::after { width: 1px; height: 100%; position: absolute; right: 0px; top: 0px; background: rgba(0,0,0,.1); content: ''; }
.joinList ul li .joinBottom { padding: 25px; font-size: 16px; line-height: 2; }

@media screen and (max-width: 1050px) {
    header nav ul li a { padding: 0px 10px; }
}

@media screen and (max-width: 768px) {

    .o-container .subTitle,
    .o-clients .subTitle { display: block; }

    .menu_btn { display: block; width: 47px; right: 10px; top: 10px; height: auto; border-radius: 50%; -webkit-transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; }

    header .logo { top: 5px; }



    .menu_btn .btn { top: 0px; }

    header { padding: 10px 5%; position: absolute; }

    header .logo { width: 150px; }

    header nav { display: none; }

    header nav ul li a { font-size: 14px; }

    .banner-swiper .swiper-slide { height: 40vh; }

    .newsBox .itemBox { width: 100%; border-right: transparent; }

    .newsBox .itemBox .img { border-radius: 5px; height: 50vw; }

    .newsBox .itemBox .textBox { width: 100%; }

    .newsBox .itemBox .textBox .name { font-size: 16px; }

    .newsBox .itemBox .textBox .detail { margin-bottom: 2vw; }

    .newsBox .itemBox .textBox .more { display: none; }

    footer .bgImg { height: 35vw; }

    footer .bgImg .title p:nth-child(2) { font-size: 22px; margin-top: -11vw; margin-left: 42vw; }

    footer .footer { height: auto; padding-bottom: 2vw; }

    footer .footer .title { font-size: 16px; }

    footer .footer .title::before { height: 3px; top: 12vw; margin-left: 31vw; }

    footer .footer .phone { font-size: 14px; }

    footer .footer .info { font-size: 12px; }

    .case_f2 { display: inherit; }

    .case_f2 .left { width: 100%; height: auto; position: inherit; top: 0; }

    .case_f2 .left .title { font-size: 14vw; }

    .case_f2 .left .info { font-size: 16px; }

    .case_f2 .left .vue .p { font-size: 12px; }

    .case_f2 .left .vue div { margin-right: 4vw; }

    .case_f2 .left .vue .vue1,
    .case_f2 .left .vue .vue2 { width: 10vw; height: 10vw; }

    .case_f2 .left .vue .vue1 div,
    .case_f2 .left .vue .vue2 div { width: 1vw; height: 1vw; margin: 1.2vw auto; }

    .case_f2 .left .vue .vue1 div:nth-child(5) { margin-top: -1.2rem; margin-left: 5vw; }

    .case_f2 .left .vue .vue1 div:nth-child(4) { margin-top: -2.2vw; margin-left: 5vw; }

    .case_f2 .left .vue .vue2 div:nth-child(odd) { width: 1vw; height: 1vw; margin: -0.6vw auto; top: 2vw; left: -1.5vw; }

    .case_f2 .left .vue .vue2 div:nth-child(even) { width: 2.5vw; height: 0.5vw; left: 1vw; top: 0.6vw; }

    .case_f2 .left .tab { font-size: 16px; display: flex; margin: 5vw 0; }

    .case_f2 .left .tab p { margin-right: 8vw; }

    .case_f2 .left .tab p:hover::before,
    .case_f2 .left .tab .tab_acitve::before { content: inherit; }

    .case_f2 .right { float: inherit; }

    .f2 { padding: 50px 0%; /* border-radius: 30px 30px 0px 0px; */ background: rgba(0, 0, 0, .1); color: #fff; padding-bottom: 70px; backdrop-filter: blur(5px); }
    .f2::before { top: -20vh; height: 20vh; }
    .f2 .btnBox { display: none; }

    .f2 .textBox { position: relative; left: 0%; top: 0px; width: 90%; margin-left: 5%; }

    .f2 .textBox .en { font-size: 35px; }

    .testBox .yh { display: none; }

    .testSwiper { margin-left: 0%; }
    .testSwiper .swiper-slide .info { width: 80px; height: 80px; border-radius: 100px 100px 0px 0px; }
    .testSwiper .swiper-slide::before { width: 100%; height: 100%; left: 0%; border-radius: 5px; top: 40px; }
    .testSwiper .swiper-slide .content { margin-bottom: 0px; width: 100%; padding: 20px; padding-top: 0px; }

    .testSwiper .swiper-slide .content .des { /* margin-bottom: 10px;
		min-height: 140px; */ }

    .homeService ul li { height: 70vh; }

    .homeService ul li .info .num { font-size: 60px; }

    .homeService ul li .info .txt .name { font-size: 30px; }

    .homeService ul li .info .txt .des { font-size: 14px; }

    .homeService ul li .bgs { height: 100%; }

    .boxes { padding: 50px 0px; }

    .subTitle p { font-size: 30px; }

    .subTitle { margin-bottom: 10px; }

    footer { padding-top: 0px; /* border-radius: 30px 30px 0px 0px; */ /* margin-top: -30px; */ overflow: hidden; }

    footer .footer_bgImg { padding: 50px 5%; width: 100%; border-radius: 0px; }

    footer .footer_bgImg .title { font-size: 16px; }

    footer .footer_bgImg .phone a { display: block; width: 100%; font-size: 24px; line-height: 1.6; }
    footer .footer_bgImg .phone a span { font-size: 12px; }
    footer .footer_bgImg .phone a:nth-child(n+2) { margin-left: 0%; }

    footer .footer_bgImg .phone { margin-bottom: 25px; }

    .inputBox { padding: 0px 0px; }

    .inputBox input { width: 100%; margin-bottom: 10px; background-size: auto 5px; font-size: 14px; }

    .inputBox .submitBtn { margin-top: 10px; }

    .friends { display: none; }

    .footerInfo { padding-top: 15px; line-height: 1.7; }

    .slogan { width: 90%; left: 5%; text-align: center; }

    .slogan h1 { font-size: 14vw; }

    .slogan h2 { font-size: 8vw; }

    .slogan h3 { font-size: 4.5vw; font-weight: bold; color: #fff; }

    #container-p5 { overflow: hidden; }

    .testSwiper .swiper-slide { padding-bottom: 0px; display: flex; flex-wrap: wrap; justify-content: center; }

    .serviceSwiper { width: 100%; }

    .serviceSwiper .swiper-slide .innerBoxs { width: 80%; margin: 10px 10%; }

    .serviceSwiper .swiper-slide .innerBoxs .img { width: 100%; background: #fff; border-radius: 10px; overflow: hidden; position: relative; }

    .serviceSwiper .swiper-slide.swiper-slide-active .innerBoxs .img { box-shadow: 0px 0px 5px rgba(0, 0, 0, .05); }

    .serviceSwiper .swiper-slide .innerBoxs .info { width: 100%; text-align: center; padding: 10px 0px; position: relative; top: 0px; }

    .serviceSwiper .swiper-slide .innerBoxs .info p { -webkit-transform: translateY(100%); }

    .serviceSwiper .swiper-slide.swiper-slide-active .innerBoxs .info p { -webkit-transform: translateY(-0%); -webkit-transition: all .8s 0.2s; }

    .serviceSwiper .swiper-slide.swiper-slide-active .innerBoxs .info .p p { -webkit-transform: translateY(-0%); -webkit-transition: all .8s 0.4s; }

    .serviceSwiper .swiper-slide .innerBoxs .info .b { font-weight: bold; font-size: 6vw; width: 100%; margin-bottom: 1vw; display: block; overflow: hidden; position: relative; }

    .serviceSwiper .swiper-slide .innerBoxs .info .p { font-size: 12px; opacity: .7; overflow: hidden; position: relative; }

    .serviceSwiper .swiper-slide { text-align: center; display: block; }

    .f2 .textBox .en { color: #fff; }

    .f2 .textBox .en p { font-size: 40px; }

    .f2 .textBox .en b { -webkit-text-stroke: 1px rgba(255, 255, 255, .1); font-size: 10vw; }

    .f2 .textBox .en { margin-bottom: 5vw; }

    .testSwiper .swiper-slide .info .img { background: #fff; color: #d02c75; font-size: 28px; line-height: 50px; }
    .hzList { margin-top: -5vh; }
    .hzList ul li { width: 23.5%; margin-right: 2%; }

    .hzList ul li:nth-child(7n) { margin-right: 2%; }
    .hzList ul li:nth-child(4n) { margin-right: 0%; }

    .testSwiper .swiper-pagination { text-align: center; display: none; }

    .testSwiper .swiper-pagination-bullet { background: #fff; }


    .boxes.ss { border-radius: 30px 30px 0px 0px; margin-top: -30px; padding-bottom: 70px; }

    .subTitle b { font-size: 11vw; -webkit-text-stroke: 1px rgba(0, 0, 0, .1); }

    /* .subTitle p {
		font-size: 8vw;
		color: #4612a4;
	} */

    .boxes.f4 { background: #edf7fc; border-radius: 30px 30px 0px 0px; margin-top: -30px; padding-bottom: 70px; }

    .newsBox .itemBox .textBox .detail { display: none; }

    .newsBox .itemBox .thum { margin-bottom: 10px; }

    .newsBox .itemBox .textBox .name { margin-bottom: 0px; text-overflow: inherit; overflow: inherit; white-space: inherit; line-height: 1.6; }

    .newsBox .itemBox { margin-right: 0%; margin-bottom: 25px; }

    .backTop { display: none; }

    #navBg { width: 75%; position: relative; height: 100%; background-size: 100% auto; background-position: center center; }

    #spaceNav { position: fixed; bottom: 0px; display: none; left: 0px; height: 100%; background: #fff; z-index: 500; }

    .mouseTips { color: #fff; -webkit-transition: all 1s ease 3s; }

    .mouseTips .icon { width: 100%; height: 100%; position: absolute; }

    .mouseTips .icon p { top: 60%; -webkit-transform: translateY(-50%); font-size: 12px; position: absolute; width: 100%; }

    .mouseTips i { width: 50px; font-size: 38px; position: absolute; left: 50%; top: 45%; -webkit-animation: slide 2s infinite; animation: slide 2s infinite; }

    @-webkit-keyframes slide {
        0% { opacity: 0; left: 65%; }

        to { opacity: 1; left: 20%; }
    }

    .serviceSwiper.wow.animated .mouseTips { opacity: 0; }

    header nav { background: rgba(0, 0, 0, .7); }

    header nav.active { opacity: 1; visibility: visible; }

    .navBar { display: block; position: fixed; width: 100%; height: 100vh; opacity: 0; visibility: hidden; -webkit-transition: all .5s; left: 0px; top: 0px; }

    .navBar .mask { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background: rgba(0, 0, 0, .5); }

    .navBar .bar { width: 40%; height: 100%; position: absolute; left: 0%; top: 0%; background: #fff; padding: 50px 0px 50px 25px; box-shadow: 0px 0px 15px rgba(0, 0, 0, .1); left: -60vw; -webkit-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1); }

    .navBar .bar::after { width: 0px; height: 0px; border-top: 100vh solid #fff; border-right: 20vw solid transparent; position: absolute; right: calc(-20vw + 1px); content: ''; top: 0px; }

    .navBar .bar a { display: block; width: 100%; height: auto; position: relative; line-height: 60px; font-size: 20px; overflow: hidden; padding-left: 15px; font-weight: bold; }

    .navBar .bar a p { display: block; width: 100%; -webkit-transition: all 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s; -webkit-transform: translateY(100%); }

    .navBar .bar a:nth-child(2) p { -webkit-transition-delay: .5s; }

    .navBar .bar a:nth-child(3) p { -webkit-transition-delay: .6s; }

    .navBar .bar a:nth-child(4) p { -webkit-transition-delay: .7s; }

    .navBar .bar a:nth-child(5) p { -webkit-transition-delay: .8s; }

    .navBar .bar a:nth-child(6) p { -webkit-transition-delay: .9s; }

    .navBar .bar a:nth-child(7) p { -webkit-transition-delay: 1s; }

    .navBar.active .bar a p { -webkit-transform: translateY(0%); }

    .navBar.active { opacity: 1; visibility: visible; }

    .navBar.active .bar { left: 0%; }

    .navBar .bar a.active { color: #4612a4; font-weight: bold; }

    .navBar .bar a.active::after { width: 3px; height: 40%; position: absolute; left: 0%; top: 30%; content: ''; background: #4612a4; }

    header .logo { -webkit-transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; }

    .commonTitle { font-size: 7vw; }

    .commonTitle span:nth-child(6) { margin-right: 15px; }

    .commonTitle span { padding: 0px; }

    .case_f1 .itemBox .logoBox { padding: 5vw 5% 0px; display: flex; flex-wrap: wrap; padding-top: 10vw; }

    .case_f1 .itemBox .logoBox .item { width: 30%; margin-right: 5%; margin-bottom: 5vw; }

    .case_f1 .itemBox .logoBox .item:nth-child(3n) { margin-right: 0%; }

    .showCase ul li { height: 35vh; }

    .showCase ul li .info { width: 90%; left: 5%; }

    .showCase ul li .info .name,
    .showCase ul li .info .name p { font-size: 6vw; }

    .h5Top .sloganTitle { left: 10%; width: 80%; text-align: center; font-size: 8vw; }

    .sloganTitle .p { font-size: 4vw; }

    .rocket { width: 146px; height: 410px; margin-left: -73px; bottom: auto; top: calc(100vh - 410px); }

    .earthBox { position: relative; }

    .earthBox .earth,
    .earthNav,
    .ptn { display: none; }

    .screenImg { width: 100%; }

    .screenBox .sDes { display: none; }

    .screenBox { margin-bottom: 50px; }

    .h5List ul li { width: 100%; margin-right: 0%; margin-bottom: 10px; }

    .h5List ul li .title .n { font-size: 16px; line-height: 40px; }

    .sloganTitle { font-size: 8vw; left: 5%; }

    .card__orangeShine { right: -10vw; top: -10vw; z-index: 2; width: 70vw; height: 70vw; }

    .card__greenShine { width: 70vw; height: 70vw; left: 15%; }

    .o-clients { overflow: hidden; border-radius: 30px 30px 0px 0px; margin-top: -30px; padding: 50px 5%; padding-bottom: 9vh; }

    .o-clients__row { margin-top: 0px; margin-bottom: 70px; }

    .o-clients__shape-left { width: 40%; display: none; }

    .o-clients__shape-left b { font-size: 5vw; }

    .o-container { padding-left: 0px; padding-right: 0px; }

    .card__circle { bottom: 20vw; }

    .o-clients__logos li { padding: 20px 5px; }

    #projects { display: none; }

    .o-projects__row { flex-wrap: wrap; margin: 0px; }

    .c-project.c-project--right { -webkit-clip-path: url(#projectClipLeft); clip-path: url(#projectClipLeft); }

    .o-projects.o-projects--grid-home { padding-top: 0px; }

    .o-projects.o-projects--grid .c-project__inner { padding-bottom: 50vh; padding-left: 5%; padding-right: 5%; }

    .o-projects.o-projects--grid .c-project__container { max-width: 100%; padding: 0px; margin-top: 7vh; }

    .c-project__type { display: none; }

    .o-projects.o-projects--grid .c-project__title { padding-top: 0px; padding-bottom: 10px; font-size: 5vw; font-weight: bold; letter-spacing: 0px; line-height: 1.4; }

    .c-btn:before,
    .c-btn:after { display: none; }

    .c-btn span { position: relative; opacity: 1; visibility: visible; top: 0px; left: 0%; margin-left: 0%; width: 90px; display: block; }

    .c-project.is-white .c-btninline { color: #fff; width: 30%; padding: 0px; }

    .c-project__table { width: 160px; }

    .c-btninline small { width: 100%; height: auto; padding-left: 0%; margin-left: 0px; }

    .c-btninline i { display: none; }

    .c-project.c-project--right,
    .c-project.c-project--left { margin-top: -8vh; }

    .o-projects.o-projects--grid .c-project__table { margin-bottom: 20px; }

    .innerBox .firstLab .img { font-size: 30vw; }

    .innerBox .firstLab .txt p { font-size: 5vw; }

    .innerBox .threeLab { display: none; }

    .innerBox .secondLab { margin-bottom: 0px; flex-wrap: wrap; }

    .innerBox .secondLab span { padding-right: 0%; width: auto; margin-left: 0%; text-align: center; font-size: 4vw; line-height: 2; background: #fff; color: #000; border-radius: 50px; padding: 10px 5vw; margin: 10px 10vw; }

    .innerBox .secondLab span:last-child { padding-right: 5vw; }

    .innerBox .secondLab span::after { display: none; }

    .innerBox .secondLab span:first-child { margin-left: 10vw; padding-left: 5vw; }

    .seoTitle b { font-size: 8vw; margin-bottom: 1vw; }

    .seoTitle p { font-size: 4vw; }

    .ysList ul li { width: 49%; margin-bottom: 5px; }

    .ysList ul li::before { border-radius: 20px; }

    .ysList ul li .txt b { font-size: 5vw; }

    .ysList ul li .txt p { font-size: 2.4vw; }

    .czList ul li { width: 100%; margin-bottom: 15px; }

    .czList ul li .img { width: 40%; margin: 0px auto; }

    .czList ul li .txt { font-size: 4vw; margin-top: 0px; }

    .seoSwiper .hzlc ul li { width: 100%; display: flex; margin-bottom: 10px; align-items: center; }

    .seoSwiper .hzlc ul li > img { display: none; }

    .seoSwiper .hzlc ul li .num { bottom: 0px; left: 0%; -webkit-transform: translateX(0%); position: relative; border: none; width: 50px; height: 50px; line-height: 50px; }

    .seoSwiper .hzlc ul li::before { border-radius: 0px; top: 0px; width: calc(100% - 25px); left: 25px; -webkit-transform: translate(0px, 0px); border-radius: 0px 100px 100px 0px; }

    .seoSwiper .hzlc ul li .txt { width: calc(100% - 60px); left: 0%; top: 0%; -webkit-transform: translateY(0%); position: relative; text-align: left; padding: 10px; }

    .hzlc ul li .txt b { font-size: 0vw; }

    .hzlc ul li .txt p { font-size: 14px; }

    .innerBox .conImg { display: none; }

    .innerBox .conLeft { margin-top: 0px; }

    .innerBox .conLeft a span { display: block; font-size: 5vw; }

    .innerBox .conLeft a { font-size: 14vw; line-height: 1.4; font-family: akrobatblack; }

    .innerBox .conLeft p:nth-child(2) { margin-bottom: 0px; font-size: 4vw; }

    .hotFocus { display: none; }

    .boxes.b0 { padding-top: 0vh; padding-bottom: 66px; }

    .aSlogan { width: 90%; }

    .aSlogan p { font-size: 4vw; }

    .aSlogan b { font-size: 16vw; }

    .aMarks,
    .aboutWarp .aboutImg { display: none; }

    .boxes.us { padding-top: 20px; margin-top: -5px; }

    .aboutWarp .singePage { width: 100%; }

    .serviceList ul li .thum,
    .serviceList ul li .info { width: 100%; }

    .serviceList ul li .info .num { font-size: 30vw; height: 15vw; line-height: 30vw; }

    .serviceList ul li .info .title { font-size: 6vw; margin-bottom: 1vw; }

    .serviceList ul li .info .des { font-size: 4vw; margin-bottom: 2vw; }

    .serviceList ul li { margin-bottom: 10vw; }

    .serviceList ul li:nth-child(even) { direction: initial; }

    .serviceList ul li .enter { display: none; }

    .boxes.service::before { display: none; }

    .boxes.service { padding-bottom: 50px; }

    .detailTop { padding-top: 100px; padding-bottom: 20px; }

    .detailTop .title { width: 100%; line-height: 1.5; font-size: 6vw; margin-bottom: 10px; }

    .detailTop .w1400::after { border-left: 8px solid transparent; border-right: 8px solid transparent; left: 4px; bottom: -26px; border-top: 8px solid #4612a4; }

    .dpl { padding: 25px 0px; }

    .dpl .w1400 { flex-wrap: wrap; }

    .dpl .dpBox,
    .dpl .right { width: 100%; }

    .dpl .right { top: 0px; padding: 0px 0px; }

    .ndc_npnews .post_next,
    .ndc_npnews .post_prev { padding: 10px; }

    .ndc_npnews .post_next a,
    .ndc_npnews .post_prev a { font-size: 14px; }

    .ndc_npnews .post_next .txt,
    .ndc_npnews .post_prev .txt { font-size: 12px; }

    .dpl .right h2 { font-size: 6vw; line-height: 1.4; margin-bottom: 0px; }
    .detailTop .info { font-size: 12px; opacity: .5; }
    .detailTop .info span { margin-right: 5px; }
    .aboutBox { background-image: url(/shuwon/assets/images/aboutBgM.jpg) }
    .boxes.xxs { margin-top: -5px; }
    .joinBox .joinInfo, .joinBox .joinList { width: 100%; }
    .joinBox .joinInfo { height: 25vh; }
    .joinList ul li .joinTop { padding: 15px; flex-wrap: wrap; }
    .joinList ul li .joinTop .name, .joinList ul li .joinTop .des { width: 100%; }
    .joinList ul li .joinTop .des { font-size: 12px; }
    .joinList ul li .joinTop .des span { font-size: 12px; }
    .joinList ul li .joinTop .des span::after { top: 15%; height: 70%; }
    .joinList ul li .joinTop .name { margin-bottom: 5px; }
    .joinList ul li .joinBottom { padding: 15px; font-size: 14px; }
    .iDes i { display: block; height: 20px; }
    .iDes span { font-size: 20px; padding: 5px 10px; }
    .iDes i:first-child { height: 15px; }
    .iDes { margin-top: 25px; }
    .boxes.cbox { /* padding-top: 0px; */ overflow: hidden; }
    .caseNav { margin: 0; width: 100%; margin-bottom: 30px; padding: 0 5vw; overflow: initial; flex-wrap: wrap; gap: 10px; }
    .caseNav a { width: auto; padding: 2px 10px; font-size: 14px; margin: 0; }
    .case_f1 { overflow: hidden !important; }
    .caseNav.pos .swiper-wrapper { justify-content: flex-start; }
    .hyList ul li { width: 48%; }
    .cpList ul li .info .des { margin-top: 5px; }
    .cpList ul li { width: 48%; padding: 15px; margin-bottom: 15px; }
    .cpList ul li .icon { width: 50px; }
    .cpList ul li .info { margin-top: 10px; }
    .xsTips .dh { display: block; font-size: 20px; line-height: 1.7; text-align: center; }
    .xsTips .dh a { font-size: 24px; margin-right: 0px; }
    .mss { text-align: center; font-size: 12px; }
    .map { height: 300px; }
    .boxes.cc { display: none; }
    .showCase ul li .info .icon:after { font-size: 10px; }
    .onlineTel { width: 70px; padding: 10px 0px; font-size: 20px; }
    .onlineTel p { font-size: 12px; }
}