#band-banner > div {max-width:1200px;margin: 0 auto;}
#band-banner > div a img { max-width:100%; margin:0 auto; display: block;}
#band-banner ul { width:100%;}
#band-banner ul li { float:left; width:50%;} 
div#band-banner {overflow:hidden; max-height:72px; background:#d2dff4;}

#container {width: 100%;position:relative;background: url('/images/container_bg0.jpg') no-repeat top center;}
 /*main1*/
/*#container .main1 {position: relative;background: url('/images/bg0.jpg') no-repeat center;}*/
#container .main1 {position: relative;background-color: #87cdd3;}

/***********************  main flash ************************/
.flash { display: none;}
.show-flash,.main-flash { display: block;}
.main1-flash-area { position: relative; max-width: 1200px; margin: 0 auto;}
.main-bg { width: 100%;  display: none;}

/*****************************************************/
.main1_container { background: url('/images/rolling_bg0_m.jpg') no-repeat top center; display: none !important;}

/************************** main slide ***************************/
div.flash-slide-left-btn { position: absolute; left: 0;  top: 45%; margin: -30px 0 0 -84px; cursor: pointer;}
div.flash-slide-right-btn { position: absolute;  left: 100%;  top: 45%; margin: -30px 0 0 0px;  cursor: pointer;}

/********************************************************************/
.for-mobile { display: none;}
div.flash-slide-left-btn.for-mobile > img {width: 100%;}
div.flash-slide-right-btn.for-mobile > img {width: 100%;}
.main1 img{ border:0;}
.main1 .main1_container{ position:relative; max-width:1200px;margin:0 auto; display: none;}
#container .main1 .bg { width:100%;border:0;vertical-align: bottom; opacity: 0;filter:alpha(opacity=0);}

/*main2*/
.main2 {width: 100%;position:absolute; margin:0 auto; bottom:0; display:none;}
.main2 .clear {clear:none;}
.main2 .section {border-top: 2px solid #333333;}
.main2 .section0,.section1,.section2,.section3,.section4,.section5,.section6,.section7{position:relative;float:left;clear:right;cursor:pointer;}
.main2 .section img{width: 100%;}
.main2 .section div img { vertical-align: top;}

.slide-area { position: absolute; background: #222222;border-top: 1px solid #373737; opacity: 0.7;filter:alpha(opacity=70);margin-top: -48px; width: 100%;display: none;}
.slide-area-center{max-width:1200px;width:100%; margin:0 auto;}
.slide-left-button { width: 48px;height: 48px;float: left; border-left: 1px solid #373737; border-right: 1px solid #373737; cursor: pointer;}
.slide-left-button img, .slide-right-button img { max-width: 100%; margin: 0 auto; display: block; position: relative; padding-top: 16px;}
.slide-right-button {float: right; width: 48px; height: 48px; border-left: 1px solid #373737; border-right: 1px solid #373737;cursor: pointer;}

/********************  media query ********************/
@media all and (max-width: 1384px) {
  div.flash-slide-left-btn { left: 84px;}
  div.flash-slide-right-btn { left: inherit !important; *left: auto !important; right: 0;}
}

@media all and (max-width: 1024px) {
  .main-flash { display: none;}
  .main-bg { display: block;}
  div.flash-slide-left-btn, div.flash-slide-right-btn { display: none;}
  .for-mobile { display: block !important; width: 84px;}
}

@media all and (max-width: 1000px) {
  .main2{ position:relative !important; display:block !important;}
  .main2 .section > div { width: 25% !important;}
}

/*  width ~760 */
@media all and (max-width: 760px){
  #band-banner > div {max-width: 760px;}
  .main2 { display: block;}
  .slide-area {position: relative; margin-top:0px; margin-bottom:3px;}  
  .main2 .clear { clear:none !important; *clear:both !important; height:0px;}
}

/* width 600~760 */
@media all and (max-width: 760px) {
     .main2 .section > div { width: 50% !important;}
}

/* width 480~600 */
@media all and (min-width: 481px) and (max-width: 600px){
  div.flash-slide-left-btn.for-mobile { width: 70px;}
  div.flash-slide-right-btn.for-mobile { width: 70px;}	
  .main2 .section { max-width:600px !important;width:100% !important; }
}

/*  width ~480 */
@media all and (max-width: 480px){
  .main-bg { display: none;}
  #container .main1 .bg{ display: none !important;}
 .main1_container { background: url('/images/rolling_bg0_m.jpg') no-repeat top center; max-width: 480px !important; height: 400px; display: block !important; background-size: cover !important; -ms-behavior: url('/common/script/backgroundsize.min.htc'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/rolling_bg0_m.jpg',
sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/rolling_bg0_m.jpg',sizingMethod='scale')";} 

 div.flash-slide-left-btn.for-mobile { width: 50px;}
 div.flash-slide-right-btn.for-mobile { width: 50px;}  
 div.flash-slide-left-btn, div.flash-slide-right-btn { top: 50%;}
 .main2 .section { max-width:480px !important; width:100% !important;} 
}

/* width ~360 */
@media all and (max-width: 360px){
  #band-banner > div {max-width: 360px;}
}

/*  width ~320 */
@media all and (max-width: 320px){

 .main1_container { background: url('/images/rolling_bg0_m_320.jpg') no-repeat top center; max-width: 320px !important; height: 360px; display: block !important; background-size: cover !important; -ms-behavior: url('/common/script/backgroundsize.min.htc'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/rolling_bg0_m_320.jpg',
sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/rolling_bg0_m_320.jpg',sizingMethod='scale')";} 

}