body {
    font-size: 13px;
    font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif;
    color: #000000;
    position: relative;
    width: 100%;
    height: 100%;
}

a {
    color: #333;
}

a:hover {
    color: #0070af;
}


/*a:hover,.footer_menu li a:hover{ color:#787bc1;  }*/

button:focus {
    outline: 0;
}

* {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
    font-family: Microsoft JhengHei;
}

.blur {
    filter: url(blur.svg#blur);
    /* FireFox, Chrome, Opera */
    -webkit-filter: blur(2px);
    /* Chrome, Opera */
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
    /* IE6~IE9 */
}

#top-control {
    width: 55px;
    height: 55px;
    position: fixed;
    right: 0;
    bottom: 0px;
    right: 20px;
    z-index: 999999;
}

#gotop {
    width: 55px;
    height: 55px;
    display: block;
    position: absolute;
    top: 5px;
    z-index: 5555;
    background: url(../img/top.png) #FF795F no-repeat 0px 0px;
}

#gotop:hover {
    background: url(../img/top.png) #f33d1a no-repeat 0px 0px;
}


/*亮起選單*/

.crumb {
    display: none;
}

.top_box {
    width: 100%;
    position: relative;
    border-bottom: #CCC solid 1px;
    background: #FFF;
}

.logo_box {
    float: left;
    display: block;
    width: 362px;
}

.logo_box img {
    width: 100%;
}


.menu_ul {
     float: right; 
    /* margin-top: 20px;*/
    margin: 20px auto 0 auto;
    padding-left: 2%;
    width: 56%;
    /*width: calc(100% - 455px);*/
    text-align: center;
}

.menu_ul li {
    float: left;
    padding: 0 16px;
    /*height:86px; */
}

.menu_ul>li>a {
    height: 86px;
}

.menu_ul>li>a.active {
    color: #0070af;
}

.menu1280 {
    width: 1280px;
    max-width: 90%;
    margin: 0 auto;
    line-height: 26px;
}

.left_m {
    float: left;
    width: 26.03%;
    border-right: #CCC solid 1px;
    padding: 47px 40px 47px 0;
}

.left_m h3 {
    font-size: 24px;
    text-align: left;
}

.left_m p {
    font-size: 15px;
    color: #777777;
    text-align: start;
}

.left_m .bule_boder {
    float: left;
}

.left_m a {
    display: block;
    width: 209px;
    padding: 13px 0;
    border: #888888 solid 1px;
    margin-top: 26px;
    text-align: center;
    font-weight: bolder;
    background: url(../img/smalleft_black.png)no-repeat 90% 50%;
    transition: .5s;
}

.left_m a:hover {
    transition: .5s;
    color: #FFF;
    background: url(../img/smalleft.png)#0070af no-repeat 90% 50%;
    border-radius: 30px;
}

.right_m {
    float: left;
    width: 73.955%;
    padding: 93px 0 93px 40px;
}

.right_m a {
    display: block;
    float: left;
    margin-right: 2%;
    width: 100%;
}

.right_m a:last-child {
    margin-right: 0;
}

.right_m a img {
    width: 100%;
    border: #EEE solid 1px;
}

.right_m a p {
    font-size: 15px;
    margin-top: 5px;
    text-align: start;
}


/*.menu01{ display:none;}*/

.menu01 {
    position: absolute;
    left: 0;
    top: 133px;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #FFF;
    z-index: 10;
    border-top: #CCC solid 1px;
    box-shadow: 4px 4px 12px -2px rgba(95, 95, 95, 0.5);
}

.menu_ul li ul {
    display: block;
    filter: alpha(opacity=0);
    opacity: 0;
}

.menu_ul li:hover ul {
    display: block;
    filter: alpha(opacity=100);
    opacity: 1;
}

.menu_ul li:hover>a {
    color: #0070af;
}

.menu_ul li:hover .menu01 {
    height: auto;
    overflow: auto;
}

.menu01.active {
    display: block;
}

.menu_ul>li>a {
    display: block;
    font-size: 17px;
    font-weight: bolder;
    border-bottom: #FFF solid 3px;
    transition: .1s;
    text-align: center;
}


/*.menu_ul li a:hover{ border-bottom:#0070af solid 3px;  padding-bottom:10px; transition:.2s;}*/

.icon_ul {
    float: right;
    margin-top: 20px;
}

.icon_ul li {
    float: left;
}

.icon_ul li.fb {
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 30px;
    background: #3b5998;
    margin-top: -8px;
    margin-left: 13px;
}

.icon_ul li.fb a {
    font-size: 20px;
    font-weight: bolder;
    color: #FFF;
}

.icon_ul li a {
    color: #AAAAAA;
    font-size: 17px;
    display: block;
    padding: 0 2px;
}

.ad_t {
    position: absolute;
    z-index: 2;
    left: 0;
    color: #FFF;
    width: 100%;
    text-align: center;
    padding-top: 100px;
    transition: 1s;
    opacity: 0;
}

.ad_t h2 {
    font-size: 96px;
}

.ad_t h3 {
    font-size: 20px;
}

.ad_t a {
    width: 300px;
    padding: 15px 0px;
    text-align: center;
    color: #FFF;
    background: #000;
    font-size: 17px;
    display: block;
    border: 0;
    margin: 40px auto 0 auto;
}

.ad_t img {
    float: right;
    width: 7px !important;
    margin-right: 15px;
    margin-top: 5px;
}

.center_box_show {
    width: 1400px;
    max-width: 90%;
    padding: 80px 0;
    margin: 0 auto;
}

.center_box_show h2,
.related_1283>h2 {
    text-align: center;
    font-size: 35px;
}

.center_box_show p {
    font-size: 16px;
    color: #666666;
    text-align: center;
    line-height: 26px;
}

.pro_show {
    width: 1440px;
    max-width: 83%;
    margin: 0 auto;
    position: relative;
}

.pro_img a {
    display: block;
    width: 83%;
    text-align: center;
}

.pro_img a p {
    font-size: 19px;
    color: #0070AE;
}

.ad_img {
    width: 100%;
    position: relative;
    margin-bottom: 60px;
}

.control_box {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -60px;
    z-index: 5;
}

.control {
    width: 1440px;
    margin: 0 auto;
}

.control li {
    width: 33.3%;
    float: left;
    background: #DDDDDD;
    text-align: center;
    padding: 17px 0;
    border-right: #FFF solid 2px;
    font-size: 20px;
    position: relative;
}

.control li:last-child {
    border: 0;
}

.control li i {
    color: #DDDDDD;
    position: absolute;
    top: -32px;
    left: 45%;
    z-index: 1;
    font-size: 50px;
    opacity: 0;
}

.control li.point {
    background: #00BFFF;
    color: #FFF;
    border-right: #00BFFF solid 2px;
}

.control li.point i {
    color: #00BFFF;
    opacity: 1;
}

.top1280 {
    width: 1280px;
    max-width: 90%;
    margin: 0 auto;
    height: 133px;
    padding: 34px 0px;
}

.search_box {
    width: 100%;
    background: #E5F8FF;
    padding: 53px 0;
}

.search1283 {
    width: 1283px;
    max-width: 90%;
    margin: 0 auto;
}

.search1283 p {
    font-size: 17px;
    float: left;
    line-height: 55px;
}

