html,body{
    width: 100%;
}
#logo_pc{
    padding: 0 20px;
}
#footer_bg .row a{
    text-decoration: none !important;
    color: #000 !important;
    font-size: 11px;
}
#footer_bg .row a:hover{
    text-decoration: none !important;
    color: #000 !important;
    font-size: 11px;
}
#opnav a{
    position: relative;
    color: #000000;
    font-family: "微軟正黑體";
    font-weight:bold;
    line-height: 18pt;
    font-size: 11pt;
    text-align: center;
    border-bottom: 2px solid transparent!important;
    transition: all .3s ease-in-out;
}
#opnav li::after{
    content: '';
    text-align: center;
    margin-top: 2px;
    display: block;
    width: 1px;
    height: 5px;
    background: #000;
    opacity: 0;
    transition: all .3s ease-in-out;
}
#opnav li:nth-child(5):hover::after{
    content: '';
    display: block;
    margin-top: 2px;
    width:100%;
    height: 5px;
    background: #000;
    opacity: 0;
}
#opnav li:hover::after{
    content: '';
    display: block;
    margin-top: 2px;
    width:100%;
    height: 5px;
    background: #000;
    opacity: 1;
}
#opnav{
    background: #fff;
    border-top: 15px solid #000!important;
    text-align: center;
    height: auto;
}
#opnav ul{
    padding: 0px;
}
#opnav li{
    display: block;
    text-align: center;
    padding: 5px 10px;
}
#opnav .nav.navbar-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    float: none;
}
#form1 .addauto .col-md-12{
    padding: 0px;
    margin: 0px;
}
#footer{
    text-align: center;
    font-size: 11pt;
    width: 100%;
}
#footer p{
    font-family: "微軟正黑體";
    font-weight:bold;
    color: #000;
    font-size: 10pt;
    text-decoration: none;
}
#footer p:hover{
    font-family: "微軟正黑體";
    font-weight:bold;
    color: #000;
    /* font-size: 12px; */
    text-decoration: none;
}
#footer_blow{
    background: #000;
    font-family: "微軟正黑體";
    color: #fff;
    font-size: 10pt;
    margin-bottom:20px; 
}
#video{
    margin: 0 auto;
    text-align: center;
}
#iframe1{
    margin: 0px;
    padding: 0px;
}
#iframe2{
    width:90%;
    height:90%; 
}
.content2{
    margin: 100px 0;
}
#content{
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}
#content2 a{
    text-decoration: none;
    color: #000;
    text-align: right;
    font-size: 16pt;
}
#content2 a:hover{
    text-decoration: none;
    color:rgb(223, 155, 54);
    text-align: right;
    font-size: 16pt;
}
.link{
    /* float: right; */
    padding-top: 100px;
}
.link2{
    /* float: right; */
    padding-top: 79px;
}
#traex{
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 50px;
    margin-top: 20px;
}
#traex_img{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.left{
    float: left;
}
.right{
    float: right;
}
#body_bg{
  background:url("http://rawpanel.com/N2ISC/image.aspx?id=4e68ce2cbae64c3891a8b7e14b85f5be"),url("http://rawpanel.com/N2ISC/image.aspx?id=52e5c2a2800540ae95bd2a0934b5efd6");
  background-position-y: 100px,500px;
  background-position-x: center,center;
  background-repeat: no-repeat;
  background-size: AUTO,COVER;
}

.navbar{
    margin-bottom: 0;
}
#footer_bg{
    background: url("http://rawpanel.com/N2ISC/image.aspx?id=4497d30c8a7b488fb115ec1db67dcf1b");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#con3_logo{
    position: absolute;
    right: 5%;
    bottom:5%;
}
#con3_logo .link{
    padding-top:3%; 

}
#con3_logo .link a{
    text-decoration: none;
    color: #FFF;
    text-align: right;
    font-size: 16pt;
}
#con3_logo .link a:hover{
    text-decoration: none;
    color: rgb(223, 155, 54);
    text-align: right;
    font-size: 16pt;
}
#content3 .container{
    padding-right:0px;
    padding-left: 0px; 
}
#content3{
    box-shadow: 0px 30px 50px rgb(151, 151, 151);
}
@media screen and (max-width:768px){
    #opnav li:nth-child(5):hover::after{
        content: '';
        display: block;
        margin-top: 2px;
        width:100%;
        height: 5px;
        background: #000;
        opacity: 0;
    }
    #opnav li:hover::after{
        content: '';
        display: block;
        margin-top: 2px;
        width:100%;
        height: 5px;
        background: #000;
        opacity: 0;
    }
    #iframe2{
        width:100%;
        height:auto; 
    }
    .content2{
        margin: 20px 0;
    }
    .link{
        padding-top: 5px;
        float: none;
        text-align: right;
        font-size: 16pt;    
    }
    .link2{
        padding-top: 5px;
        float: none;
        text-align: right;
    }
    #traex a{
        text-decoration: none;
        color: #000;
        text-align: right;
    }
    #logo_pc{
        display: none;
    }
    #logo_mob{
    float: left;
    margin-left: 20px;
    }
    #opnav .nav.navbar-nav{
        display: block;
    }
    #nav_mob{
        margin-top: 10px;
    }
    #footer_bg{
        background: url("http://rawpanel.com/N2ISC/image.aspx?id=4497d30c8a7b488fb115ec1db67dcf1b");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 300px;
    }
    #con3_logo{
        position: absolute;
        left: 50%;
        bottom:5%;
    }
    #con3_logo img{
        width: 50%;
        position: absolute;
        right: 0px;
        top:-60px;
    }
    #con3_logo .link{
        padding-top:3%; 
    
    }
    #con3_logo .link a{
        text-decoration: none;
        color: #FFF;
        text-align: right;
        font-size: 12pt;
    }
    #con3_logo .link a:hover{
        text-decoration: none;
        color: rgb(223, 155, 54);
        text-align: right;
        font-size: 12pt;
    }
    #body_bg{
        background:none;
      }
      [class*="container-"] .readMore [class*="link_"] a{
        color: #000;
        font-size: 16pt;
     }
     [class*="container-"] .readMore [class*="link_"] a:hover{
         text-decoration: none;
         color:rgb(223, 155, 54);
         font-size: 16pt;
      }
     [class*="container-"] .readMore [class*="link_"]{
         width: 150px;
         float: right;
     }
     #body_bg{
        background:none;
      }
}

