﻿<!DOCTYPE html>
<html lang="en">

<head> <meta name="keywords" content="keywords_temp" />

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>杭州圣吉奥软件有限公司</title>
    <link rel="shortcut icon" href="assets/img/sja_logo.png" type="image/x-icon"/>
  <link rel="icon" href="assets/img/sja_logo.png">

    <meta name="description" content="">
    
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/pop-up-gallery1.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/preload.css" rel="stylesheet">
    <link href="assets/css/vendors.css" rel="stylesheet">
    <link href="assets/css/syntaxhighlighter/shCore.css" rel="stylesheet">
    <link href="assets/css/style-blue.css" rel="stylesheet" title="default">
    <link href="assets/css/width-full.css" rel="stylesheet" title="default">
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <style type="text/css">
        body {
            color: #333;
            font-size: 13px;
        }

        h3, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .scrollbox {
            overflow: hidden;
        }

        #scrollDiv {
            height: 46px;
            overflow: hidden;
            padding-top: 20px;
        }

        /*这里的高度和超出隐藏是必须的*/
        #scrollDiv li {
            height: 90px;
            padding: 0 20px;
            overflow: hidden;
            vertical-align: bottom;
            zoom: 1;
        }

        #scrollDiv li h3 {
            height: 24px;
            padding-top: 13px;
            font-size: 14px;
            color: #353535;
            line-height: 24px;
            width: 300px;
        }

        #scrollDiv li h3 a {
            color: #353535;
            text-decoration: none
        }

        #scrollDiv li h3 a:hover {
            color: #F00
        }

        #scrollDiv li div {
            height: 36px;
            width: 300px;
            color: #416A7F;
            line-height: 18px;
            overflow: hidden
        }

        #scrollDiv li div a {
            color: #416A7F;
            text-decoration: none
        }

        .scroltit {
            height: 26px;
            line-height: 26px;
            padding-bottom: 4px;
            margin-bottom: 4px;
        }

        .scroltit h3 {
            width: 100px;
            float: left;
        }

        .scroltit .updown {
            float: right;
            width: 32px;
            height: 22px;
            margin-left: 4px
        }

        .width100p {
            width: 100%;
        }

        #company {
            position: relative;
        }

        #map0, #map1, #map2, #map3 {
            position: absolute;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
        }

        .pc #map0, .pc #map1, .pc #map2, .pc #map3 {
            width: 6.5%;
            height: 5%;
        }

        .app #map0, .app #map1, .app #map2, .app #map3 {
            width: 9%;
            height: 7%;
        }

        .pc #map0 {
            top: 40%;
            left: 74.5%;
        }

        .app #map0 {
            top: 46%;
            left: 82.5%;
        }

        .pc #map1 {
            top: 36%;
            left: 51.3%;
        }

        .app #map1 {
            top: 40%;
            left: 51%;
        }

        .pc #map2 {
            top: 39%;
            left: 14.5%;
        }

        .app #map2 {
            top: 59%;
            left: 12.5%;
        }

        .pc #map3 {
            top: 50%;
            left: 25%;
        }

        .app #map3 {
            top: 63%;
            left: 37%;
        }

        #bottomHover {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 60px;
            background: rgba(0, 0, 0, .7);
            z-index: 2;
        }

        #companyName0, #companyName1, #companyName2, #companyName3 {
            padding: 10px 0;
            width: 25%;
            float: left;
            color: #FFFFFF;
            text-align: center;
            cursor: pointer;
        }

        .companyDetail {
            padding: 30px 30px 30px 50px;
            color: #000000;
            font-size: 14px;
            background: #FFFFFF;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            z-index: 4;
        }

        .pc .companyDetail {
            bottom: 41px;
            position: absolute;
            margin-bottom: 8px;
            width: 500px;
        }

        .app .companyDetail {
            width: 100%;
        }

        .pc #companyDetail0 {
            left: 0;
        }

        .pc #companyDetail3 {
            right: 0;
        }

        .pc .placement {
            z-index: 3;
            position: absolute;
            bottom: -8px;
            border-width: 8px 8px 0;
            border-color: transparent;
            border-style: solid;
            border-top-color: #FFFFFF;
            left: calc(50% - 8px);
        }

        .companyName:before {
            content: '';
            background: #5A7ECE;
            width: 3px;
            height: 14px;
            position: absolute;
            margin-top: 4px;
            border-radius: 2px;
            left: 30px;
        }

        .companyName {
            color: #09105D;
            margin-bottom: 10px;
        }

        .companyAddress, .companyEmail, .companyPhone, .companyRemark {
            margin-bottom: 10px;
        }

        .companyAddress:before, .companyEmail:before, .companyPhone:before, .companyRemark:before {
            content: '';
            width: 13px;
            height: 13px;
            position: absolute;
            left: 26px;
            margin-top: 4px;
            background-repeat: no-repeat !important;
        }

        .companyAddress:before {
            background: url("./assets/img/index/address.png");
        }

        .companyEmail:before {
            background: url("./assets/img/index/email.png");
        }

        .companyPhone:before {
            background: url("./assets/img/index/phone.png");
        }

        .companyRemark:before {
            background: url("./assets/img/index/remark.png");
        }

        #companyDetail {
            position: relative;
        }

        .app #companyDetail {
            overflow: hidden;
        }

        .banner-image0, .banner-image1, .banner-image2, .banner-image3 {
            height: 200px;
        }
        .banner-image0 {
            background: url("./assets/img/index/soft-banner.jpg") center 0/cover no-repeat;
        }

        .banner-image1 {
            background: url("./assets/img/index/banner1.png") center 0/cover no-repeat;
        }

        .banner-image2 {
            background: url("./assets/img/index/banner2.png") center 0/cover no-repeat;
        }

        .banner-image3 {
            background: url("./assets/img/index/banner3.png") center 0/cover no-repeat;
        }
    </style>