.search1283 select,
.search1283 p {
    float: left;
    margin-right: 1%;
}

.search_box select:focus {
    outline: none;
}

.search_box select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search_box select {
    border: #CCC solid 1px;
    width: 35%;
    height: 53px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    font-size: 15px;
    text-align-last: center;
    background: #fff url(../img/smaldown.png)no-repeat 90% 50%;
}

.search_box button {
    width: 14%;
    height: 53px;
    color: #FFF;
    font-size: 17px;
    text-align: center;
    border: 0;
    cursor: pointer;
    background: url(../img/smalleft.png) #0070AF no-repeat 90% 50%;
}

.pro_contact {
    width: 178px;
    height: 53px;
    color: #FFF;
    font-size: 17px;
    text-align: center;
    border: 0;
    cursor: pointer;
    background: url(../img/smalleft.png) #0070AF no-repeat 90% 50%;
}

.pro_contact:hover {
    color: #FFF;
}

.pro_contact {
    line-height: 52px;
    margin-top: 72px;
}

.footer_box {
    width: 100%;
    background: #0171b0;
}

.footer_1283 {
    width: 1283px;
    max-width: 90%;
    margin: 0 auto;
    padding: 70px 0;
}

.footer_1283 ul {
    display: block;
    float: left;
    margin-right: 43px;
}

.footer_1283 ul li {
    margin-bottom: 10px;
}

.footer_1283 ul li.footer_title {
    border-bottom: #FFF solid 1px;
    padding-bottom: 5px;
}

.footer_1283 ul li a {
    display: block;
    color: #cad8e0;
    font-size: 16px;
    position: relative;
}

.footer_1283 ul li a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    border: rgba(255, 255, 255, 0.46) solid 1px;
    width: 100%;
}

.footer_1283 ul li a h3 {
    font-weight: bolder;
    color: #FFF;
    margin-bottom: 3px;
}

.footer_right {
    clear: both;
    color: #FFF;
    margin-top: 20px;
}

.footer_right h2 {
    float: left;
}

.footer_right a.fb {
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 30px;
    background: #FFF;
    margin-top: 0px;
    margin-left: 13px;
    font-size: 20px;
    font-weight: bolder;
    color: #3b5998;
    float: left;
}

.footer_right a.fb.contact_icon img {
    width: 14px;
    margin: 10px auto 0 auto;
}

.footer_right a.fb:hover {
    color: #3b5998;
}

.footer_right p,
.footer_right p a {
    font-size: 15px;
    color: #FFF;
    margin-bottom: 5px;
}

.footer_right a {
    display: block;
    font-size: 30px;
    margin-bottom: 5px;
    color: #FFF;
}

.footer_right a:hover {
    color: #FFF;
}

.footer_right h2 {
    font-size: 25px;
    margin-bottom: 5px;
}

.footer_cr {
    width: 100%;
    font-size: 12px;
    margin-top: 70px;
    border-top: rgba(255, 255, 255, 0.31) solid 1px;
    padding-top: 20px;
    font-size: 14px;
}

.footer_cr p {
    display: block;
    float: left;
    color: #FFF;
}

.footer_cr span {
    display: block;
    float: right;
    color: #FFF;
}

.bule_boder {
    width: 52px;
    border-bottom: #00BFFF solid 1px;
    margin: 22px auto;
}

.m1280 {
    width: 1280px;
    margin: 0 auto;
    position: relative;
    max-width: 90%;
}

.ad_img_in_b {
    width: 432px;
    position: absolute;
    top: 0;
    right: 0;
}

.pro_right_p {
    width: 432px;
    float: right;
}

.ad_img_in_b span {
    display: block;
    width: 100%;
    padding: 39% 30px 8% 30px;
    color: #FFF;
    font-size: 33px;
    background: #0070AF;
}


.ad_img_in_b.more_t span {
    padding: 31% 30px 8% 30px;
}

.pro_right_p>span {
    /*height: 270px;*/
    display: block;
    width: 100%;
    padding: 39% 30px 8% 30px;
    color: #FFF;
    font-size: 50px;
    background: #0070AF;
}

.ad_img_in_b.cons span {
    font-size: 40px;
}

.ad_img_in_b.investor span {
    height: 270px;
}

.investor_img {
    width: 100%;
    height: 270px;
}

.ad_img_in_b p,
.pro_right_p p {
    color: #333;
    font-size: 26px;
    font-weight: bolder;
    margin-top: 38px;
    margin-left: 38px;
}

.pro_p {
    font-size: 17px;
    width: 1006px;
    max-width: 90%;
    margin: 0 auto;
    padding: 47px 0px;
    line-height: 31px;
    font-weight: bolder;
}

.pro_p.text_h2.news_dtah2 {
    text-align: center;
    padding-top: 23px;
    color: #3d3d3d;
    font-size: 20px;
}

.pro_p.content {
    margin-bottom: 74px;
    font-weight: normal;
    padding: 0;
    line-height: 28px;
    font-size: 17px;
    color: #666666;
}

.pro_p.h_h2 {
    font-size: 37px;
    text-align: center;
}

.pro_1280 {
    width: 1280px;
    margin: 0 auto;
    max-width: 90%;
}

.pro_1280 ul {
    display: flex;
    flex-wrap: wrap;
}

.pro_1280 ul li {
    width: 48%;
    display: inline-block;
    margin-right: 2%;
    margin-bottom: 42px;
    vertical-align: top;
}

.pro_1280 ul li h2 {
    font-size: 26px;
    margin: 25px 0;
}

.p_box {
    line-height: 25px;
}

.pro_imgbox {
    width: 100%;
    padding-bottom: 100%;
    height: 0;
}

.pro_1280 .pro_imgbox {
    padding-bottom: 51%;
}

.pro_1280.pro_in ul {
    flex-wrap: wrap;
    text-align: left;
    display: inline-block;
    width: 100%;
}

.pro_1280.pro_in ul li {
    width: 23%;
}

.pro_1280.pro_in ul li:nth-child(4n) {
    margin-right: 0;
}

.pro_1280.pro_in .pro_imgbox {
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    border: #EEE solid 1px;
}

.pro_1280.pro_in ul li h2 {
    font-size: 19px;
    color: #0070AD;
    margin: 25px 0;
    text-align: center;
}

.pro_1280 ul li {
    opacity: 0;
    visibility: visible;
    transform: translateY(50px) scale(1.2);
    transition: 1s;
}

