@media screen and (max-width: 960px) {

/*----------
## common ##
----------*/

#wrapper {
	width: 100%;
	overflow: hidden;
}
#wrapper #container {
	padding-bottom: 0;
}

#wrapper #container > nav {
	/*display: none;*/
	position: fixed;
	top: 0;
	left; 0;
	height: 100%;
	width: 50%;
	background-color: #666;

	z-index: 2;
}
#wrapper #container > nav h2 {display:none;}
#wrapper #container > nav ul {
	display: block;
	position: relative;
	width: 100%;
	margin-top: 50px;
	margin-bottom: 10px;
}
#wrapper #container > nav ul li {
	display: list-item;
	width: 100%;
	line-height: 40px;
}
#wrapper #container > nav ul li a {
	display: block;
	text-align: left;
	color: #fff;
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	padding: 0 1em;
	background: #6db3f2;
	background: -moz-linear-gradient(top, #6db3f2 0%, #1e69de 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(100%,#1e69de));
	background: -webkit-linear-gradient(top, #6db3f2 0%,#1e69de 100%);
	background: -o-linear-gradient(top, #6db3f2 0%,#1e69de 100%);
	background: -ms-linear-gradient(top, #6db3f2 0%,#1e69de 100%);
	background: linear-gradient(to bottom, #6db3f2 0%,#1e69de 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
}
#wrapper #container > nav ol {
	display: block;
	position: relative;
	width: 100%;
}
#wrapper #container > nav ol li {
	display: list-item;
	box-sizing: border-box;
	width: 100%;
	padding: .25em 0 .25em .25em;
}
#wrapper #container > nav ol li a {
	color: #fff;
}
#wrapper #container > nav ol li a:before {
	content: "\0022b3";
	padding-right: 0.2em;
}


#wrapper #container header {
	height: 50px;
	margin: 0;
	position: fixed;
	top: 0;
	left; 0;
	background-color: #039;
	z-index: 100;
}
#wrapper #container header h1 {
	top: 0;
	width: 	91px;
	height: 50px;
}
#wrapper #container header h1 a {
	width: 	91px;
	height: 50px;
	background-image: url("/common/images/logo_hdr_m.png");

}
#wrapper #container header div.headerWrap {
	display: none;
}
#wrapper #container header nav {
	display: none;
}

#wrapper #container header a.mNavBtn {
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	right: 0;
	top: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-image: url("/common/images/btn_m_nav.png");
}
#wrapper #container header a.mNavBtn span {display:none}


#wrapper #container div#main {
	position: relative;
	left: 0;
	top: 0;
	padding-top: 60px;
	padding-bottom: 90px;
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: linear;
	z-index: 10;
}
#wrapper #container div#main.expand {
	top: 0;
	left: 50%;
}

#wrapper #container div#main div.left {
	float: none;
	width: 100%;
	box-sizing: border-box;
}
#wrapper #container div#main div.left > * {
	display: none !important;
}
#wrapper #container div#main div.left > div.hotel-banners {
	display: block;
	padding: 0 5px;
}
#wrapper #container div#main div.left > div.optional-banners {}
#wrapper #container div#main div.left > div.hotel-banners > p ,
#wrapper #container div#main div.left > div.optional-banners > p {
	float: left;
	width: 50%;
	box-sizing: border-box;
	padding: 5px;
	margin: 0;
}
#wrapper #container div#main div.left > div.hotel-banners > p.text-link {
	clear: both;
	width: 97%;
	width: calc(100% - 10px);
	margin: 5px 5px 0;
}

#wrapper #container div#main .centre {
	float: none;
	width: 100%;
	box-sizing: border-box;
	padding: 0 10px;

}

#wrapper #container div#main > .centre .block div.blockHeader p.listAll {
	display: block;
	width:	40px;
	height: 40px;
	padding: 0;
}
#wrapper #container div#main > .centre .block div.blockHeader p.listAll a {
	display: inline-block;
	width:	40px;
	height: 40px;
	padding: 0;
	border: none;
	background-color: transparent;
	background-image :url("/common/images/ico_list.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px;
}
#wrapper #container div#main > .centre .block div.blockHeader p.listAll a span {display:none}


