.ho_splitText span {
    display: inline-block;
}

.ho_slide {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.ho_slide .ho_slide-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ho_slide .slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ho_slide .grad-btm {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;
    pointer-events: none;
    background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
    opacity: .7;
}

.ho_slide .slide {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: #000;
}

.ho_slide .slide.ho_current {
    display: block;
}

.ho_slide .slide.is-loaded {
    opacity: 1;
}

.ho_slide .slide .caption {
    position: absolute;
    left: 50%;
    bottom: 15%;
    width: 100%; 
    text-align: center; 
    -webkit-transform: translateX(-50%) translateY(0);
    -moz-transform: translateX(-50%) translateY(0);
    -ms-transform: translateX(-50%) translateY(0);
    -o-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
}

.ho_slide .slide .caption h1 {
    font: 400 16px/1.3;
    margin-top: 0px;
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0;
}

.ho_slide .slide .caption .ho_magnet {
    padding: 50px 20px 0 20px; 
    display: inline-block;
}

@media screen and (max-width: 540px) {
    .ho_slide .slide .caption {
        bottom: 120px;
    }
}

.ho_slide .slide .caption.right {
    left: auto;
    right: 10%;
    text-align: right;
}

.ho_slide .slide .image-container, .ho_slide .slide .image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    z-index: 1;
    background-size: cover;
    image-rendering: optimizeQuality;
}

.ho_slide .slide .image {
    width: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
    opacity: .8;
}

.ho_slide .slide-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ho_slide .slide .btn {
    display: inline-block;
    border: 1px solid #fff;
    padding: 0px 30px;
    color: #fff;
    font: 400 11px/1.3 "Open Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s ease; line-height:36px;
}

.ho_slide .slide .btn:hover {
    background-color: #fff;
    color: #000;
}

.ho_slide .slide .btn::before {
    background: #fff;
}

.ho_slide .pagination {
    position: absolute;
    left: 10%;
    cursor: default;
    z-index: 2;
    bottom: 10%;
    margin-top: -56px;
}

@media screen and (max-width: 540px) {
    .ho_slide .pagination {
        display: none;
    }
}

.ho_slide .pagination .item {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-indent: -999em;
    z-index: 1;
    margin: 0 15px;
}

.ho_slide .pagination .item + .page {
    margin-left: 0;
}

.ho_slide .pagination .item::before {
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease;
    border-radius: 50%;
}

.ho_slide .pagination .item::after {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: -11px;
    width: 25px;
    height: 25px;
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s ease;
}

.ho_slide .pagination .item:hover::before, .ho_slide .pagination .item.ho_current::before {
    background-color: #fff;
}

.ho_slide .pagination .item:hover::after, .ho_slide .pagination .item.ho_current:hover::after {
    opacity: 1;
    transform: scale(1);
}