.pro_1280 ul li.load {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.animate ul li {
    opacity: 0;
    visibility: visible;
    transform: translateY(50px) scale(1.2);
    transition: 1s;
}

.animate ul li.load {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.pro_1280 ul li.load:hover {
    opacity: 0.6;
}

.pro_p_in_box {
    margin-left: 38px;
    margin-top: 48px;
}

.pro_p_in_box h3 {
    color: #666666;
    font-size: 26px;
    font-weight: bolder;
}

.pro_p_in_box p {
    margin-left: 0;
    font-size: 16px;
    margin-top: 0;
    color: #666666;
    line-height: 25px;
}

.ad_img_in_b.in_pro_d {
    position: relative;
    float: right;
}


/*產品放大鏡*/

.zoom {
    position: relative;
}

.zoom01:hover {
    cursor: crosshair;
}

.zoom_icon {
    position: absolute;
    top: 5%;
    right: 5%;
    z-index: 9;
}

.zoom:hover .zoom_icon {
    filter: alpha(opacity=30);
    opacity: 0.2;
}

.zoom_icon.active {
    display: none;
}


/*產品*/

.pro_in_show {
    width: 656px;
    float: left;
    position: relative;
}

.pro_imgbox {
    width: 100%;
}

.pro_imgbox img {
    width: 100%;
}

.control {
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

.control img {
    display: inline-block;
    border-radius: 10px;
    width: 17%;
    border: #EEE solid 1px;
    margin-right: 2%;
}

.control img.point {
    border: #0070af solid 1px;
}

.m1280.pro_in_de {
    margin-bottom: 100px;
}

.related_box {
    width: 100%;
    background: #F7F7F7;
}

.related_1283 {
    width: 80%;
    margin: 64px auto;
    position: relative;
}

.related_1283 li {
    width: 100%;
    max-width: 100%;
    margin-right: 32px;
    display: inline-block;
    float: left;
}

.related_1283 li .pro_imgbox {
    width: 100%;
    padding-bottom: 100%;
    height: 0;
}

.related_1283 li h2 {
    font-size: 19px;
    margin: 25px 0;
    color: #0070AD;
    margin: 25px 0;
    text-align: center;
}

.core_box {
    width: 100%;
}

.core_box li {
    float: left;
    width: 33.3%;
    height: 0;
    padding-bottom: 22%;
}

.yer {
    width: 100%;
}

.yer li {
    width: 31.3%;
    float: left;
    margin-right: 3%;
}

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

.yer li p {
    font-weight: normal;
    font-size: 37px;
    border-bottom: #E5E5E5 solid 1px;
    padding-bottom: 20px;
    text-align: center;
}

.yer li p span {
    font-size: 15px;
}

.yer li>span,
.yer li a>span {
    margin-top: 20px;
    display: block;
    text-align: center;
}

.yer.stre_ul {
    width: 1326px;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

.yer.stre_ul li {
    width: 22%;
    margin-bottom: 50px;
    float: none;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
}

.yer.stre_ul li img {
    margin: 0 auto;
}

.yer.stre_ul li>span {
    color: #666666;
    font-size: 17px;
    line-height: 30px;
}

.yer.about_ul li p {
    color: #666666;
    font-size: 26px;
}

.yer.about_ul li>span {
    color: #666666;
    font-size: 17px;
    line-height: 30px;
}

.blue {
    color: #1FA5F0;
}

.pro_p ol li {
    list-style: decimal;
    margin-left: 25px;
}


/*製造實力*/

.circle_box {
    width: 492px;
    height: 493px;
    float: left;
    position: relative;
    margin-top: 48px;
}

.circle_box ul {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.circle_box ul li {
    position: absolute;
}

.ci_box {
    position: relative;
    width: 100%;
}

.circle_box ul li p {
    color: #FFF;
    font-size: 30px;
}

.ci01 {
    width: 56.71%;
    height: 48.07%;
    left: 21.74%;
    top: 0.2%;
}

.ci01 img {
    position: absolute;
    left: 114px;
    top: 36px;
}

.ci01 .ciimg {
    width: 100.02%;
    height: 0;
    padding-bottom: 85.31%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.ci01 p {
    position: absolute;
    z-index: 5;
    left: 77px;
    top: 92px;
}

.ci02 {
    width: 56.7075%;
    height: 48.07%;
    left: 51.82%;
    top: 11.15%;
}

.ci02 .ciimg {
    width: 85.625%;
    height: 0;
    padding-bottom: 94.625%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.ci02 img {
    position: absolute;
    left: 123px;
    top: 96px;
}

.ci02 p {
    position: absolute;
    z-index: 5;
    left: 97px;
    top: 151px;
}

.ci03 {
    width: 45.734%;
    height: 48.075%;
    left: 51.21%;
    top: 51.92%;
}

.ci03 .ciimg {
    width: 100.02%;
    height: 0;
    padding-bottom: 105.34%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.ci03 img {
    position: absolute;
    left: 74px;
    top: 65px;
}

.ci03 p {
    position: absolute;
    z-index: 5;
    left: 29px;
    top: 128px;
}

.ci04 {
    width: 45.731%;
    height: 48.073%;
    left: 3.455%;
    top: 51.92%;
}

.ci04 .ciimg {
    width: 100.02%;
    height: 0;
    padding-bottom: 105.34%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.ci04 p {
    position: absolute;
    z-index: 5;
    left: 106px;
    top: 128px;
}

.ci04 img {
    position: absolute;
    left: 108px;
    top: 74px;
}

.ci05 {
    width: 47.967%;
    height: 53.549%;
    left: 0;
    top: 11.156%;
}

.ci05 .ciimg {
    width: 100.02%;
    height: 0;
    padding-bottom: 112%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.ci05 p {
    position: absolute;
    z-index: 5;
    left: 63px;
    top: 152px;
}

.ci05 img {
    position: absolute;
    left: 55px;
    top: 91px;
}

.ci06 {
    width: 28.659%;
    height: 28.603%;
    left: 35.569%;
    top: 35.496%;
    background: #FFF;
    border-radius: 100px;
}

.ci06 p {
    position: absolute;
    z-index: 5;
    left: 23px;
    top: 58px;
}

.circle_box2 {
    width: 29%;
    float: right;
    margin-left: 86px;
    margin-top: 48px;
}

.circle_box2 li {
    width: 100%;
    margin-bottom: 30px;
}

.circle_box2 li h2 {
    font-size: 25px;
    color: #22A8F0;
    font-weight: bolder;
}

.circle_box2 li p {
    font-size: 12px;
    color: #333;
}

.stre_box {
    width: 100%;
    margin-bottom: 64px;
}

.stre_box li {
    float: left;
    width: 33.3%;
}

.stre_box .img_box {
    width: 100%;
    padding-bottom: 59%;
    height: 0;
}

.stre_box li p {
    width: 297px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #666666;
    font-size: 20px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: #DDDDDD solid 1px;
    color: #666666;
}

.stre_box.two_box {
    width: 1000px;
    margin: 0 auto 64px auto;
    max-width: 100%;
}

.stre_box.two_box li {
    width: 50%;
    margin-bottom: 64px;
}

.stre_box.two_box .img_box {
    width: 100%;
    padding-bottom: 100%;
    height: 0;
}

.stre_box.stre_4 li {
    float: left;
    width: 25%;
}


/*最新消息*/

.news_link {
    position: relative;
    width: 250px;
    margin: 0 auto;
    display: block;
    margin-bottom: 74px;
    padding-bottom: 6px;
}

.news_link li {
    width: 48%;
    float: left;
    font-size: 20px;
    text-align: center;
}

.news_link li:nth-child(2) {
    width: 4%;
}

.news_link li a {
    font-size: 20px;
}

.news_link:after {
    content: "";
    width: 100%;
    height: 6px;
    background: #CCC;
    position: absolute;
    left: 0;
    top: 38px;
}

.news_fly {
    width: 1280px;
    margin: 0 auto;
    max-width: 90%;
}

.news_fly ul li {
    width: 31.3%;
    margin-right: 2%;
    position: relative;
    margin-bottom: 36px;
    background: #FFF;
    display: inline-block;
    vertical-align: top;
    padding: 1.5%;
}

.news_fly .img_box {
    width: 100%;
    height: 0;
    padding-bottom: 44%;
    position: relative;
}

.news_fly ul li .img_box {
    background: url(../img/news_img2.jpg?v=20171013)no-repeat;
}

.news_fly ul li:nth-child(1) .img_box {
    background: url(../img/news_img.jpg?v=20171015)no-repeat;
}

.news_fly .img_box:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 0;
    padding-bottom: 44%;
    background: rgba(144, 144, 144, 0.26);
}

.news_fly .img_box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 0;
    padding-bottom: 44%;
    /*    background: url(../img/n.png)no-repeat center bottom;*/
}

.news_fly ul li:nth-child(2) {
    margin-right: 0;
}

.news_fly ul li:nth-child(5) {
    margin-right: 0;
}

.news_fly ul li:nth-child(8) {
    margin-right: 0;
}

.news_fly ul li:nth-child(11) {
    margin-right: 0;
}

.news_fly ul li:nth-child(1) {
    width: 64.95%;
}

.news_fly ul li:nth-child(1) .img_box {
    padding-bottom: 20.1%;
}

.news_fly ul li:nth-child(1) .img_box:after {
    padding-bottom: 20.1%;
}

.news_fly ul li:nth-child(1) .news_p2 {
    height: 81px;
    overflow: hidden;
}

.news_fly ul li:nth-child(1) .img_box:before {
    padding-bottom: 20.1%;
}

.news_p {
    position: relative;
    margin-top: 34px;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
}

.news_p h2 {
    font-size: 18px;
    margin-bottom: 10px;
    width: 100%;
    height: 27px;
    overflow: hidden;
}

.time_box {
    font-size: 12px;
    color: #7e7e7e;
    margin-bottom: 10px;
    display: block;
}

.news_p2 {
    width: 100%;
    height: 81px;
    overflow: hidden;
    font-size: 16px;
    color: #666666;
    line-height: 28px;
    margin-bottom: 34px;
}

.news_more {
    padding-top: 10px;
    border-top: #d2d2d2 solid 1px;
    font-size: 14px;
    color: #9c9c9c;
}


/*投資人關係*/

.investor_menu {
    padding: 20px 0;
    display: block;
    width: 1280px;
    max-width: 90%;
    margin: 60px auto;
    border-top: #DDDDDD solid 1px;
    border-bottom: #DDDDDD solid 1px;
}

.investor_menu li a {
    font-size: 17px;
    color: #999999;
    font-weight: border;
}

.investor_menu li {
    float: left;
    margin-right: 30px;
}

.investor_menu li a.active {
    color: #0070af;
}

.c1280 {
    width: 1280px;
    margin: 0 auto;
    max-width: 90%;
}

.crumb2 {
    float: right;
    margin-top: 20px;
}

.crumb2 li {
    float: left;
    color: #0070af;
}

.crumb2 li a {
    float: left;
    color: #0070af;
}

.crumb2 li.nowOn {
    color: #333;
}


/*公司治理*/

.gover_box {
    width: 1280px;
    margin: 0 auto;
}

.gover_box li {
    position: relative;
    width: 48%;
    float: left;
    margin-right: 2%;
    margin-bottom: 50px;
}

.gover_box li:nth-child(2n) {
    margin-right: 0;
}

.gover_box .img_box {
    width: 606px;
    height: 0;
    padding-bottom: 50%;
}

.gover_h2 {
    font-size: 26px;
    position: absolute;
    left: 0;
    top: 0;
    width: 232px;
    height: 307px;
    background: rgba(0, 112, 175, 0.8);
    color: #FFF;
    padding: 111px 0;
    text-align: center;
}

.gover_box .icon_img {
    width: 46px;
    height: 42px;
    margin: 0 auto 20px auto;
}

.text_box {
    width: 100%;
    line-height: 30px;
}

.text_box strong {
    font-weight: bolder;
}

.pro_p.text_h2 {
    padding-bottom: 30px;
}

.news_next {
    width: 1280px;
    margin: 0 auto 64px;
    max-width: 90%;
}

.news_next li {
    font-size: 16px;
    padding: 15px 0;
}

.news_next li:nth-child(1) {
    border-bottom: #CCC solid 1px;
}

.news_next li span {
    color: #0070af;
}

.news_back {
    width: 1280px;
    margin: 0 auto;
    max-width: 90%;
}

.news_back a span {}

.news_back a i {
    float: right;
    margin-top: 17px;
}

.news_th2 {
    text-align: center;
    font-size: 18px;
    width: 1280px;
    max-width: 90%;
    margin: 0 auto;
    padding-bottom: 23px;
    border-bottom: #CCC solid 1px;
}

.news_back a {
    width: 178px;
    height: 52px;
    background: #0070af;
    color: #FFF;
    margin-bottom: 34px;
    padding: 0 20px;
    line-height: 52px;
    float: right;
    font-size: 18px;
    text-align: center;
}

.text_box.news_text_box {
    line-height: 30px;
    width: 1280px;
    margin: 0 auto 64px auto;
    max-width: 90%;
}

.contact_box {
    width: 970px;
    margin: 64px auto;
    max-width: 90%;
}

.contact_box ul li {
    width: 48%;
    margin-right: 2%;
    float: left;
    margin-bottom: 27px;
}

.contact_box ul li:nth-child(1) {
    width: 100%;
    float: none;
}

.contact_box ul li:nth-child(8) {
    width: 100%;
    float: none;
}

.contact_box ul li p {
    font-style: 26px;
    color: #666666;
    font-weight: bolder;
    margin-bottom: 5px;
}

.contact_se {
    width: 100%;
    border: #DDDDDD solid 1px;
}

.contact_box ul li select {
    width: 100%;
}

.contact_box ul li select {
    text-align: left;
    font-size: 15px;
    padding: 16px 8px;
    width: 100%;
    border: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/fin02.jpg) 98% 50% no-repeat;
}

.contact_box ul li select:focus {
    outline: none;
}

.contact_box ul li input {
    padding: 0 10px;
    width: 100%;
    border: #DDDDDD solid 1px;
    height: 53px;
}

.contact_box ul li textarea {
    width: 100%;
    border: #DDDDDD solid 1px;
    height: 194px;
}

.contact_box ul li a {
    padding: 15px 0;
    display: block;
    width: 100%;
    color: #FFF;
    background: url(../img/smalleft.png) #0070AF 90% 50% no-repeat;
    text-align: center;
    font-size: 16px;
}

.contact_box ul li a:hover {
    color: #FFF;
}

.contact_box ul li:nth-child(9) input {
    width: 50%;
    float: left;
    margin-right: 18px;
}

.contact_box ul li img {
    float: left;
    margin-top: 15px;
}

.contact_bg {
    width: 100%;
    background: #F1F1F1;
}

.map_box {
    width: 1280px;
    margin: 0 auto 64px auto;
    max-width: 90%;
}

.map_box li {
    overflow: hidden;
    width: 100%;
    margin-bottom: 5%;
}

/*標示*/
.map_marked {
    position: absolute;
    left: 42%;
    bottom: 22%;
    font-size: 8em;
    z-index: 999999;
    display: block;
    color: #f5554a;
    text-shadow: 2px -3px 0px #212121;
    transition: .5s;
    text-align: center;
}

.map_marked p {
    font-size: 13px;
    text-shadow: none;
    color: #963933;
}

.map_marked:hover {
    color: #f5554a !important;
    text-shadow: 5px -4px 0px #212121;
    transition: .5s;
    font-size: 9em;
}

/*左邊圖片*/

.map_box li div.img_box {
    width: 50%;
    float: left;
    height: 321px;
}


/*聯絡我們 公司右邊文字*/

.map_box li div.map_text {
    background: #FFF;
    width: 50%;
    float: left;
    height: 321px;
    padding: 70px 0px 0px 30px;
}

.map_box li.other div.map_text {
    height: 445px;
}

.map_box li.other div.img_box {
    height: 445px;
    background-size: auto 100% !important;
}

.map_box li div.map_text a {
    color: #333;
}

.map_text {
    width: 514px;
    line-height: 28px;
}

.map_text h2 {
    font-size: 16px;
    color: #0070AE;
    margin-bottom: 17px;
}

.map_text h3 {
    font-size: 26px;
    color: #666666;
    margin-bottom: 20px;
    line-height: 33px;
}

.map_text p {
    font-size: 16px;
    color: #666666;
}

.photo_box {
    width: 1280px;
    margin: 0 auto 64px auto;
    max-width: 90%;
}

.photo_box div a {
    float: left;
    width: 23%;
    margin: 0 2% 20px 0;
    display: block;
}

.photo_box div a img {
    width: 100%;
}

.fi_list {
    width: 984px;
    margin: 0 auto;
    max-width: 90%;
    text-align: center;
}

.fi_list li {
    width: 150px;
    float: left;
    display: block;
    margin-bottom: 80px;
    margin-right: 13%;
}

.fi_list li:nth-child(4n) {
    margin-right: 0;
}

.fi_list li:nth-child(4n+1) {
    clear: both;
}

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

.fi_list li a img {
    width: 150px;
    margin: 0 auto;
    max-width: 100%;
}

.fi_list li h3 {
    font-size: 18px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: #EEE solid 1px;
    line-height: 28px;
}


/*財務資訊*/

.content.fin_1280 {
    width: 1280px;
    margin: 0 auto;
    max-width: 90%;
}

.fin_table {
    width: 100%;
    display: block;
    background: #e5f8ff;
}

.fin_table li {
    width: 20%;
    float: left;
    height: 50px;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    border-right: #f9f9f9 solid 1px;
}

.fin_table.fin_table1 {
    background: #FFF;
}

.institutional {
    width: 100%;
}

.institutional li {
    display: inline-block;
    float: left;
    height: 50px;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    border-right: #f9f9f9 solid 1px;
}

.institutional li:nth-child(1) {
    width: 20%;
}

.institutional li:nth-child(2) {
    width: 80%;
}

.institutional_t {
    width: 100%;
    display: block;
    background: #e5f8ff;
}

.institutional_list li {
    width: 100%;
    border-bottom: #EEE solid 1px;
}

.institutional_list li a {
    display: block;
    padding: 20px 2%;
    font-size: 16px;
}

.institutional_list li time {
    width: 19%;
    display: inline-block;
    text-align: center;
}

.institutional_list li div {
    padding-left: 20px;
    width: 80%;
    display: inline-block;
}

.institutional_list li div img {
    display: inline-block;
    margin-right: 2%;
}

.fin_table.fin_table1 li {
    border-right: #EEE solid 1px;
    height: 60px;
    vertical-align: middle;
    line-height: 55px;
}

.fin_table1 li a {
    display: inline-block;
    width: 100%;
    padding: 0 20px;
    vertical-align: middle;
}

.fin_table1 li img {
    display: inline-block;
    vertical-align: middle;
}

.fin_table1:nth-child(odd) {
    background: #f9f9f9;
}

.fin_table li:last-child,
.fin_table1 li:last-child {
    border-right: 0;
}

.fin_table1 {
    border-bottom: #EEE solid 1px;
}

.fin_table1 li a:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}


/*營業額*/

.fin_table.turnover li:nth-child(1) {
    width: 20%;
}

.fin_table.turnover li:nth-child(2) {
    width: 80%;
}


/*股利資訊*/

.fin_table.top_title_a {
    background: none;
}

.top_title_a li {
    width: 25%;
    border: 0;
    background: none;
    font-size: 14px;
}

.fin_table.dividend li {
    width: 25%;
    border-bottom: #EEE solid 1px;
}

.fin_table.dividend li:last-child {
    background: #f9f9f9;
}

.fin_table.fin_table1.dividend li {
    width: 25%;
    border-bottom: 0;
}

.fin_table.fin_table1.dividend i {
    display: none;
}

.fin_table1.dividend:nth-child(odd) {
    background: #FFF;
}


/*投資人問與答集*/

#qaContent {
    width: 100%;
}

#qaContent h3 {
    width: 100%;
    height: 22px;
    text-indent: -9999px;
}

#qaContent ul.accordionPart {
    width: 100%;
}

#qaContent ul.accordionPart li {
    border-bottom: solid 1px #e3e3e3;
}

#qaContent ul.accordionPart li .qa_title {
    /*background: url(../img/q.png) no-repeat 11px 17px;*/
    padding-left: 60px;
    cursor: pointer;
    font-weight: bolder;
}

.qa_number {
    display: inline-block;
    width: 35px;
    height: 35px;
    /*border: #CCC solid 1px;*/
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    border-radius: 30px;
    background: #e5f8ff;
    margin-left: -60px;
}


#qaContent ul.accordionPart li .qa_title_on {
    text-decoration: underline;
}

