@charset "UTF-8";
/*--------------------------------*/
/* 中保客服外掛 */
/*
product z-index 101~105
kv slider arrow z-index 10 11
 */
canvas {
  display: block;
  vertical-align: bottom;
}

/* .pop-box {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.pop-box .black {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
}

.pop-box .pop-contain {
    background: #fff;
    max-width: 900px;
    width: 100%;
    padding: 60px;
    position: relative;
    z-index: 11;
}

.pop-box .viewbox {
    padding-top: 54%;
    position: relative;
    margin-bottom: 30px;
}

.pop-box .viewbox .ytvideo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    overflow: hidden;
    display: flex;
}

.pop-box .close {
    background-color: #333333;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("/assets/images/index/popvideo/pop_del.png");
    background-size: 15px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
}

.pop-box .btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pop-box .btn-box .item {
    flex: 0 0 25%;
    margin-right: 15px;
}

.pop-box .black-btn, .pop-box .red-btn {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
}

.pop-box .black-btn {
    background: #333;
}

.pop-box .red-btn {
    background: #BB000F;
}

.pop-box .btn-box .item:last-child {
    margin-right: 0;
}

.pop-box .close, .pop-box .play-btn, .fix-play {
    cursor: pointer;
}

.fix-play .icon, .pop-box .black-btn, .pop-box .red-btn, .pop-box .close, .pop-box .play-btn {
    &:hover {
        opacity: 0.8;
    }
}
.fix-play {
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10;
}

.fix-play .icon {
    pointer-events: auto;
    cursor: pointer;
    position: absolute;
    width: 70px;
    height: 70px;
    right: calc(2% + 12px);
    bottom: calc(2% + 100px);
    background:#fff url("/assets/images/index/popvideo/video-player.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;

    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);

    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
} */

/* ---- particles.js container ---- */
#bg__particles {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.box__circle__l {
    -webkit-box-shadow: 0 0px 0px 0px rgba(0, 0, 0, .0);
    -moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .0);
    box-shadow: 0 0px 0px 0px rgba(0, 0, 0, .0);
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* bg shape only mobile */
.box__bgeffect__mobile {
    pointer-events: none;
    /*background-color: rgba(0, 0, 0, 0.4);*/
    position: absolute;
    width: 100%;
    height: 700px;
    overflow: hidden;
}
/* red rgb(200, 13, 28) */
/* gray rgb(240, 240, 240) */
.box__gray__ring {
    border: 100px solid rgb(240, 240, 240);
    border-radius: 50%;
    width: 400px;
    height: 400px;
}

.box__red__ring {
    border: 100px solid rgb(200, 13, 28);
    border-radius: 50%;
    width: 400px;
    height: 400px;
}

.box__gray__circel {
    background-color: rgb(240, 240, 240);
    border-radius: 50%;
    width: 500px;
    height: 500px;
}

.box__red__circel {
    background-color: rgb(200, 13, 28);
    border-radius: 50%;
    width: 350px;
    height: 350px;
}

/*------------------------------------------------------*/
.leader_bg_content .box__bgeffect__mobile .box__gray__ring {
    position: relative;
    top: 150px;
    right: -150px;
}

/*------------------------------------------------------*/
.food_content {
    position: relative;
    z-index: 1
}
.food_content .content__box__mobile .box__bgeffect__mobile {
    /*background-color: rgba(0, 0, 0, 0.6);*/
    height: 1200px;
}
.food_content .content__box__mobile .box__bgeffect__mobile .box__red__ring {
    position: relative;
    border-width: 90px;
    width: 200px;
    height: 200px;
    top: 430px;
    left: -240px;
}
/*------------------------------------------------------*/
.live_content {
    position: relative;
    z-index: 1
}
.live_content .content__box__mobile .box__bgeffect__mobile {
    height: 1200px;
}
.live_content .content__box__mobile .box__bgeffect__mobile .box__red__ring {
    position: relative;
    border-width: 80px;
    width: 280px;
    height: 280px;
    top: 380px;
    right: -230px;
}
/*------------------------------------------------------*/
.transportation_content {
    position: relative;
}
.transportation_content .box__bgeffect__mobile {
    height: 1500px;
    top: 400px;
}
.transportation_content .box__bgeffect__mobile .box__gray__ring {
    position: relative;
    border-width: 110px;
    top: -150px;
    left: 150px;
}
/*------------------------------------------------------*/
.product_content_mobile .box__bgeffect__mobile {
    z-index: -1;
    height: 1200px;
}

.product_content_mobile .box__bgeffect__mobile .box__gray__circel {
    position: absolute;
    top: 620px;
    left: -350px;
}
/*------------------------------------------------------*/
.popular_content .box__bgeffect__mobile {
    /*background-color: rgba(0, 0, 0, 0.4);*/
    height: 1300px;
    top: -100px;
}

