.big-title { text-align:center } .big-title h2 { line-height:38px; color:#333; font-size:28px; letter-spacing:1.5px } .big-title p { font-size:16px; line-height:28px; letter-spacing:1px; color:#575d6c; margin-top:15px } .big-title .line { width:58px; height:2px; background:#596efb; margin:18px auto 0 } .icon-arron-right { position:relative; width:15px; height:6px; margin-top:-4px; margin-left:8px } .icon-arron-right:before { content:""; position:absolute; bottom:0; right:0; border-bottom:1px solid; border-radius:1px; width:100% } .icon-arron-right:after { content:""; width:6px; border-bottom:1px solid; border-radius:1px; position:absolute; right:0; bottom:0; transform:rotate(45deg); transform-origin:right; -webkit-transform:rotate(45deg); -webkit-transform-origin:right } .flex { display:flex; justify-content:center; margin:0 -14px } .flex li { width:calc(33.33% - 28px); margin:0 14px } .contact1 { padding:178px 0 0; overflow:hidden; position:relative } .contact1 .bg { position:absolute; left:0; right:0; top:0; bottom:290px; background-image:linear-gradient(180deg,#5064e6,#596efb) } .contact1:after { content:''; position:absolute; bottom:190px; left:-10%; width:120%; height:100px; border-radius:0 0 50% 50%; background-image:linear-gradient(180deg,#596efb,#6b7efb) } .contact1:before { content:''; position:absolute; left:0; bottom:0; width:100%; height:190px; background:#fff } .contact1 .max-width-1200 { z-index:2 } .contact1 .title1, .contact1 .title2 { text-align:center; letter-spacing:1.5px; color:#fff; line-height:50px; font-size:36px } .contact1 .title2 { font-size:16px; line-height:28px; margin-top:15px } .contact1 ul { width:90%; margin:35px auto 0 } .contact1 ul li { border:1px solid transparent; background-clip:padding-box,border-box; background-origin:padding-box,border-box; background-image:linear-gradient(180deg,#f4f9ff,#e3effe),linear-gradient(100deg,#bdcbff,#fff,#c0ceff); box-shadow:0 2px 1px rgb(255 255 255 / 15%),0 20px 20px rgb(37 98 190 / 12%); border-radius:10px; margin-bottom:35px } .contact1 ul li .title3 { display:block; text-align:center; letter-spacing:1px; position:relative; padding:48px 30px 110px } .contact1 ul li .icon { width:40px; height:40px; background-image:url(../../static/images/veryxiao/about/contactus/icon.png); background-position:0 0; background-repeat:no-repeat; margin:0 auto 20px } .contact1 ul li .icon2 { background-position:-40px 0 } .contact1 ul li .icon3 { background-position:-80px 0 } .contact1 ul li h6 { font-size:20px; font-weight:bold; color:#161829; line-height:34px; margin:0 auto 10px } .contact1 ul li p { font-size:16px; color:#737c93; line-height:24px; margin:0 auto 5px } .contact1 ul li p strong { font-size:14px; font-weight:bold; color:#161829 } .contact1 ul li:first-child p strong { font-size:17px } .contact1 ul li span { position:absolute; left:50%; top:280px; transform:translateX(-50%); display:block; font-size:15px; color:#596efb; font-weight:bold; line-height:22px } .contact1 ul li span:before { content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:#596efb; transition:all .3s ease-in-out } .contact1 ul li:hover a span:before { width:100% } .contact02 { padding:30px 0; position:relative } .contact02 ul { width:calc(90% - 30px); border:1px solid transparent; background-clip:padding-box,border-box; background-origin:padding-box,border-box; background-image:linear-gradient(180deg,#f4f9ff,#e3effe),linear-gradient(100deg,#bdcbff,#fff,#c0ceff); box-shadow:0 2px 1px rgb(255 255 255 / 15%),0 20px 20px rgb(37 98 190 / 12%); border-radius:10px; margin:35px auto } .contact02 ul li { width:32%; margin:0 } .contact02 ul li:first-child { width:36% } .contact02 ul li .title { display:block; text-align:center; letter-spacing:1px; position:relative; padding:45px 30px 50px } .contact02 ul li .title::before { content:''; position:absolute; right:0; top:5%; bottom:5%; width:1px; background-image:linear-gradient(100deg,#f4f9ff,#dce3fd,#e3effe) } .contact02 ul li:last-child .title::before { display:none } .contact02 ul li .icon { width:40px; height:40px; background-image:url(../../static/images/veryxiao/about/contactus/icon.png); background-position:0 -60px; background-repeat:no-repeat; margin:0 auto 20px } .contact02 ul li .icon2 { background-position:-40px -60px } .contact02 ul li .icon3 { background-position:-80px -60px } .contact02 ul li h6 { display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:bold; color:#161829; line-height:34px; margin:0 auto 10px } .contact02 ul li h6 i { margin-left:10px; padding:0 5px; height:14px; line-height:14px; color:#fff; font-style:normal; font-weight:normal; font-size:12px; background-color:#ed4105; position:relative } .contact02 ul li h6 i::before { content:''; position:absolute; top:50%; left:-3px; margin-top:-1px; width:0; height:0; border-bottom:6px solid transparent; border-left:6px solid transparent; border-right:6px solid #ed4105; transform:rotate(225deg) } .contact02 ul li p { font-size:16px; color:#737c93; line-height:24px; margin:0 auto 5px } .contact02 ul li .text3 { display:inline-block; font-size:15px; color:#596efb; font-weight:bold; line-height:22px; position:relative; margin-top:25px } .contact02 ul li .text3:before { content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:#596efb; transition:all .3s ease-in-out } .contact02 ul li:hover a .text3:before { width:100% } .contact3 { padding:0 0 95px; position:relative } .contact3 ul { width:90%; margin:35px auto 0 } .contact3 ul li { text-align:center; border:1px solid transparent; background-clip:padding-box,border-box; background-origin:padding-box,border-box; background-image:linear-gradient(180deg,#f4f9ff,#e3effe),linear-gradient(100deg,#bdcbff,#fff,#c0ceff); box-shadow:0 2px 1px rgb(255 255 255 / 15%),0 25px 30px rgb(37 98 190 / 12%); border-radius:10px } .contact3 ul li .title { display:block; padding:35px } .contact3 ul li .icon { width:40px; height:40px; background-image:url(../../static/images/veryxiao/about/contactus/icon.png); background-position:0 -100px; background-repeat:no-repeat; margin:0 auto 20px } .contact3 ul li .icon2 { background-position:-40px -100px } .contact3 ul li .icon3 { background-position:-80px -100px } .contact3 ul li h6 { display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:bold; color:#161829; line-height:34px; margin:0 auto 10px } .contact3 ul li p { font-size:16px; color:#737c93; line-height:24px; margin:0 auto 5px } .contact3 ul li .text3 { display:inline-block; font-size:15px; color:#596efb; font-weight:bold; line-height:22px; position:relative } .contact3 ul li .text3:before { content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:#596efb; transition:all .3s ease-in-out } .contact3 ul li:hover a .text3:before { width:100% } .contact4 { padding:75px 0 105px; /*! background-image:url(../../static/images/veryxiao/about/contactus/bg3.jpg); */background-position:center; background-repeat:no-repeat } .contact4 .main { margin-top:35px } .contact4 .main ul li { width:calc(50% - 88px); position:relative; padding-left:64px } .contact4 .main ul li::before { content:''; position:absolute; left:0; top:0; width:50px; height:50px; background-image:url(../../static/images/veryxiao/about/contactus/icon.png); background-position:-147px 0; background-repeat:no-repeat } .contact4 .main ul li:nth-child(2)::before { background-position:-147px -50px } .contact4 .main ul li:nth-child(3)::before { background-position:-147px -100px } .contact4 .main ul li:nth-child(4)::before { background-position:-147px -150px } .contact4 .main ul li h6 { font-size:20px; font-weight:bold; color:#161829; line-height:34px; position:relative; margin:0 auto 6px } .contact4 .main ul li p { font-size:16px; color:#737c93; line-height:24px; position:relative } .contact4 .layui-tab { width:100%; height:420px; position:relative; margin:35px auto 0 } .contact4 .layui-tab .layui-tab-title { position:absolute; left:auto; right:40px; top:40px; width:400px; height:calc(100% - 120px); padding-top:40px; /*! background:rgba(243,245,255,.96); */z-index:8 } .contact4 .layui-tab .layui-tab-title li { display:flex; align-items:center; width:66%; height:50px; border:1px solid transparent; background-clip:padding-box,border-box; background-origin:padding-box,border-box; background-image:linear-gradient(180deg,#f4f9ff,#e3effe),linear-gradient(100deg,#bdcbff,#fff,#c0ceff); box-shadow:0 2px 1px rgb(255 255 255 / 15%),0 25px 30px rgb(37 98 190 / 12%); border-radius:10px; margin:0 auto 17px } .contact4 .layui-tab .layui-tab-title li i { width:30px; height:30px; background-image:url(../../static/images/veryxiao/about/contactus/icon.png); background-position:-20px -140px; background-repeat:no-repeat; margin:0 10px 0 20px } .contact4 .layui-tab .layui-tab-title li .icon2 { background-position:-50px -140px } .contact4 .layui-tab .layui-tab-title li .icon3 { background-position:-80px -140px } .contact4 .layui-tab .layui-tab-title li .icon4 { background-position:-110px -140px } .contact4 .layui-tab .layui-tab-title li span { color:#161829; font-size:16px; line-height:24px } .contact4 .layui-tab .layui-tab-title li.layui-this::before, .contact4 .layui-tab .layui-tab-title li.layui-this::after { content:''; width:0; height:0; position:absolute; top:50%; margin-top:-12px; left:-24px; z-index:2; border:12px solid transparent; border-color:transparent #ebf4fe transparent transparent } .contact4 .layui-tab .layui-tab-title li.layui-this::after { display:block !important; margin-top:-13px; left:-26px !important; z-index:1; border:13px solid transparent !important; border-color:transparent #bdcbff transparent transparent !important } .contact4 .layui-tab .layui-tab-title li.layui-this span { color:#596efb; font-weight:bold } .contact4 .layui-tab .layui-tab-title li.layui-this .icon1 { background-position:-20px -170px } .contact4 .layui-tab .layui-tab-title li.layui-this .icon2 { background-position:-50px -170px } .contact4 .layui-tab .layui-tab-title li.layui-this .icon3 { background-position:-80px -170px } .contact4 .layui-tab .layui-tab-title li.layui-this .icon4 { background-position:-110px -170px } .contact4 .layui-tab .layui-tab-content, .contact4 .layui-tab .layui-tab-item { width:100%; height:100% } .contact4 .layui-tab .layui-tab-item { border:1px solid transparent; background-clip:padding-box,border-box; background-origin:padding-box,border-box; background-image:linear-gradient(180deg,#f4f9ff,#e3effe),linear-gradient(100deg,#bdcbff,#fff,#c0ceff); box-shadow:0 2px 1px rgb(255 255 255 / 15%),0 25px 30px rgb(37 98 190 / 12%); border-radius:10px } .contact5 { padding:80px 0 100px; overflow:hidden; position:relative } .contact5:after { content:''; position:absolute; bottom:100px; left:-10%; width:120%; height:100px; border-radius:50% 50% 0 0; background-image:linear-gradient(180deg,#5064e6,#596efb) } .contact5:before { content:''; position:absolute; left:0; right:0; height:100px; bottom:0; background-image:linear-gradient(180deg,#596efb,#6b7efb) } .contact5 .max-width-1200 { z-index:2 } .contact5 ul { margin-top:35px } .contact5 ul li { width:calc(25% - 98px); padding:35px 35px 40px; color:#fff; border:1px solid transparent; background-clip:padding-box,border-box; background-origin:padding-box,border-box; background-image:linear-gradient(180deg,#f4f9ff,#e3effe),linear-gradient(100deg,#bdcbff,#fff,#c0ceff); box-shadow:0 2px 1px rgb(255 255 255 / 15%),0 25px 30px rgb(37 98 190 / 12%); border-radius:10px } .contact5 ul li .icon { width:26px; height:36px; background:url("../../static/images/veryxiao/about/contactus/icon.png") -7px -200px no-repeat } .contact5 ul li .icon4 { width:31px; background-position:-45px -200px } .contact5 ul li .icon2 { width:24px; background-position:-84px -200px } .contact5 ul li .icon3 { width:30px; background-position:-117px -200px } .contact5 ul li .text1 { color:#161829; font-size:16px; line-height:25px; margin-top:14px } .contact5 ul li .line { width:30px; height:2px; background-color:#8896fd; margin-top:10px } .contact5 ul li .text2 { line-height:28px; color:#737c93; font-size:13px; margin-top:23px } .contact5 ul li .text3 { margin-top:10px } .contact5 ul li .text3 a { display:flex; align-items:center; line-height:26px; color:#596efb; font-size:13px; position:relative; transition:all .3s ease-in-out; padding-left:20px } .contact5 ul li .text3 a::before { content:''; position:absolute; left:0; top:50%; width:5px; height:1px; background:#596efb } .contact5 ul li .text3 a:hover { color:#5064e6; transform:translateX(10px) } .contact5 ul li .text3 a:hover::before { background:#5064e6 } @media screen and (min-width:835px) and (max-width:1519px) { .contact1 ul, .contact02 ul, .contact3 ul { width:100%; margin:35px -14px 0 } .contact02 ul { margin-bottom:35px } } @media screen and (max-width:834px) { .big-title { width:80%; margin:0 auto } .big-title h2 { font-size:22px } .big-title p { letter-spacing:.25px; line-height:26px; margin-top:8px } .big-title .line { margin-top:12px } .flex { display:block; margin:0 auto } .flex li { width:100%; margin:0 auto } .contact1 { padding-top:100px } .contact1 .title1 { line-height:32px; font-size:26px; letter-spacing:.5px } .contact1 .title2 { margin-top:10px } .contact1 ul, .contact3 ul { width:100%; margin:25px auto 0 } .contact1 ul li { width:90%; box-shadow:0 2px 1px rgb(255 255 255 / 15%),0 12px 12px rgb(37 98 190 / 12%); margin:0 auto 20px } .contact1 ul li .title3 { letter-spacing:.5px; padding:35px 30px 40px } .contact1 ul li span { position:relative; left:auto; top:auto; transform:none; padding-top:10px } .contact02 { padding:20px 0 15px } .contact02 ul { padding:20px 0; margin:25px auto } .contact02 ul li, .contact02 ul li:first-child { width:90%; margin:0 auto } .contact02 ul li .title { padding:35px 30px } .contact02 ul li .title::before { top:auto; width:90%; right:5%; height:1px; bottom:0; background-image:linear-gradient(90deg,rgba(220,227,253,.1),#dce3fd,rgba(220,227,253,.1)) } .contact02 ul li .text3 { margin-top:15px } .contact3 { padding-bottom:30px } .contact3 ul li { width:90%; margin:0 auto 20px } .contact4 { padding:40px 0 50px; background-size:cover } .contact4 .layui-tab { margin-top:25px; height:auto } .contact4 .layui-tab .layui-tab-title { position:relative; left:auto; right:auto; top:auto; width:100%; height:auto; overflow:hidden; padding-top:0; background:none; display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:8px } .contact4 .layui-tab .layui-tab-title li { width:auto; height:44px; margin:0 6px 12px; box-shadow:none } .contact4 .layui-tab .layui-tab-title li span { margin-right:25px } .contact4 .layui-tab .layui-tab-title li i { margin:0 8px 0 25px } .contact4 .main, .contact4 .layui-tab .layui-tab-title li.layui-this::before, .contact4 .layui-tab .layui-tab-title li.layui-this::after { display:none !important } .contact4 .layui-tab .layui-tab-content { width:90%; height:320px; margin:0 auto } .contact5 { padding:40px 0 35px; background-size:cover } .contact5 ul { margin-top:25px } .contact5 ul li { width:calc(90% - 62px); padding:25px 30px; margin:0 auto 20px } }