﻿html, body { font-size: 12px; margin: 0; padding: 0; min-width: 1400px; background-color: #fff; position: relative; min-height: 100%; }
body { padding: 0; margin: 0; min-height: 100%; background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", "Helvetica Neue", STHeiti, Tahoma, Simsun, Arial, Helvetica, Sans-serif; }
    body.lang-en { font-family: Arial, sans-serif !important; }

@media (min-width: 768px) { html {
    font-size: 16px;
  }
}

.header { display: flex; align-items: center; justify-content: center; width: 1400px; margin: 0 auto; }
    .header .header-menu { flex: 1; }
        .header .login-panel{ text-align:right; padding-right:20px; }
            .header .login-panel a { font-size: 16px; color: #3cb6e7; text-decoration: none; margin-left:20px; }
                .header .login-panel a:hover { text-decoration:underline; }
                .header .login-panel .btn-sign-in { padding-left: 20px; border-left: 2px solid #ccc; }
            .header .nav { text-align: center; display: flex; justify-content: flex-end; padding-top: 30px; }
            .header .nav a { font-size: 16px; font-weight: bold; color: #333; text-decoration: none; height: 16px; line-height: 16px; border-left: 2px solid #333; padding: 0 20px; }
                .header .nav a:hover { text-decoration: none; }
                .header .nav a:hover, .header .nav .cur > a { color: #3cb6e7; border-bottom: 2px solid #3cb6e7; }
                .header .nav a:first-child { border-left: 0 none; }

    .header .menu-item { position: relative; margin-left:20px; }
        
    .menu-item .menu-sub { display: none; position: absolute; z-index: 99; left: -50%; top: 26px; height: 40px; border-radius: 5px; box-shadow: 0 2px 5px 1px #ccc; background-color: #eee; }
        .menu-item .menu-sub div { display: flex; align-items:center; justify-content:center; }
        .menu-item .menu-sub a { padding: 0; min-width:60px; text-align:center; }


.footer { background-color: #282828; display: block; }
    .footer .footer-main { width: 1400px; margin: 0 auto; padding: 60px 0; }
    .footer a { color: #fff; }
    .footer .copyright { text-align: center; color: #fff; font-size: 14px; }
    .footer .footer-links span{ padding:0 10px; color:#fff; }
    .footer .footer-links a { font-weight: bold; text-decoration: none; }
    .footer .footer-links a:hover { text-decoration:underline; }

.page-num { padding: 10px 0; font-size: 14px; text-align: center; margin-bottom:20px; }
    .page-num a { line-height: 30px; color: #09f; padding: 8px 13px; margin: 0 5px; text-decoration: none; background-color: #f2f2f2; border-radius: 3px; }
        .page-num a:hover { color: #fff; background-color: #3cb6e7 }
    .page-num span { color: #999; padding: 8px 13px; margin: 0 5px; background-color: #f2f2f2; border-radius: 3px; }
    .page-num .PageNum-Current { color: #fff; padding: 8px 13px; background-color: #3cb6e7; border-radius:3px; }


    .main .img { text-align: center; }
    .main .img img { display: block; text-align: center; margin: 0 auto; }


.popup { position: fixed; width: 100%; height: 100%; z-index: 999; left: 0; top: 0; background-color: rgba(0,0,0, 0.9); display: none; justify-content: center; align-items: center; }
    .popup .box { position: relative; padding: 0 20px 20px 20px; background-color: #000; border-radius: 20px; box-shadow: 5px 5px 5px #000; border: 5px solid rgba(255, 255, 255, 0.5); }
    .popup .tit { text-align: center; font-size: 20px; font-weight: bold; line-height: 60px; color: #fff; }
    .popup .close { cursor: pointer; display: inline-block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; background-color: #f00; color: #fff; font-weight: bold; font-size: 20px; position: absolute; top: -10px; right: -10px; }
        .popup .close:hover { background-color: #080; }

.pro-popup video { width: 640px; height: 420px; }

.component-type-banner{ max-width:1920px; margin:0 auto; }

.full-slide { width: 100%; }
.fullSlide { position: relative; margin: 0 auto; }
    .fullSlide * { zoom: 1 }
    .fullSlide ul{ list-style:none; padding:0; margin:0; }
    .fullSlide .bd { position: relative; z-index: 0; }
        .fullSlide .bd li img { width: 100%; vertical-align: top; }
    .fullSlide .hd { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index: 1; height: 30px; line-height: 30px; text-align: center; }
        .fullSlide .hd ul { display:flex; margin:0 auto; }
            .fullSlide .hd ul li { cursor: pointer; width: 16px; height: 16px; margin:0 10px; border:1px solid #fff; border-radius:50%;  overflow: hidden; font-size:0; }
            .fullSlide .hd ul .on { background-color:#fff; }

    .fullSlide .prev, .fullSlide .next { z-index: 1; display: block; width: 100px; height: 100%; position:absolute; left: 50px; top:0; background: url(../site/prev.png) left center no-repeat; filter: alpha(opacity=40); opacity: 0.4 }
    .fullSlide .next { background: url(../site/next.png) right center no-repeat; left:auto; right:50px; }
        .fullSlide .prev:hover, .fullSlide .next:hover { filter: alpha(opacity=80); opacity: 0.8 }

.net-bg { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAFwSURBVCiRnZA7yvJgFISfmMS8SSRfwKQStLVQ96HoDtyC23Eh1kG3IEQIeGksVEQQJDc0l7/yBdt/4BQz58zAHBaLhWi1WnLm87kIgkDUdS3quhZFUYg8z0WapiJNU7FcLoVWVRVZlvHF+/2mqirJVVVFVVXJG40GDf4Dmuu6dDodKTSbTR6PB/v9HgDTNHEcB8dxUBQF27ZRNpuNCMNQms7nM6fTiev1CsBoNGIymTAej2k2m4RhiDYYDOh2u9IUBAG73Y4oigD4+/vj+XzKnr1eD83zPDzPk6Z2u42iKMRxDECWZRRFIfeO46ClaYplWVI0DAPXdfF9HwAhBEmScLvdMAwDy7JQVquVmM1mP52OxyOXywWAKIrYbrd8Ph8AptMp2v1+/3mn7/vYtk2/3wcgSRLW6zWHw4GyLBkOh2jfhC9M08Q0zZ8OZVkSxzFFUZDnOVpZlrxeL3mk6zq6rqNpmuS2beM4DkVRoKoq/wB0JJjdEi8FQAAAAABJRU5ErkJggg==) repeat; }

.page-banner{ margin-bottom:20px; text-align:center; width:100%; }
    .page-banner img{ display:block; min-width:1400px; width:100%; }
    .page-list-main { width: 1400px; margin: 0 auto; display: flex; }
    .page-list-main .page-menu{ width:300px; }
        .page-list-main .page-menu .page-menu-title{ font-size:40px; background-color:#3cb6e7; color:#fff; height:60px; line-height:60px; padding-left:20px; }
        .page-list-main .page-menu .page-menu-items { margin-bottom: 20px; border-top: 1px solid #ccc; }
        .page-list-main .page-menu ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column;  }
        .page-list-main .page-menu li { padding:10px 20px; border:1px solid #ccc; border-top:0 none; }
            .page-list-main .page-menu li a{ font-size:18px; color:#333; text-decoration:none; }
                .page-list-main .page-menu li a:hover, .page-list-main .page-menu .c { color: #3cb6e7; text-decoration: none; }
                .page-list-main .page-body { flex: 1; }

        .page-list-main .page-body{ padding-left:20px; }
            .page-list-main .page-body .page-body-title { font-size: 18px; border-bottom: 1px solid #ccc; margin-bottom: 20px; padding-left: 20px; color: #3cb6e7 }
                .page-list-main .page-body .page-body-title h1 { padding:10px 0; margin:0; }
                .page-list-main .page-list-items { padding-left: 20px; }
            .page-list-main .page-list-items .item { display:flex; margin-bottom:20px; border-bottom:1px #ccc dashed; padding-bottom:20px; text-decoration:none }
                .page-list-main .page-list-items .item:hover .title { color: #3cb6e7 !important; }
                .page-list-main .page-list-items .item:hover .note { color: #3cb6e7 !important; }
                .page-list-main .page-list-items .item:hover .img { border-color:#3cb6e7 !important; }
                .page-list-main .page-list-items .item .photo { width: 100px; margin-right: 20px }
                .page-list-main .page-list-items .item .img { width: 100px; max-height: 100px; display:block; border-radius:10px; border:3px solid #fff; }
            .page-list-main .page-list-items .item .info{ flex:1; }
                .page-list-main .page-list-items .item .info .title{ font-size:22px; font-weight:bold; padding-bottom:10px; color:#000; }
                .page-list-main .page-list-items .item .info .note{ font-size:18px; line-height:1.5em; color:#333; }

        .page-list-main .page-detail-body{ font-size:18px; line-height:1.5em; padding:0 20px; }


.home-author { width: 1400px; margin: 0 auto; background-color: #f8f8f8; display: flex; justify-content: space-between; padding: 20px; flex-wrap: wrap; }
    .home-author .home-author-item { width: 410px; background-color: #fff; border: 1px solid #ccc; padding: 20px; display: flex; margin-bottom:20px; border-radius:6px; align-items:center; }
        .home-author .home-author-item .img { margin-right:20px; }
        .home-author .home-author-item .img img { width: 100px; height: 100px; border-radius: 50%; border:2px solid #fff; }
        .home-author .home-author-item .info { flex:1; }
        .home-author .home-author-item .info .t{ font-size:22px; color:#000 }
            .home-author .home-author-item .info .n { font-size:14px; color:#333; }
.home-author a{ text-decoration:none; }
    .home-author a:hover img { border-color:#3cb6e7 !important; }
    .home-author a:hover .t { color: #3cb6e7 !important; }
    .home-author a:hover .n { color:#3cb6e7 !important; }


.home-stan { display: flex; flex-wrap: wrap; justify-content: space-between; width:1400px; margin:0 auto; }
.home-stan a{ width:48%; text-decoration:none; }
    .home-stan .home-stan-item { padding: 20px; border-bottom: 1px dashed #ccc; padding-left: 30px; background: url(popup-menu-arrow.png) 6px 20px no-repeat; }
    .home-stan .home-stan-item .t{ font-size:18px; color:#000; margin-bottom:10px; }
    .home-stan .home-stan-item .n { font-size: 14px; color: #333; }
    .home-stan a:hover .t{ color:#3cb6e7 !important; }
    .home-stan a:hover .n { color: #3cb6e7 !important; }

.panel-login{ padding-top:50px; padding-bottom:20px; }
    .panel-login a{ color:#3cb6e7; text-decoration:none }
        .panel-login a:hover { text-decoration:underline; }

        .dialog { width: 100%; height: 100%; position: fixed; z-index: 999999; background-color: rgba(0,0,0,0.3); left: 0; top: 0; display: none; justify-content: center; align-items: center; }
    .dialog .dialog-main { background-color: #fff; }
    .dialog .dialog-title { background-color: #f5f5f5; border-bottom: 1px solid #B7B7B7; outline: none !important; display: flex; }
        .dialog .dialog-title .tabs { border-bottom:none; padding-top:1em; position:relative; background-color:#f5f5f5; flex:1; }
        .dialog .dialog-title .tabs ul{ margin:0; padding:0 15px; list-style:none; }
            .dialog .dialog-title .tabs ul li:first-child { margin-right:-1px; }
            .dialog .dialog-title .tabs ul li { border-bottom: none; display: inline-block; height: auto; position: relative; top: 1px; width: auto; z-index: 1; }
            .dialog .dialog-title .tabs ul li.act{ background-color:#fff; border:1px solid #b7b7b7; border-bottom:0 none; color:#174450; font-weight:700; }
            .dialog .dialog-title .tabs ul li a{ display:block; padding:8px 15px 4px; color:#3cb6e7; text-decoration:none; font-size:18px; }
                .dialog .dialog-title .tabs ul li.act a{ cursor:default; pointer-events:none; }
        .dialog .dialog-title .dialog-close{ display:flex; justify-content:center; align-items:center; margin-right:10px; }
            .dialog .dialog-title .dialog-close .close-icon { width: 24px; height: 24px; }
        .dialog .dialog-body { background-color: #fff; }
            .dialog .dialog-body > div { display:none; padding:20px; }

.sign-in-box { width: 460px; }
.sign-up-box { width: 600px; }
.sign-box h2 { color: #666; }
    .sign-box h2 span{ font-size:12px; padding-left:20px; font-weight:normal; color:#999; }
    .sign-box .input-box { margin-bottom: 20px; }
    .sign-box .input-box input { border:1px solid #ccc; line-height:40px; height:40px; border-radius:6px; text-indent:10px; font-size:16px; width:100%; }
        .sign-box .input-box input:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.sign-box .btns{ text-align:right; }
    .sign-box .btns .btn { display: inline-block; font-weight: 400;  text-align: center; vertical-align: middle; user-select: none; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
    .sign-box .btns .btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; }
.flex-sb-box{ display:flex; justify-content:space-between; }
    .flex-3 > div { width: 30%; }
    .flex-2 > div { width: 48%; }