footer {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 80px;
	width: 100%;
	margin: 0;
	background-color: rgba(0,0,0,0.3);
	z-index: 101;
}
footer div#wrapper {
	display:none;
}
footer div.smbWrapper {
	display: block;
	height: 80px;
	width: 100%;
	box-sizing: border-box;
}
footer div.smbWrapper > nav {
	display: table;
	height: 40px;
	width: 100%;
}
footer div.smbWrapper > nav h2 {
	display: table-cell;
	color: #fff;
	vertical-align: middle;
}
footer div.smbWrapper > nav ul {
	display: table-cell;
	vertical-align: middle;
}
footer div.smbWrapper > nav ul li {
	display: inline-block;
	padding: 0 0.25em;
	/*line-height: 40px;*/
}
footer div.smbWrapper > nav ul li a {
	padding: 0.25em 1em;
	background-color: #f00;
	border-radius: 4px;
	color: #fff;
}
footer div.smbWrapper > nav ul li.domestic a {background-color: #909;}
footer div.smbWrapper > nav ul li.shanghai a {background-color: #039;}
footer div.smbWrapper > nav ul li.suzhou a {background-color: #396;}
footer div.smbWrapper > nav ul li.beijing a {background-color: #f66;}
footer div.smbWrapper > nav ul li.guangzhou a {background-color: #c93;}


footer div.smbWrapper > div.smbBottom {
	width: 100%;
	height: 40px;
	background-color: rgba(0,0,0,0.8);
}
footer div.smbWrapper > div.smbBottom ul {
	display: table;
	width: 100%;
	height: 40px;
	box-sizing: border-box;
}
footer div.smbWrapper > div.smbBottom ul li {
	display: table-cell;
	width: 33.3%;
	vertical-align: middle;
	border-right: 1px solid #ccc;
}
footer div.smbWrapper > div.smbBottom ul li:last-of-type {
	border-right: none;
}
footer div.smbWrapper > div.smbBottom ul li a {
	display: inline-block;
	width: auto;
	height: 20px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px;
}
footer div.smbWrapper > div.smbBottom ul li.home a {background-image: url("/common/images/ico_smb_btm_home.png");}
footer div.smbWrapper > div.smbBottom ul li.branch a {background-image: url("/common/images/ico_smb_btm_info.png");}
footer div.smbWrapper > div.smbBottom ul li.inquiry a {background-image: url("/common/images/ico_smb_btm_mail.png");}

footer div.smbWrapper > div.smbBottom ul li a span {
	padding-left: 25px;
}

body > p.return {display: none !important}


#main > .centre .block h2 {
	letter-spacing: 0;
}

/*-------
## Top ##
-------*/
#home div.centerBanner {
	height: auto;
	min-height: 200px;
}

#home dl.newsWrap dt {
	width: 30%;
}
#home dl.newsWrap dd {
	width: 70%;
}


div.packageWrap > section {
	width: 50%;
}
div.packageWrap > section.mdn {
	display: none;
}

div.packageWrap > section > div.boxMain a.back img {
	width: auto;
	height: 100%;
}
div.packageWrap > section > div.boxMain div.packageInner {
	display: table;
	height: 50%;
	top: inherit;
	bottom: 0;
	padding: 0 10px;
}
div.packageWrap > section > div.boxMain div.packageInner h3 {
	display: table-cell;
	vertical-align: middle;
}
div.packageWrap > section > div.boxMain div.packageInner h3 a i {
	display: none;
}
div.packageWrap > section > div.boxBottom p {
	white-space: nowrap;
}
div.packageWrap > section > div.boxBottom p.price {
	position: absolute;
	bottom: 0;
	right: 5px;
}
div.packageWrap > section > div.boxBottom p.price em {
	font-size: 1.2em;
}


div.optionalWrap > section {
	float: none;
	width:	100%;
	height: auto;
}
div.optionalWrap > section > div.boxMain {
	height: 100px;
}
div.optionalWrap > section > div.boxMain a.back img {
	width: 100%;
	height: auto;
}
div.optionalWrap > section > div.boxMain div.optionalInner {
	display: table;
	top: initial;
	bottom: 0;
	height: 50%;
	padding: 0 10px;
}
div.optionalWrap > section > div.boxMain div.optionalInner h3 {
	display: table-cell;
	vertical-align: middle;
	line-height: 1.2;
}

div.optionalWrap > section > div.boxBottom {
	position: relative;

}
div.optionalWrap > section > div.boxBottom p.price {
	position: absolute;
	right: 0;
	bottom: 5px;
}
div.optionalWrap > section > div.boxBottom p.price em {
	font-size: 1.2em;
}


div.hotelWrap > section {
	width: 50%;
	height: auto;
}
div.hotelWrap > section > div.boxMain div.hotelInner {
	display: table;
	height: 50%;
	top: inherit;
	bottom: 0;
	padding: 0 10px;
}
div.hotelWrap > section > div.boxMain div.hotelInner h3 {
	display: table-cell;
	vertical-align: middle;
}
div.hotelWrap > section > div.boxMain div.hotelInner {
	display: table;
	height: 50%;
	top: inherit;
	bottom: 0;
	padding: 0 10px;
}
div.hotelWrap > section > div.boxMain div.hotelInner h3 a span {
	display: none;
}
div.hotelWrap > section > div.boxMain div.hotelInner p {display:none}

div.hotelWrap > section > div.boxBottom {
	height: 64px;
	padding: 5px;
}
div.hotelWrap > section > div.boxBottom p {
	white-space: nowrap;
}
div.hotelWrap > section > div.boxBottom p.subTitle {
	display: block;
	color: #f60;
	line-height: 1.2;
	white-space: normal;
}
div.hotelWrap > section > div.boxBottom p.price {
	position: absolute;
	bottom: 0;
	right: 5px;
}
div.hotelWrap > section > div.boxBottom p.price em {
	font-size: 1.2em;
}


/*------------
## contents ##
------------*/
#main .centre > .block h2 {
	padding: 0.5em 1em;
	line-height: 1.2;
}
#wrapper #container div#main .list > section div.dscr h2 {
	padding: 0.25em 1em;
}
#wrapper #container div#main .list > section div.dscr h2 a {
	padding: 0;
}
#wrapper #container div#main > .centre .block h2 span {
	padding: 0;
}