#qaContent ul.accordionPart li .qa_content {
    margin: 6px 0 0;
    background: #F3F3F3;
    padding: 2% 0 2% 40px;
}

.qa_title {
    color: #4f4f4f;
    font-size: 16px;
    padding: 23px 0;
}

.qa_content {
    font-size: 16px;
}


/*頁*/

.number_box {
    width: 1280px;
    max-width: 90%;
    margin: 80px auto;
    display: block;
    text-align: center;
}

.number_box.number_box2 {
    padding-left: 20%;
}

.number_box li {
    display: inline-block;
    vertical-align: top;
}

.number_box li a {
    display: block;
    padding: 0 8px;
    font-size: 14px;
}


/*人力招募*/

.recruit_img {
    width: 100%;
    position: relative;
}

.recruit_img>img {
    width: 100%;
}

.r_p1 {
    position: absolute;
    left: 0;
    top: 82%;
    margin-bottom: 167px;
    width: 100%;
    padding: 0 10%;
    z-index: 999;
}

.r_p1 p {
    font-size: 73px;
    color: #FFF;
    width: 78%;
}

.train_an {
    position: absolute;
    right: 5%;
    top: 3%;
    width: 46%;
}

.train_an img {
    width: 100%;
}

.train_ani {
    position: relative;
}