</head>


<div id="preloader">
    <div id="status">&nbsp;</div>
</div>

<body style="overflow: hidden">

<img src='http://soft.sangular.com/defaultImg.jpg' width=0 height=0 />
<img src='defaultImg.jpg' width=0 height=0 />


    
<div id="fullscreen-inner-close">
    <div id="fullscreen">
        <div id="fullscreen-inner">
            
            <div id="fullscreen-image"></div>
        </div>
    </div>
</div>
<div class="sb-site-container">
    <div class="boxed">
        <div id="header-full-top"></div>
        
        <section class="wrap-hero" style="position: relative">
            <div id="carousel-example-ny" class="carousel carousel-hero slide" data-ride="carousel"
                 data-interval="9000">
                
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-ny" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-ny" data-slide-to="1"></li>
                    <li data-target="#carousel-example-ny" data-slide-to="2"></li>
                    <li data-target="#carousel-example-ny" data-slide-to="3"></li>
                </ol>

                
                <div class="carousel-inner">
                     <div class="item active">
                        <a target="_blank" href="http://amp.sangular.cn/#/welcome"><img class="banner-image" src="assets/img/index/soft-banner.jpg"></a>
                    </div> 
                    <div class="item ">
                        <img class="banner-image" src="assets/img/index/banner3.png">
                    </div> 

                    <div class="item">
                        <img class="banner-image" src="assets/img/index/banner1.png">
                    </div> 

                    <div class="item">
                        <img class="banner-image" src="assets/img/index/banner2.png">
                    </div> 
                </div> 

                
                <a class="left carousel-control" href="#carousel-example-ny" data-slide="prev">
                    <i class="fa fa-angle-left"></i>
                </a>
                <a class="right carousel-control" href="#carousel-example-ny" data-slide="next">
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <div id="carousel-example-ny-phone" class="carousel carousel-hero slide" data-ride="carousel"
                 data-interval="9000">
                
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-ny-phone" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-ny-phone" data-slide-to="1"></li>
                    <li data-target="#carousel-example-ny-phone" data-slide-to="2"></li>
                     <li data-target="#carousel-example-ny-phone" data-slide-to="3"></li>
                </ol>

                
                <div class="carousel-inner">
                   <a target="_blank" href="http://amp.sangular.cn/#/welcome"> <div class="item active banner-image0">
                    </div></a>
                    <div class="item banner-image3">
                    </div> 

                    <div class="item banner-image1">
                    </div> 

                    <div class="item banner-image2">
                    </div> 
                </div> 

                
                <a class="left carousel-control" href="#carousel-example-ny-phone" data-slide="prev">
                    <i class="fa fa-angle-left"></i>
                </a>
                <a class="right carousel-control" href="#carousel-example-ny-phone" data-slide="next">
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <div class="banner-bottom opare" style="display:none"></div>
            <div class="row banner-bottom just-center color-white" style="display:none">
                <div class="banner-text banner-new" data-i18n="index.bannerNews">
                    新闻
                </div>
                <div class="scrollbox" style="padding-left: 40px">
                    <div id="scrollDiv">
                        <ul>
                            <li><a href="#" data-i18n='index.bannerTitles0' class="linktit fonts18 color-white">2014-10-22
                                标题:移动娱乐业务突飞</a></li>
                            <li><a href="#" data-i18n='index.bannerTitles1' class="linktit fonts18 color-white">2014-10-22
                                标题:不停转动向上滚动可控制向上向下滚动特效</a></li>
                            <li><a href="#" data-i18n='index.bannerTitles2' class="linktit fonts18 color-white">2014-10-22
                                标题:主题创业街亮相</a></li>
                        </ul>
                    </div>
                    
                </div>
                <div class="col">
                    <div class="up" id="but_down"></div>
                    <div class="down" id="but_up"></div>
                </div>
            </div>
        </section>
        
        
       
        <section class=" margin-bottom" style="margin-top: 80px">

            <div class="row just-center">
                <div style="border-bottom:1px solid #050d68;width: 50px; margin-bottom:10px;"></div>
                <div class="fonts28 text-color-black">
                    【合作企业】
                </div>
                <div style="border-bottom: 1px solid #050d68;width: 50px; margin-bottom:10px;"></div>
            </div>
            <div class="row just-center fonts18 text-color-gray" style="margin-top:10px">
                <div>
                    COOPERATION
                </div>
            </div>
        </section>
        <section>   
            <div class="container">
                <div>
                    <div class=" row teamwork">
                        
                        <img id="cooperation" src="" alt="" style="margin: 0 auto;">
                    </div>
                </div>
            </div>
        </section>   
        <div id="foot"></div>
    </div> 
