.logo{
    margin:0;
    width: auto;
    float:left;
    padding: 14px 22px;
    position: absolute;
    z-index:5; 
  }

  .sect{
    width: 100%;
    height: auto;
    float: left;
    overflow: hidden;
  }

  .web1{
    background: url(../image/bg/bg1-compressor.jpg);
    background-size: cover;
  }
  .web2{ 
    background: url(../image/bg/bg2-compressor.jpg);
    background-size: cover;
    height: auto;
    padding: 25% 0;
  }
  .web3{ 
    background: #FFF; 
    height: auto;
  }
  .web4{ 
    background: #FFF;
    height:auto!important;
    padding: 21% 0 20% 0; 
  }
  .web5{ 
    background: url(../image/bg/bg3-compressor.jpg);
    background-size: cover;
    padding: 30% 0;
  }
  .web6{ 
    background: #ebebec; 
    padding:10% 0;
  }
  
  .copyright{
    background-color: #0d5eb5;
    padding: 3.2% 0;
    float: left;
    color: #fff;
  }

  .copyright p{
    font-size: 14px;
    line-height: 1.6em;
  }

  .copyright .contentword{ 
    width:90%;
  }

  .copyright .col-4x,.copyright .col-2x{
    margin: 0% 0 2% 0;
  }

/*MENU
---------------------------------------------------------------*/
  .webmenu{
    margin: 0px auto;
    width: 100%;
    background: #0d5eb5;
    position: fixed;
    z-index: 10;
    padding:.5% 0;
  }

/*第1區塊-0.02
---------------------------------------------------------------*/
  .start{
    width: 100%;
    float: left;
    height:100%;
  }

  .startleft{
    height: 100%;
    padding:4% 3%;
    background: rgba(255,255,255,.6);
  }

  .start .topic{
    color: #0d5eb5;
    float: right;
    margin: 40% 0 10% 0;
    text-align: center;
    width: 100%;
  }

  .mob .topic{
    margin: 9% 0 9% 0!important;
  }

  .mobstartrighttop{
    margin: 31% 0 6% 0!important;
  }

  .start .topic h1{
    font-size: 2em;
    font-weight: bold;
  }

  .start .topic p{
    font-size: .9em;
    margin: 2% 0 0 0;
    font-weight: bold;
  }

  .startright{
    height: 90%;
    padding:4% 4%;
  }

  .startright iframe{
    width:80%;
    height:100%;
    border:3px solid #fff;
  }

  .startleft{float: right!important;}
  .startright{float: left!important;}

/*第2區塊-故事緣起
---------------------------------------------------------------*/
  .web2 .story{
    width:90%;
    max-width: 800px;
    margin: 5% 5% 5% 5%;
    padding: 0%;
    /*height:50%;*/
    float: left;
  }

  .story .storyopen{
    background:#4dbeee;
    height: 100%;
    padding: 5% 1%;
    color: #fff;
    text-align: center;
    float: left;
    vertical-align: middle;
    float: left;
  }

  .story .storywords{
    padding: 8%;
    background: rgba(255,255,255,.7);
    height: 100%;
  }

  .story .storywords p{
    float: left;
    width:100%;
    margin: 1.5% 0;
    font-size:20px; 
  }

/*第3區塊(4支影片)
---------------------------------------------------------------*/
  .video{
    height:48%;
    margin: -0.05% 0;
  }

  .videoall{
    width:100%;
    height:98%;
  }

  .web3 iframe,.web2 iframe{
    width:100%;
    height:100%;
  }

  .videotopic{
    background:#0d5eb5;
    text-align: center;
    padding: 1% 0;
    color: #fff;
    font-weight: bold;
    vertical-align: middle;
  }

   .video-info{
    background:rgba(255,255,255,.8);
    position: absolute;
    bottom: 20px ;
    right:20px;
    z-index: 2;
    width:180px;
  }

  .video-info .videotitle{
    width:100%;
    float:left;
    color:#0d5eb5;
    border-left:8px solid #0d5eb5;
    padding: 5% 0% 0 3% ;
    font-size: .9em;
  }

  .video-info .videowords{
    width:100%;
    float:left;
    padding: 5% 0% 5% 6%;
  }

  .video-info .videowords p{
    width:100%;
    float:left;
    line-height: 1.2em;
    font-size: .7em;
  }

  .videocover{
    width:100%;
    height:100%;
    margin: 0% 0%;
    position:absolute;
    z-index: 2;
    display: block;
    font-size: 4em;
    font-weight: lighter;
    text-align: center;
    background: url(../image/play.png) center center no-repeat;
  }

  .videocover:hover{
    /*background: url(../image/goingtoplay.png) center center no-repeat;*/
  }

  .venoboxvid img{
    opacity: 0.6;
  }

  .venoboxvid:hover img{
    opacity: 1;
  }

  .web1 .venoboxvid img{
    opacity: 1;
    border: 3px solid #fff;
  }

  .web1 .videocover{
    width:84%;
    height:93%;
    margin: 0% 0%;
    position:absolute;
    z-index: 2;
    display: block;
    font-size: 4em;
    font-weight: lighter;
    text-align: center;
  }

  .venoboxvid .videocover i{
    color: #eee!important;
    width: 80px;
    height: 80px;
    margin: 50% auto;
    position: relative;
    float: none;
    top:40%;
  }

  .venoboxvid:hover .videocover i{
    color: #00B5F7!important;
  }