.train_1 {
    width: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

.train_1 img {
    width: 100%;
}

.train_1 {
    -webkit-animation: animate3 2s infinite ease-out;
    -moz-animation: animate3 2s infinite ease-out;
    -o-animation: animate3 2s infinite ease-out;
    animation: animate3 2s infinite ease-out;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.ani1 {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-animation: animate2 .5s 1 linear;
    -moz-animation: animate2 .5s 1 linear;
    -o-animation: animate2 .5s 1 linear;
    animation: animate2 .5s 1 linear;
    animation-delay: 0.5s;
}

.ani2 {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-animation: animate2 .5s 1 linear;
    -moz-animation: animate2 .5s 1 linear;
    -o-animation: animate2 .5s 1 linear;
    animation: animate2 .5s 1 linear;
    animation-delay: 1s;
}

.ani1.active,
.ani2.active {
    filter: alpha(opacity=100);
    opacity: 1;
}

@-webkit-keyframes animate2 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    to {
        filter: alpha(opacity=100);
        opacity: 1;
    }
}

@-moz-keyframes animate2 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    to {
        filter: alpha(opacity=100);
        opacity: 1;
    }
}

@-o-keyframes animate2 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    to {
        filter: alpha(opacity=100);
        opacity: 1;
    }
}

@keyframes animate2 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    to {
        filter: alpha(opacity=100);
        opacity: 1;
    }
}

