@charset "utf-8";
/* CSS Document */

.bg{background-color: #efefef;}


.biglogo{width: 100%; background-color: #cefffd; padding-top: 25px; margin-bottom: 40px; background-image: url("../img/bg.png"); background-position: center; background-repeat: no-repeat; background-size: cover;
    overflow: hidden; box-shadow: 0 -1px 4px rgba(0,140,150,0.6) inset;}


.slogo{width: 950px; height: 300px; margin: 0 auto; position: relative;}


.man{width: 820px; height: 289px; position: absolute; top:-5px; right: -470px; background-image: url("../img/man.png"); background-position: center; background-repeat: no-repeat; background-size: cover;
    z-index: 66;}


.logo{position: absolute; top:100px; z-index: 88;}

.logo h1{font-size: 78px; color: #fffcda; font-weight: bold; margin-bottom: 20px; text-indent: -4px; letter-spacing: 3px; text-shadow: 3px 3px 8px rgba(0,140,150,0.6);}

.logo p{font-size: 30px; color: #cefffd; text-shadow: 3px 3px 8px rgba(0,140,150,0.6);}


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

    .biglogo{padding-top: 0; margin-bottom: 24px;}

    .slogo{width: 100%; height: 280px; overflow: hidden; padding: 0 24px;}

    .man{top:-22px; right: -530px;}

    .logo{top:90px}

    .logo h1{font-size: 80px; text-indent: -8px; letter-spacing: 0px;}
    .logo p{font-size: 24px;}


}

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


    .biglogo{ margin-bottom: 16px;}


    .logo{top:50px}
    .logo h1{font-size: 46px; text-indent: -5px; margin-bottom: 12px;}
    .logo p{font-size: 17px;}

    .typed-cursor{top:4px; }

    .slogo{width: 100%; height: 164px; padding: 0 16px;}

    .man{top:-34px; right: -410px; width: 500px; height: 176px; }

	#footer{display: none}

	.say_opinion {display: none}

}

.uu{width: 100%;  border-bottom: 0px solid #008d8a; background-color: #0fb3b9;}


.menu{width: 950px; height: 40px; margin: 0 auto; background-color: #0fb3b9;}

.menu ul {overflow: hidden; width: calc(100% - 90px); float: left;}


.menu li{
    width: calc(100% / 4);
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    float: left;
    text-align: center;
    transition:all .3s;
    border-radius: 8px 8px 0 0;
    padding-top: 2px;
    overflow: hidden;
    letter-spacing: 2px;
    text-indent: 2px;
    }

.menu li a{ color:#fff; transition:all .3s;}

.menu li:hover{background-color:#008d8a;}

.menu li:hover a{ color:#fff }

.menu li.active{background-color: #efefef;}
.menu li.active a{color: #008d8a;}


.menu li:first-child{letter-spacing: 12px; text-indent: 12px;}


/* .menu li:last-child{ background-color:#ff4595; letter-spacing: 0px; text-indent: 0px; width: calc(100% / 6);} */



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

    .menu{width: 100%; padding: 0 16px; position: relative; z-index: 100;}

    .menu li{width: calc(94% / 6); font-size: 17px;}

    .menu li:last-child{width: calc(94% / 5); }


}

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

    .menu{ padding: 0 0px; height: 36px; background-color: #0fb3b9;}

    .menu ul{width: 100%; }

    .menu li{width: calc(100% / 5); font-size: 14px; text-indent: 0px; letter-spacing: 0px;  height: 36px; line-height: 36px; border-radius: 0px 0px 0 0; padding-top: 0;}

    .menu li:nth-child(6){display: none;}


}


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

    .menu{ padding: 0;}

}






.en2{   float: left; margin-left: 16px; margin-top: 11px; overflow: hidden; border:1px solid #ccc; border-radius: 4px; background-color: #ddd;}

.en2 ul{ overflow: hidden;}

.en2 li{width: 42px!important; float: left; transition:all .3s; line-height: 22px;text-align: center; height: auto!important; box-shadow: 0 0 8px rgba(0,0,0,0.1) inset;}

.en2 li a{font-size: 13px;  color: #888; transition:all .3s;}

.en2 li a:hover{color: #333; }

.en2 li:hover{background-color: #efefef; box-shadow: 0 0 16px rgba(255,255,255,1) inset !important;}




.en2_ok a{color:#333!important;}

.en2_ok{background-color: #efefef; box-shadow: 0 0 16px rgba(255,255,255,1) inset !important;}


.en2 li:nth-child(2){border-left: 1px solid #ccc;}


/*.en2 li+li:before {
	content: ' │ ';
	font-size: 10px;
	color: #bbb;
    float: left;
    margin-top: -1px;
    margin-right: 2px;
}*/






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


.en2{  margin-top: 10px; margin-left: 12px;}

    .en2 li{width: 42px!important;}

    .en2 li+li:before{margin-right: 2px;}

    .en2 li a{font-size: 13px;}

}

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


.en2{ margin-left:8px;}



}

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


    .en2{ margin: 8px 0 0px 0; width: 84px; float: right;}

    .en2 li{width: 50%!important; line-height: 25px;}

    .en2 li+li:before{margin-right: 2px;}


    .nof{display: none;}



}

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


   .en2{  width: 100%; margin: 0 0 4px 0;}

     .en2 li{width: 50%!important;}


    .nof{display: none;}



}


.page{width: 950px; padding:0 0 60px; margin: 0 auto; position: relative;}


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

    .page{width: 100%; padding: 0 24px 40px;}

}

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

  .page{padding: 0 16px 40px;}

}





.foces{width: 100%; border:0px solid #bfbfbf; transition:all .3s; margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.1);}

.foces:hover{ border:0px solid #24aaa7;}

.foces:hover .fonceimg img{transform: scale(1.05);}

.foces:hover .swiper-button-prev{ opacity: 0.5}

.foces:hover .swiper-button-next{ opacity: 0.5}

.foces:hover .foncef h1{ color: #24aaa7;}


    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

.foncebox{width: 100%; overflow: hidden;}

.fonceimg{width: 540px; height: 300px; overflow: hidden; float: left;}

.fonceimg img{transition:all .3s;}

.foncef{width: calc( 100% - 540px); height: 300px; float: left; padding: 20px 24px 24px; position: relative; }

.foncef h1{font-size: 26px; color: #000; margin-bottom: 10px; overflow : hidden; font-weight: bold;
text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; line-height: 1.4; transition:all .3s;}

.foncef p{font-size: 16px; color:#636363; overflow : hidden; height: 146px;
text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical; line-height: 1.6;}

.foncef a{color:#636363;}

.foncename{font-size: 14px; color:#636363; position: absolute; left: 24px; bottom: 20px;   overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap;  width:calc(100% - 120px); text-align: left;}

.foncemore{font-size: 14px; color:#636363; position: absolute; right: 24px; bottom: 20px;   overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap; width: 75px; text-align: right;}



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

    .fonceimg{width: 400px; height: 220px}
    .foncef{width: calc( 100% - 400px); height: 220px;}

    .foncef p{height: 76px; display:-webkit-box;-webkit-line-clamp: 3;}

    .foncef h1{font-size: 24px;}



}

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

    .fonceimg{width: 100%; height: 190px}
    .foncef{width: 100%; height: 208px; padding: 16px;}

    .foncef h1{font-size: 22px;}

    .swiper-button-prev{display: none;}

    .swiper-button-next{display: none;}

    .foncename{left: 16px; bottom: 16px;}
    .foncemore{right: 16px; bottom: 16px;}


}

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

    .fonceimg{height: 160px}

}





/*FONT*/
.typed-cursor{
  opacity: 1;
    position: relative;
    top:-4px;
    color: #cefffd;

  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}
@keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
.typed-fade-out{
    opacity: 0;
    animation: 0;
    transition: opacity .25s;
}


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


    .typed-cursor{top:-3px; }


}

.res_banner{width: 100%; margin-bottom: 16px; margin-top: 16px; }

.res_banner_m {display: none;}


.openb{width: 100%; height: 40px; margin-bottom: 16px; margin-top: 16px; }

.openb ul{overflow: hidden;}

.openb h1{ font-size: 28px; color: #24aaa7; font-weight: bold; text-indent: 5px; line-height: 46px; float: left;}


.best{float: left; font-size: 28px; color: #888; font-weight: bold; text-indent: 5px; line-height: 46px; margin-left: 16px; cursor:pointer; overflow: hidden; transition:all .3s;}

.bestline{width: 2px; height: 26px; margin-top: 8px; background-color: #aaa; float: left; margin-right: 10px;}

.best:hover{color: #24aaa7;}


.openb h1:before{content: ""; width: 40px; height: 40px; float: left; background-image: url("../img/arrb0.png"); background-position: center; background-repeat: no-repeat; background-size: 40px;}

.openb li{width: calc(100% / 2);height: 40px;float: left;overflow: hidden;}

.openb li select{ width: 180px;  height: 30px; vertical-align: middle; margin: 0px 0 0; padding: 3px; box-sizing: border-box; font-size: 16px; border-radius: 4px;}

.openb li select:focus{ border: 1px solid #24aaa7;}

.fr{float: right; padding-top: 6px; }

.openb p{ font-size: 15px; color: #24aaa7; text-indent: 5px;}

.fl0{float: left; }




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

    .openb h1{ font-size: 24px;}


    .openb{margin-top: 0;}

    .openc li:first-child{width: 52%;}
    .openc li:last-child{width: 48%;}

    .opene li:first-child{width: 40%;}
    .opene li:last-child{width: 60%;}

    .fr2 li{ width:82px!important;}

.fr2 li:last-child{margin-right: 0!important; }


    .openb li select{width: 70px;}


}


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


    .openb li{width: 100%;}

    .opene li:first-child{width: 50%;}
    .opene li:last-child{width: 50%;}
    .openc li:first-child{width: 50%;}
    .openc li:last-child{width: 50%;}
    .best{margin-left:6px; }
    .bestline{margin-right:6px;}

}


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

   .res_banner{display: none; }
   .res_banner_m {display: block;}

   .openb{height: auto; margin-bottom: 8px;}
   .openb li{width: 100%; }

    .openb h1{ font-size: 22px;}
    .openb h1:before{ width: 34px; height: 40px; background-size: 30px;}


    .openb li select{ width: 100%;}

   .opene li:first-child{width: 100%;}
    .opene li:last-child{width: 100%; height: auto;}


    .openc li:first-child{width: 100%;}
    .openc li:last-child{width: 100%; height:auto;}



    .fr{width: 100%;}

    .fr2{width: 100%!important; padding: 10px 0 0!important; margin-left: 0!important; margin-bottom: 14px;}


    .best{margin-left: 10px;}
    .bestline{margin-right: 6px;}


}


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


   .openb li{height: auto; }



}




.haha{font-size: 28px; color: #888; font-weight: bold; text-indent: 5px; line-height: 46px; float: left; transition:all .3s;}

.ic:before{content: ""; width: 40px; height: 40px; float: left; background-image: url("../img/arrb0.png"); background-position: center; background-repeat: no-repeat; background-size: 40px;}

.haha.active{color: #24aaa7;}


.haha:hover{color: #24aaa7;}




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

    .haha{font-size: 24px; }

}


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


    .haha{text-indent:0}

}

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


    .haha{text-indent:0}

}

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

    .haha{font-size: 22px; }

    .ic:before{ width: 34px; height: 40px; background-size: 30px;}

    .bestline{margin-right: 6px;}
    .best{margin-left: 10px;}


}



@media screen and (max-width: 320px) {
    .ic:before{ display: none}
    .haha{ text-indent:0;}

        .bestline{margin-right: 8px;}
    .best{margin-left: 10px;}


}


.videos{ width: 100%; margin-bottom: 8px;}

.videos h4{font-size: 24px; font-weight: bold; color: #898989; margin-bottom: 24px;}

.videos ul{overflow: hidden;}

.videos li{width:calc( 33.33% - 10px); margin-right: 15px; margin-bottom: 18px; border: 0px solid #bfbfbf; transition:all .3s; float: left; background-color: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.1);}

.videos li:nth-child(3n+3){margin-right:0;}

.videos li:hover{border: 0px solid #24aaa7;}

.videos li:hover .videos_s h5{color:#24aaa7}

/*.videos li:hover .videos_name{background-color: #24aaa7; }*/

.videos li:hover .videos_img:before{opacity: 1;}

.videos_s{width: 100%; padding:0;}

.videos_s img{margin-bottom: 0px;}

.videos_s h5{font-size: 18px; color: #000000;  line-height: 1.5;  text-align: center; font-weight: bold; overflow: hidden;  text-overflow : ellipsis;  white-space : nowrap;transition:all .3s;}

.videos_s p{font-size: 14px; color:#636363;  line-height: 1.5;
overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap;}

.videos li:hover .videos_img2:before{opacity: 1;}

.videos_img,.videos_img2{width:100%; height:150px; overflow:hidden; margin-bottom: 0px; position: relative;}

.videos_img2:before{ content: ""; width: 100%; height: 150px; position: absolute; z-index: 2; background-color:rgba(0,0,0,0.2); opacity: 0.0; transition:all .3s;}

.videos_img:before{ content: ""; width: 100%; height: 150px; position: absolute; z-index: 2; background-color:rgba(0,0,0,0.2); background-image: url("../img/play-button.png"); background-position: center; background-repeat: no-repeat; background-size: 50px; opacity: 0.0; transition:all .3s;}

.videos_h5{width:100%; height:26px; margin: 10px 0 0;  padding: 0 8px;}

.videos_p{width:100%; height:40px;  margin-bottom: 16px; overflow : hidden; padding: 0 8px;}

.videos_name{font-size: 14px; height:26px; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap; border-radius: 0px;  padding: 0 8px; text-align: center; color: #7e7e7e!important; line-height: 26px!important; transition:all .3s; margin-bottom: 8px;}



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

    .videos_img{height: 128px}
    .videos_img:before{height: 120px; width: 96%; opacity: 0.9; background-color:rgba(0,0,0,0.0); background-size: 30px; background-position: right bottom; }

}

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

    .videos li{width: 100%;}
    .videos_img{height: 190px}
    .videos_img:before{height: 182px;}


}

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

    .videos_img{height: 160px}
     .videos_img:before{height: 152px;}

}


.list_box{width: 100%; height: 30px; text-align: center; margin-bottom: 30px; line-height: 30px;}

.list_box a{color: #7e7e7e; transition:all .3s;}

.list_box a:hover{color: #000;}

.list_box select{ padding: 2px 8px; margin: 0 4px; vertical-align: middle;}

.list_box td{vertical-align: middle;}



.fr2{float: left; padding: 0px 0 0; margin-left: 8px; width:280px;}

.fr2 h2{font-size: 16px; float: left; margin: 0 0px 0 16px;}

.fr2 ul{overflow: hidden;}

.fr2 li{ background-color: #7e7e7e; float: left; width:calc(33.33% - 6px)!important; height: 30px; color: #fff; line-height: 30px; font-size: 13px; text-align: center; margin-right: 8px; margin-top: 0px; border-radius: 4px; cursor: pointer; transition:all .3s;}

.fr2 li:last-child{margin-right: 0; }

.fr2 li.active{ background-color: #24aaa7;}

.fr2 li:hover{background-color: #24aaa7;}


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

 .fr2{width: 260px;}

}


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

    .fr2 li{width: calc(33.33% - 6px)!important; margin-right: 9px;}


}





.template{ width: 100%; margin-bottom: 8px;}

.template ul{overflow: hidden}

.template li{width:calc( 33.33% - 10px); margin-right: 15px; margin-bottom: 18px; transition:all .3s; float: left; background-color: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    border-top:2px solid #24aaa7;}

.template li:nth-child(3n+3){margin-right:0;}



.template li:hover .template_bf{color:#24aaa7;}

.template li:hover .cphoto{ transform: scale(1.1);}


.template_s{width: 100%; padding:20px 0 0;}

.template_bf{color: #000; font-size: 18px; font-weight: bold; margin-bottom: 16px; width: 100%; height: 20px; line-height: 20px; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap;
    padding: 0 16px; transition:all .3s;}

.template_bf:before{content: "應徵"; margin-right: 8px; width: 40px; height: 20px; text-align: center; border-radius: 4px; line-height: 20px; font-size: 12px; font-weight: normal;color: #fff; background-color: #24aaa7; float: left; letter-spacing: 2px; text-indent: 2px;}

.template_sf{color: #7e7e7e; font-size: 15px; line-height: 1.5; overflow : hidden; margin-bottom: 14px; height: 136px;
text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical; padding: 0 16px;}


.csay{width: 100%; padding: 16px; background-color: #fffcda; position: relative;}

.cman{ width: 100%; height: 54px; margin-bottom: 4px;}

.cphoto{width: 78px; height: 78px; border-radius: 50%; overflow: hidden; float: left; position: relative; margin-top: -28px; border:1px solid #ddd; transition:all .3s;}

.cphotof{width: calc(100% - 80px); float: left; padding: 0 16px 0 0px;}


.cphotof:before{content: "建議"; margin:4px 8px 0 0; width: 40px; height: 20px; text-align: center; border-radius: 4px; line-height: 20px; font-size: 12px; font-weight: normal;color: #fff;  float: left; background-color: #ff6262; letter-spacing: 2px; text-indent: 2px;}

.cphotof h2{ font-size: 18px; color: #000; margin-bottom: 10px; line-height: 20px; padding-top: 4px; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap; }

.cphotof h3{ font-size: 14px; color: #444; margin-bottom: 0px; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap; }

.csayc{clear: both; width: 100%; height: 45px; font-size: 15px; line-height: 1.5; color: #444;
    overflow : hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}




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

    .cphoto{display: none;}
    .cphotof{width: 100%; padding: 0}
    .cman{height: 54px;}

    .template_sf{height: 130px;}

    .template_bf{margin-bottom: 8px}

    .template_s{padding: 16px 0 0}

    .csay{padding: 8px 16px 10px;}


}

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

    .template li{width:100%;}


}









.abc123_bf{font-size: 24px; width: 100%; height: 44px; line-height: 44px; color: #fff; background-color: #0fb3b9;  text-align: center; font-weight: bold; margin-top: 14px; border-radius: 10px 10px 0 0;}



.abc123{width: 100%; margin-bottom: 24px; border:0px dotted #92cfce; padding: 16px 24px 4px; position: relative; margin-top: 0px; background-color: #fff; border-radius:0 0 10px 10px; }





.abc123 ul{overflow: hidden;}

.abc123 li{width: calc(99% / 3); margin-bottom: 14px; border: 0px solid #24aaa7; transition:all .3s; float: left; border-radius: 8px;}

.abc123 li:hover{background-color: #efefef;}

.abc123 li:hover .abc_h1{ color: #24aaa7;}
.abc123 li:hover .abc_go p{background-color: #008d8a;}


.abc{width: 99%; text-align: center;  padding: 8px 16px 0;}

@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {
    .abc{width: 99%; text-align: center;  padding: 8px 16px 0;}
}

.abc_icon{width: 100%; height: 50px; position: relative;}

.abc_icon img{width:80px; height: 80px; position: absolute; left: 50%; margin-left: -40px; bottom: -40px; }

.abc_h1{width: 100%;font-size: 24px;  font-weight: bold; padding: 64px 0 12px; color: #000; transition:all .3s;}

.abc_p{width: 100%; line-height: 1.5; padding:0 24px 24px;  color: #636363; font-size: 16px;}

.abc_go{width: 100%;font-size: 18px; color: #fff; height: 50px; font-weight: bold;}

.abc_go p{padding: 8px; border-radius: 6px; display: inline-block; width:calc(100% - 88px);
    border:0px solid #24aaa7; letter-spacing: 4px; text-indent: 4px; background-color: #0fb3b9; transition:all .3s;}



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

    .abc{padding: 0;}

    .abc_p{font-size: 14px; padding:0 24px 12px; }

    .abc123{padding: 10px 16px 0px; margin-bottom: 20px; }

    .abc123 li{margin-bottom: 16px;}

    .abc_h1{padding: 60px 0 12px; font-size: 22px; }

    .abc_go{height: 40px;}

    .abc123_bf{font-size: 22px;}

}

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


    .abc123{padding: 16px 16px 0px;}

    .abc123_bf{font-size: 20px;}

    .abc123 li{width: 100%; margin-bottom: 16px; padding: 8px 0;}

}



.news{ width: 100%; margin-bottom: 8px;}

.news h4{font-size: 24px; font-weight: bold; color: #898989; margin-bottom: 24px;}

.news ul{overflow: hidden;}

.news li{width: 100%;  margin-bottom: 18px; border: 0px solid #bfbfbf; transition:all .3s; float: left; background-color: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.1);}

.news li:nth-child(3n+3){margin-right:0;}

.news li:hover{border: 0px solid #24aaa7;}

.news li:hover .news_s h5{color:#24aaa7}


.news li:hover .news_s img{ transform: scale(1.12);}


.news_s{ padding:0; width: 100%; overflow: hidden}

.news_s img{margin-bottom: 0px; transition:all .3s;}

.news_s h5{font-size: 22px; color: #000000; text-align: left; font-weight: bold; transition:all .3s; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap;}

.news_s p{font-size: 15px; color:#7e7e7e;  line-height: 1.5; overflow : hidden;
text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}


.news_img{width: 300px; height:150px; overflow:hidden; margin-bottom: 0px; position: relative; float: left; }

.news_f{width: calc(100% - 300px); float: left; padding:14px 24px 18px;}



.news_h5{width:100%; height:40px; margin-bottom: 8px; line-height: 40px;  }

.news_p{width:100%; height:70px;  margin-bottom: 0px; overflow : hidden;}

.news_name{font-size: 14px; height:26px; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap; border-radius: 0px;  padding: 0 8px; text-align: center; color: #7e7e7e!important; line-height: 26px!important; transition:all .3s; margin-bottom: 8px;}


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

.news_s h5{font-size: 18px}

    .news_h5{height:30px; line-height: 30px}

    .news_img{width: 250px; height:140px;}

    .news_f{width: calc(100% - 250px);}

}


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

    .news_img{width: 100%; height: 190px}

    .news_f{width:100%; padding: 16px;}

    .news_s h5{font-size: 18px}

}


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

    .news_img{height: 160px}

}





.sb{width: 100%; height: 40px; font-size: 24px; line-height: 40px; font-weight: bold; color: #666; margin-bottom: 8px;}



.dbig{width: 100%;  padding: 0px 0 40px;}

.note{width: 100%; height: 30px; background-image: url("../img/note.png"); background-position: bottom; background-repeat: no-repeat; background-size:contain;}






.open2{width: 100%; line-height: 1.5; font-size: 20px; color: #333; margin: 24px 0 16px;}


.ari{width: 100%; padding-bottom: 0px;}


.tbbox{box-shadow: 0 1px 4px rgba(0,0,0,0.1); transition:all .3s;}

.ttb{width: 100%; background-color: #fffcda; overflow: hidden; border-left: 4px solid #24aaa7; padding: 10px 24px; color: #333; font-weight: bold; line-height: 1.5; font-size: 20px; margin-bottom: 0px; transition:all .3s;}


.tts{width: 100%; background-color: #fff; overflow: hidden;  padding: 24px 28px 10px; color: #666; line-height: 1.5; font-size:18px; margin-bottom: 24px}

.tts p{margin-bottom: 20px;}

.tts ul{margin-left: 28px;}

.tts li{line-height: 1.5; margin-bottom: 20px; list-style-type: disc;}


.tbbox:hover .ttb{color: #24aaa7;}

.sfff{font-size: 14px; font-weight: normal; color: #666;}



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

    .open2{ margin: 16px 0 16px}

}

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

    .open2{font-size: 17px;}

    .ttb{line-height: 1.2;}

    .tts {padding: 20px 16px 0; font-size: 16px;}


}



.worklist{width: 100%; background-color: #fff; margin-bottom: 24px;}

.worklist ul {overflow: hidden; padding: 16px 0px;}

.worklist h2{width: 100%; height: 40px; font-size: 20px; line-height: 40px; color: #fff;  background-color: #3b8fce; padding: 0 20px; box-sizing: border-box;}

.worklist li {width: calc(100% / 4);  vertical-align: top; border-right:1px solid #ddd; float: left; padding:0 16px; }

@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
    .worklist li {width: calc(99% / 4);  vertical-align: top; border-right:1px solid #ddd; float: left; padding:0 16px; }
}


.worklist li:nth-child(4n+4){border-right:0px solid #ddd;}

.workbox{width: 100%; height: 160px; position: relative;}


.workbox h3{font-size: 20px; font-weight: bold; margin-bottom: 12px; color: #000; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap;}

.workbox h4{font-size: 17px;  margin-bottom: 16px; color: #ff2787; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap;}

.workbox h5{font-size: 15px;  margin-bottom: 12px; color: #333; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap;}

.workbox p{font-size: 14px;  color: #666; overflow : hidden;  text-overflow : ellipsis;  white-space : nowrap;}


.work_go{width: 80px; height: 28px; line-height: 28px; text-align: center; font-size: 12px; color: #3b8fce;  border:1px solid #3b8fce; border-radius: 5px;
    position: absolute; right: 0px; bottom: 0; transition:all .3s;}

.worklist li:hover .work_go{background-color: #3b8fce; color: #fff;}



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

    .worklist li {width:calc(100% / 2); border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding: 16px;}

    .worklist li:nth-child(2n+2){border-right:0px solid #ddd;}

    .worklist li:nth-child(3){border-bottom:0px solid #ddd;}
    .worklist li:nth-child(4){border-bottom:0px solid #ddd;}

    .workbox{height: 138px;}

    .worklist ul{padding: 0;}

    .workbox h3{font-size: 18px; }
    .workbox h4{font-size: 15px; margin-bottom: 14px;}
    .workbox h5{font-size: 15px; }




}

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

    .worklist li {width: 100%; border-right:0px solid #ddd; border-bottom:1px solid #ddd; padding: 16px;}

    .workbox{height: 138px;}

    .worklist li:nth-child(3){border-bottom:1px solid #ddd;}
    .worklist li:nth-child(4){border-bottom:0px solid #ddd;}

    .worklist ul{padding: 0;}


}



.news_ar{width: 100%; padding: 0; margin-bottom: 24px; position: relative;}

.news_ar h1{font-size: 28px; color: #24aaa7; font-weight: bold; text-indent: 0px; line-height:1.5; margin-bottom: 8px;}


.news_ar h2{font-size: 24px; color: #333; font-weight: bold; text-indent: 0px; line-height:1.5; margin-bottom: 16px;}

.news_ar p{font-size: 16px; color: #333; line-height:1.6; margin-bottom: 24px;}

/*.news_aa h1:before{content: "應徵"; margin-right: 8px; width: 40px; height: 20px; text-align: center; border-radius: 4px; line-height: 20px; font-size: 12px; font-weight: normal;color: #fff; background-color: #24aaa7; float: left; letter-spacing: 2px; text-indent: 2px; margin-top: 10px;}*/

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

    .news_ar h1{font-size: 24px;}
    .news_ar h2{font-size: 20px;}

}

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

    .news_ar h1{font-size: 22px;}
    .news_ar h2{font-size:18px;}

}





.tname{margin-bottom: 24px; font-size: 14px; color: #666; overflow: hidden; border-bottom: 1px solid #aaa; padding-bottom: 10px; line-height: 1.5; position: relative; }

.tname ul{overflow: hidden;}

.tname li{float:left; margin-right: 20px; }


.fbb{position: absolute; right: 0; top:8px;}



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

.fbb{ top:7px;}

}




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

.tname li{float:none; margin-right: 0px; margin-bottom: 4px; width: calc(100% - 84px);}

    .tname li:last-child{margin-bottom: 0;}

    .tname{height: auto;}

    .fbb{ top:6px;}
}





.photobox{width: 100%; margin-bottom: 24px;}
.imgsf{font-size: 12px; color: #666; margin: 8px 0;}
.imgsf a{font-size: 12px; color: #666;}



.uu0{font-size: 14px; color: #666; margin-bottom: 16px;}

.uu0 a{color: #000;}



.namea{width: 100%; padding:16px; background-color: #FFFFFF; margin-bottom: 0px;}

.namea ul{overflow: hidden}

.namea li{float: left;}

.namea li:nth-child(1){width: 100px;}

.namea li:nth-child(2){width:calc(100% - 100px); padding-left: 16px;}

.namea li h1{font-size: 20px; color: #000; margin-bottom: 2px; font-weight:normal}

.namea li h2{font-size: 16px; color: #000; margin-bottom: 8px; font-weight:normal}

.namea li h6{font-size: 20px; color: #000; margin-bottom: 2px; line-height: 1.5; font-weight:normal}

.namea li h6:before{content: "建議"; margin:4px 8px 0 0; width: 40px; height: 20px; text-align: center; border-radius: 4px; line-height: 20px; font-size: 12px; font-weight: normal;color: #fff;  float: left; background-color: #ff6262; letter-spacing: 2px; text-indent: 2px;}

.namea li p{margin-bottom: 0; font-size: 14px}

.bgc{background-color: #fff}


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



}

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

.namea{position: relative;}

.namea li:nth-child(1){position: absolute; right: 16px; top:16px; width: 50px;}

.namea li:nth-child(1) img{border-radius: 50%;}

.namea li:nth-child(2){width:100%; padding: 0;}

.namea h1{margin-bottom: 4px!important;}

.mno{display: none;}

.namea li h6{width: calc(100% - 58px)}
.namea li h2{width: calc(100% - 58px)}

}




.backp{position: absolute; right: 0px; top:0px; text-align: right; transition: all .3s;font-size: 14px; color:#24aaa7;}









.video-container {
position: relative;
padding-bottom: 56.25%;
margin-bottom:24px;
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;}



.record{width: 100%; margin-bottom:24px;}

.record ul{overflow: hidden;}

.record li{background-color: #7e7e7e; float: left; width:82px; height: 30px; color: #fff; line-height: 30px; font-size: 13px; text-align: center; margin-right: 8px; margin-top: 4px; border-radius: 4px; cursor: pointer; transition:all .3s;}

.record li.active{ background-color: #24aaa7;}

.record li:hover{background-color: #24aaa7;}


.tablinks{cursor:pointer;}


#back-to-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index:999;
    width: 60px;
    height: 60px;
	border-radius:30px;
	background-color:#9fa0a0;
    cursor: pointer;
    border: 0;
    transition: opacity 0.2s ease-out;
    opacity: 0;
    background-image:url(../img/top.png); background-position: center; background-repeat: no-repeat; background-size: cover;
}
#back-to-top:hover {
   background-color:#434343;  transition: all 0.2s linear;
}
#back-to-top.show {
    opacity: 1;
}


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

    .blackbar{display: none!important}

}



.hahaha{width: 100%; margin-bottom: 24px; margin-top: -16px;}

.hahaha ul{overflow: hidden}

.hahaha li{line-height:1.5; margin-right:8px; float: left; }


.hahaha li+li:before {
	content: ' > ';
	font-size: inherit;
	color: #888;
}

.hahaha li a{font-size: 15px; color: #333;}


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

.hahaha{width: 100%; margin-bottom: 16px; margin-top: -8px;}

}

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

    .hahaha{width: 100%; margin-bottom: 16px; margin-top: 0px;}

    .hahaha li a{font-size: 14px;}


}


.adbc{display: none;}

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

.adbc{display: block; width: 100%; position: fixed; left: 0; bottom: -3px; text-align: center; background-color: #666; z-index: 999;}


}


.en{display: none;}



.ttb2{width: 100%; background-color: #fffcda; overflow: hidden; border-left: 12px solid #24aaa7; padding: 6px 0px; color: #333; font-weight: bold; margin-bottom: 0px; transition:all .3s;}

.tbbox:hover .tts2{color: #24aaa7;}

.tts2{width: 100%; background-color: #fff; overflow: hidden;  padding: 24px 28px 4px; color: #666; line-height: 1.5; font-size:18px; margin-bottom: 24px; transition:all .3s;}

.tts2 p{margin-bottom: 20px;}


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

 .tts2 {padding: 20px 16px 0; font-size: 16px;}

}

.man2{width: 820px; height: 289px; position: absolute; top:-5px; right: -470px; background-image: url("../img/man2.png"); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 66;}


@media screen and (max-width: 980px) {
    .man2{top:-10px; right: -500px;}
}

@media screen and (max-width: 736px) {
    .man2{top:0px; right: -310px; width:450px; height: 159px;  z-index: 99;}
    .logo{transform: scale(0.9); transform-origin:left top; top:40px;}
    .logo p{width: 230px; line-height: 1.5;}
}

.man3{width: 820px; height: 289px; position: absolute; top:-5px; right: -470px; background-image: url("../img/man3.gif"); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 66;}

@media screen and (max-width: 980px) {
    .man3{top:-10px; right: -500px;}
}

@media screen and (max-width: 736px) {
    .man3{top:0px; right: -310px; width:450px; height: 159px;  z-index: 99;}
}

.man3_2{width: 820px; height: 289px; position: absolute; top:-5px; right: -470px; background-image: url("../img/man3_4.gif"); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 66;}

@media screen and (max-width: 980px) {
    .man3_2{top:-10px; right: -500px;}
}

@media screen and (max-width: 736px) {
    .man3_2{top:0px; right: -310px; width:450px; height: 159px;  z-index: 99;}
}