@charset "UTF-8";
/* 超小屏幕（手机，小于 768px） */
@media (max-width: 768px) {

}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) {
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {
}

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
}

ul.MenuBarHorizontal {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
}

/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive {
    z-index: 1000;
}

/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    font-size: 1.5rem;
}

/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
}

/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
    left: auto;
}

/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li {
    width: 315px;
    text-align: center;
}

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul {
    position: absolute;
    margin: -5% 0 0 95%;
}

/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
    left: auto;
    top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul {
    border: 1px solid #CCC;
}

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a {
    display: block;
    cursor: pointer;
    background-color: #FFFFFF;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
}

/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
    background-color: #00A4FF;
    color: #FFF;
    text-align: center;
}

/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
    background-color: #00A4FF;
    color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    text-align: center;
}

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe {
    position: absolute;
    z-index: 1010;
    filter: alpha(opacity:0.1);
}

/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection {
    ul.MenuBarHorizontal li.MenuBarItemIE {
        display: inline;
        float: left;
        background: #FFF;
    }
}

.img_1 {
    position: relative;
    width: 82%;
    height: auto;
    margin: 0 auto;
}

.touch_1 {
    position: absolute;
    top: 0;
    width: 25%;
    height: 55%;
}

.touch_2 {
    position: absolute;
    bottom: 0;
    width: 25%;
    height: 45%;
}

.touch_3 {
    position: absolute;
    top: 10%;
    width: 40%;
    height: 10%;
    left: 40%;
}

.touch_4 {
    position: absolute;
    top: 25%;
    width: 25%;
    height: 40%;
    left: 48%;
    border-radius: 50%;
}

.touch_5 {
    position: absolute;
    bottom: 7%;
    width: 16%;
    height: 5%;
    left: 48%;
}

.img_2 {
    position: relative;
    width: 82%;
    height: auto;
    margin: 0 auto;
}

.control {
    position: absolute;
    width: 10%;
    height: 3%;
    border: 1px #FFFFFF double;
    background: #FFFFFF;
    font-size: 1.5rem;
    line-height: 2.2rem;
    text-align: center;
}

.control_1 {
    top: 52%;
    left: 10.7%;

}

.control_2 {
    top: 52%;
    right: 12.7%;
}

.control_3 {
    top: 74%;
    left: 10.7%;
}

.control_4 {
    top: 74%;
    right: 12.7%;
}

/*轮播图片*/
.a-home{
    width: 100%;
    height: auto;
    position: relative;
}
/*轮播图片*/
.teachers_banner {
    width: 100%;
    height: 575px;
    background: url(http://gtdzhotel.oss-cn-shenzhen.aliyuncs.com/uploads/20220221/48aeff0b3a79c7f010eb65ef148edde4.jpg) no-repeat center top;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.teachers_b {
    position: relative;
    margin-top: 130px;
}

#slide {
    margin: 0 auto;
    width: 760px;
    height: 330px;
    position: relative;
}

#slide li {
    position: absolute;
    width: 760px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 20px #1d374d;
}

#slide li img {
    width: 100%;
    height: 100%;
}

.slide_left {
    /* width:240px;*/
}

.slide_right {
    /* width:440px;*/
    padding: 40px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}

.slide_right h3 {
    font: 400 30px/18px "Microsoft Yahei";
    color: #222222;
}

.slide_right h3 span {
    display: inline-block;
    margin-left: 10px;
    font: 400 14px/36px "Microsoft Yahei";
    color: #555555;
}

.slide_right p {
    padding: 20px 0 30px;
    color: #555555;
    font: 400 14px/24px "Microsoft Yahei";
    border-bottom: 1px solid #dbdbdb;
}

.slide_right dl {
    padding-top: 30px;
}

.slide_right dd {
    float: left;
    width: 33.3%;
    color: #777;
    font: 400 12px/24px "Microsoft Yahei";

}

.slide_right dd h3 {
    color: #ff9000;
    margin-bottom: 20px;
}

.arrow {
    /* display: none;*/
}

.arrow .prev,
.arrow .next {
    position: absolute;
    width: 64px;
    top: 15%;
    z-index: 9;
    font: 700 96px 'simsun';
    /*opacity: 0.3;*/
    color: #fff;
    cursor: pointer;
}

.arrow .prev {
    left: -220px;
}

.arrow .next {
    right: -220px;
}

.arrow .prev:hover,
.arrow .next:hover {
    color: #00a0e9;
    /*opacity: .7;*/
}

/*五张图*/
@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
:root {
    --d: 700ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);
    --font-sans: "Rubik", sans-serif;
    --font-serif: "Cardo", serif;
}

.page-content {
    display: grid;
    grid-gap: 1rem;
    padding: 1rem;
    max-width: 100%;
    margin: 0 auto;
    font-family: var(--font-sans);
}

@media (min-width: 600px) {
    .page-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 800px) {
    .page-content {
        grid-template-columns: repeat(5, 1fr);
    }
}

.card {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 1rem;
    width: 100%;
    text-align: center;
    color: whitesmoke;
    background-color: #f5f5f5;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}

@media (min-width: 600px) {
    .card {
        height: 450px;
    }
}

.card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: 0 0;
    transition: transform calc(var(--d) * 1.5) var(--e);
    pointer-events: none;
}

.card:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
    transform: translateY(-50%);
    transition: transform calc(var(--d) * 2) var(--e);
}