@-webkit-keyframes animate3 {
    0% {
        filter: alpha(opacity=30);
        opacity: 0.3;
    }

    50% {
        filter: alpha(opacity=50);
        opacity: 0.5;
    }

    80% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

    100% {
        filter: alpha(opacity=20);
        opacity: 0.2;
    }
}

@-moz-keyframes animate3 {
    0% {
        filter: alpha(opacity=30);
        opacity: 0.3;
    }

    50% {
        filter: alpha(opacity=50);
        opacity: 0.5;
    }

    80% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

    100% {
        filter: alpha(opacity=20);
        opacity: 0.2;
    }
}

@-o-keyframes animate3 {
    0% {
        filter: alpha(opacity=30);
        opacity: 0.3;
    }

    50% {
        filter: alpha(opacity=50);
        opacity: 0.5;
    }

    80% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

    100% {
        filter: alpha(opacity=20);
        opacity: 0.2;
    }
}

@keyframes animate3 {
    0% {
        filter: alpha(opacity=30);
        opacity: 0.3;
    }

    50% {
        filter: alpha(opacity=50);
        opacity: 0.5;
    }

    80% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

    100% {
        filter: alpha(opacity=20);
        opacity: 0.2;
    }
}


/*人才招募-第二區塊*/

.recruit_2 {
    width: 100%;
    background: url(../img/recruit/06.png)no-repeat 0 248px #54c1e8;
    position: relative;
    background-size: 100%;
    margin-top: -1px;
}

.r2 {
    width: 100%;
}

.r2_p {
    width: 30%;
    position: absolute;
    top: 0%;
    right: 11%;
}

.r2_p img {
    width: 100%;
}

.r2_orange {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 288px;
    background: #ffa018;
    transform-origin: bottom;
    transform: skewX(-84deg);
}

.r2_104 {
    position: absolute;
    top: 18%;
    right: 14%;
}

.r2_img {
    width: 100%;
    margin-top: 100px;
}


/*人才招募-第三區塊*/

.recruit_3 {
    width: 100%;
    background: #ffa018;
    position: relative;
    z-index: 999;
}

.recruit_h2 {
    width: 996px;
    padding: 0 5%;
    max-width: 90%;
    padding-top: 20px;
    color: #FFF;
    float: right;
}

.recruit_h2 span {
    display: block;
}

.recruit_h2_p1 {
    font-size: 43px;
}

.recruit_h2_p2 {
    font-size: 26px;
    font-weight: normal;
}

.recruit_3_right {
    float: left;
    width: 666px;
}

.recruit_3_img {
    width: 19px;
    height: 103px;
    float: left;
    margin-right: 2%;
    margin-top: 20px;
    margin-bottom: 50px;
}

.recruit_3_show {
    width: 1000px;
    margin: 0 auto;
    max-width: 80%;
}

.recruit_3bg {
    width: 100%;
    height: 296px;
    background: url(../img/recruit/r3.jpg)no-repeat;
    background-size: 100%;
    margin-top: -16%;
}

.recruit_3_show .owl-theme .owl-dots .owl-dot span {
    width: 20px;
    height: 20px;
    background: none;
    border: #ffa018 solid 2px;
}

.recruit_3_show .owl-theme .owl-dots .owl-dot.active span,
.recruit_3_show .owl-theme .owl-dots .owl-dot:hover span {
    background: #ffa018;
}

.recruit_3_show .owl-theme .owl-controls {
    margin-top: 20px;
}

.recruit_3_green {
    background: #8dc556;
    width: 100%;
    height: 287px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    transform-origin: bottom;
    transform: skewX(84deg);
}


/*人才招募-第四區塊*/

.recruit_4 {
    position: relative;
    width: 100%;
    background: #8dc556;
}

.recruit_4_right {
    margin-left: 5%;
    color: #FFF;
}

.recruit_4_right.recruit_h2 {
    float: left;
    margin-bottom: 14px;
    margin-top: 14px;
}

.zebra {
    position: absolute;
    right: 5%;
    top: -143px;
    z-index: 999;
    width: 40%;
}

.zebra img {
    width: 100%;
}

.recruit_4_green {
    width: 100%;
    background: #abd483;
    padding: 24px 0;
    color: #FFF;
}

.recruit_4_green h2 {
    font-size: 43px;
    font-weight: bolder;
    display: inline-block;
    margin-right: 5%;
}

.recruit_4_green h3 {
    line-height: 54px;
    font-size: 26px;
    display: inline-block;
    vertical-align: top;
}

.r4_104 {
    width: 283px;
    position: relative;
    z-index: 5;
    height: 111px;
    background: #ffb400;
    display: block;
    text-align: center;
    padding: 25px 0;
    border-radius: 10px;
    box-shadow: -3px 10px 0px -3px #986b00;
    margin-top: 50px;
    max-width: 100%;
}

.r4_104 p {
    font-size: 26px;
    color: #FFF;
}

.r4_104 img {
    width: 80%;
    display: inline-block;
    margin-bottom: 5px;
}

.recruit_4_p {
    width: 80%;
    margin: 0 auto;
}

.r4_104:hover {
    background: #986b00;
    box-shadow: none;
}

.r4_yello {
    width: 100%;
    height: 312px;
    background-size: 100%;
    padding-bottom: 16.4%;
    position: absolute;
    left: 0;
    bottom: 0px;
    background: url(../img/recruit/11.png);
}


/*人才招募-第五區塊*/

.recruit_5 {
    width: 100%;
    height: 217px;
    background-size: 100%;
    position: relative;
    background: url(../img/recruit/11.png) 0% bottom no-repeat;
}

.r5_people {
    width: 30%;
    height: 0;
    padding-bottom: 40.5%;
    background: url(../img/recruit/13.png)no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
}

.r5_p {
    color: #3a3a3a;
    padding: 0 10%;
    vertical-align: middle;
    text-align: center;
}

.r5_p img {
    display: inline-block;
    width: 154px;
    margin-right: 2%;
    margin-top: 2%;
}

.r5_p div {
    display: inline-block;
    margin-top: 4%;
    vertical-align: top;
}

.r5_p div h2 {
    font-size: 43px;
    font-weight: bolder;
}

.r5_p div h3 {
    line-height: 26px;
    font-size: 26px;
    font-weight: bolder;
}

.r5_p2 {
    width: 100%;
    height: 74px;
    background: #efd000;
    text-align: center;
    font-size: 26px;
    padding: 20px 0;
    font-weight: bolder;
    color: #272727;
    z-index: 5;
}


/*人才招募-第六區塊*/