/*-------------
## pacckages ##
-------------*/
#packages {}
#packages #main .centre > h1,
#packages #main .centre > div.category h1 {
	line-height: initial;
	letter-spacing: 0.1em;
	padding: 5px 10px;
}


/*-- list --*/
#packages .list > section {
	height: auto;
}
#packages .list > section p.thumb {
		float: none;
		width: 100%;
}
#packages .list > section div.dscr {
	float: none;
	width: 100%;
	height: auto;
	padding-bottom: 80px;
}

/*-- details --*/
#packages section.primary div.primaryWrap {
	height: auto;
}
#packages section.primary div.primaryWrap p.thumb {
	float: none;
	width: 100%;
	padding: 0;
}
#packages section.primary div.primaryWrap div.box {
	padding: 10px 10px 40px;
}
#packages section.primary div.primaryWrap div.box p.price {
	position: static;
	text-align: right;
}
#packages section.primary div.primaryWrap div.box p.price span {
	display:block;
	padding: 0;
}

#packages p.tourHotelPrice {
	overflow-x: scroll;
}
#packages p.tourHotelPrice img {
	/*width: 200%;*/
}

/*-------------
## optionals ##
-------------*/

#optionals {}
#optionals #main .centre > h1,
#optionals #main .centre > div.category h1 {
	line-height: initial;
	letter-spacing: 0.1em;
	padding: 5px 10px;
}

/*-- list --*/
#optionals .list > section {
	height: auto;
}
#optionals .list > section p.thumb {
	float: none;
	width: 100%;
}
#optionals .list > section div.dscr {
	float: none;
	width: 100%;
	height: auto;
	padding-bottom: 80px;
}
#optionals #wrapper #container div#main .list > section div.dscr p.price {
	bottom: 36px;
	width: auto;
}

#optionals p.tourHotelPrice {
	overflow-x: scroll;
}
#optionals p.tourHotelPrice img {
	width: 200%;
}

/*-- details --*/
#optionals section.primary div.primaryWrap {
	height: auto;
}
#optionals section.primary div.primaryWrap p.thumb {
	float: none;
	width: 100%;
	padding: 0;
}
#optionals section.primary div.primaryWrap div.box {
	padding: 10px 10px 40px;
}
#optionals section.primary div.primaryWrap div.box p.price {
	position: static;
	text-align: right;
}
#optionals section.primary div.primaryWrap div.box p.price span {
	display:block;
	padding: 0;
}

#optionals div.tourNoticeBody {
	padding-bottom: 40px;
}

/*----------
## hotels ##
----------*/
#hotels {}


#hotels div.areaWrap ul.areaTab {
	width: 20%;
}
#hotels div.areaWrap div.areaPanels {
	width: 80%;
}
div.areaWrap div.areaPanels > section.panel > section h3 {
	padding: 0.5em 1em;
	line-height: 1.3;
}
div.areaWrap div.areaPanels > section.panel > section h3 a {
	padding: 0;
}
div.areaWrap div.areaPanels > section.panel > section p.thumb {
	float: none;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
}
div.areaWrap div.areaPanels > section.panel > section div.dscr p.more a {
	padding: 0.25em 0.5em;
}


div.hotelDetailWrap div.detailHotelInfo div.mainImage {
	float: none;
	width: 100%;
}
div.hotelDetailWrap div.detailHotelInfo div.info {
	float: none;
	width: 100%;
}
div.hotelDetailWrap div.detailHotelInfo p.inquiryButton {
	text-align: right;
}


/*---------
## pages ##
---------*/
#wrapper #container div#main div.split div.left {
	display: block;
}

/*-----------
## inquiry ##
-----------*/
#inquiry div.formWrap table th {
	width: 40%;
}

/*EOF*/
}