/*greatwall index 2022*/
/*2022start*/
html {
    font-size: 100px;
}
body {
    font:.17rem Arial,Helvetica,Verdana,Geneva,sans-serif;
}
#header-top, #header-navigator-view{
	width: 1300px;
	padding:0px 40px;
	box-sizing: border-box;
}
#header-top-link{
	right: 40px;
	font:.17rem Arial,Helvetica,Verdana,Geneva,sans-seri;
}
.cityguideIndex .c_title h1, .page .c_title h1, h1.picName{
	font-family: Helvetica,Calibri,Arial,Verdana;
    font-size: .28rem !important;
}
.page .l_nav_title2, .page .l_title, .l_nav_title{
	font-size: .20rem;
}

h2{
	font-size: .22rem;
}
h3 {
    font-size: .20rem;
}
.contcont {
    line-height: 1.6;
}


/*2022end*/
#topImg {display:block;}
.maskTop {width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(0,0,0,0.2);}
.divTopImg { position:relative;}
.topTitle {position: absolute;
    color: #fff;
    bottom: 10px;
    width: 100%;
    height: auto;}
.topTitleContent {width: 1260px;
    margin: 0 auto;}
.topTitle h1 {font-size: 48px;
 	line-height: 59px;
    display: inline-block;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    /*font-family: Calibri, Arial, Verdana;*/
}
.divNumBoxContainer {float:right;}
.divNumBox {border: 2px solid #fff;
    float: left;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    border-radius: 10px;
    padding: 2px 10px;
    margin: 17px 5px; cursor: pointer;}
.divNumBox span {float: left;
    width: 50px; color:#fff;
    text-align: center;}

.despLeft {float:left; margin-right:8px;}
.divDesp {
	width: 355px;
    background: #F9F1DC;
    padding: 7px;
	}
