@charset "utf-8";
/* CSS Document */
.table-cell {display: table-cell;}
.middle {vertical-align: middle;}
.section {position: relative;width: 100%;overflow: hidden;}
.section .bg {/*position: relative;*/overflow: hidden;width: 100%;}



.logo {position: fixed;top: 100%;left: 0;width: 100%;height: 100%;background: #222;z-index: 999999;-webkit-transform: translate3d(0%,-100%,0);transform: translate3d(0%,-100%,0);-webkit-transition: all .5s linear;transition: all .5s linear;display: table;}


.logo .wp {width: 100%;height: 100%;display: table-cell;vertical-align: middle;text-align: center;/*-webkit-animation: loading 1s linear infinite;animation: loading 1s linear infinite;*/max-width: 1020px;margin: 0 auto;position: relative;overflow: hidden;color: #fff;}
.logo .load{position:absolute;bottom: 25%;text-align:center;width:100%;}
.animated{/*-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both*/}
@-webkit-keyframes twinkling{0%{opacity: 0.5;}
100%{opacity: 1;}}
@keyframes twinkling{
0%{opacity: 0.5;}
100%{opacity: 1;}}


.logo .wp img {max-height: 250px;animation: twinkling .8s infinite ease-in-out;-webkit-animation: twinkling .8s infinite ease-in-out;-o-animation: twinkling .8s infinite ease-in-out;-moz-animation: twinkling .8s infinite ease-in-out; }


.section {position: relative;width: 100%;overflow: hidden;height: 100%;top: 0px !important;}

.section .content {position: absolute;top: 0;bottom: 0;left: 0;right: 0;color: #fff;display: table;text-align: center;}

.section .table.content {width: 100%;height: 100%;}
.section .table.content .middle p{line-height: 30px;margin-top: 45px;padding-bottom: 30px;}
.section .table.content .middle{/* height:100%;overflow: hidden;*/}
.section .table.content .middle img{ width:60%;}

.section .bg .bg-items,
.section .bg .bg-items-inner,
.section .bg-items .bg-item {height: 100%;}


.section .bg-items .bg-item {float: left;margin-left: 10px;width: 150px;background: repeat-y 0 0;}


.section .bg {/*! position: relative; */overflow: hidden;width: 100%;/*! height: 100%; */}

.bg .mask {/* display:none; *//*! background: #000; */position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;background: rgba(0, 0, 0, 0.6);}


.section .bg-img {height: 100%;background: no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}


.bottom-mask {position: absolute;bottom: 20px;left: 50%;width: 50px;margin-left: -20px;cursor: pointer;background:url(../img/down.png) no-repeat center;height: 50px;background-size: 100%;z-index: 998;}

/*************************/
.stage .bg{}
.stage .bg .img{width: 100%;height:100%;vertical-align: middle;display: table-cell;min-height: 100%;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
animation:mymove1 5s infinite;
-moz-animation:mymove1 5s infinite; /* Firefox */
-webkit-animation:mymove1 5s infinite; /* Safari and Chrome */
-o-animation:mymove1 5s infinite; /* Opera */}
.stage .bg .img001,.stage .bg .img008{ background:url(../img/001.jpg) no-repeat center 100%;}
.stage .bg .img002,.stage .bg .img009{ background:url(../img/002.jpg) no-repeat center 100%;}
.stage .bg .img003,.stage .bg .img010{ background:url(../img/003.jpg) no-repeat center 100%;}
.stage .bg .img004,.stage .bg .img011{ background:url(../img/004.jpg) no-repeat center 100%;}
.stage .bg .img005,.stage .bg .img012{ background:url(../img/005.jpg) no-repeat center 100%;}
.stage .bg .img006,.stage .bg .img013{ background:url(../img/006.jpg) no-repeat center 100%;}
.stage .bg .img007,.stage .bg .img014{ background:url(../img/007.jpg) no-repeat center 100%;}


@keyframes mymove1
{
from {-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);}
to {-webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);}
}

@-moz-keyframes mymove1 /* Firefox */
{
from {-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);}
to {-webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);}
}

@-webkit-keyframes mymove1 /* Safari and Chrome */
{
from {-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);}
to {-webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);}
}


@-o-keyframes mymove1 /* Opera */
{
from {-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);}
to {-webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);}
}





