<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <title>Tianjin Medical University Cancer Institute & Hospital</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        .mtperc10 {
            margin-top: 4%;
        }
        
        .bgf {
            background-color: #fff;
        }
        
        .mt30 {
            margin-top: 30px;
        }
        
        .mb0 {
            margin-bottom: 0px;
        }
        
        .navbar-brand {
            height: 100%!important;
        }
        
        .container-fluid {
            margin: 0%;
            padding: 0%;
        }
        
        .swiper-pagination-bullet-active {
            background: #00a16c;
        }
        /* 小屏幕(平板,大于等于 768px) */
        
        @media only screen and (min-width: 768px) {
            .mobile {
                display: none;
            }
            .logo {
                width: 100%;
            }
            #bs-example-navbar-collapse-5 {
                display: none!important;
            }
            .search-group {
                position: relative;
            }
            .brand-logo {
                display: inline-block;
                height: auto;
                max-width: 100%;
            }
            .search-group .search-input {
                width: 310px;
                border-radius: 17px;
            }
            .magnifier {
                width: 80px;
                background-color: #f6b37f;
                border-radius: 40px;
                position: absolute;
                right: 3px;
                top: 3px;
                height: auto;
                padding: 4px;
                text-align: center;
                cursor: pointer;
            }
            .magnifier::after {
                display: inline-block;
                content: "";
                vertical-align: middle;
                height: 100%;
            }
            .bgf5 {
                background-color: #f5f6f6;
            }
            .navbtn-a {
                border-right: 1px solid #ccc!important;
                color: #232323;
                height: 60px;
            }
            .btn-group .navbtn-a:last-child {
                border-right: none!important;
            }
            .navbtn-a:active {
                color: #00a16c!important;
            }
            .navbtn-a:hover {
                color: #00a16c!important;
            }
            .navbtnActive {
                color: #00a16c!important;
            }
            .content {
                padding-top: 80px;
                padding-left: 0px;
                padding-right: 0px;
                padding-bottom: 120px;
                margin-left: 200px;
                margin-right: 200px;
                height: 100%;
                background-color: #fff;
                z-index: 5;
                top: -82px;
                border-radius: 4px;
            }
            .content p {
                margin-bottom: 0;
                margin-right: 0;
            }
            .plfrt {
                display: flex;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            .pleft {
                padding: 15px 0;
                flex: 1;
                margin-right: 20px;
                font-size: 13px;
                color: #00a16c;
            }
            .pright {
                padding: 15px 0;
                flex: 8;
            }
            .img-header img {
                display: inline-block;
                height: auto;
                max-width: 100%;
            }
            .footer-logo {
                margin-top: 110px;
                text-align: center;
            }
            .footer-logo img {
                display: inline-block;
                height: auto;
                max-width: 100%;
            }
            .footer-content {
                margin-top: -82px;
                padding-left: 0px;
                padding-right: 0px;
                /* height: 100%; */
                background-color: #00a16c;
            }
            .footer-main {
                margin-left: 200px;
                margin-right: 200px;
                display: flex;
                padding-top: 75px;
                padding-bottom: 75px;
            }
            .footer-main ul li {
                color: #fff;
                text-align: left;
            }
            .footer-main .first-ul {
                flex: 3;
            }
            .footer-main .second-ul {
                flex: 2;
                font-size: 12px;
            }
            .footer-main .third-ul {
                flex: 3;
                font-size: 12px;
            }
            .footer-main .four-ul {
                flex: 2;
                font-size: 12px;
                margin-bottom: 0px;
            }
            .footer-main .second-li {
                margin-top: 40px;
            }
            .footer-main .third-li {
                margin-top: 55px;
            }
        }
        
        @media only screen and (max-width: 768px) {
            html,
            body {
                font-size: 16px;
                margin: 0;
                padding: 0;
                overflow-x: hidden;
            }
            .mobile {
                max-width: 100%;
            }
            .pc {
                display: none;
            }
            .logo {
                width: 50%;
            }
            .title-left-right img {
                max-width: 100%;
                max-height: 100%;
            }
            .title-left-right {
                display: flex;
                border-bottom: 1px solid #ccc;
            }
            .title-left {
                display: block;
                flex: 2;
                text-align: left;
            }
            .title-right img {
                width: 50%;
            }
            .title-right {
                flex: 1;
                text-align: right;
                margin-top: 0.4rem;
            }
            .header {
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                padding: 0.5rem;
            }
            .header a {
                text-decoration: none;
                font-size: 1.4rem;
                color: #000;
                font-weight: 400;
            }
            .header h4 {
                color: #00a16c;
                font-size: 0.9rem!important;
                margin-bottom: 0;
            }
            .header p {
                font-size: 0.8rem;
            }
            .footer-footer {
                padding: 2rem 1.5rem;
                background-color: #00a16c;
                color: #fff;
                margin: 0 auto;
            }
            .footer-footer h3 {
                font-size: 0.75rem;
                margin-bottom: 1.5rem;
                font-weight: bolder;
            }
            .footer-footer p {
                font-size: 0.7rem;
                text-align: center;
            }
            .footer-footer h4 {
                margin-top: 1.5rem;
                font-size: 0.7rem;
                text-align: center;
            }
            .footer-footer h4 strong {
                padding: 0 0.3rem;
            }
            .footer-log {
                margin: 3rem 4.5rem;
            }
            .footer-log img {
                max-width: 100%;
                max-height: 100%;
            }
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-default bgf mb0">
        <div class="container-fluid top_pc_brand">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle mtperc10 menuPage" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4" aria-expanded="true">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand logo" href="./index.html">
                    <img class="brand-logo" src="./images/logo.png" alt="">
                </a>
            </div>
            <div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-4" aria-expanded="true">
                <div class="search-group mt30 form-group navbar-text navbar-right">
                    <a href="http://www.tjmuch.com/" class="langue">中文</a>
                    <input type="text" class="form-control search-input" placeholder="Search">
                    <div class="magnifier">
                        <img src="../images/search_btn.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div class="container-fluid pc">
        <div class="mask"></div>
        <div class="bs-example" data-example-id="simple-justified-button-group">
            <ul class="nav_menu_items">
                <li class="btn navbtnActive  navbtn-a" role="button">
                    <a href="../pcSecond.html">ABOUT US</a>
                    <div class="first_menu">
                        <div class="inner_content">
                            <p class="inner_txt">


                            </p>
                            <div class="inner_items">
                                <a href="about/welcome.html" class="inner_item">
                                    <div class="innert_text">Welcome Message</div>
                                    <div class="inner_box">
                                        <img src="./images/wangping.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Mission and Vision</div>
                                    <div class="inner_box">
                                        <img src="./images/rushuguan.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Leadership</div>
                                    <div class="inner_box">
                                        <img src="./images/haoxi.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/history.html" class="inner_item">
                                    <div class="innert_text">History and Milestones</div>
                                    <div class="inner_box">
                                        <img src="./images/lundun.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/quick.html" class="inner_item">
                                    <div class="innert_text">Quick Facts</div>
                                    <div class="inner_box">
                                        <img src="./images/quick.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Organization Management </div>
                                    <div class="inner_box">
                                        <img src="./images/oragan.png" width="100%" alt="">
                                    </div>
                                </a>
                            </div>
                        </div>

                        <a href="#" class="first_bottom"> LEARN MORE ABOUT US ></a>
                    </div>
                </li>
                <li class="btn  navbtn-a" role="button">
                    <a href="./clinical.html">CLINICAL RESOURCES</a>
                    <div class="first_menu">
                        <div class="inner_content">
                            <p class="inner_txt">


                            </p>
                            <div class="inner_items">
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Clinical Departments</div>
                                    <div class="inner_box">
                                        <img src="./images/departments.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Clinical Trials</div>
                                    <div class="inner_box">
                                        <img src="./images/trials.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Find a Doctor</div>
                                    <div class="inner_box">
                                        <img src="./images/doctor.png" width="100%" alt="">
                                    </div>
                                </a>

                            </div>
                        </div>
                        <a href="#" class="first_bottom"> LEARN MORE CLINICAL RESOURCES ></a>
                    </div>
                </li>
                <li class="btn  navbtn-a" role="button">
                    <a href="./research.html">RESEARCH & EDUCATION</a>
                    <div class="first_menu">
                        <div class="inner_content">
                            <p class="inner_txt">


                            </p>
                            <div class="inner_items">
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Research Departments</div>
                                    <div class="inner_box">
                                        <img src="./images/labs.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Find a Researcher</div>
                                    <div class="inner_box">
                                        <img src="./images/our_researchers.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Innovations</div>
                                    <div class="inner_box">
                                        <img src="./images/innovations.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Technology Transfer</div>
                                    <div class="inner_box" style="background-color: #666666">
                                        <!--<img src="./images/innovations.png" width="100%" alt="">-->
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Featured research</div>
                                    <div class="inner_box">
                                        <img src="./images/featured_research.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Core Facilities</div>
                                    <div class="inner_box">
                                        <img src="./images/facility.png" width="100%" alt="">
                                    </div>
                                </a>


                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Cancer Journals</div>
                                    <div class="inner_box">
                                        <img src="./images/medicine.png" width="100%" alt="">
                                    </div>
                                </a>

                            </div>
                        </div>
                        <a href="#" class="first_bottom"> LEARN MORE RESEARCH & EDUCATION ></a>
                    </div>
                </li>
                <li class="btn navbtn-a" role="button">
                    <a href="./international.html">INTERNATIONAL AFFAIRS</a>
                    <div class="first_menu">
                        <div class="inner_content">
                            <p class="inner_txt">


                            </p>
                            <div class="inner_items">
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">Partnership Institutions</div>
                                    <div class="inner_box">
                                        <img src="./images/insitutions.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">International Conferences</div>
                                    <div class="inner_box">
                                        <img src="./images/in_conference.png" width="100%" alt="">
                                    </div>
                                </a>
                                <a href="about/mission.html" class="inner_item">
                                    <div class="innert_text">International patients referral</div>
                                    <div class="inner_box">
                                        <img src="./images/in_referral.png" width="100%" alt="">
                                    </div>
                                </a>
                            </div>
                        </div>
                        <a href="#" class="first_bottom"> LEARN MORE INTERNATIONAL AFFAIRS ></a>
                    </div>
                </li>
                <li class="btn  navbtn-a" role="button">
                    <a href="./news.html">NEWS RELEASE</a>
                </li>
                <li class="btn  navbtn-a" role="button">
                    <a href="about/contact.html">CONTACT US</a>
                </li>
            </ul>
        </div>

        <!-- Swiper -->
        <div class="img-header">
            <img src="./images/04、05、06、07detail-word/pic.png" alt="">
        </div>
        <div class="content">
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
            <div class="plfrt">
                <p class="pleft">2018.10.24</p>
                <p class="pright">At present,the Hospital Welcome to the TianJin MedicalAt present,the Hospital Welcome to the TianJin Medical</p>
            </div>
        </div>
        <footer class="footer-content">
        <div class="footer-main">
            
            <ul class="list-unstyled third-ul">
                <li>West Huan-Hu Rd, Ti Yuan Bei, Hexi District</li>
                <li>Tianjin 300060</li>
                <li>China</li>
                <li>Tel/Fax: 0086-22-23359337</li>
                <li>Email: info@tjmuch.com</li>
            </ul>
            <ul class="list-unstyled first-ul">
                <li><img src="../images/yikeda.png" width="160px" alt=""></li>
                <li><img src="../images/tjuc.png" width="160px" alt=""></li>
            </ul>
        </div>
    </footer>

    </div>
    <!-- 移动端 -->
    <div class="mobile container-fluid">
        <nav class="title-left-right">
            <a class="navbar-brand logo title-left" href="#">
                <img class="brand-logo" src="./images/01mobile-main/pic (5).png" alt="">
            </a>
            <a class="title-right" href="./mobilepage/mbsecondmenuAbout.html">
                <img class="navbar-toggle " src="./images/01mobile-main/pic (3).png" alt="">
            </a>
        </nav>
        <header class="header">
            <a href="../index.html" class="aback">
                NEWS RELEASE
            </a>
        </header>

        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome to</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome t0</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome to</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome t0</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome to</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome t0</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome to</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome t0</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome to</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome t0</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome to</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome t0</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome to</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome t0</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome to</p>
        </header>
        <header class="header">
            <h4>2018.10.24</h4>
            <p>At present,the Hospital Welcome t0</p>
        </header>
        <div class="footer-log">
            <img src="./images/01mobile-main/pic (1).png" alt="">
        </div>
        <footer class="footer-footer">
            <h3>WE LOOK FORWARD TO FUTURE COLLABORATIONS!</h3>
            <p>West lake read, Hexi district, TianJi, China</p>
            <p>[022]23340123</p>
            <p>contact@tjmuch.com</p>
            <h4>
                <strong>Facebook</strong>
                <strong>|</strong>
                <strong>Linkedin</strong>
                <strong>|</strong>
                <strong>Instagram</strong>
            </h4>
        </footer>
    </div>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/swiper-3.4.2.jquery.min.js"></script>
    <script src="./js/common.js"></script>
    <script>
        $(document).ready(function() {
            $(".btn-group").find(".navbtn-a").click(function() {
                console.log(this)
                $(this).siblings('.navbtn-a').removeClass('navbtnActive'); // 删除其他兄弟元素的样式
                $(this).addClass('navbtnActive'); // 添加当前元素的样式   
            })
        })
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true
        });

        var swiper = new Swiper('.swiper-container1', {
            pagination: '.swiper-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 30
        });
    </script>
</body>

</html>