.divDesp .topbtmBG {
    width: 100%;
    display: block;
}
.divDesp .con {
    border: 2px solid #95543b;
    padding: 2px 10px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.divGold li{float:left; margin:5px 15px; width:271px; height:auto;}
.divGold li img {transition:all 0.6s; display: block; width:100%;}
.divGold li img:hover {transform:scale(1.1);}

.gw-box {border: 1px solid #dedede;
    padding: 30px 20px;
    position: relative;
    margin: 60px 0 30px;}
.gw-box-title {position: absolute;
    left: 30px;
    top: -20px;
    background: #fff url(https://data.travelchinaguide.com/images/background/icon/icon-title.png) no-repeat 15px center;
    text-indent: 45px;
    padding: 5px 10px;
    color: #000;
    font-size: 22px;}
.normalUL li { list-style:inside;}
.linkReadMore {
    background: url(https://data.travelchinaguide.com/images/background/icon/heading-arrow1.png) no-repeat left 8px;
    padding-left: 25px;}
.div_zoContent {margin:20px;}

.divGWImg {margin:20px 0px;}
.gwUL li {width: 220px;
    height: 160px;
    position: relative;
    float: left;
    margin: 2px;  }
.gwUL li a, .gwUL_normal li a {
    display: block;}
.gwUL li img {
    width: 100%;
    display: block;	}
.gwUL .gw_link {position: absolute;
	width:100%;
	text-align:center;
    left: 0px;
    bottom: 10px;
    color: #fff !important;
    /*font-size: 16px;*/
    z-index: 100;
    cursor: pointer;}
.gwUL .gw_shadow {
    width: 100%;
    background: url(https://data.travelchinaguide.com/images/tcg/picture/others/bg-black-40.png) repeat;
    position: absolute;
    height: 40px;
    bottom: 0px;}
.gwUL_normal li{width: 218px; height:38px; line-height:38px; background:#f2f2f2; float: left; margin: 2px; border: 1px solid #dedede; text-align: center;}

/*---333--*/
.gwCenter {text-align: center; margin:15px auto;}
.bg-icon { margin: 0px 80px 0px 15px; padding: 10px 15px;}
.bg-who {background:url(https://data.travelchinaguide.com/images/background/icon/icon-who.png) no-repeat center;}
.bg-when {background:url(https://data.travelchinaguide.com/images/background/icon/icon-when.png) no-repeat center;}
.bg-why {background:url(https://data.travelchinaguide.com/images/background/icon/icon-why.png) no-repeat center;}
.bg-who-un {background:url(https://data.travelchinaguide.com/images/background/icon/icon-who-white.png) no-repeat center;}
.bg-when-un {background:url(https://data.travelchinaguide.com/images/background/icon/icon-when-white.png) no-repeat center;}
.bg-why-un {background:url(https://data.travelchinaguide.com/images/background/icon/icon-why-white.png) no-repeat center;}
.gw-tab {height: 44px;
    border: 0px solid red;}
.gw-tab li {
	float: left;
    font-size: 18px;
    color: #FFF;
    cursor: pointer;
    height: 43px;
    line-height: 43px;
    display: inline-block;
    background:  url(https://data.travelchinaguide.com/images/tcg/china-trains/v2015/bg-tab.jpg) repeat-x;
    padding: 0px;
    margin: 0px 10px 0px 0px;
    width: 32.4%;
	}
	.gw-tab li:last-child {margin:0px;}
	.gw-tab li div {display: inline-block;}
	.gw-tab .current {background: #fff;
    color: #d75b00;
    border: 1px solid #BCBCBC;
    border-bottom: none;
    margin-bottom: -1px;}
	.divNodesTitle {font-size: 20px;
    text-align: center;
    margin: 15px 0px;}
.table2020 td { text-align:left;}

#CityWeather_greatwall {
	line-height:1.4;
	display: block;
    width: 270px;
    background: #f2f2f2;
    float: right;
    margin: 0px 0px 8px 8px;
	position: relative;}
.cityWeather3day .title {
    text-align: left;
    font-size: 20px;
    background-color: #f2f2f2;
    padding: 9px 3px 9px 30px;
}
#autoPic_num {right: 100px; bottom: 35px;}
#autoPic_link {text-align: center; padding: 40px 0px 10px;}
.w_switchFC {top:10px;}
.subTitle {background:#fff;}

.photosBox li {
    background-color: #ffffff;
    font: 14px Verdana,Arial,Helvetica,sans-serif;
    list-style: none outside none;
    margin: 4px auto;
    text-align: left;
    width: 250px;
    padding: 10px 0px;
    border: 0px solid #D3E7F6;
    border-top: 1px solid #e3e3e3;
}
.photosBox li:first-child {
    border: 0px solid #D3E7F6;
}
.picContent div {
    margin: 5px;
}
.photosBox img {
    margin: 0px;
    border: none;
}
.picContent {
    border-bottom: 0px solid #e3e3e3;
    padding-bottom: 0px;
}


@media screen and (max-width: 1024px){
	.topTitleContent{width: 100%; padding: 0px 20px; box-sizing: border-box;}
	.gwCenter img{ width:100%;}
	.gw-tab li {width:32%;}
	.bg-icon {margin: 0px 20px 0px 15px;}

	/*2022*/
	#topImg { width: 100% !important; height:auto !important;}
	#header-top, #header-navigator-view, #main {
		width:1000px;
		padding:0px;
	}
	.linkUnit { width: 170px;}
}
@media screen and (max-width: 770px){
	#footer, #header, #header-top, #header-navigator-view, #main {
		width: 100%;
	}
	#AdGlobal_220X430{ display: none;}
}
@media screen and (max-width: 480px){
	.cr {float:none;}
	.cityguideIndex .cr2 {width: 250px; float: none;  margin: 40px auto 20px;}
	.topTitleContent { width: 260px;}
	.topTitle h1 { font-size: 26px; text-align: center;}
	.divNumBoxContainer { float: none; position: absolute; top: -140px; right: 10px;}
	.cityguideIndex .right {padding:20px 0px 0px;}
	.divDesp { float: none; margin: 0px auto;}
	.divGold {margin:0px auto; width:271px;}
	.divGold li {margin:5px auto;}
	.gw-box {padding:30px 0px;}
	.gw-box-title {text-indent: 0px; left: 5px; padding: 5px 10px 5px 40px; background-position: 5px 10px;}
	.div_zoContent {margin:20px 10px;}
	.gwUL li {width:48%; height:auto; border: 1px solid #dedede;}
	.gwUL_normal li {width:48%;}
	.gw-tab li {width:31%;}
	.bg-icon {margin: 0px 5px 0px 10px;}
	#CityWeather_greatwall {float:none; margin:10px auto;}

	/*2022*/
	.linkUnit {
		width: 100%;
		margin-right: 0px;
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 425px){
	.bg-icon {margin: 0px 5px ;}
}


@media screen and (max-width: 380px){
	.divNumBoxContainer {top: -120px;}
	.divDesp {  width: 100%; box-sizing: border-box;}
	#divGreatwallTab {padding-top:30px;}
	.bg-icon {margin:0px 3px;}
	.gw-tab li {width:30%;}
}

@media screen and (max-width: 320px){
	.divNumBoxContainer {top: -90px;}
	#divGreatwallTab {padding-top:60px;}
	.gw-tab li {width:30%; font-size:14px;}
	.bg-icon {margin:0px 1px;}
	.gwUL li, .gwUL_normal li {width:47%;}
	.clsphotogalleryimg {width:100% !important;}
}


/* table compare */
.quick-compare {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}

@media screen and (max-width: 800px){
    .quick-compare {
        flex-direction: column;
        gap: 5px;
    }
}