.popular_content .box__bgeffect__mobile .box__red__circel {
    position: absolute;
    top: 670px;
    left: 300px;
    width: 320px;
    height: 320px;
}

/*------------------------------------------------------*/
.info_content_mobile {
    position: relative;
}
.info_content_mobile .box__bgeffect__mobile {
    height: 1000px;
    top: 0px;
    z-index: -1;
}
.info_content_mobile .box__bgeffect__mobile .box__gray__ring {
    position: relative;
    border-width: 110px;
    top: 50px;
    left: -400px;
}
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* news_content */
/*------------------------------------------------------*/
.news_content {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 48px;
    overflow: hidden;
}

.news_content .news_container {
    position: relative;
    left: 50%;
    width: 85%;
    max-width: 1280px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);


    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

}

.news_content .news_container .news__round__rectangle {
    position: relative;
    width: 12%;
    height: 40px;
    background-color: #bb000f;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.news_content .news_container .news__round__rectangle p {
    color: #FFFFFF;
    font-size: 20px;
}

.news_content .news_container .news__text__body {
    padding: 0 10px;
    position: relative;
    width: 85%;
}

.news_content .news_container .news__text__ul {
    padding: 10px 0;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.news_content .news_container .news__text__ul li {
    /*border: 1px solid #000cf8;*/
    /*box-sizing: border-box;*/
    flex: 0 0 auto;
}

.news_content .news_container .news__text__ul p {
    color: #000000;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 20px;
}

.news_content .news_container .news__text__ul .news__text__type {
    width: 6%;
}

.news_content .news_container .news__text__ul .news__text__con {
    max-width: 82%;
}

.news_content .news_container .news__text__ul .news__text__con a {
    text-decoration: none;
}

.news_content .news_container .news__text__ul .news__text__time {
    width: 11%;
}

.news_content .news_container .news__text__ul .news__text__type p {
    color: #bb000f;
}

.news_content .news_container .news__text__ul .news__text__con p {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
}

.news_content .news_container .news__text__ul .news__text__time p {
    color: #979797;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* leader_content */
/*------------------------------------------------------*/
.leader_content {
    display: inline-block;
    margin-top: 80px;
    margin-bottom: 50px;
    width: 100%;
    height: auto;
    position: relative;
}

.leader_content .leader__title {
    position: relative;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* 區塊 h:756 */
/* food_content */
/*------------------------------------------------------*/
.content__box {
    /*background-color: #fbfbfb;*/
    margin: 0 0 50px 0;
    display: inline-block;
    width: 100%;
    height: 680px;
    position: relative;
    overflow: hidden;
}

.content__box .box__container {
    display: block;
    max-width: 1260px;
    height: 100%;
    position: relative;

    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.content__box .box__circle__l {
    top: 10%;
    left: 4%;

    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;

    /*-webkit-box-shadow: 0 0px 30px 0px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0px 30px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0px 30px 0px rgba(0, 0, 0, .3);*/
    z-index: 5;
}

.content__box .box__circle__l h1 {
    color: #FFFFFF;
    position: relative;
    /*     top: -45px; */

    top: -20px;
    font-size: 55px;
    line-height: 70px;
}

.content__box .box__circle__l p {
    font-weight: 300;
    padding-left: 100px;
    padding-right: 100px;
    font-size:18px;
}

.content__box .box__circle__l .more__btn {
    position: relative;
    top: 35px;
    width: 210px;
    height: 58px;
    font-weight: 400;
    background-color: rgba(255, 255, 255, 0);
    overflow: hidden;
    box-shadow: inset 0 0 0px 0px #434343;
    transition: all .2s ease-out 0s;
    border-radius: 15px;
}

.content__box .box__circle__l .more__btn a {
    color: #000000;
    padding-left: 50px;
    padding-right: 50px;
    text-decoration: none;
    font-size: 18px;
}

.content__box .box__round__pic {
    position: absolute;
    bottom: 0px;
    right: 15px;
    z-index: 0;
}

.content__box .box__circle__l .more__btn a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #ffffff;
    z-index: -1;
}

.content__box .box__circle__l .more__btn a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-color: #434343;
    z-index: -1;
    transition: all .1s ease-out;
}

.content__box .box__circle__l .more__btn:hover {
    box-shadow: inset 0 0 2px 2px #434343;
}

.content__box .box__circle__l .more__btn:hover a::after {
    left: 0;
}

.content__box .box__circle__l .more__btn:hover a {
    color: #ffffff;
}



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* video_content */
/*------------------------------------------------------*/
/* 其他斷點需要設定 */
.video_content {
    margin: 100px 0;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.video__fitwidth {
    min-height: 100%; 
    height: 70vh;
    width: 100vw;
    padding:0;
    margin: 0;
    /*background-color: gray;*/
    background-image:    url(../images/index/video-bg.jpg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center; 
    position: relative;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;


    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
}

video{    
    width: 100vw; 
    height: auto;
    margin: auto;
    display: block;
}

@media (min-aspect-ratio: 16/9) {
  video{
    width: 100vw; 
    height:auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  video {
    height: 100vh; 
    width:auto;
    margin-left: 50vw;
    transform: translate(-50%);
  }
}

.video_content .video__btn {
    position: absolute; 
    width: 100%; 
    height: 100%;
    top: 0; 
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.video_content .video__btn img {
    width: auto;
    height: 30vh;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* product_content */
/*------------------------------------------------------*/
.product_content {
    margin: 100px 0;
    display: inline-block;
    width: 100%;
    /*height: 1040px;*/
    height: auto;
    position: relative;
    /*overflow-x: clip;*/
}

.product_content .product__title {
    position: relative;
    left: 50%;
    width: 85%;
    max-width: 1280px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.product_content .product__pic__container {
    /*background-color: #FFFFFF;*/
    margin-top: 50px;
    max-width: 1070px;
    height: auto;

    position: relative;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.product_content .box__round__rectangle {
    z-index: 101;
    position: absolute;
    top: 140px;
    left: 490px;
    width: 580px;
    height: 115px;
    -webkit-box-shadow: 0 0px 20px 0px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 0px 20px 0px rgba(0, 0, 0, .2);
}

.product_content .product__pic__container .product__ul {
    z-index: 102;
    position: absolute;
    width: 35%;
    top: 145px;
    right: 0%;
    line-height: 100px;
}

.product_content .product__pic__container .product__ul li {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    height: 115px;
    cursor: pointer;
    color: #000000;
}

.product_content .product__pic__container .product__ul li > div:nth-child(1) {
    position: relative;
    font-size: 54px;
    letter-spacing: 1px;
    font-weight: 300;
}

.product_content .product__pic__container .product__ul li > div:nth-child(2) {
    position: relative;
    font-size: 40px;
    letter-spacing: 1px;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    bottom: 3px;
}

.product_content .product__pic__container .product__ul li > div:nth-child(2) > p {
    margin: 0 20px 0 10px;
    font-weight: 200;
    font-size: 42px;
}

.product_content .box__circle__pic {
    z-index: 105;
    position: relative;
    width: 600px;
    height: 600px;
    /*margin-left: 40px;*/
}

.product_content .box__circle__pic .product__fade__silder > div {

}

.product_content .box__circle__pic img {
    width: 600px;
    height: 600px;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* popular_content */
/*------------------------------------------------------*/
.popular_content {
    margin: 50px 0;
    padding: 20px 0;
    display: inline-block;
    width: 100%;
    height: auto;
    position: relative;
    /* 需要往上往下調整 */
    /*overflow-x: clip;*/
    /* 會影響背景球 */
    overflow: hidden;
}

.popular_content .popular__title {
    position: relative;
}


.popular_content .box__round__container {
    border: 0px solid red;
    background-color: #FFFFFF;
    width: 100vmin;

    height: auto;
    border-radius:15px 15px 15px 15px;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    /*border: 1px solid black;*/

    -webkit-box-shadow: 0 0px 20px 0px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 0px 20px 0px rgba(0, 0, 0, .2);

    /*margin-bottom: 80px;*/
}

.popular_content .popular__ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.popular_content .popular__btn__li {
    /*flex: 1 1 auto;*/
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    background-color: rgba(187, 0, 15, 0);
    flex: 0 1 auto;
    width: 49%;
    max-width: 410.5px;
    height: 49vw;
    max-height: 410.5px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


.popular_content .popular__btn__li .popular__btn__pic {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
}

.popular_content .popular__btn__li .popular__btn__pic img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}


.popular_content .popular__btn__title {
    position: absolute;
    display: flex;
    justify-content: center;
    /*top: min(max(5vw, 30px), 50px);*/
    /*top: min(max(5vw, 15px), 50px);*/
    top: 13%;
}

.popular_content .popular__btn__title h1 {
    color: #000000;
    font-size: 24px;
    font-size: min(max(3.5vw, 20px), 24px);
    font-weight: 400
}

.popular_content .popular__btn__li .more__btn {
    background-color: #f2f2f2;
    position: absolute;
    border-radius: 15px;

    width: 60%;
    max-width: 210px;
    height: min(max(5vw, 35px), 58px);
    bottom: min(max(2vw, 2%), 8%);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    display: none;
    opacity: 0;

    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.popular_content .popular__btn__li .more__btn a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #ffffff;
    z-index: -1;
}


.popular_content .popular__btn__li .more__btn a {
    color: #000000;
    font-size: 18px;
    font-size: min(max(3.5vw, 13px), 20px);
    font-weight: 400;
    text-decoration: none;
}

.popular_content .box__circle__logo {
    /*border: 1px solid red;*/
    background-color: #bb000f;
    /*background-image:    url(/assets/images/index/popular-btn-logo.png);*/
    background-size:     min(max(11vw, 50px), 110px);
    background-repeat:   no-repeat;
    background-position: center center; 
    width: min(max(11vw, 50px), 110px);
    height: min(max(11vw, 50px), 110px);
    border-radius:50%;

    position: absolute;
    top: 25%;
    right: min(max(100%, 10%), 10%);
}


.popular_content .popular__btn__li .hover__animate {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
}

.popular_content .popular__btn__li .hover__animate img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
}


.popular_content .popular__ul .popular__btn__li:nth-child(1) .hover__animate img {
    left: 50%;
    top: 50%;
}

.popular_content .popular__ul .popular__btn__li:nth-child(2) .hover__animate img {
    left: 50%;
    top: -50%;
}
.popular_content .popular__ul .popular__btn__li:nth-child(3) .hover__animate img {
    left: -50%;
    top: 50%;
}

.popular_content .popular__ul .popular__btn__li:nth-child(4) .hover__animate img {
    left: -50%;
    top: 50%;
}

.popular_content .popular__ul .popular__btn__li:nth-child(5) .hover__animate img {
    left: -50%;
    top: -50%;
}

.popular_content .popular__ul .popular__btn__li:nth-child(6) .hover__animate img {
    left: 50%;
    top: 50%;
}

@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

/* hover */
.popular_content .popular__btn__li .more__btn:hover a {
    color: #ffffff;
}

.popular_content .popular__btn__li:hover .hover__animate {
    animation: fadeIn 0.5s ease 0.1s both;
    -webkit-animation: fadeIn 0.5s ease 0.1s both;
    -moz-animation: fadeIn 0.5s ease 0.1s both;
    -o-animation: fadeIn 0.5s ease 0.1s both;
    -ms-animation: fadeIn 0.5s ease 0.1s both;
}

.popular_content .popular__btn__li:hover .hover__animate img {
    -webkit-animation: rotating 0.6s linear infinite;
    -moz-animation: rotating 0.6s linear infinite;
    -ms-animation: rotating 0.6s linear infinite;
    -o-animation: rotating 0.6s linear infinite;
    animation: rotating 0.6s linear infinite;
}

.popular_content .popular__ul .popular__btn__li:hover {
    background-color: rgba(187, 0, 15, 1);
}

.popular_content .popular__ul .popular__btn__li:hover .popular__btn__title h1 {
    color: #FFFFFF;
}

.popular_content .popular__ul .popular__btn__li:hover .box__circle__logo {
    background-color: #FFFFFF;
    /*background-image:    url(/assets/images/index/popular-btn-logo-hover.png);*/
}

.popular_content .popular__btn__li:hover .more__btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
}
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* info_content */
/*------------------------------------------------------*/
.info_content {
    /*background-color: #fbfbfb;*/
    margin-top: 150px;
    display: inline-block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.info_content .info__title {
    margin-bottom: 50px;

    position: relative;
    left: 50%;
    width: 85%;
    max-width: 1280px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.info_content .info__container{
    width: 100%;
    display: flex;
    justify-content: center;
}

.info_content .info__container .box__round__pic {
    position: relative;
    width: 100vw;
    height: auto;
    max-width: 1280px;
}

.info_content .info__container .box__round__pic img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.info_content .info__container .info__ul__text {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 85%;
    height: 100%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.info_content .info__container .info__ul__text li:nth-child(1) {
    width: 40%;
}

.info_content .info__container .info__ul__text li:nth-child(2) {
    width: 60%;
}

.info_content .info__container .info__ul__text .more__btn {
    position: relative;
    margin-top: 30px;
    background-color: rgba(200, 13, 28, 0);
    width: 210px;
    height: 58px;
    border-radius: 15px;
}

.info_content .info__container .info__ul__text .more__btn a {
    color: #FFFFFF;
    padding-left: 50px;
    padding-right: 50px;
    text-decoration:none;
    font-size: 20px;
    font-weight: 400;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* @media only screen and (max-width: 767px) {
    .pop-box .pop-contain {
        padding: 50px 15px 15px 15px;
        width: 80%;
    }

    .pop-box .close {
        width: 40px;
        height: 40px;
    }

    .pop-box .play-btn {
        width: 60px;
        height: 60px;
        border-width: 2px;
        background-image: url("/assets/images/index/popvideo/play.png");
        background-size: 15px auto;
    }

    .pop-box .btn-box .item {
        flex: 0 0 calc(50% - 5px);
        margin-right: 10px;
    }

} */

/*------------------------------------------------------*/
@media only screen and (min-width:360px) {
    .fix-play.is-up .icon {
        bottom: calc(12% + 100px);
    }

    .leader_content .leader__title .title-max-m-en,
    .product_content_mobile .product__title .title-max-m-en,
    .popular_content .popular__title .title-max-m-en,
    .info_content_mobile .info__title .title-max-m-en {
        font-size: 53px;
    }

    .leader_content .leader__title .title-max-m,
    .product_content_mobile .product__title .title-max-m,
    .popular_content .popular__title .title-max-m,
    .info_content_mobile .info__title .title-max-m {
        font-size: 48px;
    }

    .box__bgeffect__mobile {
        display: block;
    }

    #bg__particles {
        display: none;
    }


    .news_content {
        margin-top: 70px;
    }

    .news_content .news_container {
        width: 100%;
        left: 0px;
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }

    .news_content .news_container .news__round__rectangle {
        border-radius: 0 20px 20px 0;
        width: 26%;
        height: 45px;
    }

    .news_content .news_container .news__round__rectangle p {
        color: #FFFFFF;
        font-size: 16px;
    }

    .news_content .news_container .news__text__body {
        width: 74%;
    }

    .news_content .news_container .news__text__ul {
        padding: 2px 0;
        flex-wrap: wrap;
    }

    .news_content .news_container .news__text__ul p {
        font-size: 16px;
    }

    .news_content .news_container .news__text__ul .news__text__type {
        order: 1;
        width: 15%;
        max-width: 50px; 
    }

    .news_content .news_container .news__text__ul .news__text__con {
        order: 3;
        width: 100%;
        max-width: inherit;
    }

    .news_content .news_container .news__text__ul .news__text__time {
        order: 2;
        width: 35%;
    }

    /*------------------------------------------------------*/
    .leader_content {
     }

    .leader_content .leader__title {
        position: relative;
        width: 85%;
        max-width: 1280px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .product_content_mobile .product__title  {
        padding: 0 0px 40px 0px;
        position: relative;
        left: 50%;
        width: 85%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .popular_content .popular__title {
        display: inline-block;
        margin-bottom: 50px;
        position: relative;
        left: 50%;
        width: 85%;
        max-width: 1280px;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .info_content_mobile .info__title {
        color: #000000;
        /*padding: 0 20px;*/
        position: relative;
        width: 85%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    /* --------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------- */
    .content__box {
        display: none;
    }

    .content__box__mobile {
        /*pointer-events: none;*/
        display: inline-block;
        padding-top: 80px;
        margin: 50px 0;
        background-color: #F0f0f0;
        width: 100%;
        height: auto;
        position: relative;
        /*overflow: hidden;*/
        
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .content__box__mobile .box__container {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
    
    .content__box__mobile .box__circle__l {
        background-color: rgba(0, 0, 0, 0);
        border-radius: inherit;
        position: relative;
        width: 85%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 101;
        margin-bottom: 70px;
    }

    .content__box__mobile .box__circle__l h1 {
        color: #c80d1c;
        font-weight: 300;

        font-size: 50px;
        line-height: 70px;
    }

    .content__box__mobile .box__circle__l p {
        color: #000000;
        font-weight: 300;
        /*margin: 35px;*/
        margin: 35px 0;
    }

    .content__box__mobile .box__circle__l .more__btn {
        background-color: #c80d1c;
        width: 100%;
        height: 58px;
        border-radius: 20px;
    }

    .content__box__mobile .box__circle__l .more__btn a {
        color: #FFFFFF;
        padding-left: 50px;
        padding-right: 50px;
        text-decoration: none;
        font-size: 20px;
        font-weight: 400
    }

    .content__box__mobile .box__round__pic__m {
        width: 100%;
        height: auto;
        max-height: 450px;
        z-index: 100;
        position: relative;
        overflow: hidden;
    }

    .content__box__mobile .box__round__pic__m img {
        width: 100vw;
    }
    
    /*------------------------------------------------------*/
    /*------------------------------------------------------*/
    .content__box__mobile .box__title {
        position: absolute;
        width: 100%;
        height: auto;
        /* 這解決 */
        /*overflow-x: clip;*/
    }
    
    .food_content .content__box__mobile .box__title p {
        position: absolute;
        top: 0px;
        left: calc(100% - 320px);
    }
    .medical_content .content__box__mobile .box__title p {
        position: absolute;
        top: 0px;
        left: 0px
    }
    .live_content .content__box__mobile .box__title p {
        position: absolute;
        top: 0px;
        left: calc(100% - 240px);
    }
    /*   沒用到   */
    /* .transportation_content .content__box__mobile .box__title p {
        position: absolute;
        top: 0px;
        left: 0px
    } */

    /*------------------------------------------------------*/
    /* all 直式 video_content */
    /*------------------------------------------------------*/
    .video_content {
        margin: 100px 0 100px 0;
    }

    .video__fitwidth {
        height: 50vh;
    }

    .video_content .video__btn img {
        height: 15vh;
    }
    /*------------------------------------------------------*/
    /* all 直式 product_content */
    /*------------------------------------------------------*/
    .product_content {
        display: none;
    }

    .product_content_mobile {
        margin: 50px 0;
        display: inline-block;
        width: 100%;
        height: auto;
        position: relative;
        /*overflow: hidden;*/
    }

    .product_content_mobile .product__container {
        width: 100%;
        height: auto;
        text-align: center;
    }

    .product_content_mobile .product__container .product__fade__silder__mobile {
        width: 100%;

    }

    .product__circle__pic {
        border: 0px solid red;
        background-color: #cccccc;
        border-radius:50%;
        overflow: hidden;
        margin: 2%;
    }

    .product_content_mobile .product__container .product__fade__silder__mobile .product__circle__pic img {
        width: 100%;
        height: auto;
    }

    .product__fade__silder__mobile .product__circle__body .product__circle__text {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
        margin:0  40px;
        padding-top: 20px;
    }

    .product__fade__silder__mobile .product__circle__body .product__circle__text p:nth-child(1) {
        color: #c80d1c;
        font-size: 40px;
        font-weight: 400;

        letter-spacing: 1px;
        line-height: 65px;
    }

    .product__fade__silder__mobile .product__circle__body .product__circle__text p:nth-child(2) {
        font-size: 29px;
        font-weight: 400;

        letter-spacing: 1px;
        line-height: 65px;

        margin-left: 10px;
        position: relative;
        bottom: 2px;
    }

    /*------------------------------------------------------*/
    /* popular_content */
    .popular_content .box__round__container {
        background-color: inherit;
        width: 90vmin;
        -webkit-box-shadow: inherit;
        -moz-box-shadow: inherit;
        box-shadow: inherit;
    }

    .popular_content .popular__ul {
        justify-content: space-around;
    }

    .popular_content .popular__btn__li {
        background-color: #FFFFFF;
        /*border: 1px solid red;*/
        /*box-sizing: border-box;*/
        width: 44%;
        height: 45vw;
        margin: 9px 9px; 

        -webkit-box-shadow: 0 0px 20px 0px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, .2);
        box-shadow: 0 0px 20px 0px rgba(0, 0, 0, .2);
    }

    .popular_content .popular__btn__li .more__btn {
        border-radius: 10px;
    }

    .popular_content .popular__btn__title h1 {
        color: #000000;
        font-size: 24px;
        font-size: min(max(3.5vw, 18px), 24px);
        font-weight: 400
    }
    /*------------------------------------------------------*/
    /* all 直式 info_content */
    /*------------------------------------------------------*/
    .info_content {
        display: none;
    }

    .info_content_mobile {
        margin-top: 50px;
        display: inline-block;
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;
    }

    .info_content_mobile .info__container {
        margin-top: 40px;
    }

    .info_content_mobile .info__container p {
        font-size: 17px;
        line-height: 28px;
        color: #000000;
        /*padding: 0 30px 0 30px;*/
        /*padding: 0 10%;*/
        position: relative;
        width: 85%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .info_content_mobile .info__container .more__btn {
        margin: 30px 0;
        /*padding: 4px 40px;*/
        
        background-color: #c80d1c;
        width: 85%;
        height: 58px;
        border-radius: 15px;

        position: relative;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .info_content_mobile .info__container .more__btn a {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 18px;
        font-weight: 400;
    }

    .info_content_mobile .info__body {
        position: relative;
        width: 100vw;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .info_content_mobile .info__body img {
        width: 100%;
        height: auto;
    }

}

@media only screen and (min-width:425px) {}

@media only screen and (min-width:768px) {
    .leader_content .leader__title .title-max-m-en,
    .product_content_mobile .product__title .title-max-m-en,
    .popular_content .popular__title .title-max-m-en,
    .info_content_mobile .info__title .title-max-m-en {
        font-size: 58px;
    }

    .leader_content .leader__title .title-max-m,
    .product_content_mobile .product__title .title-max-m,
    .popular_content .popular__title .title-max-m,
    .info_content_mobile .info__title .title-max-m {
        font-size: 53px;
    }

    .news_content .news_container .news__round__rectangle {
        width: 17%;
    }

    .product__circle__pic {
        margin: 10%;
    }
    .content__box__mobile {
        width: 100%;
    }

    .content__box__mobile .box__circle__l .more__btn {
        width: 280px;
    }

    .content__box__mobile .box__circle__l h1 {
        font-size: 55px;
        line-height: 70px;
    }

    .food_content .content__box__mobile .box__title p,
    .medical_content .content__box__mobile .box__title p,
    .live_content .content__box__mobile .box__title p {
        font-size: 100px;
    }

    .food_content .content__box__mobile .box__title p {
        left: calc(100% - 450px);
    }

    .live_content .content__box__mobile .box__title p {
        left: calc(100% - 350px);
    }

    /* .transportation_content .content__box__mobile .box__title p {
    } */

    .leader_bg_content .box__bgeffect__mobile .box__gray__ring {
        border: 80px solid #f0f0f0;
        width: 350px;
        height: 350px;
        top: 0;
        left: calc(100vw - 350px);

    }

    .food_content .content__box__mobile .box__bgeffect__mobile .box__red__ring {
        border-width: 60px;
        width: 160px;
        height: 220px;
        top: 550px;
        left: -30px;
    }

    .live_content .content__box__mobile .box__bgeffect__mobile .box__red__ring {
        border-width: 60px;
        width: 160px;
        height: 220px;
        top: 550px;
        left: calc(100vw - 300px);
    }
    .transportation_content .box__bgeffect__mobile .box__gray__ring {
        border-width: 70px;
        width: 200px;
        height: 260px;
        top: 130px;
        left: calc(100vw - 300px);
    }

    .product_content_mobile .box__bgeffect__mobile .box__gray__circel {
        display: none;
    }

    .product__fade__silder__mobile .product__circle__body .product__circle__text p:nth-child(1) {
        font-size: 54px;
        font-weight: 400;
    }

    .product__fade__silder__mobile .product__circle__body .product__circle__text p:nth-child(2) {
        font-size: 40px;
        font-weight: 400;

        margin-left: 10px;
        position: relative;
        /*bottom: 3px;*/
    }

    .popular_content .popular__btn__li {
        margin: 16px 9px;
    }

    .popular_content .box__bgeffect__mobile .box__red__circel {
        height: 400px;
        left: 600px;
    }

    .popular_content .popular__btn__li .more__btn {
        border-radius: 15px;
        width: 210px;
        height: 50px;
    }

    .popular_content .popular__btn__title h1 {
        font-size: 24px;
        font-size: min(max(3.5vw, 20px), 24px);
    }

    .info_content_mobile .box__bgeffect__mobile .box__gray__ring {
        border-width: 90px;
        width: 260px;
        height: 300px;
        top: 150px;
        left: -220px;
    }

    .info_content_mobile .info__body {
        max-height: 450px;
        overflow: hidden;
    }

    .info_content_mobile .info__container p {
        font-size: 18px;
        line-height: 30px;
        font-weight: 300;
        letter-spacing: 1px;
    }

    .info_content_mobile .info__container .more__btn {
        width: 280px;
        height: 58px;
        border-radius: 15px;
    }

}

@media only screen and (min-width:1024px) { 
    .food_content .content__box__mobile .box__title p {
        top: 215px;
    }


}

@media only screen and (min-width:1025px) {
    .fix-play .icon {
        bottom: calc(2% + 100px);
    }

    .leader_content .leader__title .title-max-m-en,
    .product_content .product__title .title-max-m-en,
    .popular_content .popular__title .title-max-m-en,
    .info_content .info__title .title-max-m-en {
        font-size: 59px;
    }

    .leader_content .leader__title .title-max-m,
    .product_content .product__title .title-max-m,
    .popular_content .popular__title .title-max-m,
    .info_content .info__title .title-max-m {
        font-size: 54px;
    }

    .box__bgeffect__mobile {
        display: none;
    }

    #bg__particles {
        display: block;
    }

    /*------------------------------------------------------*/
    /*------------------------------------------------------*/
    /* news */
    .news_content {
        margin-top: 30px;
    }

    .news_content .news_container {
        left: 50%;
        width: 85%;
        max-width: 1280px;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .news_content .news_container .news__round__rectangle {
        border-radius: 15px;
        width: 12%;
        height: 46px;
    }

    .news_content .news_container .news__round__rectangle p {
        color: #FFFFFF;
        font-size: 18px;
        letter-spacing: 1px;
        font-weight: 400;
    }

    .news_content .news_container .news__text__body {
        width: 85%;
    }

    .news_content .news_container .news__text__ul {
        padding: 11px 0;
        flex-wrap: nowrap;
    }

    .news_content .news_container .news__text__ul .news__text__type {
        order: 1;
        width: 6%;
    }

    .news_content .news_container .news__text__ul .news__text__con {
        order: 2;
        width: 82%;
        max-width: inherit;
    }

    .news_content .news_container .news__text__ul .news__text__time {
        order: 3;
        width: 11%;
    }


    /*------------------------------------------------------*/
    /*------------------------------------------------------*/
    /* all 橫式 title_content */
    /*------------------------------------------------------*/
    .content__box {
        display: block;
    }

    .content__box__mobile {
        display: none;
    }
    /*------------------------------------------------------*/
    .food_content .content__box {
        max-width: 1280px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        position: relative;
        display: block;
    }

    /*------------------------------------------------------*/
    .content__box .box__title {
        /*background-color: rgba(0, 0, 0, 0.4);*/
        position: relative;
        width: 100%;
        height: 500px;
        overflow: hidden;
    }

    .food_content .content__box .box__title p {
        position: absolute;
        top: 140px;
        right: 10px;
    }

    .medical_content .content__box .box__title p {
        position: absolute;
        top: 140px;
        left: 0px
    }
    .live_content .content__box .box__title p {
        position: absolute;
        top: 140px;
        right: 10px
    }
    /* .transportation_content .content__box .box__title p {
        position: absolute;
        top: 100px;
        left: 0px
    } */

    /*------------------------------------------------------*/
    /* content__box 中的例外 或是其他 */
    .content__box .box__round__pic__reverse {
        position: absolute;
        bottom: 0px;
        left: 15px;
    }

    .content__box .box__circle__l__reverse {
        right: 4%;
        left: auto;
    }


    /*------------------------------------------------------*/
    .video_content {
        margin: 150px 0 100px 0;
    }

    .video__fitwidth {
        height: 70vh;
    }

    .video_content .video__btn img {
        height: 30vh;
    }
    /*------------------------------------------------------*/
    /* all 橫式 product_content */
    .product_content {
        display: block;
    }

    .product_content_mobile {
        display: none;
    }

    .product_content .product__pic__container {
        transform: scale(0.85);
        -webkit-transform: scale(0.85);
        -moz-transform: scale(0.85);
        -ms-transform: scale(0.85);
        -o-transform: scale(0.85);
    }

    .product_content .product__pic__container .product__ul {
        /*left: 65%;*/
    }
    /*------------------------------------------------------*/
    /* all 橫式 popular_content */
    .popular_content {
        overflow: visible;
    }

    .popular_content .box__round__container {
        background-color: inherit;
        width: 100vmin;

        /* 陰影基數 */
        -webkit-box-shadow: 0 0px 30px 0px rgba(0, 0, 0, .1);
        -moz-box-shadow: 0 0px 30px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 0px 30px 0px rgba(0, 0, 0, .1);
    }
    .popular_content .popular__ul {
        justify-content: space-between;
    }
    .popular_content .popular__btn__li {
        background-color: inherit;
        width: 49%;
        height: 49vw;
        margin: 0px; 

        -webkit-box-shadow: inherit;
        -moz-box-shadow: inherit;
        box-shadow: inherit;
    }
    .popular_content .popular__btn__li .more__btn {
        border-radius: 15px;
        width: 210px;
        height: 50px;
    }

    .popular_content .popular__btn__title h1 {
        font-size: 24px;
        font-size: min(max(3.5vw, 20px), 24px);
    }

    /*------------------------------------------------------*/
    /* all 橫式 info_content */
    .info_content {
        display: block;
        overflow: visible;
    }

    .info_content_mobile {
        display: none;
    }

    .info_content .info__container .box__round__pic {
        border-radius: 0px;
    }

    .info_content .info__container .info__ul__text .more__btn {
        width: 210px;
        height: 58px;
        border-radius: 15px;
    }

    .info_content .info__container .info__ul__text .text-normal-m {
        font-size: 18px;
        line-height: 30px;
        font-weight: 300;
        letter-spacing: 1px;
    }
}
@media only screen and (min-width:1200px) {
    .product_content .product__pic__container {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);

        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .product_content .product__pic__container .product__ul {
        left: 60%;
    }
}

@media only screen and (min-width:1260px) {
    .popular_content .box__round__container {
        background-color: #FFFFFF;
        width: 100%;
        max-width: 1260px;
    }
}

@media only screen and (min-width:1281px) {
    .info_content .info__container .box__round__pic {
        border-radius: 15px;
    }
}