/*第4區塊(照片牆)
---------------------------------------------------------------*/
  .picwalltopic{
    padding: 3% 0;
    text-align: center;
  }

  .plus{
    position: absolute;
    bottom: -2px;
    right: 0px;
    z-index: 5;
  }

/*第5區塊(木工班資訊)
---------------------------------------------------------------*/
  .classout{
    width:90%;
    margin: 0% auto;
    height: 100%;
    max-width: 400px;
  }

  .classtopic{
    position: absolute;
    z-index: 2;
    margin:2% 0 0 -16px;
    width:180px;
  }

  .classinfo{
    padding:10% 2% 2% 2%;
    margin: 4% auto;
    height:88%;
    width: 100%;
    background: rgba(255,255,255,.8);
    float: left;
  }

  .classinfo .mainpic{
    padding: 0 0 2% 0;
    margin: 0 0 5% 0;
    float: left;
    width:100%;
    border-bottom:1px solid #000;
  }

  .classinfo .mainwords{
    width: 100%;
    float: left;
    height: auto;
  }

  .classinfo .object{
    padding:0% 4%;
    height:100%;
  }

  .classinfo h3,.classinfo p{
    float:left;
    width:100%;
  }

  .classinfo h3{
    text-align: center;
    margin: 4% 0;
    font-weight: 600;
  }

  .classinfo p{
    text-align: left;
    line-height: 1.3em;
    margin: 2% 0;
    font-size: 14px;
  }

  .classinfo p a{
    word-break:break-all;
    color: #000;
  }

  .classinfo p a:hover{
    color: #0d5eb5;
  }

  .classinfo .subpic{
    /*position: relative;
    bottom:0px;*/
  }

/*第六區塊
---------------------------------------------------------------*/
  .web6 .rows{
    /*margin: 1% 5%;*/
  }

  .web6 .rowword{
    color:#0d5eb5;
    text-align: center;
    width:92%;
    margin: 1% 4%;
  }

  .web6 .rowword h3{
    font-weight: 600;
    margin: 1.6% 0;
    width: 100%;
    float: left;
    line-height: 1.4em;
  }

  .web6 .rowword p{
    margin: 1.4% 0;
    font-size: 1.05em;
    line-height: 1.4em;
    width: 100%;
    float: left;
  }
 
  .latestitle hr{
    margin: 30px auto 0px auto;
    padding:0px;
    /*max-width: 300px;*/
    border: 0;
    border-top:2px solid #0d5eb5;
    text-align: center;
    width: 100% ; 
  }

  .latestitle hr::after{
    content:url(../image/web42.jpg);
    display: inline-block;
    position: relative;
    top:-1.4em;
    padding: 0 .55em;
    color: #333;
    background-color: #fff;
    max-width: 180px;
    width: 100%;
  }

@media (min-width: 600px) {

  .copyright{
    padding: 1.2% 0;
  }

   


}

@media (min-width: 768px) {

  .logo{
    position: relative;
  }
  
/*第1區塊-0.02
---------------------------------------------------------------*/  
  .start .topic{
    margin: 20% 0 10% 0;
  }
  .start .topic h1{
    font-size: 4.3em;
  }
   .start .topic p{
    font-size: 1.7em;
  }

  .mobstartrighttop{
    margin: 15% 0 6% 0!important;
  }

/*第2區塊-故事緣起
---------------------------------------------------------------*/
  .web2{
    /*height:55%;*/
    padding: 1% 0;
  }

  .web2 .story{
    width:64%;
    margin: 2% 0 0% 13%;
    /*height:78%;*/
  }
  .story .storyopen{
    height: auto;
    padding: 2% 1%;
  }

  .storyopen h2{
    background: url(../image/web2.png) 0px 0px no-repeat;
    background-size:10%; 
  }

/*第3區塊(4支影片)
---------------------------------------------------------------*/
  .video{
    height:48%;
  }

  .video-info{
    width:250px;
  }

  .video-info .videotitle{
    font-size: 1.2em;
  }
  .video-info .videowords p{
    line-height: 1.4em;
    font-size: 1em;
  }

  .web4{
    padding: 12% 0 20% 0; 
  }
  
/*第5區塊(木工班資訊)
---------------------------------------------------------------*/
  .web5{
    /*height:85%;*/
    padding: 0% 0;
  }

  .classout{
    width:94%;
    margin: 5% auto;
    height: 90%;
    max-width: 740px;
  }

  .classtopic{
    z-index: 2;
    margin:7% 0 0 0%;
    width:200px;
  }
  
  .classinfo{
    margin: 4% 0 1% 2.5%;
    height:100%;
    width: 96%
  }

  .classinfo .object{
    padding:0% 1.5%;
    height:100%;
  }

  .classinfo h3{
	  font-size: 18px;
  }

  .classinfo p{
	  font-size: 16px;
  }

  .classinfo .subpic{
    /*position: absolute;*/
   /* bottom:0px;*/
  }

  .classinfo .po-2x{
    width:33%;
  }

  .classinfo .object{
    padding:0% 1.5%;
    height:100%;
  }

  .classinfo .mainwords{
    height:500px;
  }
  
/*第六區塊
---------------------------------------------------------------*/
  .web6{ 
    padding:3% 0;
  }
  
  .web6 .rowword h3{
    margin: 1% 0;
  }
  
  .web6 .rowword p{
    margin: 1% 0;
    font-size: 1.2em;
    line-height: 1em;
  }

  .latestitle hr::after{
    content:url(../image/web4.jpg);
    max-width: 280px;
  }

  .copyright .col-4x{
    width:50%;
  }

  .copyright .col-2x{
    width:20%;
  }
  .copyright .col-1x{
    width:10%;
  }
}