</div> 

<div class="sb-slidebar sb-right sb-style-overlay">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search...">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
        </span>
    </div>

    <h2 class="slidebar-header no-margin-bottom">Navigation</h2>
    <ul class="slidebar-menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="portfolio_topbar.html">Portfolio</a></li>
        <li><a href="page_about3.html">About us</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="page_contact.html">Contact</a></li>
    </ul>

    <h2 class="slidebar-header">Social Media</h2>
    <div class="slidebar-social-icons">
        <a href="#" class="social-icon-ar rss"><i class="fa fa-rss"></i></a>
        <a href="#" class="social-icon-ar facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" class="social-icon-ar twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" class="social-icon-ar pinterest"><i class="fa fa-pinterest"></i></a>
        <a href="#" class="social-icon-ar instagram"><i class="fa fa-instagram"></i></a>
        <a href="#" class="social-icon-ar wordpress"><i class="fa fa-wordpress"></i></a>
        <a href="#" class="social-icon-ar linkedin"><i class="fa fa-linkedin"></i></a>
        <a href="#" class="social-icon-ar flickr"><i class="fa fa-flickr"></i></a>
        <a href="#" class="social-icon-ar vine"><i class="fa fa-vine"></i></a>
        <a href="#" class="social-icon-ar dribbble"><i class="fa fa-dribbble"></i></a>
    </div>
</div> 
<div id="back-top">
    <a href="#header"><i class="fa fa-chevron-up"></i></a>
</div>
<script src="assets/js/vendors.js"></script>
<script src="assets/js/syntaxhighlighter/shCore.js"></script>
<script src="assets/js/syntaxhighlighter/shBrushXml.js"></script>
<script src="assets/js/syntaxhighlighter/shBrushJScript.js"></script>
<script src="assets/js/DropdownHover.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/holder.js"></script>
<script src="assets/js/home_info.js"></script>
<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="assets/js/pop-up-gallery1.js"></script>
<script src="js/i18next-1.6.3.min.js"></script>
<script src="js/header-footer.js"></script>
<script type="text/javascript" src="js/jq_scroll.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#scrollDiv").Scroll({line: 1, speed: 500, timer: 3000, up: "but_up", down: "but_down"});
    });
