@charset "utf-8";

/* CSS Document */

body{ font-family:"proxima-nova", Helvetica, Arial, sans-serif, 微軟正黑體; }

/*文字飛入特效*/

.QDiv {

position: absolute;

right: 15px;

bottom: 30px;

}

.QDiv .btn-group, .btn-group-vertical { display:block; text-align:right}

.QDiv .btn-group > .btn:first-child{ float:none}

.QDiv1 {

position: relative

}

.QDiv1 .btn-group, .btn-group-vertical { display:block; text-align:center}

.QDiv1 .btn-group > .btn:first-child{ float:none}

@-webkit-keyframes QADiv {

0%{opacity: 0;transform: translate3d(180px, 0, 0);}

100%{opacity: 1;transform: translate3d(0px, 0, 0)}

}

@keyframes QADiv {

0%{opacity: 0;transform: translate3d(180px, 0, 0);}

100%{opacity: 1;transform: translate3d(0px, 0, 0)}

}





.QADiv1 {

opacity: 0;

animation-name: QADiv;

animation-delay: 3s; /* W3C 和 Opera */

-moz-animation-delay: 3s; /* Firefox */

-webkit-animation-delay: 3s; /* Safari 和 Chrome */

animation-fill-mode:forwards;

/*animation-iteration-count: 2;循環次數*/

animation-duration: 2.5s;

/*animation-direction: reverse;反向播放動畫*/

}



.QADiv2 {

opacity: 0;

animation-name: QADiv;

animation-delay: 5s; /* W3C 和 Opera */

-moz-animation-delay: 5s; /* Firefox */

-webkit-animation-delay: 5s; /* Safari 和 Chrome */

animation-fill-mode:forwards;

/*animation-iteration-count: 2;循環次數*/

animation-duration: 2.5s;

/*animation-direction: reverse;反向播放動畫*/

}



.QADiv3 {

opacity: 0;

animation-name: QADiv;

animation-delay: 7s; /* W3C 和 Opera */

-moz-animation-delay: 7s; /* Firefox */

-webkit-animation-delay: 7s; /* Safari 和 Chrome */

/*animation-iteration-count: 2;循環次數*/

animation-duration: 2.5s;

animation-fill-mode:forwards;

/*animation-direction: reverse;反向播放動畫*/

}



.QADiv4 {

opacity: 0;

animation-name: QADiv;

animation-delay: 9s; /* W3C 和 Opera */

-moz-animation-delay: 9s; /* Firefox */

-webkit-animation-delay: 9s; /* Safari 和 Chrome */

/*animation-iteration-count: 2;循環次數*/

animation-duration: 2.5s;

animation-fill-mode:forwards;

/*animation-direction: reverse;反向播放動畫*/

}



.QADiv11 {

opacity: 0;      /*文字先不顯示*/

animation-name:fade-in;

animation-delay: 3s; /* W3C 和 Opera */

-moz-animation-delay: 3s; /* Firefox */

-webkit-animation-delay: 3s; /* Safari 和 Chrome */

animation-fill-mode:forwards;

/*animation-iteration-count: 2;循環次數*/

animation-duration: 2.5s;

/*animation-direction: reverse;反向播放動畫*/

}



.QADiv21 {

opacity: 0;      /*文字先不顯示*/

animation-name:fade-in;

animation-delay: 5s; /* W3C 和 Opera */

-moz-animation-delay: 5s; /* Firefox */

-webkit-animation-delay: 5s; /* Safari 和 Chrome */

animation-fill-mode:forwards;

/*animation-iteration-count: 2;循環次數*/

animation-duration: 2.5s;

/*animation-direction: reverse;反向播放動畫*/

}



.QADiv31 {

opacity: 0;      /*文字先不顯示*/

animation-name:fade-in;

animation-delay: 7s; /* W3C 和 Opera */

-moz-animation-delay: 7s; /* Firefox */

-webkit-animation-delay: 7s; /* Safari 和 Chrome */

/*animation-iteration-count: 2;循環次數*/

animation-duration: 2.5s;

animation-fill-mode:forwards;

/*animation-direction: reverse;反向播放動畫*/

}



.QADiv41 {

opacity: 0;      /*文字先不顯示*/

animation-name:fade-in;

animation-delay: 9s; /* W3C 和 Opera */

-moz-animation-delay: 9s; /* Firefox */

-webkit-animation-delay: 9s; /* Safari 和 Chrome */

/*animation-iteration-count: 2;循環次數*/

animation-duration: 2.5s;

animation-fill-mode:forwards;

/*animation-direction: reverse;反向播放動畫*/

}

/*文字淡入特效*/

.fade-in-words{

}

.indexanimation{position: absolute; z-index: 1; width:100%; top:60%; transform:translateY(-50%)}

/*自定義透明效果是fade-in*/

@keyframes fade-in{  

    0%{ opacity: 0;}

    100%{opacity:1;}

}

@-webkit-keyframes fade-in{

    0%{ opacity: 0;}

    100%{opacity:1;}

}

@-ms-keyframes fade-in{

    0%{ opacity: 0;}

    100%{opacity:1;}

}

@-o-keyframes fade-in{

    0%{ opacity: 0;}

    100%{opacity:1;}

}

@-moz-keyframes fade-in{

    0%{ opacity: 0;}

    100%{opacity:1;}

}

.first-words{ 

    opacity: 0;      /*文字先不顯示*/

    animation: fade-in 6s ease 0s 1;    /*時間4S一次播放效果*/

    -webkit-animation: fade-in 6s ease 0s 1;

    -moz-animation: fade-in 6s ease 0s 1;

    -o-animation: fade-in 6s ease 0s 1;

    -ms-animation: fade-in 6s ease 0s 1;

    

    /*動畫結束狀態*/

    animation-fill-mode:forwards;

    -webkit-animation-fill-mode: forwards;  

      -o-animation-fill-mode: forwards; 

      -ms-animation-fill-mode: forwards;   

      -moz-animation-fill-mode: forwards; 

}

