@charset "utf-8";
/* CSS Document */

#content #fade { width:980px; height:512px; overflow:hidden; }

#content .list { width:230px; float:left; }
#content .list li { padding:10px 0;border-bottom:1px dotted #ccc;height:25px;line-height:25px;width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#content .list p { padding: 10px 0 0 }

#content .menu { height:34px;}
#content .menu li { display:inline; padding-right:20px;}

.aboutWraper, .aboutWraper .wrap { width:667px; height:374px; overflow: hidden }
.aboutWraper { float:right; padding: 20px; background:#ccc;}
	.aboutWraper .wrap {  }
	.aboutWraper .jscroll-c { z-index: 1; position: relative; overflow: hidden; width:630px; float:left;}
	.aboutWraper h4 { }
	.aboutWraper .text { }
	.aboutWraper .jscroll-c p.back { font-weight:bold; }
	.aboutWraper .jscroll-c ul li { width:659px; height:100px;}
	.aboutWraper .jscroll-c ul li p { width:135px; float:left; padding:10px 20px 10px 0;}
.aboutWraper .jscroll-e { height: 100%; top: 10px; right: 0; position: absolute; overflow: hidden; z-index: 10; width: 7px; background: url("../images/scroll_bg.gif")/*tpa=http://www.wangyinart.com/images/scroll_bg.gif*/ repeat-y center top; }
.aboutWraper .jscroll-h { cursor: pointer; position: absolute; left: 0pt; top: 0; overflow: hidden; width: 7px; background: #666; }

.textWraper { }
	.textWraper .jscroll-c { z-index: 1; position: relative; overflow: hidden; width:920px; }
	/*.textWraper .jscroll-c p.back { font-weight:bold; padding-bottom:20px;}*/

#content .textWraper h4 {}
#content .textWraper .article {}
#content .textWraper p.back { font-weight:bold;}

#content ul.news {}
#content ul.news li { padding-top:10px; height:23px; }
#content ul.news li span { float:right;}


#content .works {}
#content .works .workslist {}
#content .works li { display:inline; padding-right:20px;}
.works ul.workslist li a.current, .works ul.workslist li a:hover { color:#000;}



.exhibitions .picScroll { display: inline; float: left; width: 250px; height:375px; margin: 9px 0 0 0;}
	.exhibitions .picScroll ul { width:200px; overflow: hidden;  }
	.exhibitions .picScroll li { float: left; display: inline; width: 200px; height:90px;  margin: 0 5px 5px 0;}
		.exhibitions .picScroll li img { display: inline; width:200px; }
	.exhibitions .picScroll .jscroll-c { z-index: 1; position: relative; overflow: hidden; width: 200px;}
.exhibitions .jscroll-e { height: 100%; top: 0; right: 0; position: absolute; overflow: hidden;  z-index: 10000; width: 3px; background: url("../images/scroll_bg.gif")/*tpa=http://www.wangyinart.com/images/scroll_bg.gif*/ repeat-y center top;}
.exhibitions .jscroll-h { cursor: pointer; position: absolute; left: 0pt; top: 0; z-index: 10000; overflow: hidden; width: 3px; background: #ccc; }

.exhibitions .picSlide { display: inline; float:left; width: 470px; margin:9px 0 0 100px; }
	.exhibitions .picSlide ul{ width: 470px; height:400px; position: relative; }
	.exhibitions .picSlide li { position: absolute; width: 470px; height: 400px; overflow: hidden; }
		.exhibitions .picSlide li img { width: 470px; margin-bottom: 6px; }


.exhibitoinsWraper {  }
	.exhibitoinsWraper .time { float: left; width: 120px; }
		.exhibitoinsWraper .time ul {  }
		.exhibitoinsWraper .time li { padding-bottom: 25px; }
			.exhibitoinsWraper .time li a { font-size: 13px; }
			.exhibitoinsWraper .time li a.current { color: #00a1e9; }
	.exhibitoinsWraper .details { float: right; width: 850px; }
		.exhibitoinsWraper .details ul.nav { width: 148px; }
			.exhibitoinsWraper .details ul.nav li { padding-bottom: 15px; }
				.exhibitoinsWraper .details ul.nav li a.current { color: #00a1e9; }
		.exhibitoinsWraper .details .picture { display: inline; float: left; width: 400px; margin-left: 10px; text-align: center; }
		.exhibitoinsWraper .notice .picture { margin-left: 155px; }
		.exhibitoinsWraper .details .probably { width: 210px; }
		.exhibitoinsWraper .notice .probably { width: 260px; }
			.exhibitoinsWraper .details .probably  p { line-height: 23px; }
		.exhibitoinsWraper .details .detailsText { display: inline; overflow: hidden; width: 600px; margin-right: 100px; }
			.exhibitoinsWraper .details .detailsText h2 { float: left; width: 280px; }
			.exhibitoinsWraper .details .detailsText .info { float: right; width: 250px; line-height: 23px; }
				.exhibitoinsWraper .details .detailsText .info p { padding-bottom: 1em; }
			.exhibitoinsWraper .details .detailsText .text { clear: both; padding-top: 2em; line-height: 25px; }

.worksLeft { float: left; width: 220px; line-height: 32px; }

#slideshow-nav { overflow: hidden; width: 220px; line-height: 14px; margin-bottom: 12px; padding-top: 25px; border-top: 1px solid #ccc; color: #000; }
.slideshow-nav-prev, .slideshow-nav-next { cursor: pointer; display: inline; float: left; overflow: hidden; width: 7px; height: 0; margin: 0 20px 0 0; padding-top: 13px; }
.slideshow-nav-prev { background: url("../images/scroll_btn_pre.gif")/*tpa=http://www.wangyinart.com/images/scroll_btn_pre.gif*/ no-repeat; }
.slideshow-pos { margin: 0; float: left; }
.slideshow-nav-next { margin: 0 0 0 20px; background: url("../images/scroll_btn_next.gif")/*tpa=http://www.wangyinart.com/images/scroll_btn_next.gif*/ no-repeat; }
#slideshow-cap { padding-bottom: 25px; line-height: 21px;}
#slideshow { position: relative; display: inline; float: left; width: 510px; height: 440px; margin: 32px 0 0 30px; overflow: hidden; }
.slide { float: left; overflow: hidden; width: 510px; height: 440px; }
	.slide img { display: block; margin: 0 auto; max-width: 500px; }

.siteWraper { display: inline; float: left; margin: 4px 0 0 50px; width: 512px; }
	.siteWraper ul {  }
	.siteWraper li { display: inline; float: left; overflow: hidden; width: 112px; height: 76px; margin: 8px; }



.works-wrap {  }
	.works-wrap .nav-years { float: left }
		.works-wrap .nav-years li { margin: 0 0 11px }
		.works-wrap .nav-years a.current, .works-wrap .nav-years a:hover { background: #000; color: #fff }
	.works-wrap .works-list { width: 821px; float: right; margin: -20px 0 0 0 }
	.cn .works-wrap .works-list { width: 878px }
	.works-wrap .works-list li { float: left; height: 130px; margin: 20px 28px 0 0 }
	.works-wrap .works-list li { display: inline /* hacked for IE 6 */ }

#fancybox-close, #fancybox-left-ico, #fancybox-right-ico { background: url("../images/scroll_btn.png")/*tpa=http://www.wangyinart.com/images/scroll_btn.png*/ no-repeat; }
#fancybox-loading { position: fixed; top: 50%; left: 50%; height: 40px; width: 40px; margin-top: -20px; margin-left: -20px; cursor: pointer; overflow: hidden; z-index: 1104; display: none; }
* html #fancybox-loading {	/* IE6 */ position: absolute; margin-top: 0; }
	#fancybox-loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background-image: url("../images/fancybox.png")/*tpa=http://www.wangyinart.com/images/fancybox.png*/; }
#fancybox-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; height: 1000px; width: 100%; background: #fff100; z-index: 1100; display: none; }
* html #fancybox-overlay {	/* IE6 */ position: absolute; width: 100%; height: 100%; }
#fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; }
#fancybox-wrap { position: absolute; top: 0; left: 0; margin: 0; padding: 20px; z-index: 1101; display: none; }
#fancybox-outer { position: relative; width: 100%; height: 100%; }
#fancybox-inner { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: 0; outline: none; overflow: hidden; }
#fancybox-hide-sel-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; }
#fancybox-close { position: absolute; right: 0; bottom: -18px; z-index: 1104; cursor: pointer; display: none; width: 11px; height: 11px; background-position: -10px -10px; }
#fancybox-close:hover {  }
#fancybox_error { color: #444; font: normal 12px/20px Arial; padding: 7px; margin: 0; }
#fancybox-content { height: auto; width: auto; padding: 0; margin: 0; }
#fancybox-img { width: 100%; height: 100%; padding: 0; margin: 0; border: none; outline: none; line-height: 0; vertical-align: top; -ms-interpolation-mode: bicubic; }
#fancybox-frame { position: relative; width: 100%; height: 100%; border: none; display: block; }
#fancybox-title { position: absolute; bottom: 0; left: 0; font-family: Arial; font-size: 12px; z-index: 1102; }
.fancybox-title-inside { padding: 10px 0; text-align: center; color: #333; }
.fancybox-title-outside { float: left; padding-top: 5px; color: #FFF; text-align: left; font-weight: bold; }
.fancybox-title-over { text-align: left; }
#fancybox-title-over { position: absolute; bottom: -30px; width: 100%; height: 30px; line-height: 30px; text-align: left; display: block; color: #aaa }
#fancybox-title-wrap { display: inline-block; }
	#fancybox-title-wrap span {}
#fancybox-title-left { display: none; }
#fancybox-title-main { float: left; padding-right: 30px; font-weight: bold; line-height: 29px; color: #FFF; }
#fancybox-title-right { display: none; }
#fancybox-left, #fancybox-right { position: absolute; bottom: 50%; width: 16px; height: 31px; cursor: pointer; outline: none; background-image: url("../images/blank.gif")/*tpa=http://www.wangyinart.com/images/blank.gif*/; z-index: 1103; display: none; }
#fancybox-left { left: -61px; }
#fancybox-right { right: -61px; }
#fancybox-left-ico, #fancybox-right-ico { position: absolute; top: 50%; left: -9999px; z-index: 1102; cursor: pointer; display: block; width: 16px; height: 31px; margin-top: -10px; }
#fancybox-left-ico { background-position: -15px 0; }
#fancybox-right-ico { background-position: 0 0; }
#fancybox-left, #fancybox-right { visibility: visible; /* IE6 */ }
	#fancybox-left span { left: 0; }
	#fancybox-left:hover span { /*background-position: -148px -81px; */}
	#fancybox-right span { left: auto; }
	#fancybox-right:hover span { /*background-position: -140px -81px;*/ }
	
	
	


































.nav-toggle-btn {
	display: none;
}

.mobile-nav {
	display: none;
}

@media only screen and ( min-width: 1023px ) {
	.mobile-nav-overlay {
		display: none!important;
	}
}

@media only screen and ( max-width: 1023px ) {
	.default-box {
		height: 100%;
		overflow: auto;
	}

	body {
		height: auto;
		min-height: 100%;
	}

	#mainheader {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 850;
		width: auto;
		height: auto;
		padding: 20px 15px 40px;
		border-bottom: 0 none;
		background-color: transparent;
		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.01));
	}
	
	#default-box #header {
		position: static;
		top: auto;
		right: auto;
		left: auto;
		width: auto;
		height: auto;
		margin: 0;
		background-color: transparent
	}

	#default-box .menu {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#header #logo {
		float: none;
	}

	#header #language {
		display: none;
		/* justify-content: space-between;
		padding: 20px 3px 0; */
	}
	
	#mainheader #nav {
		display: none;
	}
	
	#header .menu {
		padding-bottom: 0;
	}
	
	#mainheader #language{
		display: none;
	}
	
	#header #nav {
		display: none;
	}

	#header .inner {
		width: auto;
	}

	#logo {
		margin-top: 0;
	}

	#logo img {
		width: auto;
		height: 21px;
	}
	
	.globalsubnav {
		position: static;
		width: auto;
		height: auto;
		padding-bottom: 0;
		text-align: center;
	}
	
	.globalsubnav dl dd {
		float: none;
		margin-top: 20px
	}

	.language-switch {
		display: none;
	}
	
	#footer {
		width: auto;
		padding: 0 15px 15px
	}

	.link {
		display: none
	}

	a, a:link, a:visited {
		color: #333333
	}

	#content,
	#content.about-wrap,
	#fade {
		width: auto;
		box-sizing: border-box;
    	min-height: calc(100vh - 30px);
		margin-top: 0;
		overflow:hidden;
		padding: 85px 15px 20px;
	}

	

	.logo {
		width: auto;
		height: 25px;
		margin-top: 0;
		
	}

	.logo img {
		width: auto;
		height: 100%;
	}

	#navigation {
		display: none;
	}

	.nav-toggle-btn {
		position: fixed;
		top: 20px;
		right: 15px;
		z-index: 890;
		display: block;
		width: 23px;
		height: 21px;
	}

	.nav-toggle-btn::before,
	.nav-toggle-btn::after {
		content: '';
	}

	.nav-toggle-btn::before,
	.nav-toggle-btn::after,
	.nav-toggle-btn .line {
		position: absolute;
		right: 0;
		left: 0;
		height: 3px;
		background-color: #848484;
	}

	.nav-toggle-btn::before {
		top: 0;
	}
	.nav-toggle-btn::after {
		bottom: 0;
	}

	.nav-toggle-btn .line {
		top: 9px;
	}

	.mobile-nav {
		position: fixed;
		top: 0;
		right: -220px;
		bottom: 0;
		z-index: 910;
		display: block;
		width: 200px;
		height: 100%;
		overflow: auto;
		margin: 0;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
		background-color: rgba(221, 221, 221, 0.8);
		font-size: 14px;
		text-align: center;
	}

	.mobile-nav .list {
		padding: 67px 0 52px;
	}

	.mobile-nav .list .option {
		padding: 20px 0;
	}

	#fancybox-close {
		top: -15px;
		right: -15px;
	}

	.mobile-nav-overlay {
		display: none;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 900;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.07);
		opacity: 0;
	}

	.fancy-ico {
		opacity: 1;
	}

	#fancybox-left,
	#fancybox-right,
	#fancybox-left-ico,
	#fancybox-right-ico {
		width: 16px;
		height: 33px;
	}

	#fancybox-left,
	#fancybox-right {
		margin-bottom: -17px
	}

	#fancybox-right {
		right: -24px
	}

	#fancybox-left {
		left: -24px;
	}


	.works-wrap .nav-years {
		display: flex;
		flex-flow: wrap;
		margin: 0 0 0 -15px;
		float: none;
		line-height: 1;
	}
	.works-wrap .nav-years li { margin: 0 0 11px 15px }
	.works-wrap .nav-years a.current, .works-wrap .nav-years a:hover { background: #000; color: #fff }
	
	
	.works-wrap .works-list,.cn .works-wrap .works-list {
		display: flex;
		flex-flow: wrap;
		float: none;
		width: auto;
		margin: -10px -28px 0 0
		
	}
	
	.works-wrap .works-list li {
		height: auto;
	}
	.works-wrap .works-list li img {
		width: auto;
		height: calc(100vw * 0.346)
	}
	
	#content .list {
		float: none;
		width: auto;
		margin-bottom: 40px;
	}
	
	#content .list li {
		width: auto;
	}
	
	.aboutWraper, .aboutWraper .wrap {
		width: auto;
		height: auto;
	}
	
	.aboutWraper {
		float: none;
		padding: 0;
		background-color: transparent;
		
	}
	
	.aboutWraper .jscroll-c,
	.textWraper .jscroll-c{
		width: auto;
		float: none;
	}
	.aboutWraper .jscroll-e,
	.textWraper .jscroll-e{
		display: none;
	}
	
	#content ul.news li span {
		display: none;
	}
	.textWraper > div > h4 {
		font-weight: bold;
	}
	.article {
		margin-top: 15px;
	}
		
	.article img {
		max-width: 100%;
		height: auto
	}
}