@media (min-width: 770px) {
  .web2{
    /*height:100%;*/
  }
}
@media (min-width: 900px) {
 
  .copyright .col-4x,.copyright .col-2x{
    margin: 0% 0 0% 0;
  }
  
  .startleft{float: left!important;}
  /*.startright{float: right!important;}*/

  .start .topic{
    margin: 32% 0;
    text-align: right;
  }

  /*第2區塊-故事緣起
---------------------------------------------------------------*/

  .web2 .story{
    width:90%;
    max-width: 800px;
    margin: 5% 0 5% 7%;
    padding: 0%; 
    height:87%;
    max-height:520px; 
    overflow: hidden;
  }
  
  .story .storyopen{
    padding: 5% 1%;
    height:600px;
    max-height: 540px;
    background: #4dbeee;
  }

  .video img{
    max-width: 118%;
  }

}

@media (min-width: 1000px) {
 
  .web6{
    height: auto;
  } 

  .web1{
    /*height:430px;*/
    padding:80px 0 0 0;
  }
  
  .web4,.web5{
    /*height:100%;*/
  }

  .web4{
    padding: 6% 0 8% 0; 
  }

  .web5{
   /* height:120%;*/
    padding: 5% 0;
  }

  .start .topic h1{
    font-size: 3.3em;
  }

   .start .topic p{
    font-size: 1.3em;
  }

/*第2區塊-故事緣起
---------------------------------------------------------------*/
  
  .web2{
    /*height:80%;*/
  }
  .web2 .story{
    width:90%;
    max-width: 800px;
    margin: 5% 0 5% 7%;
    padding: 0%; 
    height:87%;
    max-height:520px; 
    overflow: hidden;
  }

/*第3區塊(4支影片)
---------------------------------------------------------------*/


/*第5區塊(木工班資訊)
---------------------------------------------------------------*/
  .classinfo{
    /*float: none*/
  }

  .classout{
    width:1410px;
    max-width: 990px;
    margin: 0% auto;
    height: 100%;
  }
  .classtopic{
    margin:1% 0 0 .6%;
    width:200px;
  }
  .classinfo{
    padding:5% 2% 2% 2%;
    margin: 2% auto;
    height:1100px;
    width:95%;
    max-width: 1100px;
    float: none;
    right:2%;
    max-height: 750px;
  }
  .classinfo .mainwords{
    height: 430px;
  }

}

@media (min-width: 1200px) {

  .web1{
    /*height:70%;*/
    padding:5.5% 0 0 0;
  }

  .start .topic h1{
    font-size: 4.8em;
  }

   .start .topic p{
    font-size: 1.7em;
  }

  .web2 .story{
    width:90%;
    max-width: 800px;
    margin: 5% 0 5% 7%;
    padding: 0%;
    /*height:75%;*/
  }

  .classout{
    width:1410px;
    max-width: 1100px;
    height: 100%;
    /*background: #000;*/
  }

  .classtopic{
    margin:1% 0 0 .6%;
    width:200px;
  }

  .classinfo .object{
    padding:0% 4%;
  }

  .video{
    height:48%;
  }

}

@media (min-width: 1600px) {


  .web1{
    /*height:80%;*/
    padding:5.5% 0 0 0;
  }


/*第2區塊-故事緣起
---------------------------------------------------------------*/
  .web2{
    /*height:100%;*/
  }

  .web2 .story{
    width:90%;
    max-width: 950px;
    margin: 12% 0 10% 10%;
    height:57%;
    max-height:540px; 

  }

  .story .storyopen{
    max-height: 580px;
  }

  .story .storywords{
    padding: 7% 6%;
  }

  .video img{
    max-width: 100%;
  }
  
/*第5區塊(木工班資訊)
---------------------------------------------------------------*/
  .classout{
    width:1410px;
    max-width: 1345px;
    height: 90%;
  }

  .classinfo{
    padding:7% 2% 2% 2%;
    margin: 0% 2.5% 4% 2.5%;
    height:1200px;
    width:95%;
    max-width: 1340px;
    max-height: 900px;
  }

  .classtopic{
    margin:1.5% 0 0 .7%;
    width:240px;
  }

  .classinfo .object{
    padding:0% 4%;
  }


   
}