@media only screen and (max-width: 480px) {
.ho_slide .slide .caption {position: absolute;bottom: 20%;}
.ho_slide .slide .caption h1 { font-size:17px; font-weight:400; line-height:20px;margin-top: 0px;text-transform: uppercase;margin-bottom: 0;letter-spacing: 5px;}
.ho_slide .slide .caption h3 { margin:30px 0 0 0; padding:0;letter-spacing:2px;}

.banner-more {width:100px; text-align:center; margin:0 auto;}
  .banner-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #fff;text-decoration: none;border:1px solid #f6f6f6; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .banner-more a:hover {border:1 solid #f6f6f6;background-color:#f6f6f6; color:#000;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

.mlink{float:left; width:100%; margin:0; padding:0; line-height:26px;}
  .mlink a{font-size:12px; color: #bbb9b8;text-decoration:none;}
  .mlink a:hover {color: #fff;text-decoration: none;}
.ho_slide {height: 93vh;}  
  
}

@media only screen and (min-width: 481px) {
.ho_slide .slide .caption {position: absolute;bottom: 20%;}
.ho_slide .slide .caption h1 { font-size:17px; font-weight:400; line-height:20px;margin-top: 0px;text-transform: uppercase;margin-bottom: 0;letter-spacing: 5px;}
.ho_slide .slide .caption h3 { margin:30px 0 0 0; padding:0;letter-spacing:2px;}

.banner-more {width:100px; text-align:center; margin:0 auto;}
  .banner-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #fff;text-decoration: none;border:1px solid #f6f6f6; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .banner-more a:hover {border:1 solid #f6f6f6;background-color:#f6f6f6; color:#000;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

.mlink{float:left; width:100%; margin:0; padding:0; line-height:26px;}
  .mlink a{font-size:12px; color: #bbb9b8;text-decoration:none;}
  .mlink a:hover {color: #fff;text-decoration: none;}
.ho_slide {height: 93vh;}  

}

@media only screen and (min-width: 768px) {
.ho_slide .slide .caption {position: absolute;bottom: 20%;}
.ho_slide .slide .caption h1 { font-size:17px; font-weight:400; line-height:20px;margin-top: 0px;text-transform: uppercase;margin-bottom: 0;letter-spacing: 5px;}
.ho_slide .slide .caption h3 { margin:30px 0 0 0; padding:0;letter-spacing:2px;}

.banner-more {width:100px; text-align:center; margin:0 auto;}
  .banner-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #fff;text-decoration: none;border:1px solid #f6f6f6; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .banner-more a:hover {border:1 solid #f6f6f6;background-color:#f6f6f6; color:#000;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

.mlink{float:left; width:100%; margin:0; padding:0; line-height:26px;}
  .mlink a{font-size:12px; color: #bbb9b8;text-decoration:none;}
  .mlink a:hover {color: #fff;text-decoration: none;}
.ho_slide {height: 93vh;}  

}


@media only screen and (min-width: 981px) {
.ho_slide .slide .caption {position: absolute;bottom: 20%;}
.ho_slide .slide .caption h1 { font-size:17px; font-weight:400; line-height:20px;margin-top: 0px;text-transform: uppercase;margin-bottom: 0;letter-spacing: 5px;}
.ho_slide .slide .caption h3 { margin:30px 0 0 0; padding:0;letter-spacing:2px;}

.banner-more {width:100px; text-align:center; margin:0 auto;}
  .banner-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #fff;text-decoration: none;border:1px solid #f6f6f6; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .banner-more a:hover {border:1 solid #f6f6f6;background-color:#f6f6f6; color:#000;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

.mlink{float:left; width:100%; margin:0; padding:0; line-height:26px;}
  .mlink a{font-size:12px; color: #bbb9b8;text-decoration:none;}
  .mlink a:hover {color: #fff;text-decoration: none;}
.ho_slide {height: 93vh;}  
  
}


@media only screen and (min-width: 1281px) {
.ho_slide .slide .caption {position: absolute;bottom: 20%;}
.ho_slide .slide .caption h1 { font-size:17px; font-weight:400; line-height:20px;margin-top: 0px;text-transform: uppercase;margin-bottom: 0;letter-spacing: 5px;}
.ho_slide .slide .caption h3 { margin:30px 0 0 0; padding:0;letter-spacing:2px;}

.banner-more {width:100px; text-align:center; margin:0 auto;}
  .banner-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #fff;text-decoration: none;border:1px solid #f6f6f6; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .banner-more a:hover {border:1 solid #f6f6f6;background-color:#f6f6f6; color:#000;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

.mlink{float:left; width:100%; margin:0; padding:0; line-height:26px;}
  .mlink a{font-size:12px; color: #bbb9b8;text-decoration:none;}
  .mlink a:hover {color: #fff;text-decoration: none;}
.ho_slide {height: 100vh;} 

 
}

@media only screen and (min-width: 1601px) {
.ho_slide .slide .caption {position: absolute;bottom: 30%;}
.ho_slide .slide .caption h1 { font-size:17px; font-weight:400; line-height:20px;margin-top: 0px;text-transform: uppercase;margin-bottom: 0;letter-spacing: 5px;}
.ho_slide .slide .caption h3 { margin:30px 0 0 0; padding:0;letter-spacing:2px;}

.banner-more {width:100px; text-align:center; margin:0 auto;}
  .banner-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #fff;text-decoration: none;border:1px solid #f6f6f6; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .banner-more a:hover {border:1 solid #f6f6f6;background-color:#f6f6f6; color:#000;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

.mlink{float:left; width:100%; margin:0; padding:0; line-height:26px;}
  .mlink a{font-size:12px; color: #bbb9b8;text-decoration:none;}
  .mlink a:hover {color: #fff;text-decoration: none;}
.ho_slide {height: 100vh;} 

 
}


.ho-layout{margin:0;padding:0;list-style:none;font-size:0;margin-left:0;-ms-flex-align:stretch;align-items:stretch}
.ho-layout_item{display:inline-block;width:100%;vertical-align:top;font-size:1rem;padding-left:0;vertical-align:middle;position:relative;width:calc(100% - 10.66667rem);text-align:left;font-family:-apple-system}
.ho-block{position:relative;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}
.ho-block.min{min-height:30rem}
@media (max-width:699px){.ho-block.min{min-height:0;padding-top:3rem}}
.ho-line{position:absolute;display:inline-block;background-color:#969696;z-index:9}
.ho-line.-v{height:5.6rem;width:2px}
@media (max-width:999px){.ho-line.-v{width:1px}}
.ho-line.-tr{top:100px;right:0}
.ho-block_title{width:100%;text-align:left;position:absolute;left:0;top:0}
.ho-block_title.-v{display:inline-block;width:auto;transform:rotate(90deg);transform-origin:bottom left;vertical-align:top;margin-top:-.93333rem}
.ho-block_title.-v>*{transform:rotate(-180deg)}
.ho-block_heading{margin-bottom:5rem}
.ho-block_heading.-v{width:100%;transform:rotate(-90deg);padding-left:20%;margin-bottom:0}
.ho-h2{font-weight:800;margin-top:0;line-height:1.66667}-v,.ho-h2{font-size:4.5vw;line-height:1}
.ho-h_line:before{content:"— "}
.ho-block_text{max-width:19.33333rem; font-family:"微軟正黑體","Microsoft JhengHei","Arial", "Helvetica", "sans-serif"; }
@media (max-width:699px){.ho-block_text{max-width:100%}}
@media (min-width:700px){.u-1{width:50%}}



@media only screen and (max-width: 480px) {
.titlebox{ float:left; width:100%; margin:0; padding:0}
.title-content{width:90%; margin:30px auto 0 auto; padding:0}
.top-title{float:left;width:100%;padding:0; margin:0 0 30px 0;}
.top-title h2{padding:0; margin:0 0 10px 0; font-size:26px; letter-spacing:0}
.top-title.top-title h1.title {margin-bottom:0;text-align: left;font-weight: 400;line-height: 1.1;letter-spacing:1px}
.top-title h1.title span { display: block;font-size:26px; padding-left:4%;color: #111;position: relative;}
.top-title h1.title span:before{content: '';position: absolute; top: 52%; background: #111; width: 3%;height: 2px;}
.top-title h1.title span:before{left: 0;}
.title-tx{float:left; width:100%; margin:0; padding:0; font-size:20px; font-weight:400; line-height:32px;font-family:"Arial", "Helvetica", "sans-serif"; }

/* content */
.index-wrapper{float:left; width:100%; padding:0; margin:0;}
.index-content{width:90%; margin:0 auto 5px auto; padding:0;}
.m-tx{float:left;width:100%; padding:0; margin:0;}
.b-tx{float:left;width:35%; padding:0; margin:2em 0 0 5%;}
.m-pic{float:left;width:100%; padding:0; margin:0;}
.m-pic img{max-width:100%;_width:expression(this.width > 100% ? "100%" : this.width);} 
.mainevent-a{float:left; width:100%; margin:0 0 30px 0; padding:0;}
.mainevent-b{float:left; width:100%; margin:0 0 30px 0; padding:0;}
.title-a{float:left; width:100%; margin:0 0 15px 0; padding:0; font-size:26px; }
.m-stx{float:left;width:100%; padding:0; margin:0 0 15px 0; line-height:30px;text-align:left}

.b-wrapper{float:left; width:100%; padding:50px 0 120px 0; margin:0; background-color:#f6f6f6}
.b-content{width:90%; margin:0 auto; padding:0;}
.ho-block_text{max-width:100%; font-size:16px; line-height:32px;text-align:justify; margin:-20px 0 30px 0}
.ho-h2{font-size:32px;line-height:1.2; margin:100px 0 0 0; height:150px;}
.ho-line{position:absolute;display:inline-block;background-color:#969696;z-index:9;display:none}
.u-1{width:100%; }
.ho-block.min{min-height:20rem}

.vision-more {width:100px; text-align:center; margin:20px 0 0 0; border:0}
  .vision-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 12px; color: #000;text-decoration: none;border:1px solid #c8a063; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .vision-more a:hover {border-top:1 solid #c8a063;background-color:#c8a063; color:#fff;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  
}

@media only screen and (min-width: 481px) {
.titlebox{ float:left; width:100%; margin:0; padding:0}
.title-content{width:90%; margin:50px auto 0 auto; padding:0}
.top-title{float:left;width:100%;padding:0; margin:0 0 40px 0;}
.top-title h2{padding:0; margin:0 0 15px 0; font-size:36px; letter-spacing:0}
.top-title.top-title h1.title {margin-bottom:0;text-align: left;font-weight: 400;line-height: 1.1;letter-spacing:1px}
.top-title h1.title span { display: block;font-size:36px; padding-left:4%;color: #111;position: relative;}
.top-title h1.title span:before{content: '';position: absolute; top: 52%; background: #111; width: 3%;height: 2px;}
.top-title h1.title span:before{left: 0;}
.title-tx{float:left; width:100%; margin:0; padding:0; font-size:20px; font-weight:400; line-height:32px;font-family:"Arial", "Helvetica", "sans-serif"; }

/* content */
.index-wrapper{float:left; width:100%; padding:0; margin:0;}
.index-content{width:90%; margin:0 auto 20px auto; padding:0;}
.m-tx{float:left;width:100%; padding:0; margin:0;}
.b-tx{float:left;width:35%; padding:0; margin:2em 0 0 5%;}
.m-pic{float:left;width:100%; padding:0; margin:0;}
.m-pic img{max-width:100%;_width:expression(this.width > 100% ? "100%" : this.width);} 
.mainevent-a{float:left; width:80%; margin:0 0 40px 20%; padding:0;}
.mainevent-b{float:left; width:80%; margin:0 20% 40px 0; padding:0;}
.title-a{float:left; width:100%; margin:0 0 20px 0; padding:0; font-size:32px; }
.m-stx{float:left;width:100%; padding:0; margin:0 0 30px 0; line-height:30px;text-align:left}

.b-wrapper{float:left; width:100%; padding:50px 0 0 0; margin:0;background-color:#f6f6f6}
.b-content{width:94%; margin:0 auto; padding:0;}
.ho-block_text{max-width:19.33333rem; font-size:16px; line-height:32px;text-align:justify;}
.ho-h2{font-size:40px;line-height:1.1}
.ho-line{position:absolute;display:inline-block;background-color:#969696;z-index:9;display:block}
.ho-block.min{min-height:26rem}
.ho-line.-tr{top:100px;right:0}

.vision-more {width:100px; text-align:center; margin:20px 0 0 0; border:0}
  .vision-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #000;text-decoration: none;border:1px solid #c8a063; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .vision-more a:hover {border-top:1 solid #c8a063;background-color:#c8a063; color:#fff;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

}

@media only screen and (min-width: 768px) {
.titlebox{ float:left; width:100%; margin:0; padding:0}
.title-content{width:90%; margin:50px auto 0 auto; padding:0}
.top-title{float:left;width:100%;padding:0; margin:0 0 40px 0;}
.top-title h2{padding:0; margin:0 0 15px 0; font-size:36px; letter-spacing:0}
.top-title.top-title h1.title {margin-bottom:0;text-align: left;font-weight: 400;line-height: 1.1;letter-spacing:1px}
.top-title h1.title span { display: block;font-size:36px; padding-left:4%;color: #111;position: relative;}
.top-title h1.title span:before{content: '';position: absolute; top: 52%; background: #111; width: 3%;height: 2px;}
.top-title h1.title span:before{left: 0;}
.title-tx{float:left; width:100%; margin:0; padding:0; font-size:20px; font-weight:400; line-height:32px;font-family:"Arial", "Helvetica", "sans-serif"; }

/* content */
.index-wrapper{float:left; width:100%; padding:0; margin:0;}
.index-content{width:90%; margin:0 auto 20px auto; padding:0;}
.m-tx{float:left;width:100%; padding:0; margin:0;}
.b-tx{float:left;width:35%; padding:0; margin:2em 0 0 5%;}
.m-pic{float:left;width:100%; padding:0; margin:0;}
.m-pic img{max-width:100%;_width:expression(this.width > 100% ? "100%" : this.width);} 
.mainevent-a{float:left; width:80%; margin:0 0 40px 20%; padding:0;}
.mainevent-b{float:left; width:80%; margin:0 20% 40px 0; padding:0;}
.title-a{float:left; width:100%; margin:0 0 20px 0; padding:0; font-size:32px; }
.m-stx{float:left;width:100%; padding:0; margin:0 0 30px 0; line-height:30px;text-align:left}

.b-wrapper{float:left; width:100%; padding:50px 0 0 0; margin:0;background-color:#f6f6f6}
.b-content{width:94%; margin:0 auto; padding:0;}
.ho-block_text{max-width:19.33333rem; font-size:16px; line-height:32px;text-align:justify;}
.ho-h2{font-size:42px;line-height:1.1}
.ho-line{position:absolute;display:inline-block;background-color:#969696;z-index:9;display:block}
.ho-block.min{min-height:28rem}
.ho-line.-tr{top:100px;right:0}

.vision-more {width:100px; text-align:center; margin:20px 0 0 0; border:0}
  .vision-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #000;text-decoration: none;border:1px solid #c8a063; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .vision-more a:hover {border-top:1 solid #c8a063;background-color:#c8a063; color:#fff;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  
}


@media only screen and (min-width: 981px) {
.titlebox{ float:left; width:100%; margin:0; padding:0}
.title-content{width:90%; margin:60px auto 0 auto; padding:0}
.top-title{float:left;width:100%;padding:0; margin:0 0 30px 0;}
.top-title h2{padding:0; margin:0 0 15px 0; font-size:40px; letter-spacing:0}
.top-title.top-title h1.title {margin-bottom:0;text-align: left;font-weight: 400;line-height: 1.1;letter-spacing:1px}
.top-title h1.title span { display: block;font-size: 40px; padding-left:4%;color: #111;position: relative;}
.top-title h1.title span:before{content: '';position: absolute; top: 52%; background: #111; width: 3%;height: 2px;}
.top-title h1.title span:before{left: 0;}
.title-tx{float:left; width:100%; margin:0; padding:0; font-size:20px; font-weight:400; line-height:32px;font-family:"Arial", "Helvetica", "sans-serif"; }

/* content */
.index-wrapper{float:left; width:100%; padding:0; margin:0;}
.index-content{width:90%; margin:0 auto 20px auto; padding:0;}
.m-tx{float:left;width:100%; padding:0; margin:0;}
.b-tx{float:left;width:35%; padding:0; margin:2em 0 0 5%;}
.m-pic{float:left;width:100%; padding:0; margin:0;}
.m-pic img{max-width:100%;_width:expression(this.width > 100% ? "100%" : this.width);} 
.mainevent-a{float:left; width:68%; margin:0 0 50px 32%; padding:0;}
.mainevent-b{float:left; width:68%; margin:0 32% 50px 0; padding:0;}
.title-a{float:left; width:100%; margin:0 0 30px 0; padding:0; font-size:38px; }
.m-stx{float:left;width:100%; padding:0; margin:0 0 30px 0; line-height:30px;text-align:left}

.b-wrapper{float:left; width:100%; padding:80px 0 0 0; margin:0;background-color:#f6f6f6}
.b-content{width:90%; margin:0 auto; padding:0;}
.ho-block_text{max-width:19.33333rem; font-size:16px; line-height:32px;text-align:justify;}
.ho-h2{font-size:50px;line-height:1.2}
.ho-line{position:absolute;display:inline-block;background-color:#969696;z-index:9;display:block}
.ho-block.min{min-height:30rem; }
.ho-line.-tr{top:140px;right:0}

.vision-more {width:100px; text-align:center; margin:20px 0 0 0; border:0}
  .vision-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #000;text-decoration: none;border:1px solid #c8a063; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .vision-more a:hover {border-top:1 solid #c8a063;background-color:#c8a063; color:#fff;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

}

@media only screen and (min-width: 1281px) {
.titlebox{ float:left; width:100%; margin:0; padding:0}
.title-content{width:80%; margin:70px auto 0 auto; padding:0}
.top-title{float:left;width:100%;padding:0; margin:0 0 40px 0;}
.top-title h2{padding:0; margin:0 0 15px 0; font-size:40px; letter-spacing:0}
.top-title.top-title h1.title {margin-bottom:0;text-align: left;font-weight: 400;line-height: 1.1;letter-spacing:1px}
.top-title h1.title span { display: block;font-size: 40px; padding-left:4%;color: #111;position: relative;}
.top-title h1.title span:before{content: '';position: absolute; top: 52%; background: #111; width: 3%;height: 2px;}
.top-title h1.title span:before{left: 0;}
.title-tx{float:left; width:100%; margin:0; padding:0; font-size:20px; font-weight:400; line-height:32px;font-family:"Arial", "Helvetica", "sans-serif"; }

/* content */
.index-wrapper{float:left; width:100%; padding:0; margin:0;}
.index-content{width:80%; margin:0 auto 30px auto; padding:0;}
.m-tx{float:left;width:100%; padding:0; margin:0;}
.b-tx{float:left;width:35%; padding:0; margin:2em 0 0 5%;}
.m-pic{float:left;width:100%; padding:0; margin:0;}
.m-pic img{max-width:100%;_width:expression(this.width > 100% ? "100%" : this.width);} 
.mainevent-a{float:left; width:68%; margin:0 0 60px 32%; padding:0;}
.mainevent-b{float:left; width:68%; margin:0 32% 60px 0; padding:0;}
.title-a{float:left; width:100%; margin:0 0 30px 0; padding:0; font-size:38px; }
.m-stx{float:left;width:100%; padding:0; margin:0 0 30px 0; line-height:30px;text-align:left}

.b-wrapper{float:left; width:100%; padding:80px 0 80px 0; margin:0;background-color:#f6f6f6}
.b-content{width:90%; margin:0 auto; padding:0;}
.ho-block_text{max-width:19.33333rem; font-size:16px; line-height:32px;text-align:justify;}
.ho-h2{font-size:56px;line-height:1.2}
.ho-line{position:absolute;display:inline-block;background-color:#969696;z-index:9;display:block}
.ho-block.min{min-height:30rem}
.ho-line.-tr{top:140px;right:0}

.vision-more {width:100px; text-align:center; margin:20px 0 0 0; border:0}
  .vision-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #000;text-decoration: none;border:1px solid #c8a063; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .vision-more a:hover {border-top:1 solid #c8a063;background-color:#c8a063; color:#fff;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

}

@media only screen and (min-width: 1601px) {
.titlebox{ float:left; width:100%; margin:0; padding:0}
.title-content{width:80%; margin:70px auto 0 auto; padding:0}
.top-title{float:left;width:100%;padding:0; margin:0 0 60px 0;}
.top-title h2{padding:0; margin:0 0 15px 0; font-size:40px; letter-spacing:0}
.top-title.top-title h1.title {margin-bottom:0;text-align: left;font-weight: 400;line-height: 1.1;letter-spacing:1px}
.top-title h1.title span { display: block;font-size: 40px; padding-left:4%;color: #111;position: relative;}
.top-title h1.title span:before{content: '';position: absolute; top: 52%; background: #111; width: 3%;height: 2px;}
.top-title h1.title span:before{left: 0;}
.title-tx{float:left; width:100%; margin:0; padding:0; font-size:20px; font-weight:400; line-height:32px;font-family:"Arial", "Helvetica", "sans-serif"; }

/* content */
.index-wrapper{float:left; width:100%; padding:0; margin:0;}
.index-content{width:80%; margin:0 auto 20px auto; padding:0;}
.m-tx{float:left;width:100%; padding:0; margin:0;}
.b-tx{float:left;width:35%; padding:0; margin:2em 0 0 5%;}
.m-pic{float:left;width:100%; padding:0; margin:0;}
.m-pic img{max-width:100%;_width:expression(this.width > 100% ? "100%" : this.width);} 
.mainevent-a{float:left; width:68%; margin:0 0 80px 32%; padding:0;}
.mainevent-b{float:left; width:68%; margin:0 32% 80px 0; padding:0;}
.title-a{float:left; width:100%; margin:0 0 30px 0; padding:0; font-size:38px; }
.m-stx{float:left;width:100%; padding:0; margin:0 0 30px 0; line-height:30px;text-align:left}

.b-wrapper{float:left; width:100%; padding:160px 0 120px 0; margin:0; background-color:#f6f6f6}
.b-content{width:76%; margin:0 auto; padding:0;}
.ho-block_text{max-width:19.33333rem; font-size:16px; line-height:32px;text-align:justify;}
.ho-h2{font-size:70px;line-height:1.2}
.ho-line{position:absolute;display:inline-block;background-color:#969696;z-index:0;display:block}
.ho-block.min{min-height:30rem}
.ho-line.-tr{top:120px;right:0}

.vision-more {width:100px; text-align:center; margin:20px 0 0 0; border:0}
  .vision-more a {display:block; height:30px; background-color:#none;padding:0;font-size: 11px; color: #000;text-decoration: none;border:1px solid #c8a063; line-height:28px;transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
  .vision-more a:hover {border-top:1 solid #c8a063;background-color:#c8a063; color:#fff;transition: 500ms;
-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms}  

}