@charset "utf-8";
.white,
.white a:link,
.white a:visited,
.white a:hover {
    color: white;
}

.city-mob {
    display: none;
}

.city-pc {
    display: block;
}

body {
    background: url(../images/bg.jpg) no-repeat center 35px #f7ebcd;
    background-size: 100% auto;
    overflow-x: hidden;
}


/* top */
.city-top-h {
    height: 42vw;
}
/* foot */
.city-foot {
    width: 80%;
    margin: 0 auto;
}
/* 1 */
.city-1 {
    position: relative;
    min-height: 65vw;
}
.city-1-bg {
    background: url(../images/bg3.png) no-repeat top center;
    background-size: 100% auto;
    height: 64vw;
    margin-top: -2vw;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.city-1-left-img {
    position: absolute;
    width: 22%;
    height: 24vw;
    top: 28vw;
    transform: rotateZ(-20deg);
}
.city-1-right-img {
    position: absolute;
    width: 22%;
    height: 24vw;
    top: 37vw;
    right: 3vw;
    transform: rotateZ(20deg);
}
.city-1-center-img {
    position: absolute;
    width: 60vw;
    height: 35vw;
    top: 6.5vw;
    left: 23vw;
}
.city-1-center-text {
    font-size: 28px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}
.city-1-left-img img,
.city-1-right-img img {
    width: 98%;
    height: 98%;
    border: 5px solid #edd7af;
}
.city-1-left-img img {
    transform: rotateX(20deg);
}
.city-1-center-img img {
    width: 98%;
    height: 98%;
    border: 5px solid #fff;
}
/* 2 */
.city-2 {
    width: 100%;
}
.city-2-tit {
    text-align: center;
}
.city-2-pic {
    margin-top: 45px;
    width: 1185px;
    margin-left: auto;
    margin-right: auto;
}

.city-2-pic li:nth-of-type(n + 4) {
    display: none;
}

.city-2-pic li.city-2-item {
    float: left;
    width: 395px;
    height: 450px;
    margin-bottom: 40px;
}

.city-2-pic li.city-2-item span.pic {
    background: url(../images/bg4.png) no-repeat;
    width: 395px;
    height: 304px;
    display: block;
}

.city-2-pic li.city-2-item span.pic img {
    margin-left: 10px;
    margin-top: 49px;
}

.city-2-text {
    margin-top: 10px;
    font-size: 25px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}

.city-2-more {
    text-align: center;
    margin-top: 16px;
    cursor: pointer;
}
.city-2-pages {
    display: none;
}
.city-2-pages {
	text-align: center;
	padding: 40px 0 20px 0;
	overflow: hidden;
    font-size: 28px;
    margin-top: 20px;
}
.city-2-pages a.common_current_page {
	background: #c17e3d;
	color: #fff;
	text-decoration: none;
	border: #c17e3d 1px solid;
}
.city-2-pages a {
    border: #b6af9a 1px solid;
    padding: 10px 15px;
    margin: 0 5px;
    text-decoration: none;
}
.city-2-pages a span.prev,
.city-2-pages a span.next {
    color: #c17e3d;
    font-weight: 900;
}
/* 3 */
.city-3 {
    margin-top: 55px;
}
.city-3-wrap {
    background: url(../images/bg2.png) no-repeat top center;
    background-size: 100% auto;
    height: 680px;
    margin-top: 40px;
    padding-top: 80px;
}
.city-3-content {
	width: 80%;
	margin: 0 auto;
	position: relative;
}
.city-3-content .swiper-slide img {
	max-width: 100%;
	opacity: 0.8;
	-webkit-transition: all linear 300ms;
	transition: all linear 300ms;
}
.city-3-content .swiper-slide a:hover img {
	opacity: 1;
}
.city-3-content .arrow-left {
	background: url(../images/prev.png) no-repeat left top;
	position: absolute;
	left: 15%;
	top: 50%;
	margin-top: -40px;
	width: 63px;
	height: 81px;
	z-index: 15;
}
.city-3-content .arrow-right {
	background: url(../images/next.png) no-repeat right top;
	position: absolute;
	right: 14%;
	top: 50%;
	margin-top: -40px;
	width: 64px;
	height: 81px;
	z-index: 15;
}
@media screen and (min-width: 1280px) {
    .city-3-wrap {
        background-size: auto;
        padding-top: 40px;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1439px) {
    .city-3-content {
		width: 90%;
	}
    .city-3-content .arrow-left {
        left: 16%;
    }
    .city-3-content .arrow-right {
        right: 15%;
    }
}
@media screen and (min-width: 1440px) and (max-width: 1599px) {
    .city-3-wrap {
        background-size: auto;
    }
}

@media screen and (min-width: 1600px) {
    .city-3-content {
		width: 90%;
	}
    .city-3-content .arrow-left {
        left: 17%;
    }
    .city-3-content .arrow-right {
        right: 16%;
    }
    .city-3-wrap {
        background-size: auto;
    }
}
@media screen and (min-width: 1900px) {
    .city-3-wrap {
        background-size: 100% auto;
        padding-top: 80px;
    }
    .city-3-content .arrow-left {
        left: 15%;
    }
    .city-3-content .arrow-right {
        right: 15%;
    }
} 

/* copyright */
#copyright {
    text-align      : center;
    margin-top      : 50px;
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 70px;
}
#copyright,
#copyright a {
    color: #756555;
}