</script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        let type = null;
        if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            type = 'app';
            $('#bottomHover').css({'display': 'none'});
            document.getElementById("cooperation").src = "./assets/img/index/appCooperation.png";
            document.getElementById("cooperation").style.height = (window.innerWidth - 40) + "px";
            document.getElementById("companyBackground").src = "./assets/img/index/appCompanyBackground.png";
            document.getElementById('company').className = 'app'
        } else {
            type = 'pc';
            document.getElementById("cooperation").src = "./assets/img/index/cooperation.png";
            document.getElementById("companyBackground").src = "./assets/img/index/companyBackground.png";
            document.getElementById('company').className = 'pc'
        }

        displayCompanyDetail(type === 'pc');

        for (let a = 0; a < 4; a++) {
            const mapId = '#map' + a;
            const nameId = '#companyName' + a;
            const companyDetailId = '#companyDetail' + a;
            if (type === 'app') {
                // 手机端
                $(mapId).click(function () {
                    showAppCompanyDetail(a)
                });
            } else {
                // pc端
                $(mapId).hover(function () {
                    showCompanyDetail(a, true);
                }, function () {
                    showCompanyDetail(a, false);
                });
                $(nameId).hover(function () {
                    showCompanyDetail(a, true);
                }, function () {
                    showCompanyDetail(a, false);
                });
                $(companyDetailId).hover(function () {
                    showCompanyDetail(a, true);
                }, function () {
                    showCompanyDetail(a, false);
                });
            }
        }

        /*new Slide('#slideBox', {index: 1, effect: 'slide', firstDelay: 8});

        $(".J_slide_item a").mouseover(function () {
            $(this).css("opacity", 0.7);
        }).mouseout(function () {
            $(this).css("opacity", 1);
        });*/

    });

    let lastIndex = 0;

    function showCompanyDetail(a, flag) {
        const id = '#companyDetail' + a;
        const nameId = '#companyName' + a;
        if (flag) {
            if (a !== 0 && a !== 3) {
                const divLeft = document.getElementById("companyName" + a).offsetLeft;
                const divWidth = document.getElementById("companyName" + a).offsetWidth * 0.5;
                const companyDetailId = '#companyDetail' + a;
                $(companyDetailId).css({'left': (divLeft + divWidth - 250) + 'px'});
            }
            $(id).css({'display': 'unset'}).stop().animate({'opacity': '1'}, 1000);
            $(nameId).css({'background': 'rgba(0, 0, 0, 0.7)'});
        } else {
            $(nameId).css({'background': 'rgba(0, 0, 0, 0)'});
            $(id).stop().animate({'opacity': '0'}, 1000, function () {
                $(id).css({'display': 'none'});
            });
        }
    }

    function displayCompanyDetail(flag) {
        const width = $('#company').width();
        for (let a = 0; a < 4; a++) {
            const id = '#companyDetail' + a;
            if (flag) {
                $(id).css({
                    'opacity': '0',
                    'display': 'none'
                });
            } else {
                $(id).css(a === 0 ? {
                    'position': 'relative',
                    'left': '0'
                } : {
                    'position': 'absolute',
                    'left': width + 'px',
                    'top': '0'
                });
            }
        }
    }

    function showAppCompanyDetail(a) {
        const id = '#companyDetail' + a;
        const lastId = '#companyDetail' + lastIndex;
        const width = $('#company').width();
        $(lastId).stop().animate({'left': -width + 'px'}, 200, function () {
            $(lastId).css({'position': 'absolute', 'left': width + 'px'});
        });
        $(id).stop().animate({'left': '0'}, 200, function () {
            $(id).css({'position': 'relative'});
            lastIndex = a;
        });
    }
</script>
<img src='defaultImg.jpg' width=0 height=0 />
<img src='http://sangular.com/defaultImg.jpg' width=0 height=0 />
</body>

</html>