/*圖片處理*/

.img_wap{

    padding-bottom: 56%;

    width: 100%;

    position: relative;

  }

  .img_wap75{

    padding-bottom: 75%;

    width: 100%;

    position: relative;

  }

.img_wap100{

    padding-bottom: 100%;

    width: 100%;

    position: relative;

  }

  .img_wap150{

    padding-bottom: 150%;

    width: 100%;

    position: relative;

  } 

  .img_wap200{

    padding-bottom: 200%;

    width: 100%;

    position: relative;

  }

   .img_wap300{

    padding-bottom: 300%;

    width: 100%;

    position: relative;

  }



  .img_wap img, .img_wap100 img, .img_wap200 img,   .img_wap150 img, .img_wap75 img, .img_wap300 img{

    width: 100%;

    height: 100% !important;

    position: absolute;

    top: 0;

    left: 0;

  object-fit: cover

  }

  /*圖片處理 end*/

  

  /*影片16:9*/

  .video-container {



position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;



}



.video-container iframe, .video-container object, .video-container embed {



position: absolute;

top: 0;left: 0;

width: 100%;

height: 100%;}

  /*影片16:9 end*/

.ellipsis {

overflow:hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.headmargin{ margin-top:60px}

.aspectration { position: relative; height:82vh} 

.aspectration:after { content: ""; display: block; width: 1px; margin-left: -1px; } 

.aspectration[data-ratio="16:9"]:after { padding-top: 56.25%; }  

.aspectration[data-ratio="4:3"]:after { padding-top: 75%; } 

.content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.aspectration ifram{ height:100%}

.vertical-align{ display:flex; align-items:center}

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img{ width:100%}

.quickmu li ul li{float:none}

.quickmu li ul li a , .quickmu li ul li a:hover{ height:30px;line-height:30px; padding:0 15px; text-align:center; color:#333333}

.quickmu .dropdown-menu{ min-width:100px}

.btn-black {color:#ffffff; background-color:#333333;}

.btn-black:hover, .btn-black:focus {color:#ffffff; background-color: #0094f2; border-color:#C1C1C1}

.fontsize16{ font-size:16px}

.fontsize18{ font-size:18px}

.fontsize20{ font-size:20px}

.fontsize22{ font-size:22px}

.fontsize25{ font-size:25px}

.fontsize26{ font-size:26px}

.fontsBlod{ font-weight:600}

.fontsize12em{font-size:1.2em}

.fontsize15em{font-size:1.5em}



.fontcolor_Darkgray{color:#9E9E9E}

.fontcolor_gray{ color:#333333}

.fontcolor_blue{ color:#0094f2}

.fontcolor_wh{ color:#ffffff}

.fontcolor_CIred{color:#ae002b}

.fontcolor_red{color: #FF0004}

.lineheigh30{ line-height:30px}

.bgcolor_yelow{ background-color:#febf15}

.bgcolor_gray{ background-color:#e7e7e7}

.bgcolor_wh{ background-color:#ffffff}

.bgcolor_Darkgray{ background-color:#9E9E9E}

.bgcolor_Darkgray2{ background-color:#333}

.bgcolor_Lightgray{ background-color:#f7f7f7}

.bgimage01{background-image:url(../image/webbg.jpg); background-repeat:repeat}

.paddinglr20{ padding-left:20px; padding-right:20px}

.paddingTB14{ padding:14px 0}

.paddingB10{ padding-bottom:10px}

.paddingB20{ padding-bottom:20px}



.paddingT25{ padding-top:25px}

.paddingT35{ padding-top:35px}

.paddingTB20{ padding-top:20px; padding-bottom:20px}

.paddingB10{padding-bottom:10px;}

.padding5{padding:5px}

.padding20{padding:20px}

.padding40{padding:40px}

.padding80{padding:80px}

.paddingTB20{padding-top:20px;padding-bottom:20px}

.paddingTB46{padding-top:46px;padding-bottom:46px}

.paddingLR_15{ padding-left:-15px; padding-right:-15px}

.MarginT10{ margin-top:10px}

.MarginB10{ margin-bottom:10px}

.MarginT20{ margin-top:20px}

.MarginT50{margin-top:50px}

.MarginT55{margin-top:55px}

.MarginT60{margin-top:50px}

.MarginT75{margin-top:75px}

.MarginL10{ margin-left:10px}

.MarginR10{ margin-right:10px}

.MarginLR_15{ margin-left:15px; Margin-right:15px}

.border_solid{ border-width:1px;border-style:solid; border-color:#CCCCCC}

.border_Bdotted{ border-width:1px;border-bottom-style:dashed}

.border_Bsolid{ border-width:1px;border-bottom-style:solid; border-color:#CCCCCC}

.border_Tsolid{ border-width:1px;border-top-style:solid; border-color:#CCCCCC}



#headerLOGO{ background-color:#FFFFFF}

.LOGO{ width:100%}

.LOGO img{ width:400px;}

.LOGO1{ background-image:url(../image/LOGO1.jpg);background-repeat:no-repeat;background-position:left;height:94px}

.LOGO2{ background-image:url(../image/LOGO2.jpg);background-repeat:no-repeat;background-position:right;height:94px}

#topmenu{}

.mainmu{}

#topmenu .navbar-default{ background-color:#f0ad4e}

#topmenu .navbar-fixed-top, .navbar-fixed-bottom { position:absolute; top:94px}

#topmenu .navbar{height:60px;}

#topmenu .navbar-toggle{margin-right:0px;margin-left:15px; padding:10px 10px}

#topmenu .navbar-toggle{border:0}

#topmenu .navbar-default .navbar-nav > li > a {color:#fff}

@media (min-width: 768px){

#topmenu .nav > li { float:none;display:inline-block}}

@media (min-width: 1200px){

#topmenu .navbar-nav { float:none}}

#topmenu .navbar-default .navbar-collapse, .navbar-default .navbar-form{ text-align:center}

#topmenu .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {color:#ae002b}

#topmenu .navbar-default{ border:none}

#Content td,#Content .table-bordered{border:0px}

.mainmu li {}

.mainmu li>a {line-height:50px;padding:5px 7px}

.mainmu li>a:hover {color:#ae002b}

.mainmu li>:active {color:#ae002b}

.mainmu .open>a:focus {color:#ae002b}

.mainmu .dropdown-menu{padding:0px 0px}

.mainmu .dropdown-menu>li>a:hover {color:#ae002b}

.mainmu .dropdown-menu>li>a{padding:0px 20px;}

#topmenu .navbar-brand{ padding:0px 0px 0px 15px}

.LOGO {}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{ vertical-align:middle !important}



.quickmu{ position:absolute;right:0px}

.quickmu li{ float:left; padding-top:10px}

.quickmu li a{ height:40px; color:#fff}

.quickmu li a:hover {color:#555}

.quickmu li a:focus {color:#555}

.quickmu .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {color:#333333}

.for-navi{ position:relative; overflow:visible}



/*年度input text 展開 收合的效果*/

.see{border:none; background: #333333; color:#fff;}

.see a:hover {color:#fff;text-decoration:none;}





.animate {

    -webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}





.navbar-bootsnipp:nth-of-type(2) {

  border-top-width: 1px;

  z-index: 50

}



.navbar-bootsnipp.affix-top {

  position: absolute;

  top: 0px;

  width: 100%;

}

.navbar-bootsnipp.affix {

  top: 0px;

  width: 100%;

}

.navbar-bootsnipp .navbar-nav > li > form > .input-group > input,

.navbar-bootsnipp .navbar-nav > li > form > .input-group > .input-group-btn > .btn {

  border-radius: 0px;

}

.navbar-bootsnipp .bootsnipp-search {

  display: none;

}

.navbar-bootsnipp .bootsnipp-search .form-control {

  background-color: rgb(235, 235, 235);

  border-radius: 0px;

  border-width: 0px;

  font-size: 18px;

  padding: 25px 10px;

}

.navbar-bootsnipp .bootsnipp-search .form-control:focus {

  border-color: transparent;

  outline: 0;

  -webkit-box-shadow: none;

  box-shadow: none;

}

.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn {

  padding: 14px 16px;

  border-radius: 0px;

}

.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn.active,

.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn:hover,

.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn:focus {

  padding: 14px 16px 14px 15px;

}



.nav-padding {

  padding-top: 61px;

}

.navbar-bootsnipp .bootsnipp-search {

  background-color: rgb(235, 235, 235);

  display: block;

  position: absolute;

  top: 100%;

  width: 460px;

  -webkit-transform: rotateX(-90deg);

  -moz-transform: rotateX(-90deg);

  -o-transform: rotateX(-90deg);

  -ms-transform: rotateX(-90deg);

  transform: rotateX(-90deg);

  -webkit-transform-origin: 0 0 0;

  -moz-transform-origin: 0 0 0;

  -o-transform-origin: 0 0 0;

  -ms-transform-origin: 0 0 0;

  transform-origin: 0 0 0;

  visibility: hidden;

  right:0

}

.navbar-bootsnipp .bootsnipp-search.open {

  -webkit-transform: rotateX(0deg);

  -moz-transform: rotateX(0deg);

  -o-transform: rotateX(0deg);

  -ms-transform: rotateX(0deg);

  transform: rotateX(0deg);

  visibility: visible;  

}

.navbar-bootsnipp .bootsnipp-search > .container {    

  padding: 0px;

}

  



/*rightbtn*/



#Rightbtn {}

    .rightbtnbox{

      position:fixed;

      background-color:#fff;

      top:30%;

      right:15px;

      height:120px;

      width:30px;

      margin-top:-100px;

    }

    .rightbtnbox .imgbtnbox{

      position:absolute;

      z-index:6;

      background-color:#fff;

    }

    .rightbtnbox .imgbtnbox img{

      width:30px;

      height:30px;

    }

    .rightbtnbox .textbtnbox

    {

      position:absolute;

      z-index:4;

      top:0px;

      left:40px;

      width:120px;

    }

    .rightbtnbox .textbtnbox div

    {

      opacity:0;

      position:relative;

      left:0px;

      color:#fff;

      background-color:#888;

      line-height:30px;

      padding:0px 10px;

      text-align:center;

    }



/*end*/





#index_Banner{ }

#index_Banner .carousel-indicators .active{ background-color:#ae002b}

#index_Banner .carousel-indicators li{ background-color: #C4C4C4; border:none}



#carousel-custom .carousel-indicators {

    margin: 10px 0 0;

    overflow: auto;

    position: static;

    text-align: left;

    white-space: nowrap;

    width: 100%;

}

#carousel-custom .carousel-indicators li {

    background-color: transparent;

    -webkit-border-radius: 0;

    border-radius: 0;

    display: inline-block;

    height: auto;

    margin: 0 !important;

    width: auto;

}

#carousel-custom .carousel-indicators li img {

    display: block;

    opacity: 0.5;

  width:160px;

  height:90px

}

#carousel-custom .carousel-indicators li.active img {

    opacity: 1;

}

#carousel-custom .carousel-indicators li:hover img {

    opacity: 0.75;

}

#carousel-custom .carousel-outer {

    position: relative;

}







#index_slider{ background-image: url(../image/sliderBG.jpg); background-repeat:repeat-x}



#index_content{}







#Content hr{ border-color:#ddd}

.shareicon img{ margin-left:5px}



.glyphicon:before{ }

.glyphicon{}





#footer{ background-color:#efefef;}

#footer a{ color:#333}

#footer li{ padding-top:10px}

#Copyright{ background-color:#333333; padding:10px 0}





/*! Flickity v2.0.10

http://flickity.metafizzy.co

---------------------------------------------- */



.flickity-enabled {

  position: relative;

}



.flickity-enabled:focus { outline: none; }



.flickity-viewport {

  overflow: hidden;

  position: relative;

  height: 100%;

}



.flickity-slider {

  position: absolute;

  width: 100%;

  height: 100%;

}



/* draggable */



.flickity-enabled.is-draggable {

  -webkit-tap-highlight-color: transparent;

          tap-highlight-color: transparent;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}



.flickity-enabled.is-draggable .flickity-viewport {

  cursor: move;

  cursor: -webkit-grab;

  cursor: grab;

}



.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {

  cursor: -webkit-grabbing;

  cursor: grabbing;

}



/* ---- previous/next buttons ---- */



.flickity-prev-next-button {

  position: absolute;

  top: 50%;

  width: 44px;

  height: 44px;

  border: none;

  border-radius: 50%;

  background: white;

  background: hsla(0, 0%, 100%, 0.75);

  cursor: pointer;

  /* vertically center */

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.flickity-prev-next-button:hover { background: white; }



.flickity-prev-next-button:focus {

  outline: none;

  box-shadow: 0 0 0 5px #09F;

}



.flickity-prev-next-button:active {

  opacity: 0.6;

}



.flickity-prev-next-button.previous { left: 10px; }

.flickity-prev-next-button.next { right: 10px; }

/* right to left */

.flickity-rtl .flickity-prev-next-button.previous {

  left: auto;

  right: 10px;

}

.flickity-rtl .flickity-prev-next-button.next {

  right: auto;

  left: 10px;

}



.flickity-prev-next-button:disabled {

  opacity: 0.3;

  cursor: auto;

}



.flickity-prev-next-button svg {

  position: absolute;

  left: 20%;

  top: 20%;

  width: 60%;

  height: 60%;

}



.flickity-prev-next-button .arrow {

  fill: #333;

}



/* ---- page dots ---- */



.flickity-page-dots {

  position: absolute;

  width: 100%;

  bottom: -25px;

  padding: 0;

  margin: 0;

  list-style: none;

  text-align: center;

  line-height: 1;

}



.flickity-rtl .flickity-page-dots { direction: rtl; }



.flickity-page-dots .dot {

  display: inline-block;

  width: 10px;

  height: 10px;

  margin: 0 8px;

  background: #333;

  border-radius: 50%;

  opacity: 0.25;

  cursor: pointer;

}



.flickity-page-dots .dot.is-selected {

  opacity: 1;

}

/* slider temp */



.carousel-cell {

  width: 18%;

  height: auto;

  margin-right: 10px;

}



.carousel-cell-image {

  display: block;

  max-height: 100%;

  margin: 0 auto;

  max-width: 100%;

  opacity: 0;

  -webkit-transition: opacity 0.4s;

          transition: opacity 0.4s;

}



/* fade in lazy loaded image */

.carousel-cell-image.flickity-lazyloaded,

.carousel-cell-image.flickity-lazyerror {

  opacity: 1;

}



#account .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus, #Course_LOG .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus, #Learningscore_LOG .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus, #Promotiontest_LOG .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus, #Trainingactivities_LOG .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus , #Search .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background-color:#333}

#Course_LOG .pagination > li  > a{ margin-top:5px; margin-bottom:5px}



/*product page*/

#Breadcrumbs{}

.breadcrumb{ background-color:transparent}

#guidebtn{}

#guidebtn .btn-default{ border-color:#FFFFFF}

#guidebtn .btn-default:active,btn-default:focus,#guidebtn .btn-default:hover,.btn-default.active,#guidebtn .btn-default.active:hover,#guidebtn .btn-default.active:focus { background-color:#ae002b; border-color:#ffffff; color:#ffffff}

#overview{}

#productMD{ }

#productMD .showbg {width:100%; height:180px;background-image:url(../image/product/productIMGbg.jpg);background-repeat:no-repeat;background-position:center}

#productMD .PimgMargin {margin-top:90px}

#productMD .MDimgmargin50 {margin-top:50px}

#Specifications .panel-default, .panel-default > .panel-heading, .panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group {border-color:#ffffff}

#Specifications .panel{ -webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0); box-shadow:0 0px 0px rgba(0, 0, 0, 0)}

#Specifications .panel-default > .panel-heading{ background-color:#cccccc}

#360IMG{}

#Downloads{}

#Downloads .textmiddle{ }

#Downloads .btnmiddle {

    display:flex;

  align-items:center

}





.DWNborder_Lsolid{ border-width:1px;border-bottom-style:solid; border-color:#CCCCCC}

#FAQ{}

/*END*/





/*Support*/

#supportlabel{}

#supportlabel .nav-tabs.nav-justified > .active > a { color:#0099ff; background-color:#ffffff}

#supportlabel .nav-tabs.nav-justified a { color:#999999; background-color:#dfdfdf}

#supportlabel .nav-tabs.nav-justified span.Download-icon{ background-image:url(../image/support/icon_dw.png);  background-repeat:no-repeat;background-position:center; height:55px; display:block}

#supportlabel .nav-tabs.nav-justified .active span.Download-icon{ background-image:url(../image/support/icon_dwa.png);  background-repeat:no-repeat;background-position:center; height:55px; display:block}



#supportlabel .nav-tabs.nav-justified span.FAQ-icon{ background-image:url(../image/support/icon_FAQ.png); background-repeat:no-repeat;background-position:center; height:55px; display:block}

#supportlabel .nav-tabs.nav-justified .active span.FAQ-icon{ background-image:url(../image/support/icon_FAQa.png);  background-repeat:no-repeat;background-position:center; height:55px; display:block}



#supportlabel .nav-tabs.nav-justified span.Warranty-icon{ background-image:url(../image/support/icon_Wr.png);  background-repeat:no-repeat;background-position:center; height:55px; display:block}

#supportlabel .nav-tabs.nav-justified .active span.Warranty-icon{ background-image:url(../image/support/icon_Wra.png);  background-repeat:no-repeat;background-position:center; height:55px; display:block}



#supportlabel .nav-tabs.nav-justified span.Decoding-icon{ background-image:url(../image/support/icon_De.png); background-repeat:no-repeat;background-position:center; height:55px; display:block}

#supportlabel .nav-tabs.nav-justified .active span.Decoding-icon{ background-image:url(../image/support/icon_Dea.png);  background-repeat:no-repeat;background-position:center; height:55px; display:block}

#supportlabel .modelnameMargin {margin-top:6%}

#supportlabel .nav-tabs.nav-justified > li > a { border-radius:0px}

#supportlabel .iconbtnfontsize { font-size:18px}



.FAQlist .accordion-heading {  position: relative; }

.FAQlist .accordion-heading .edit {

    position: absolute;

    top: 8px;

    right: 30px; 

}

.FAQlist .area {}

.FAQlist .equipamento {margin-left:40px; text-indent : -25px}

.FAQlist .equipamento a{ color:#3a3a3a ;text-decoration:none;font-size:18px;font-weight:600}

.FAQlist .nav{border-style: solid; border-width:1px; border-color:#C9C9C9; padding:5px;margin:10px;margin-left:35px;border-radius:5px }

.FAQlist .nav li{ float:left; font-size:1.1em}

.FAQlist .nav > li > a { padding:0; display:inline;position: initial; font-size:14px}

.FAQlist .ponto {}

.FAQlist .collapse.in { overflow: visible; }

.FAQlist a{ color:#ae002b; font-size:22px; font-weight:600}

.FAQlist a:hover{ color:#ae002b}

.Qlist .collapsed span{ background-image:url(../image/support/arrow_r.jpg); padding-right:20px; background-repeat:no-repeat;background-position:right center; }

.Qlist span { background-image:url(../image/support/arrow_b.jpg);padding-right:20px; background-repeat:no-repeat;background-position:right center;}

#RMA{}

#formlist{}

#formlist .proNOlineheigh{ line-height:170px}



#Comlist{}

#Comlist .panel-default, .panel-default > .panel-heading, .panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group {border-color:#ffffff}

#Comlist .panel{ -webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0); box-shadow:0 0px 0px rgba(0, 0, 0, 0)}

#Comlist .panel-default > .panel-heading{ background-color:#cccccc}



#Location .nav-tabs.nav-justified > li > a{ text-align:left; border-color:#FFFFFF; color:#000000;}

#Location .nav-tabs.nav-justified > li > a:focus, #Location .nav-tabs.nav-justified > li > a:hover, #Location .nav-tabs.nav-justified > li.active, #Location .nav-tabs.nav-justified .active > a{ text-align:left; border-color:#0094f2; border-width:10px; border-radius:20px;}

#Location .nav-tabs.nav-justified .locationpadding30 { padding:30px}

#search .listpaddingL{padding-left:20px}



#exhibition{}

.Locationbox{ text-align:left;padding:80px }



#Quickclass .thumbnail{ padding:0px; background-image:url(../image/CQbg.png) ; background-position:bottom left; background-repeat:no-repeat}



.CLnamestyle { font-size:16px}

.CLnamestyle a { color:#333;}

.CLnamestyle ul { margin-bottom:20px}



.CLnamestyle li { margin-top:5px}



#CL_list{}

#CL_list .thumbnail , #Event_list .thumbnail , #News_list .thumbnail{padding:0px}



#CL_course .list-group-item{  border-top:0px; border-left:0px; border-right:0px; margin-bottom:0px; font-size:16px}

#CL_course .list-group-item a{ color:#ae002b }



#Event_list .caption{ position:absolute; bottom:0px; background-color:#333; width:100%;}

#Event_list .caption a{color:#fff}

#Event_list .thumbnail{ margin-bottom:0px; margin-top:15px}





/*END*/

@media (min-width: 1200px){

  #comparison{height:200px}

  #comparison .MarginT500{margin-top:50%}

  #comparison .lineheight200{line-height:200px}

}





@media (min-width: 991px) and (max-width: 1199px) {

  #comparison{ height:140}

  #comparison .MarginT500{margin-top:50%}

  #comparison .lineheight200{ line-height:20px; margin-top:8%}

  #productMD .showbg{height:145px}

}

  

@media (min-width: 768px) and (max-width: 991px) {

  .carousel-cell {

    width: 28%;

    height: 321px;

    margin-right: 10px;

    border-radius: 5px;

    counter-increment: carousel-cell}

  #comparison{ height:150px}

    #comparison .MarginT500{margin-top:35%}

  #comparison .lineheight200{ line-height:150px}





}

@media (max-width: 991px) {

  

  /*文字飛入特效*/

  .QADiv1, .QADiv2, .QADiv3, .QADiv4 {

  position: inherit;

  text-align: center;

  margin-bottom:0px;

    }

    

  .ellipsis {

  white-space: normal;

  }       

  

  .headmargin{ margin-top:50px}

  .LOGO img{ width:180px;}

  .LOGO1{height:42px; background-size:42px 42px}

  .LOGO2{ height:42px ; background-size:42px 42px}

  #topmenu .navbar-fixed-top, .navbar-fixed-bottom {top:42px}

  .vertical-align{ display:block}

  #search .listpaddingL {padding-left:0px}

  #Location .nav-tabs.nav-justified .locationpadding30 { padding:10px}

  #formlist .proNOlineheigh{ line-height:30px}

  #topmenu .navbar{height:auto}

  #topmenu .container{ width:100%}

  #topmenu .navbar-nav .open .dropdown-menu { background-color:#FFFFFF}

  #topmenu .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color:#ae002b}

  .quickmu{}

  .mainmu li>a {line-height:25px}

  .quickmu li a{ height:38px}

  .quickmu li{ float:left; padding-top:5px}

  

  #index_Banner{ margin-top:50px}

  

  .carousel-cell {

    width: 100%;

    height: 321px;

    margin-right: 10px;

    border-radius: 5px;

    counter-increment: carousel-cell

    }

    .mainmu li>a {line-height:30px}

  .mainmu li>a{padding:10px 20px}

  .mainmu li>a img{ width:40px}

  .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse{ max-height:550px}

  .carousel ol { visibility:hidden}

  .navbar-header {

    float: none

  }

  .navbar-toggle {

    display: block

  }

  .navbar-collapse.collapse {

    display: none!important

  }

  #navbar .navbar-nav {

    float: none!important; margin-top:0px

  }

  .navbar-nav>li {

    float: none

  }

  .navbar-collapse.collapse.in{

    display:block !important

  }

  .mainmu .dropdown-menu{ position:relative;float:none; border:0px;border-radius:0px; box-shadow:none;-webkit-box-shadow:none }/*選單切換*/

  

  #Solutions .context{ height:auto}

  #Solutions button{ width:100%}

  .textmdCenter{ text-align:center}

  .navbar-bootsnipp .bootsnipp-search {

    width: 100%

  }

  #productMD .PimgMargin {margin-top:0px}

  .SPECborder_Lsolid{ border-width:0px}

  #productMD .MDimgmargin50 {margin-top:85%}

  #supportlabel .modelnameMargin {margin-top:20px;margin-bottom:20px; text-align:center}

  .FAQlist .nav li img{ width:100%}

  .WarrantyCon .nav li img{ width:100%}

  .MarginT75{margin-top:50px}

  

}

@media (max-width: 767px) {

  #comparison{ height:auto}

  #comparison .MarginT500{margin-top:40%}

  #comparison .lineheight200{ line-height:20px; margin-top:8%}

  #Downloads .textmiddle{ line-height:18px}

  .nav-tabs.nav-justified > li{ display:table-cell; width:1%}

  #supportlabel .nav-tabs.nav-justified > li > a { padding:0px}

  #supportlabel .iconbtnfontsize { font-size:16px}



#supportlabel .nav-tabs.nav-justified span.Download-icon{ background-image:url(../image/support/icon_dw_s.png);}

#supportlabel .nav-tabs.nav-justified .active span.Download-icon{ background-image:url(../image/support/icon_dwa_s.png);}



#supportlabel .nav-tabs.nav-justified span.FAQ-icon{ background-image:url(../image/support/icon_FAQ_s.png);}

#supportlabel .nav-tabs.nav-justified .active span.FAQ-icon{ background-image:url(../image/support/icon_FAQa_s.png); }



#supportlabel .nav-tabs.nav-justified span.Warranty-icon{ background-image:url(../image/support/icon_Wr_s.png);}

#supportlabel .nav-tabs.nav-justified .active span.Warranty-icon{ background-image:url(../image/support/icon_Wra_s.png);}



#supportlabel .nav-tabs.nav-justified span.Decoding-icon{ background-image:url(../image/support/icon_De_s.png);}

#supportlabel .nav-tabs.nav-justified .active span.Decoding-icon{ background-image:url(../image/support/icon_Dea_s.png);}

#Downloads .btnmiddle {   display: block; align-items:center; line-height:24px}

.carousel-caption h1{ font-size:18px}

.aspectration { height:35vh} 

.indexanimation{top:40%; }



}







/*coursetype btn*/

.courBtn .nav-pills > li > a {border-radius:0px}

.courBtn .nav-justified > li > a { background-color:#333; color:#fff}

.courBtn .nav > li > a:hover, .nav > li > a:focus { background-color:#993333; color:#fff}

.courBtn .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color:#993333}

.courBtn .btn-lg, .btn-group-lg > .btn{padding:0px}

.dropdown:hover .dropdown-menu { display: block; margin-top: 0; }

.courseBtn .btn-default{ color:#fff; background-color:#333}
.courseBtn .btn-default:hover{ color:#fff; background-color:#993333}
.courseBtn .btn-default:active:hover, .courseBtn .btn-default.active:hover, .courseBtn .open > .dropdown-toggle.btn-default:hover, .courseBtn .btn-default:active:focus, .courseBtn .btn-default.active:focus, .courseBtn .open > .dropdown-toggle.btn-default:focus, .courseBtn .btn-default:active.focus, .courseBtn .btn-default.active.focus, .courseBtn .open > .dropdown-toggle.btn-default.focus{color:#fff; background-color:#333}

/*end*/



/*course detail*/

.courDe >a{

  color: #0A7EC5;

                border:solid 1px;

                border-radius:3px;

                -moz-border-radius:3px;

                padding:6px 9px 6px 9px;

                border-color:#dddddd;

}





/*首頁影片上方title的動畫*/

@function makelongshadow($length,$angle) {

  $val: 0px 0px transparent;

  @for $i from 1 through $length {

    $val: #{$val}, #{$i}px #{$i*$angle}px #aaa;

  }

  @return $val;

}



.txt {

  text-align: center;

  font-family: '標楷體';

  font-size: 10vmin;

  font-weight: 700;

  animation: netflix_style 8s 1;

  animation-fill-mode: forwards;

  outline: none;

  white-space: nowrap;

  text-shadow: 0 1px 0 #ccc, 



               0 2px 0 #c9c9c9,



               0 3px 0 #bbb,



               0 4px 0 #b9b9b9,



               0 5px 0 #aaa,



               0 6px 1px rgba(0,0,0,.1),



               0 0 5px rgba(0,0,0,.1),



               0 1px 3px rgba(0,0,0,.3),



               0 3px 5px rgba(0,0,0,.2),



               0 5px 10px rgba(0,0,0,.25),



               0 10px 10px rgba(0,0,0,.2),



               0 20px 20px rgba(0,0,0,.15);

}



@keyframes netflix_style {

  0% {

    text-shadow: makelongshadow(100,1);

    color:#f3f3f3;

    transform: scale(1.5, 1.5);

  }

  10% {

    text-shadow: makelongshadow(100,1.5);

    color:#f3f3f3;

    transform: scale(1.5, 1.5);

  }

  15% {

     color:#f3f3f3;

  }

  20% {    

    color:#f0ad4e;

    text-shadow: none;

    transform: scale(1.1, 1.1);

  }

  75% {

    opacity: 1;

  }

  80% {

    opacity: 0;    

    color:#f0ad4e;

    transform: scale(0.85, 0.9);

  }



  

  100% {

    opacity: 0;

  }

}



.table_fix_170 {

  table-layout: fixed;

  width: 170px;

}

.table_fix_100 {

  table-layout: fixed;

  width: 100px;

}







/*

*首頁跑馬燈

*/



  .news{

    position: relative;

    width:100%; 

    color: #fff094;/*DF0F13*/

    background: black;/*f9d968*/

    margin: 0 auto;

  top:60px

  }

@media (max-width: 991px) { .news{top:50px}}

  .ncase1 

  { 

    /*padding: 4px 10px 4px 10px; */

    height:45px;

    line-height: 45px;

    margin: 0 auto;



  }

  .ncase2

  {

    height:45px;

    line-height: 45px;

    margin: 0 auto;

    overflow:hidden;

  }



  .marquee {

    width: 100%;

    height:45px; 

    margin: 0 auto;

    overflow: hidden;

    background-color: black;/*888*/ /*f9e59e*/

  }



  .marquee ul{

    display: flex; 

    padding-left: 0;

    list-style-type: none;

    margin: 0 0 0 2px;

  }



  .marquee li{

    white-space: nowrap;

    margin-right: 60px; 

    list-style-type: none;

  }



  .marquee li>a{

    color: #fff094;/*DF0F13*/

    padding-left: 15px

  }



 @media screen and (min-width: 900px) { 

    .horizontal *{

      display: inline-block;

    } 



    .table_width_170{

      table-layout: fixed;

      width: 170px;

    }

  

  } 



 @media screen and (max-width: 900px) { 

   .line{

      padding: 10px 0px 0px;

      margin-left:8px;

      border-left:2px solid #000;

      font-size: 0;

    }

    .table_width_170{

      table-layout: fixed;

      width: 80px;      

    }    

  } 

  

    .qa_text td{

    color: #6C6C6C;

  }



  .qa_text td>a{

    font-weight:bold; 

    color:#46494f;

  } 

















































/*ouyangmiao*/



dl.icon {

  margin-top: 0;

  margin-bottom: 0px;

}



.postbody {

  padding: 12px 20px 15px;

  border-left: 1px solid;

  line-height: 1.5em;

  float: none;

  margin-left: 200px;

  position: relative;

  border-color:#e6e6fa;

}



.inner {

      border-left-style: solid;

      border-right-style: solid; 

      border-bottom-style: solid; 

      border-top-style: solid;

      border-left-width: 1px;

      border-right-width: 1px;

      border-bottom-width: 1px;

      border-top-width: 1px;      

      border-color:#e6e6fa;

      margin-bottom: 20px;

}



.postprofile {

  margin: 0;

  min-height: 80px;

  width: 201px;

  float: left;

  display: block;

  line-height: 22px;

  font-size: 1.1em;

  padding: 16px 20px 15px;

  border-right: 1px solid;

  text-align: center;

  border-color:#e6e6fa;

}



.forabg .row,

.forumbg .row {

  border-left-style: solid;

  border-right-style: solid;

  border-left-width: 1px;

  border-right-width: 1px;

  border-color:#e6e6fa;

}



.forabg .row:last-child,

.forumbg .row:last-child {

  border-radius: 0 0 3px 3px;

  border-bottom-style: solid;

  border-bottom-width: 1px;

}

.forabg {

  margin-bottom: 21px;

  overflow: hidden;

}



li.header dl.icon dt,

li.header dl.icon dd {

  min-height: 0;

  background-color: #46494f;

}



#wrap-body > .chunk {

  max-width: 100%;

  padding: 0;

}

#wrap-body > .chunk .inner {

  clear: both;

  margin: 0 auto;

  max-width: 1220px;

  padding: 0 20px;

}



.chunk,

.chunk-main {

  clear: both;

  margin: 0 auto;

  max-width: 1220px;

  padding: 0 20px;

}

.chunk:after,

.chunk-main:after {

  clear: both;

  content: "";

  display: block;

}



@media (max-width: 600px) {

  .chunk,

  .chunk-main {

    padding: 0 10px;

  }

}



#forumlist {

  margin: 22px 0 0;

}

#forumlist-inner {

  float: left;

  width: 100%;

}



.forabg .row,

.forumbg .row {

  border-left-style: solid;

  border-right-style: solid;

  border-left-width: 1px;

  border-right-width: 1px;

  border-color:#e6e6fa;

}



.forabg .row:last-child,

.forumbg .row:last-child {

  border-radius: 0 0 3px 3px;

  border-bottom-style: solid;

  border-bottom-width: 1px;

}

.forabg {

  margin-bottom: 21px;

  overflow: hidden;

}



ul.topiclist dl:after,

dl.polls:after {

  clear: both;

  content: "";

  display: block;

}

.panel > .inner > ul.topiclist {

  margin: 0 -20px;

}

ul.topiclist {

  display: block;

  list-style-type: none;

  margin: 0;

}



ul.topiclist li {

  display: block;

  list-style-type: none;

  margin: 0;

}



ul.topiclist dl {

  position: relative;

}



ul.topiclist li.row dl {

  padding: 18px 0;

}



ul.topiclist dt,

ul.topiclist dd {

  float: left;

}



ul.topiclist dt {

  width: 100%;

  margin-right: -440px;

  font-size: 1.3em;

  line-height: 22px;

}



.inner:after,

ul.linklist:after,

.action-bar:after,

.notification_text:after,

.tabs-container:after,

#tabs > ul:after,

#minitabs > ul:after,

.postprofile .avatar-container:after,

.clearfix:after,

fieldset dl:after,

ul.topiclist dl:after,

dl.polls:after {

  clear: both;

  content: "";

  display: block;

}



li.header dt,

li.header dd {

  line-height: 1.5em;

  padding-top: 18px;

  padding-bottom: 18px;

  font-size: 1.2em;

  font-family: "Open Sans", Arial, Helvetica, sans-serif;

}



li.header dl.icon dt .list-inner {

  padding-left: 20px;

  padding-right: 50px;

}



dl.icon dt .list-inner {

  padding-left: 77px

}



.forums dt .ico_forum_read,

.forums dt .ico_forum_unread,

.forums dt .ico_forum_read_locked,

.forums dt .ico_forum_unread_locked,

.forums dt .ico_forum_read_subforum,

.forums dt .ico_forum_unread_subforum,

.forums dt .ico_forum_link {

  height: 100%;

  line-height: 37px;

  width: 57px;

  text-align: center;

  display: block;

  font-size: 1em;

  -webkit-transition: color 0.1s ease-in, background-color 0.1s ease-in;

          transition: color 0.1s ease-in, background-color 0.1s ease-in;

  position: absolute;

  left: 0;

  top: 0;

  cursor: default;

}



.forums .row:hover .ico_forum_link,

.forums .row:hover .ico_forum_read,

.forums .row:hover .ico_forum_read_locked,

.forums .row:hover .ico_forum_unread,

.forums .row:hover .ico_forum_unread_locked,

.forums .row:hover .ico_forum_read_subforum,

.forums .row:hover .ico_forum_unread_subforum {

  background-color: #E1E1E1;

  color: #3C3C3C;

}



.forums dt .ico_forum_read,

.forums dt .ico_forum_read_locked,

.forums dt .ico_forum_read_subforum,

.forums dt .ico_forum_link {

  background-color: #F0F0F0;

  color: #8D939E;

}



.forums .posts dfn,

.forums .redirect span,

.forums .topics dfn,

.forums .redirect span,

.topics .posts dfn,

.topics .views dfn {

  color: #8d939e;

  font-style: normal;

  display: block;

  position: relative;

  width: auto;

  left: auto;

  right: auto;

}



.forums .posts dfn,

.forums .redirect span,

.forums .topics dfn,

.forums .redirect span,

.topics .posts dfn,

.topics .views dfn {

  color: #8d939e;

  font-style: normal;

  display: block;

  position: relative;

  width: auto;

  left: auto;

  right: auto;

}



.forums .posts dfn,

.forums .redirect span,

.forums .topics dfn,

.forums .redirect span,

.topics .posts dfn,

.topics .views dfn {

  color: #8d939e;

  font-style: normal;

  display: block;

  position: relative;

  width: auto;

  left: auto;

  right: auto;

}



dd.posts,

dd.topics,

dd.views,

dd.extra,

dd.mark {

  width: 80px;

  text-align: center;

  line-height: 22px;

  font-size: 1.2em;

}

dd.posts,

dd.topics,

dd.views {

  width: 95px;

}



dd.lastpost .lastpost-last {

  font-size: 10px;

  -webkit-transition: color 0.1s ease-in;

          transition: color 0.1s ease-in;

}

dd.lastpost .lastpost-last i {

  line-height: 1;

  vertical-align: text-top;

}



dd.lastpost {

  text-align: right;

  padding-right: 20px;

  line-height: 22px;

}

dd.lastpost,

dd.moderation,

dd.time,

dd.info {

  width: 250px;

  font-size: 1.2em;

}



dd.lastpost .lastpost-last {

  font-size: 10px;

  -webkit-transition: color 0.1s ease-in;

          transition: color 0.1s ease-in;

}

dd.lastpost .lastpost-last i {

  line-height: 1;

  vertical-align: text-top;

}



dd.lastpost {

  text-align: right;

  padding-right: 20px;

  line-height: 22px;

}

dd.lastpost,

dd.moderation,

dd.time,

dd.info {

  width: 250px;

  font-size: 1.2em;

}



/* Coloured usernames */

.username-coloured {

  font-weight: 600;

  display: inline !important;

  padding: 0 !important;

}



.statistics-list strong > .username-coloured {

  font-weight: 400;

}



div{

  word-wrap: break-word;

}



.word-break--normal{

  word-break: normal;

}



.word-break--break-all{

  word-break: break-all;

}



.word-break--keep-all{

  word-break: keep-all;

}



/*1090504*/

.contact{

   margin-top:30px;

}

/*1091106*/
.main-content .page-content .panel-default > .panel-heading{border-bottom:none;position:fixed;z-index:300;top:0}
.watermark{ background-image:url(../image/watermark.png); background-repeat:no-repeat; background-attachment:fixed;background-position:center; background-size:contain}