@charset "utf-8";

*{box-sizing: border-box;}
body{font-family:Arial, Helvetica, sans-serif;margin:0;padding:0;font-size:14px;color:#111;}
div, form, img, dl, dt, dd,figure{margin:0;padding:0;border:0;}
h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
a{color:#111;text-decoration:none;}
/*a:hover{opacity: 0.8}*/
.red{color:red}
.hidden{display:none}
.display{display:block}
.zone{width:1140px;margin:0 auto;position:relative;padding: 0 10px;overflow: hidden}
.zone:after{clear: both;display: block;overflow: hidden;content: ' '}
.clear:after{clear: both;display: block;overflow: hidden;content: ' '}
.btn{font-size: 35px;background: #ff914c;color: #fff;padding: 10px 30px;border-radius:30px}
.btn:hover{background: #f78843;opacity: 1}
.center{position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.bgPic{min-width: 100%;min-height: 100%;opacity: 0.38;}
.shape {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    direction: ltr;
}

.topCon {    background-image: linear-gradient(140deg, #468de3 0%, #21f6de 100%);padding: 15px 0;box-shadow: 0 10px 20px  0 rgba(0,0,0,0.05);position: relative;z-index: 10}
.topCon .zone{ display: flex;justify-content: space-between;align-items: center}
.topCon figure{  width:80%;}
.topCon nav{ width:20%;}
.topCon nav ul{ display: flex;justify-content: flex-end;padding: 0;margin: 0}
.topCon nav ul li{ list-style: none;padding: 0;margin: 0}
.topCon nav ul li a{color:#111;font-size: 17px;margin: 10px;position: relative;text-align: center;display: block;padding: 5px}
.topCon nav ul li a:after{content: '';width: 100%;height: 3px;background-color: #fff;display: block;transform:translateY(15px);opacity: 0;transition: all 0.3s}
.topCon nav ul li a.current:after,.topCon nav ul li a:hover:after{transform:translateY(10px);opacity: 1}

.banner{height: 500px; background-image: linear-gradient(140deg, #2b6fc4 0%, #50f3e0 89%);position: relative}
.banner .background-overlay{background-image: url(../images/bg.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.2;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}
.banner .container {text-align: center;width: 100%;color: #fff;text-shadow: 0 0 5px #1e83be}
.banner .container h1{font-size: 70px;}
.banner .container p{font-size: 30px;}
.banner .shape{    bottom: -1px;    transform: rotate(180deg);}
.banner .shape svg{  width: calc(290% + 1.5px);
    height: 110px;
    transform: translateX(-50%) rotateY(180deg);position: relative;
    left: 55%;}
.banner .shape .shape-fill{fill: #fff;
    transform-origin: center;
    transform: rotateY(0deg);}

#recentList {margin: 50px 0 20px}
#recentList li{list-style: none;margin: 20px 0}
#recentList li a{display: flex;align-items: center}
#recentList li img{width: 140px;border-radius: 10px;margin-right: 30px;border:1px solid #efefef}
#recentList li h3{font-size:25px;margin-bottom: 15px;margin-top: 0;}
#recentList li p{font-size:15px}

#links ul{border-top:1px solid #efefef;padding-bottom: 20px;padding-top: 10px}
#links ul{text-align: center;display: flex;flex-wrap: wrap;}
#links ul li{margin: 10px 20px 0 20px;text-align: left}

article{margin: 30px 0;font-size: 17px}
article a{color:#3591cb}
article li{margin: 10px 0}
.position{font-size: 16px;border-bottom: 1px solid #efefef;padding-bottom: 15px}
.position a{color: #111}
article figure{margin-top: 15px}

.picBlog{float: right;padding-left: 20px}
.picBlog img{border:1px solid #efefef}

.coreList{margin: 30px 0;font-size: 17px}
.coreList li{line-height: 1.5}
.coreList .intro a{color: #3591cb}
.coreList .intro{padding: 10px 0}

#blogList{margin: 30px 0}
#blogList .conItem{display: flex;margin: 20px 0}
#blogList .conItem figure{margin-right: 30px;}
#blogList .conItem img{border: 1px solid #efefef}
#blogList .conItem .right h2{margin-bottom: 5px}
#blogList .conItem .right ul{padding-left: 20px}
#blogList .conItem .right li{line-height: 1.5;}

.page404Box{text-align: center;margin: 150px auto 150px}
.margin2030{margin:20px 0 30px}

#sitemapList li{font-size: 16px;line-height: 1.6}
#sitemapList{margin: 30px 0}

footer .core{border-top:1px solid #efefef;padding: 30px 15px 30px;text-align: center;display: flex;}
footer .core nav{display: flex;position: relative;top:-3px}
footer .core nav ul{padding: 0;margin: 0;margin-left: 20px;display: flex}
footer .core nav li{list-style: none;}
footer .core nav li a{width: 22px;height:22px;background-repeat:no-repeat;display: block;margin-left: 10px;background-size: cover }
footer .core nav li a.medium{background-image: url("../images/medium_icon.webp")}
footer .core nav li a.tumblr{background-image: url("../images/tumblr_icon.webp")}
footer .core nav li a.wordpress{background-image: url("../images/wordpress_icon.webp")}
footer .core nav li a.blogspot{background-image: url("../images/blogspot_icon.webp")}

@media (max-width:1140px){
    .zone{width:100%;}
}

@media (max-width:767px){
.topCon img{width: 100px;height: auto}
    #recentList li h3{font-size: 18px}
    #blogList .conItem figure{margin-right: 20px;}
    #blogList .conItem img{width: 150px;height: 150px;}
    footer .core{display: block; }
    footer .core nav{display: block;     justify-content: center;margin-top: 20px;display: flex}
    footer .core nav li:first-child a{    margin-left:0;}
    footer .core nav ul{    margin-left: 0;}
}

@media (max-width:530px){
    #recentList li a{flex-wrap: wrap;text-align: center;justify-content: center}
    #recentList li img{margin-bottom: 15px;margin-right: 0}
    .banner .container h1{font-size: 40px}
    .picBlog{width:100%;padding: 0;margin-bottom:15px ;text-align: center}
    .picBlog img{max-width: 100%;height: auto}
    #blogList .conItem{flex-wrap: wrap}
    #blogList .conItem figure{margin-right:0;text-align: center;width: 100%}
    #blogList .conItem img{width: 250px;max-width: 100%;height: auto;display: inline-block}
}