.content {/*position: absolute;*/top: 0;bottom: 0;left: 0;*left: 20%;right: 0;color: #fff;}
.wrapper {max-width: 1020px;width: 1020px\9;height: 100%;margin: 0 auto;overflow: hidden;color: #fff ; position:absolute;}
.top-section { margin-top:100px; overflow:hidden;width: 100%;}
.top-section .left{ bottom: 0px;left: 0px;/*!  */overflow: hidden;width: 50%;}

.title-section-wrapper{ margin-top:150px;}

.l_img{ max-height:400px; max-width:500px; overflow:hidden; text-align:center;}
.l_img img,.r_img img{max-height:400px;_height:400px; }
.r_img{max-height:400px;width:50%; overflow:hidden; text-align:center;}

.title-section { *width:420px; *height:154px;position: relative;min-width: 420px;padding: 20px 20px 20px 30px;border: 6px solid #fff;width: 100%;}
.title-section h2.min {font-size: 36px;line-height: 1.2;letter-spacing: 2px;}
.title { line-height: 1.2; margin-bottom: 12px;font-size: 20px;}
.title .bottom-title {float: right;padding-bottom: 10px;border-bottom: 1px solid #fff;}
.title .top-title{text-align: right;}
.description-section {width: 80%;margin: 0 auto;padding: 0px 10% 10%;}
.description-section {font-size: 14px;letter-spacing: 1px;text-align: left;overflow: hidden;/*! bottom: 60px; *//*! position: absolute; */line-height: 30px;margin-top: 40px;}
.bottom-section {position: absolute;width: 100%;bottom: 0;padding-bottom: 40px;}
.horizontal-line { margin: 0 auto 0px auto;width: 80px;height: 6px;background: #fff;}



/**************************/
.videobox{ background:#000; width:880px; height:530px;margin: 0 auto;margin-top: 70px;}



/************* *************/
.photobox{ width:900px;margin: 0 auto;margin-top: 70px;}
#photos { visibility: hidden; margin:0 auto; box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */background: #111 !important;width: 100% !important;}

.gallery { background: #ddd; border: 1px solid #aaa; padding: 5px;}

.loader { background: url(loader.gif) center center no-repeat #ddd; }

.panel {text-align: center;background: #000 !important;border-bottom: 1px #222 solid;width: 100% !important;}
.panel img{ max-width:900px; max-height:500px;_width:900px; _height:500px;}
.panel h2{font-weight: normal;line-height: 60px;padding: 0 10px;}
.panel .panel-overlay,
.panel .overlay-background { height: 60px; padding: 0 1em; }

.panel .overlay-background { background: #222; }

.panel .panel-overlay { color: white; font-size: 0.7em; }
.panel .panel-overlay a { color: white; text-decoration: underline; font-weight: bold; }

.filmstrip { margin: 5px; }
.filmstrip li{width: 182px;height: 102px;text-align: center;vertical-align: middle;display: table-cell;box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */overflow: hidden;}
.filmstrip li img{height:102px;max-width: 182px;}

.frame {}
.frame .img_wrap { border: 1px solid #aaa; }
.frame.current .img_wrap { border-color: #000; }



.frame img { border: none; }

.frame .caption { font-size: 11px; text-align: center; color: #888; }
.frame.current .caption { color: #000; }
.pointer {border-color: #000;}



/*************  *************/
.bangdan{width:100%;height:100%;position: relative;}
/* tab */
#tab{margin:40px auto;height: 90%;background: rgba(0,0,0,0.5);overflow: hidden;}
#tab .tab_menu{width: 99%;float:left;position:absolute;z-index: 999;top: 80px;margin-left: 3.5%;}
#tab .tab_menu li{float:left;width: 15%;/*! height:70px; */margin: 0.5%;line-height:25px;/*! border:3px solid #fff; */cursor:pointer;text-align:center;/* margin:0 0px 15px; */font-size: 12px;/* font-weight: bold; */border: 1px rgba(255,255,255,0.5) solid;padding: 4px 0% 6px;box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */}
#tab .tab_box{width:100%;/* height:560px; */clear:both;top: 20px;position:relative;}
#tab .tab_bg{width:100%;height:560px;clear:both;top:30px;position:absolute;background: #000;opacity: 0.6;display: none;}
#tab .tab_menu .selected{background-color:#9b0101;cursor:pointer;/*! border: 3px solid #9b0101; */border-color: #9b0101;}
.hide{display:none;}
.tab_box div{padding:10px;} 

.tab_box dl{overflow: hidden;margin-top: 140px;}
.tab_box dl dd{float: left;margin: 3% 3.5% 0;width: 18%;/*! overflow: hidden; */}
.tab_box dl dd .p_logo{width: 100%;/* height: 63px; */}
.tab_box dl dd .p_logo img{width: 100%;}
.tab_box dl dd .p_name{text-align: center;font-size: 16px;line-height: 45px;}

#tab .tab_box h1{font-size: 24px;font-weight: normal;border-left:4px #fff solid;padding-left: 15px;top: 10px;margin-left: 25px;position: absolute;}

h1 {}
.tab_none{ display:none;/* margin-top: 15px; */}



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

@media screen and (max-width:780px){
.r_img { width:60%;max-height: 40%;}
.title-section-wrapper {width:35% !important;}
.title-section {padding:1%;min-width:100%;}

.tab_box dl dd {float: left;margin: 3% 1%;}
	
}

@media screen and (max-width:480px){
	
	
	
    .container{/*! margin-left: 0% !important; */}
    .section .table.content .middle img {
    width: 80%;
}
	.r_img { width:100% !important;max-height: 30%;}
	.title-section-wrapper {width:100% !important; margin-top:5%;}
	.top-section { margin-top:30px;text-align: center;}
	.title-section {padding:1%;min-width:100%;border-bottom: 1px #fff solid;text-align:center;border-top: none;border-left: none;border-right: none;}
	.title {font-size:14px;text-align:center;margin-bottom:5px;overflow: hidden;margin: 0 auto;width: 160px;}
	.top-title{text-align:center !important;float: none;}
	.bottom-title{float: none !important;margin: 0px 10px;border-bottom: none ! important;}
	.title-section h2.min {font-size:16px;}
	.l_img img, .r_img img {max-height:210px;}	
	.description-section {max-height: 95px;margin-top: 20px !important;padding: 0;}
	.description{max-height:150px;}
	#stage5 .description-section {/*! max-height:180px; */}
	.user{ float:right;position: absolute;bottom: 5%;right: 12%;}
	
	.videobox { width:96%; height:200px; margin:10px 2%;}
    
    .bottom-section{padding-bottom: 5%;}

    .photobox{width: 100%;margin-top: 15%;}
    .galleryview{width: 100% !important;height: 300px !important;overflow: hidden;}
    .panel{
    /* height: 100% !important; */
}
    .panel img{max-width: 100% !important;max-height: 240px !important;}
    
    .panel .panel-overlay{top: 250px !important;width: 100% !important;padding: 0 2em !important;box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari *//* position: relative !important; */}
    .panel .panel-overlay h2{font-size:14px;width:100% !important;padding: 0;line-height: 1.5em;height: 21px;overflow: hidden;}

    .strip_wrapper{width: 85% !important;top: 65% !important;left: 8% !important;height: 80px !important;display: none;}
    #pointer{width: 86px !important;height: 65px !important;bottom: 100px !important;top: 66% !important;left: 8% !important;display: none;}
    #pointer img{left:42% !important;}
    .nav-next{top: 250px !important;right: 1% !important;z-index: 999;}
    .nav-prev{top: 250px !important;left: 1% !important;z-index: 999;}
    
    #tab {/* margin:0; */height: 85%;}
    #tab .tab_box h1{font-size: 16px;}
    .tab_box dl dd .p_logo,.tab_box dl dd .p_logo img {width: 100px;display: none;}
    .tab_box dl dd .p_name {/*! width:85px; */line-height: 20px;height: 21px;}
    
    .tab_box div {
        padding: 1%;}
    
    #tab .tab_menu{width: 100%;top: 60px;}
    #tab .tab_menu li{width: 20%;font-size: 12px;padding: 1% 2%;margin: 1% 1.5%;line-height: 20px;float: left;/* height: 45px; */overflow: hidden;}
    #tab .tab_menu li:nth-of-type(9),#tab .tab_menu li:nth-of-type(11){/*! padding:0.8%; */width: 31%;}

    #guider {right:5% !important;top: 50% !important;position: fixed !important;z-index: 998;}
    
    #tab .tab_bg,#tab .tab_box{top: 0.5% !important;}
    .tab_box dl dd{width: 30% !important;}
    #tab .tab_bg{height: 50%}
    .tab_box dl{margin-top: 70%;}
    
    .filmstrip{height:86px !important;}
    .filmstrip li img,.filmstrip li{height: 66px !important;max-width: 89px;width: 89px !important;}

    #guider a img{width: 150% !important;}
}