.card:nth-child(1):before {
    background-image: url(http://gtdzhotel.oss-cn-shenzhen.aliyuncs.com/uploads/20220221/4d4e9b681d23ff02f23dc97e74f2e1b2.jpg);
}

.card:nth-child(2):before {
    background-image: url(http://gtdzhotel.oss-cn-shenzhen.aliyuncs.com/uploads/20220221/9f5310002cd0564173a44b9a342116e9.jpg);
}

.card:nth-child(3):before {
    background-image: url(http://gtdzhotel.oss-cn-shenzhen.aliyuncs.com/uploads/20220221/45aef9f8cf724388a418d0014862312c.jpg);
}

.card:nth-child(4):before {
    background-image: url(http://gtdzhotel.oss-cn-shenzhen.aliyuncs.com/uploads/20220221/4055c5e9a23ca394d30a948a0056262d.jpg);
}

.card:nth-child(5):before {
    background-image: url(http://gtdzhotel.oss-cn-shenzhen.aliyuncs.com/uploads/20220221/acfa23a70a160f52d1c2ec13bb7b657b.jpg);
}

.content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem;
    transition: transform var(--d) var(--e);
    z-index: 1;
}

.content > * + * {
    margin-top: 1rem;
}

.title {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.2;
}

.copy {
    /*font-family: var(--font-serif);*/
    font-size: 1.8rem;
    /*font-style: italic;*/
    line-height: 1.35;
    margin-top: 3rem;
}

.btn {
    cursor: pointer;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    color: white;
    background-color: black;
    border: none;
}

.btn:hover {
    background-color: #0d0d0d;
}

.btn:focus {
    outline: 1px dashed yellow;
    outline-offset: 3px;
}

@media (hover: hover) and (min-width: 600px) {
    .card:after {
        transform: translateY(0);
    }

    .content {
        transform: translateY(calc(100% - 4.5rem));
    }

    .content > *:not(.title) {
        opacity: 0;
        transform: translateY(1rem);
        transition: transform var(--d) var(--e), opacity var(--d) var(--e);
    }

    .card:hover,
    .card:focus-within {
        align-items: center;
    }

    .card:hover:before,
    .card:focus-within:before {
        transform: translateY(-4%);
    }

    .card:hover:after,
    .card:focus-within:after {
        transform: translateY(-50%);
    }

    .card:hover .content,
    .card:focus-within .content {
        transform: translateY(0);
    }

    .card:hover .content > *:not(.title),
    .card:focus-within .content > *:not(.title) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--d) / 8);
    }

    .card:focus-within:before, .card:focus-within:after,
    .card:focus-within .content,
    .card:focus-within .content > *:not(.title) {
        transition-duration: 0s;
    }
}

.title-margin {
    margin-top: 0;
    margin-bottom: 0
}

.title-margin div {
    width: 5rem;
    height: 4rem;
    border-bottom: #FFFFFF solid 0.3rem;
}

ul, ol, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, a img, iframe {
    border: 0 none;
}

address, em, i {
    font-style: normal;
}

abbr, acronym {
    font-variant: normal;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select, button {
    vertical-align: middle;
}

input, textarea, select {
    *font-size: 100%;
}

button {
    overflow: visible;
}

button::-moz-focus-inner, input[type=reset]::-moz-focus-inner, input[type=button]::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=file] > input[type=button]::-moz-focus-inner {
    border: 0 none;
    padding: 0;
}

:active {
    outline: 0 none;
}

::selection {
    background: #e74700;
    color: white;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*底部导航栏*/
.base-img {
    width: 100%;
    height: auto;
    position: relative;
}

@keyframes fade {

    from {

        opacity: 1.0;

    }

    50% {

        opacity: 0.4;

    }

    to {

        opacity: 1.0;

    }

}

@-webkit-keyframes fade {

    from {

        opacity: 1.0;

    }

    50% {

        opacity: 0.4;

    }

    to {

        opacity: 1.0;

    }

}

.navigation_nag {
    width: 7%;
    height: 5%;
    position: absolute;
}

.navigation_1:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_2:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_3:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_4:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_5:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_1 {
    top: 30%;
    left: 22%;
}

.navigation_2 {
    top: 35.3%;
    left: 22%;
}

.navigation_3 {
    top: 40.8%;
    left: 22%;
}

.navigation_4 {
    top: 46%;
    left: 22%;
}

.navigation_5 {
    top: 51%;
    left: 22%;
}

.navigation_tex {
    width: 10.5%;
    height: 5%;
    position: absolute;
}

.navigation_6 {
    top: 30%;
    left: 32.1%;
}

.navigation_7 {
    top: 35.3%;
    left: 32.1%;
}

.navigation_6:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_7:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_scu {
    width: 7%;
    height: 5%;
    position: absolute;
}

.navigation_8 {
    top: 30%;
    left: 45.4%;
}

.navigation_9 {
    top: 35.4%;
    left: 45.4%;
}

.navigation_10 {
    top: 40.5%;
    left: 45.4%;
}

.navigation_8:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_9:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_10:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_centre {
    width: 10%;
    height: 5%;
    position: absolute;
}

.navigation_11 {
    top: 30%;
    left: 56.3%;
}

.navigation_12 {
    top: 35.3%;
    left: 56.3%;
}

.navigation_11:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_12:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_13 {
    bottom: 9.2%;   
    left: 45.4%;
}
.navigation_13:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}
.navigation_14 {
    top: 40.4%;
    left: 56.3%;
}

.navigation_15 {
    top: 45.8%;
    left: 56.3%;
}
.navigation_16 {
    top: 51.1%;
    left: 56.2%;
}
.navigation_14:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}

.navigation_15:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}
.navigation_16:hover {
    border: 2px #00A4FF solid;
    -webkit-animation: fade 800ms infinite;
}