@media (min-width: 1200px){
    #content3 .container {
        width: 100%;
    }

    [class*="container-"] .readMore [class*="link_"]{
        margin-top:5%;
        margin-left: 60%;
    }
    .container-4 .readMore .link_4{
        margin-left: 60%;
        margin-top: -5%;
        margin-bottom: 10%;
    }
    [class*="container-"] .readMore [class*="link_"] a{
        color: #000;
        font-size: 16pt;
     }
    }
@media screen and (min-width:768px){
    /*滾動CSS*/
.rowH1{
    position: relative;
    width: 100%;
    height: 456px;
}
.rowH2{
    position: relative;
    width: 100%;
    height: 464px;
}
.rowH3{
    position: relative;
    width: 100%;
    height: 595px;
}
.rowH4{
    position: relative;
    width: 100%;
    height: 660px;
}
.readMore{
    position: absolute;
    transition: all .5s linear;
}
.conta_link{
    position: absolute;
    transition: all .3s linear;   
}
[class*="container-"] .conta_link{
    left: 10%;
}
.container-2 .conta_link{
    left: 45%;
}
.container-3 .conta_link{
    left: 0%;
}
.container-4 .conta_link{
    left: 60%;
}
[class*="container-"] .readMore{
    right: 0%;
    margin-top: 12%;
}
.container-2 .readMore{
    left: 0%;
    margin-top: 5%;
}
.container-3 .readMore{
    left: 48%;
    margin-top: 15%;
}
.container-4 .readMore{
    left: 0%;
    margin-top:15%;
}
[class*="container-"] .readMore [class*="link_"]{
    margin-top:15%;
    margin-left: 23%;
}
.container-2 .readMore .link_2{
    margin-left: 60%;
    margin-top: 10%;
}
.container-3 .readMore .link_3{
    margin-left: 5%;
    margin-top: 10%;
}
.container-4 .readMore .link_4{
    margin-left: 58%;
    margin-top: 5%;
}
[class*="container-"] .readMore [class*="link_"] a{
   color: #000;
   font-size: 16pt;
}
[class*="container-"] .readMore [class*="link_"] a:hover{
    text-decoration: none;
    color:rgb(223, 155, 54);
    font-size: 16pt;
 }
[class*="container-"] .readMore [class*="link_"]{
    width: 150px;
    text-align: left;   
}
.content{
    max-width: 1280px;
    text-align: center;
    margin: 0 auto;
}
 /*CSS  END*/

    #iframe2{
        width:90%;
        height:90%; 
    }
    .row.con_logo{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #traex{
        margin-top:20px;
    }
    #traex .link{
        padding-right: 50px;
        padding-top:50px;
      }
      #traex a{
          text-decoration: none;
          color: #000;
          text-align: right;
          font-size: 16pt;
      }
      #traex a:hover{
        text-decoration: none;
        color:rgb(223, 155, 54);
        text-align: right;
        font-size: 16pt;
    }
    #logo_mob{
        display: none;
    }
}
@media (min-width:1200px){
    #content3 .container{
       width: 100%;
    }
    
}
@media screen and (min-width:1281px){
    .conta_link .link_img2{
        top: 0;
        left: 0;
        position: absolute;
    }
    .conta_link .link_2{
        position: absolute;
        top:370px;
        left:320px;
    }
    #footer_bg{
        background: url("http://rawpanel.com/N2ISC/image.aspx?id=4497d30c8a7b488fb115ec1db67dcf1b");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}