@charset "utf-8"; /*---------------------------------------- Yoursite Style ----------------------------------------*/ #EmbCore{font-size: 14px;line-height: 1.5;font-family:'Microsoft YaHei','Century Gothic';color: #4D4D4D;} #EmbCore .Wrapper{width:100%;max-width: 1200px;margin: auto;} #EmbCore img{width: 100%;} #EmbCore .Header { background:url(../images/kv.png) bottom center no-repeat, url(../images/kvbg.jpg) top center no-repeat; background-size: cover; width: 100%; color: #fff; text-align: center;box-sizing: border-box;height: 400px; background-color: #021969;} #EmbCore .SWord{font-size: 22px; } #EmbCore .SWord i{background:url(../images/IconClose.png) no-repeat; width: 20px; height: 20px;background-size: 100%; display: inline-block;vertical-align: middle;} #EmbCore h1{color: #fff;font-size: 38px;padding-top: .8em; } #EmbCore #Block01 .Wrapper{ width: 100%;max-width: 820px;margin: auto; } /*.Kv{ background:url(../images/kv.png) bottom center no-repeat; background-size: cover;height: 400px;}*/ #EmbCore .StoreProductFlow ul.FlexWrap{display: flex;} #EmbCore .StoreProductFlow li{text-align: center; margin:5em 2em 0;} #EmbCore .StoreProductFlow li p{font-size: 22px; color: #406fb8;} #EmbCore .Section{padding: 5em 0;} #EmbCore .FlexWrap{display: flex;flex-wrap: wrap;} #EmbCore #Block02 h2 {color: #fff;} #EmbCore h2{font-size: 36px; text-align: center; color: #212529;font-family: Arial;margin-bottom: 2em;font-weight: bold;} #EmbCore h3{color: #406fb8; font-size: 22px;border-bottom: 0 none;padding-bottom: inherit;} #EmbCore .Nav.fix {position: fixed;top: 0;width: 100%; z-index: 10;} #EmbCore .Nav{ background-color: #004280;} #EmbCore .Nav .Wrapper{ max-width: 1040px;} #EmbCore .Nav ul li { position: relative; } #EmbCore .Nav ul li:after{content: "";background-color: #6582c7;top: 5px;bottom: 5px;width: 1px;left: 0;right: 0;position: absolute;} #EmbCore .Nav ul li:nth-child(1):after{display: none;} #EmbCore .Nav ul li a{ color: #fff; padding: 15px 2em; display: block; font-size: 18px; } #EmbCore .MenuTitle{display: none;} #EmbCore #Block01 img{max-width: 200px;} #EmbCore #Block01 .Intro{font-size: 15pt;} #EmbCore #Block02 img{max-width: 235px;margin: auto;} #EmbCore #Block02{position: relative;background:url(../images/bg2.jpg)no-repeat top center; background-size: cover;} #EmbCore #Block02:before{ content: "";background:url(../images/bg01.png)no-repeat center; width: 100%; height: 50px; position: absolute;top: 0; left: 0; right: 0; } #EmbCore #Block02:after{ content: "";background:url(../images/bg02.png)no-repeat center; width: 100%; height: 35px; position: absolute;bottom: -1px; left: 0; right: 0; } #EmbCore #Block02 .FlexItem{width: 25%;} #EmbCore #Block02 .SliderBlock .swiper-wrapper .swiper-slide,#Block02 .FlexItem{text-align: center;color: #fff; } /*#Block02 .SliderBlock .swiper-wrapper .swiper-slide img{max-width: 235px; margin:1em auto;}*/ #EmbCore #Block02 .SliderBlock .swiper-slide-item p,#Block02 .FlexItem p{font-size: 18px;color: #fff;text-align: center;} #EmbCore #Block02 .SliderBlock .swiper-slide-item a,#Block02 .FlexItem a{border-radius: 10px; background-color: transparent; display: block; padding:5% 3% 11% ;transition: all 0.2s ease;} #EmbCore #Block02 .SliderBlock .swiper-slide-item a:hover,#Block02 .FlexItem a:hover{ background-color: #fff; -webkit-box-shadow: 0px 0px 20px 0px rgba(4, 0, 0, 0.26);box-shadow: 0px 0px 20px 0px rgba(4, 0, 0, 0.26);} #EmbCore #Block02 .SliderBlock .swiper-slide-item a:hover p,#Block02 .FlexItem a:hover p{ color: #19558c } #EmbCore #Block02_Slider .swiper-slide{ display: flex; flex-wrap: wrap } #EmbCore #Block02_Slider .swiper-slide .swiper-slide-item{width: 50%;} #EmbCore #Block03 ul.FlexWrap{display: flex;flex-wrap: wrap; } #EmbCore #Block03 ul.FlexWrap li{width: 31%; text-align: center; margin:0 1.1% 2em;} #EmbCore #Block03 ul.FlexWrap li img{margin-bottom: 1em;} #EmbCore #Block03 ul.FlexWrap li h3{margin-bottom: .3em;} #EmbCore #Block03 ul.FlexWrap li .ImgBlock .EffectWrap{opacity: 0; background-color: rgba(4,62,121,.7); position: absolute; left: 0; right: 0; top: 0; bottom: 0;display: flex;justify-content: center;align-items: center;} #EmbCore #Block03 ul.FlexWrap li .EffectWrap span{ border-radius: 5px; border:1px solid #fff; color: #fff; display: block; width:50%; font-weight: bold; font-size: 18px; padding: 1%;} #EmbCore #Block03 ul.FlexWrap li a{display: block;} #EmbCore #Block03 ul.FlexWrap li a:hover .EffectWrap{opacity: 1;transform: scale(1);} #EmbCore #Block03 ul.FlexWrap li:nth-child(1) .ImgBlock{background:url(../images/block03_icon1.png)no-repeat center;background-size: 100%;} #EmbCore #Block03 ul.FlexWrap li:nth-child(2) .ImgBlock{background:url(../images/block03_icon2.png)no-repeat center;background-size: 100%;} #EmbCore #Block03 ul.FlexWrap li:nth-child(3) .ImgBlock{background:url(../images/block03_icon3.png)no-repeat center;background-size: 100%;} #EmbCore #Block03 ul.FlexWrap li:nth-child(4) .ImgBlock{background:url(../images/block03_icon4.png)no-repeat center;background-size: 100%;} #EmbCore #Block03 ul.FlexWrap li:nth-child(5) .ImgBlock{background:url(../images/block03_icon5.png)no-repeat center;background-size: 100%;} #EmbCore #Block03 ul.FlexWrap li:nth-child(6) .ImgBlock{background:url(../images/block03_icon6.png)no-repeat center;background-size: 100%;} #EmbCore #Block03 ul.FlexWrap li .ImgBlock{position: relative;overflow:hidden; height: 0;border-radius: 5px;margin-bottom: 1em;padding-bottom: 60%; background-origin: center;background-size: 100%;transition: all 0.3s ease-out;} #EmbCore #Block03 ul.FlexWrap li a:hover .ImgBlock{background-size: 120%;} #EmbCore #Block04{position: relative; background-color: #e2f6ff;} #EmbCore #Block04:before{ content: "";background:url(../images/bg03.png)no-repeat center; width: 100%; height: 35px; position: absolute;top: -1px; left: 0; right: 0; } #EmbCore #Block04:after{ content: "";background:url(../images/bg04.png)no-repeat center; width: 100%; height: 35px; position: absolute;bottom: 0; left: 0; right: 0; } #EmbCore #Block04 h3{margin-bottom: .5em;} #EmbCore #Block04 ul.FlexWrap > li{width: 31%; text-align: center; margin:0 1.1% 3em;background-color: #fff; border-radius: 10px;padding: 10px; box-sizing: border-box;} #EmbCore #Block04 ul.FlexWrap li .FlexBlock{ display: flex;min-height: 148px; } #EmbCore #Block04 ul.FlexWrap li .FlexBlock .FlexLeft{flex:2;} #EmbCore #Block04 ul.FlexWrap li .FlexBlock .FlexLeft img{max-width: 130px ; margin: auto;} #EmbCore #Block04 ul.FlexWrap li .FlexBlock .FlexRight{flex:3; text-align: left;} #EmbCore #Block04 ul.FlexWrap li .FlexBlock .FlexRight ul li{ list-style-type: disc; margin-left: 20px; } #EmbCore #Block04 ul.FlexWrap li .ImgBot img{max-width: 330px; margin: auto;} #EmbCore #Block05 ul.FlexWrap{justify-content: center;align-items: center; } #EmbCore #Block05 ul.FlexWrap > li{ width: 49%;margin:0 .5%;} #EmbCore #Block05 ul.FlexWrap > li a h3{ color: #fff; } #EmbCore #Block05 ul.FlexWrap > li a{ box-sizing: border-box; display: block; max-width: 556px;height: 253px; display: flex; color: #fff;align-items: flex-end;flex-wrap: wrap;transition: all 0.2s ease;width: 100%;} #EmbCore #Block05 ul.FlexWrap > li:nth-child(2) h3{color: #004280; margin-bottom: .5em;} #EmbCore #Block05 ul.FlexWrap > li a p{ color: #fff; margin-bottom: .5em;max-width: 51vmin;} #EmbCore #Block05 ul.FlexWrap > li a .Btn{ background-color: #f39800; border-radius: 5px; color: #fff; padding: 3%; min-width: 155px; text-align: center;font-weight: bold;max-width: 100px;} #EmbCore #Block05 ul.FlexWrap > li a:hover .Btn{ background-color: #f17c10;} #EmbCore #Block05 ul.FlexWrap > li:nth-child(1){ background:url(../images/block05_icon1.png) no-repeat;} #EmbCore #Block05 ul.FlexWrap > li:nth-child(2){ background:url(../images/block05_icon2.png) no-repeat;} #EmbCore #Block05 ul.FlexWrap .Box{width: 40%;margin-left: 5%;margin-bottom: 8%;} #EmbCore #Block06 ul.FlexWrap{display: flex;flex-wrap: wrap; } #EmbCore #Block06 ul.FlexWrap li{width: 23.4%; text-align: center; margin:0 .8% 1.3em;} #EmbCore #Block06 ul.FlexWrap li .ImgBlock .EffectWrap{ color: #fff;position: absolute; left: 0; right: 0; top: 0; bottom: 0;display: flex;justify-content: center;align-items: center;font-size: 18px;padding: 3%;} #EmbCore #Block06 ul.FlexWrap li .EffectWrap.Before{opacity: 1; } #EmbCore #Block06 ul.FlexWrap li .EffectWrap.After{opacity: 0;} #EmbCore #Block06 ul.FlexWrap li .ImgBlock{position: relative;overflow:hidden; height: 0;border-radius: 5px;padding-bottom: 57%; background-origin: center;background-size: 100%;transition: all 0.3s ease-out;} #EmbCore #Block06 ul.FlexWrap li a{display: block;} #EmbCore #Block06 ul.FlexWrap li a:hover .EffectWrap.Before{opacity: 0; } #EmbCore #Block06 ul.FlexWrap li a:hover .EffectWrap.After{opacity: 1; } #EmbCore #Block06 ul.FlexWrap li a:hover .ImgBlock{background-size: 120%;} #EmbCore #Block06 ul.FlexWrap li a:hover .EffectWrap{background-color: rgba(4,62,121,.7);} /*#EmbCore #Block06 ul.FlexWrap li .EffectWrap .Before span{opacity: 0; color: #fff; display: block; width:50%; font-weight: bold; font-size: 18px; padding: 1%;} #EmbCore #Block06 ul.FlexWrap li .EffectWrap .After{opacity: 0;background-color: rgba(4,62,121,.7); } #EmbCore #Block06 ul.FlexWrap li a:hover .EffectWrap .After{opacity: 1;transform: scale(1);} #EmbCore #Block06 ul.FlexWrap li a:hover .EffectWrap .Before{opacity: 0;}*/ #EmbCore #Block06 ul.FlexWrap li:nth-child(1) .ImgBlock{background:url(../images/block06_icon1.png)no-repeat center;background-size: 100%;} #EmbCore #Block06 ul.FlexWrap li:nth-child(2) .ImgBlock{background:url(../images/block06_icon2.png)no-repeat center;background-size: 100%;} #EmbCore #Block06 ul.FlexWrap li:nth-child(3) .ImgBlock{background:url(../images/block06_icon3.png)no-repeat center;background-size: 100%;} #EmbCore #Block06 ul.FlexWrap li:nth-child(4) .ImgBlock{background:url(../images/block06_icon4.png)no-repeat center;background-size: 100%;} #EmbCore #Block06 ul.FlexWrap li:nth-child(5) .ImgBlock{background:url(../images/block06_icon5.png)no-repeat center;background-size: 100%;} #EmbCore #Block06 ul.FlexWrap li:nth-child(6) .ImgBlock{background:url(../images/block06_icon6.png)no-repeat center;background-size: 100%;} #EmbCore #Block06 ul.FlexWrap li:nth-child(7) .ImgBlock{background:url(../images/block06_icon7.png)no-repeat center;background-size: 100%;} #EmbCore #Block06 ul.FlexWrap li:nth-child(8) .ImgBlock{background:url(../images/block06_icon8.png)no-repeat center;background-size: 100%;} #EmbCore .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{ background-color: #8d66a5; } #EmbCore .owl-theme .owl-dots .owl-dot span{background-color: #fff;} #EmbCore .stickytop {position: fixed;top: 0;width: 100%;margin-left: 0;z-index: 10;} #EmbCore .desc{display: block;} #EmbCore .Mobile{display: none;} @media screen and (max-width: 1200px) { #EmbCore #Block05 ul.FlexWrap .Box{width: 23vmin;} } @media screen and (max-width: 950px) { #EmbCore .MenuTitle{display: block; color: #fff;padding: 3%;border-bottom: 1px solid #fff;background-color: #004280;position: relative;} #EmbCore .Nav{ background-color: #fff;} #EmbCore .Nav .FlexWrap li{width: 100%; border-bottom: 1px solid #666} #EmbCore .Nav .FlexWrap li:last-child{ border-bottom: 2px solid #004280; } #EmbCore .Nav .FlexWrap{transition: all 0.3s ease-out; display: none;} /*#EmbCore .Nav .active + .FlexWrap{display: block}*/ #EmbCore .Nav .FlexWrap.hide{display: none;} #EmbCore .Nav .FlexWrap.open{display: block;} #EmbCore .Nav ul li a{color: #004280;padding:3%; font-size: 14px;} #EmbCore .Nav .FlexWrap li a{width: 100%;} #EmbCore .Nav ul li:after{display: none;} #EmbCore .Nav .far{display: inline-block; vertical-align: middle} #EmbCore .Nav .fa-ellipsis-v{ width: 10px;} #EmbCore .Nav .fa-chevron-circle-down{ width: 20px;} #EmbCore .Nav .fa-chevron-circle-right{ width: 20px;} #EmbCore .Nav .active .fa-chevron-circle-right{display: none;} /*#EmbCore .Nav .fa-chevron-circle-down{display: none;}*/ #EmbCore .Nav .active .fa-chevron-circle-down{display: block;} #EmbCore .Nav .fas{position: absolute;right: 10px; top: 3vmin;} #EmbCore #Block05 ul.FlexWrap > li:nth-child(1){background-size: 100%;} #EmbCore #Block05 ul.FlexWrap > li:nth-child(2){background-size: 100%;} #EmbCore #Block05 ul.FlexWrap > li a{height: 20vmin;box-sizing: border-box;} #EmbCore #Block05 ul.FlexWrap > li a h3{font-size: 2vmin;} #EmbCore #Block05 ul.FlexWrap .Box{width: 24vmin;margin-left: 1vmin;margin-top: 1vmin;margin-bottom: 1vmin;} #EmbCore #Block06 ul.FlexWrap li{width: 48%;margin: 0px 1% .5em;} } @media screen and (max-width: 768px) { #EmbCore #Block01 .Intro{font-size: 5vmin;} #EmbCore h1{font-size: 5vmin;} #EmbCore .Kv{height: 0;padding-bottom: 57%;} #EmbCore .Header{background-size: 156%,cover;height: auto;} #EmbCore .SWord i{ display: block; margin:1% auto; } #EmbCore .Section{padding: 5%;} #EmbCore .StoreProductFlow li{margin:3% auto;} #EmbCore #Block02:before{display: none;} #EmbCore #Block02:after{ height: 22px;background-size: cover } #EmbCore #Block03 ul.FlexWrap li{width: 47%;} #EmbCore h2{margin-bottom: 1em;font-size: 8vmin;} #EmbCore #Block04 h2 {margin-top: 1em;} #EmbCore #Block04 ul.FlexWrap > li{width: 100%;} #EmbCore #Block04:after{display: none;} #EmbCore #Block04 ul.FlexWrap li .FlexBlock .FlexLeft img{max-width: 200px;} #EmbCore #Block04 ul.FlexWrap li .FlexBlock .FlexRight{align-self: center;} #EmbCore #Block02 .FlexWrap .item{width: 48%;} #EmbCore .desc{display: none;} #EmbCore .Mobile{display: block;} #EmbCore #Block05 ul.FlexWrap > li a p{max-width: 20vmin;} #EmbCore #Block05 ul.FlexWrap > li a .Btn{box-sizing: border-box;} #EmbCore #Block01 .Intro{font-size: 3vmin;} } @media screen and (max-width: 640px) { #EmbCore h1{font-size: 9vmin;} #EmbCore .Kv{height: 0;padding-bottom: 94%;} #EmbCore #Block03 ul.FlexWrap li{width: 100%;} #EmbCore #Block05 ul.FlexWrap > li{width: 100%;} #EmbCore #Block05 ul.FlexWrap > li a h3{font-size: 4vmin;} #EmbCore #Block04 ul.FlexWrap li .FlexBlock .FlexLeft img{max-width: 130px;} #EmbCore #Block04 ul.FlexWrap li .FlexBlock .FlexRight{align-self: inherit;} #EmbCore .Nav .fas{ top: 4vmin;} #EmbCore #Block04:before{top: -3vmin;} #EmbCore #Block04:before{background-size: 370vmin;} #EmbCore #Block06 ul.FlexWrap li .ImgBlock .EffectWrap{font-size: 14px;} #EmbCore #Block05 ul.FlexWrap > li a p{max-width: 20vmin;} #EmbCore #Block05 ul.FlexWrap > li a{height: 41vmin;} #EmbCore #Block05 ul.FlexWrap .Box{width: 44vmin;margin-left: 3vmin;margin-top: 1vmin;margin-bottom: 2vmin;} } @media screen and (max-width: 550px) { @media screen and (max-width: 480px) { #EmbCore #Block05 ul.FlexWrap .Box{width: 54%;} #EmbCore #Block05 ul.FlexWrap > li a p{max-width: 41vmin;line-height: 1.3;font-size: 3vmin;} #EmbCore #Block05 ul.FlexWrap > li a{height: 38vmin;margin-bottom: 2vmin;margin-left: 2vmin;} #EmbCore #Block01 .Intro{font-size: 5vmin;} } @media screen and (max-width: 400px) { #EmbCore #Block05 ul.FlexWrap .Box{margin-bottom: 1vmin;} } @media screen and (max-width: 320px) { #EmbCore #Block04:before{top: -2vmin;} #EmbCore #Block05 ul.FlexWrap > li a p{max-width: 85vmin;} }