.recruit_6 {
    background: #e8d768;
}

.r6_01 {
    width: 100%;
    padding: 14px 0;
    background: #efd000;
}

.r6_01 ul {
    width: 1100px;
    max-width: 90%;
    padding: 0 10%;
    text-align: center;
    margin: 0 auto;
}

.r6_01 ul li {
    text-align: center;
    width: 48%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.r6_01 ul li img {
    width: 300px;
    display: inline-block;
}

.r6_01 ul li h2 {
    font-size: 43px;
    font-weight: bolder;
}

.r6_01 ul li h3 {
    line-height: 39px;
    font-size: 26px;
}

.recruit_4_p.r6_104 {
    margin: 20px auto 25px auto;
}

.r6_104 .r4_104 {
    margin: 0 auto;
}

.r6_bg {
    width: 100%;
    padding-bottom: 7%;
    background: url(../img/recruit/16.png)no-repeat;
    background-size: 100%;
}


/*人才招募-第七區塊*/

.recruit_7 {
    width: 100%;
    position: relative;
}

.recruit_7_bg {
    width: 100%;
    position: relative;
    padding-bottom: 15.5%;
    background: url(../img/recruit/16.png)0px bottom no-repeat;
    background-size: 100%;
}

.r7_people {
    position: absolute;
    right: 0;
    top: -64%;
    background: url(../img/recruit/17.png)no-repeat;
    width: 25%;
    float: right;
    height: 0;
    padding-bottom: 38.4%;
    background-size: 100%;
}

.r7_title {
    width: 100%;
    text-align: center;
    font-size: 43px;
    font-weight: bolder;
    position: absolute;
    left: 0;
    top: 48%;
    transform: translateY(-40%);
    color: #FFF;
}

.r7_allbox {
    width: 100%;
    background: #fbca74;
    text-align: center;
}

.r7_allbox h2 {
    font-size: 43px;
    font-weight: bolder;
    width: 734px;
    max-width: 90%;
    margin: 14px auto 0px auto;
    position: relative;
    z-index: 9;
}

.r7_allbox p {
    position: relative;
    z-index: 9;
    font-size: 26px;
    display: block;
    width: 734px;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

.r7_01 {
    width: 100%;
    position: relative;
    line-height: 54px;
}

.brown_color {
    color: #654000;
}

.r7_01 img {
    width: 158px;
    float: left;
    margin-top: 20px;
}

.r7_01.r7_02 {
    background: #ef9800;
    color: #FFF;
}

.r7_01.r7_02 img {
    float: right;
    margin-right: 5px;
}

.r7_01.r7_03 img {
    position: absolute;
    left: 5%;
    top: 10%;
}

.recruit_3_show.r7_03 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.r7_01.r7_04 {
    background: #ef9800;
    color: #FFF;
}

.r7_01.r7_04 img {
    float: right;
    margin-right: 5px;
}


/*人才招募-第八區塊*/

.recruit_8 {
    width: 100%;
    background: #fbca74;
}

.recruit_8>h2 {
    font-size: 45px;
    text-align: center;
    margin: 14px 0;
}

.r8_t {
    float: right;
    width: 45%;
    font-size: 35px;
}

.r8_t h2 {
    font-weight: bolder;
    position: relative;
    z-index: 5;
}

.r8_t p {
    line-height: 39px;
    position: relative;
    z-index: 5;
    font-size: 26px;
}

.r8_01 {
    width: 100%;
    padding: 0 10% 44px 10%;
    position: relative;
}

.r8_01>img {
    width: 28%;
    float: left;
    margin-right: 2%;
}

.r8_de {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25%;
}

.r8_de img {
    width: 100%;
}

.r8_01.r8_02,
.r8_01.r8_04,
.r8_01.r8_06 {
    color: #FFF;
    background: #ef9800;
    padding-top: 44px;
}


/*.r8_01.r8_02>img,.r8_01.r8_04>img{ width: 28%; float: right; margin-left: 2%;}*/

.r8_02 .r8_de,
.r8_04 .r8_de {
    position: absolute;
    left: 0;
    bottom: 0;
}

.r8_01.r8_03,
.r8_01.r8_05,
.r8_01.r8_06 {
    padding-top: 5%;
}

.r8_02 .r8_de {
    width: 19%;
}

.r8_03 .r8_de {
    width: 22%;
}

.r8_04 .r8_de {
    width: 32%;
}

.r8_05 .r8_de {
    width: 19%;
}

.r8_06 {
    position: relative;
}

.r8_t {
    float: left;
    margin-right: 2%;
}

.r8_06 .r8_t:nth-child(2) {
    float: right;
}

.r8_06_bor {
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 2%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.r8_06_bor div {
    width: 1px;
    height: 800px;
    z-index: 6;
    background: #fbca74;
    margin: 0 auto;
}

.r8_06 .r8_de {
    width: 100%;
    text-align: center;
    bottom: -3px;
}

.r8_06 .r8_de img {
    width: 23%;
    display: inline-block;
}


/*人才招募-第九區塊*/

.recruit_9 {
    width: 100%;
    background: #3fafdf;
}

.r9_01 {
    width: 100%;
    padding: 14px 0% 14px 0%;
    position: relative;
    color: #FFF;
}

.r9_01 img {
    float: right;
    width: 166px;
}

.r9_01.r9_02 {
    background: #54c1e8;
}

.r8_t.r9_t {
    margin-top: 1%;
    float: left;
    padding-left: 10%;
    width: 60%;
    position: relative;
    display: inline-block;
}

.r9_01.r9_02 img {
    float: left;
}

.r9_02 .r8_t {
    float: right;
}

.r9_green {
    width: 100%;
    height: 0;
    padding-bottom: 7%;
    background: url(../img/recruit/31.png)no-repeat;
    background-size: 100%;
}


/*人才招募-第十區塊*/

.recruit_10 {
    background: #abd483;
}

.r10_bg {
    width: 100%;
    background: url(../img/recruit/31.png)no-repeat 0 bottom;
    background-size: 100%;
    padding-bottom: 15.2%;
    position: relative;
}

.r10_people {
    width: 40%;
    background: url(../img/recruit/32.png)no-repeat;
    background-size: 100%;
    padding-bottom: 31.4%;
    position: absolute;
    right: 0;
    top: -35%;
}

.r10_01 {
    padding: 14px 10%;
    text-align: center;
    position: relative;
}

.r10_01 ul li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 236px;
    height: 236px;
    margin-right: 2%;
    background: #8dc556;
    color: #FFF;
    border-radius: 236px;
    margin-right: 97px;
}

.r10_01 ul li:nth-child(3) {
    margin-right: 0;
}

.r10_01 ul li:after {
    content: "";
    position: absolute;
    right: -76px;
    top: 42%;
    background: url(../img/recruit/33.png)no-repeat;
    width: 48px;
    height: 86px;
    background-size: 100%;
}

.r10_01 ul li:nth-child(3):after {
    display: none;
}

.r10_01 ul li h2 {
    font-size: 43px;
    font-weight: bolder;
    margin-top: 78px;
}

.r10_01 ul li p {
    font-size: 26px;
    font-weight: normal;
}

.r10_1_bg {
    width: 100%;
    height: 203px;
    background: #8dc556;
    transform-origin: bottom;
    transform: skewX(-84deg);
}

.r10_02 {
    background: #8dc556;
    color: #FFF;
}

.r10_02>ul {
    text-align: center;
    width: 100%;
    padding-top: 14px;
}

.r10_02>ul>li {
    margin-right: 5%;
    display: inline-block;
    position: relative;
    text-align: center;
}

.r10_02>ul>li>img {
    display: inline-block;
}

.r10_02>ul>li>h2 {
    font-size: 43px;
    font-weight: bolder;
}

.r10_02>ul>li>p {
    font-size: 36px;
    font-weight: normal;
}

.r10_fly {
    background: #abd483;
    color: #FFF;
    font-size: 36px;
    font-weight: normal;
    position: absolute;
    left: -62%;
    bottom: -54%;
}

.r10_fly ul {
    position: relative;
    padding: 33px 0;
    display: block;
    text-align: center;
    background: #abd483;
    width: 500px;
}

.r10_fly ul:after {
    content: "";
    position: absolute;
    left: 42%;
    top: -39px;
    background: url(../img/recruit/36.png) no-repeat;
    width: 59px;
    height: 75px;
    background-size: 100%;
}

.r10_fly ul li {
    display: inline-block;
    margin-right: 5%;
    text-align: left;
}

.r10_fly ul li:nth-child(2) {
    margin-right: 0;
}

.r10_fly ul li p {
    font-size: 26px;
}


/*招募 按鈕*/

.fly_button {
    width: 121px;
    position: fixed;
    right: -20px;
    z-index: 99999;
    bottom: 50px
}

.fly_button ul {
    display: block;
    width: 100%;
}

.fly_button ul li {
    width: 100%;
    display: block;
}

.fly_button ul li a {
    font-size: 22px;
    color: #FFF;
    background: #0270af;
    display: block;
    width: 100%;
    padding: 20px 25px;
}

.fly_button ul li {
    background: #024063;
    padding-left: 10px;
}

.fly_button ul li:nth-child(2) {
    background: #968300;
}

.fly_button ul li:nth-child(2) a {
    background: #ffde00;
    color: #333;
}

.fly_button ul li:nth-child(3) {
    background: #0f6f02;
}

.fly_button ul li:nth-child(3) a {
    background: #16af02;
}

.fly_button ul li:nth-child(4) {
    background: #b4035a;
}

.fly_button ul li:nth-child(4) a {
    background: #7e003e;
}

.red {
    color: #d53302;
}

.map_contact {
    width: 90%;
    position: relative;
    overflow: hidden;
    min-height: 1000px;
    background: #e9eef4;
    margin: 0 auto;
}

/*聯絡我們 漂浮的地圖*/
.map_fly_map {
    width: 100%;
    position: absolute;
    left: 0%;
    bottom: 0;
}

.map_fly_map div {
    position: relative;
    width: 100%;
}

/*聯絡我們 漂浮的地圖*/
.map_fly_map img {
    width: 100%;
}


.map_p {
    position: relative;
    z-index: 10;
    margin-top: 65px;
    width: 40%;
    padding-right: 5%;
    float: right;
}

.map_p h2 {
    font-size: 20px;
}

.map_p h2 img {
    display: inline-block;
    margin-right: 20px;
    width: 80px;
}

.map_p h2 span {
    font-weight: bolder;
    display: inline-block;
    vertical-align: top;
}

.map_p h3 {
    width: 259px;
    max-width: 100%;
    font-weight: normal;
    font-size: 16px;
    background: #2d9ede;
    color: #FFF;
    padding: 5px 10px;
    text-align: center;
}

.map_p p {
    font-size: 16px;
    font-weight: normal;
    line-height: 36px;
}

.map_p h3.bus {
    width: 106px;
}

.map_contact a:hover {
    color: #333;
}


/*產品區的編輯器*/

.pro_text_90 {
    width: 1280px;
    max-width: 90%;
    padding: 10px 0;
    margin: 0 auto;
}


/*人力資源修*/

.recruit_4_p.r2 {
    float: right;
    width: auto;
}

/*編及區專用 表格*/

.table_text {
    width: 80%;
    margin: 0 auto;
}

.table_text td {
    font-size: 16px;
    line-height: 33px;
}

.table_text tbody {
    width: 100%;
}

h2.big_h2 {
    font-size: 26px;
    margin: 20px 0;
    text-align: center;
    color: #666;
}

.text_box img {
    display: inline-block;
    max-width: 100%;
}

.text_box ol li {
    list-style: decimal;
    margin-left: 25px;
}

h2.gray_h2 {
    color: #666666;
    font-size: 26px;
}

/*首頁點點*/
.pro_show .owl-dots {
    filter: alpha(opacity=0);
    opacity: 0;
}

/*返回*/
.back20171011 {
    width: 200px;
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
    display: block;
    background: #EEE;
    margin: 50px auto;
    border-radius: 5px;
    cursor: pointer;
}

/*新的地圖*/
.map2018 {
    width: 1200px;
    margin: 0 auto 100px auto;
    display: block;
}

.map2018 li {
    padding: 1.5%;
    display: inline-block;
    vertical-align: top;
    background: #FFF;
    height: 0;
    padding-bottom: 30%;
}

.map2018 li:nth-child(1) {
    background: #f9f9f9;
    width: 450px;
}

.map2018 li:nth-child(2) {
    width: calc(100% - 455px);
    background-size: 100% !important;
    position: relative;
}

.h1 {
    width: 100%;
    margin: 23px 0;
    line-height: 1.7vw;
}

.h1, .h2 {
    display: block;
    margin-bottom: 23px;
}

.h1 img {
    display: inline-block;
    vertical-align: middle;
    width: 69px;
}

.h1 span {
    vertical-align: middle;
    font-size: 16px;
    font-weight: bold;
}

.h2 {
    width: 100%;
    line-height: 28px;
}

.topmap .h2 {
    padding-left: 20px;
}

.h2 p {
    width: 69px;
    height: 34px;
    background: #2d9ede;
    text-align: center;
    color: #FFF;
    padding: 3px 0;
}

.h2 span {
    font-size: 16px;
    position: relative;
}

.h2 span:after {
    z-index: 1;
    position: absolute;
    /*width: 5px;
    height: 5px;
    border-radius: 50%;*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #aaa;
    content: "";
    top: 7px;
    left: -15px;
}

.topmap {
    margin-top: 40%;
    transform: translateY(-50%);
}

.map2018 li.phone {
    display: none;
}

.map2018 li.phone .topmap {
    margin-top: 0;
    transform: translateY(0%);
}

.map2018 li .icon-location {
    font-size: 6.5vw;
    color: #f5554a;
    text-shadow: 2px -3px 0px #212121;
    transition: .5s;
}

.map2018 li .icon-location:hover {
    color: #f5554a !important;
    text-shadow: 5px -4px 0px #212121;
    transition: .5s;
    font-size: 9vw;
    transition: .5s;
}

.map2018 li a p {
    font-size: 12px;
    color: #c32e24;
    font-weight: bolder;
    width: 157px;
}

.flymap {
    position: absolute;
    bottom: 34%;
    left: 42%;
    display: block;
}

.i_video {
    width: 100%;
    background-color: #e2f0f5;
    display: flex;
}

.i_video iframe{
    margin: 0 auto;
    max-width: 95%;
    padding: 50px 0;
    width: 700px;
    height: 500px;
    display: block;
}