*{font-family: 'Noto Sans TC','微軟正黑體',sans-serif; }
body{ font-family: 'Noto Sans TC','微軟正黑體',sans-serif;position: relative;}
html{  scroll-behavior: smooth;}
section h1,section h2,section h3,section h4,section h5,section h6,section p,section span,section a{line-height: 1.4;position: relative;z-index: 999;color: #000;}
section p,section li,section table tr td{font-weight: 400;line-height: 1.8;color: #000;font-size: 1.2rem;}


.photo img{width: 100%;}

/* 輪播 */
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #ff7876 !important; }
.owl-theme .owl-dots .owl-dot span, .owl-theme .owl-dots .owl-dot span { background: #c5b9b6 !important; }


/* 共通 */
section {padding: 100px 0;position: relative;}
section .container{position: relative;}
section p br { content: ""; margin: 1em; display: block; }

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

.container{max-width:1350px;}

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

#fluid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; color: hsla(180, 100%, 50%, 0.325); }




/* 大小標題共用 */
.master-title {margin:20px 0;}
.master-title.center {text-align: center;margin:10px auto 40px;}
.master-title h2 {font-weight: 700;display: inline-block;position: relative;letter-spacing: .05em;position: relative;font-size: 2.6rem;color: #000000;}
.master-title h2 span {color: #e31a23;}

.master-title.white h2 {color: #fff;}



.master-title .line {background-color: #e31a23;width: 120px;height: 6px;border-radius: 10px;margin: 10px 0 20px;}
.master-title.center .line{margin: 10px auto 20px;}

.master-title p {font-size: 1.3rem;font-weight: 500;}
.master-title.center {text-align: center;} 






thead th {font-size: 1.25rem;}
table tbody tr {border-bottom: 1px solid #cacaca;}
table tbody tr:last-child {border: none;}
table thead.border-color-1  {border-bottom: 5px solid rgba(88, 125, 88, 0.6);}
table thead.border-color-2  {border-bottom: 5px solid rgba(126, 169, 144, 0.6)}









/* 主視覺 */


header#visual {position: relative; width: 100%; height: 100vh; background: url(../images/header-bg.jpg) top right / cover; padding: 14% 6% 0;}
header#visual .logo {position: absolute;top: 5%; width: 15%;}
header#visual .header-title {padding: 30px;background-color: #e31a23;display: inline-block;}
header#visual .header-title h1{color: #fff;font-weight: 900;font-size: 4rem;margin: 0 0 20px;line-height: 1.6;}
header#visual .header-title h2{color: #fff;font-weight: 600;font-size: 1.6rem;}
header#visual .con {position: absolute;right: 5%; bottom: 8%;width: 68%;}
header#visual .con p{color: #fff;font-size: 1.4rem;line-height: 1.8;font-weight: 600;}


section#now .master-title p {text-align: left;} 
section#now .box .box-con{background-color: #f3f3f3;border-radius: 10px;overflow: hidden;}
section#now .box .box-con .photo { width: 100%; height: 240px; background-position: center; position: relative; background-size: 100%; transition: all .3s linear;}
section#now .box .box-con:hover .photo { background-size: 110%;} 
section#now .box:nth-child(1) .box-con .photo{background-image: url(../images/now-photo-01.jpg);}
section#now .box:nth-child(2) .box-con .photo{background-image: url(../images/now-photo-02.jpg);}
section#now .box:nth-child(3) .box-con .photo{background-image: url(../images/now-photo-03.jpg);} 

section#now .box .photo .box-title {padding: 5px 15px;background-color: #e31a23;width: 80%;text-align: center;position: absolute;bottom: -20px;left: 50%;transform: translate(-50%,0);}
section#now .box .photo .box-title h4 {margin: 0;color: #fff;font-weight: 600;}
section#now .box .text {padding: 40px 20px 20px;}
section#now .box .text ul li{list-style: none;position: relative;}
section#now .box .text ul li::before{position: absolute;content: "";width: 25px; height: 25px; background: url(../images/tick.svg) center / cover;left: -32px;top: 5px;}



section#new {background:url(../images/new-bg.jpg) ,linear-gradient(45deg,#000000,#0c0c0c);background-position:center bottom ;background-size: 100%;background-repeat: no-repeat;background-attachment: fixed;}
section#new .item-g {display:flex ;justify-content:space-between;align-items: center;}
section#new .item-g .item{width: 35%;position: relative;}

section#new .item-g .item:nth-child(2) {width: 30%;z-index: 99;}
section#new .item-g .item:nth-child(1) .item-con:nth-child(2) {margin-top: 10%;position: relative;left: 18%;z-index: 999;}
section#new .item-g .item:nth-child(2) .item-con {position: relative;left: -10%;z-index: 999;}
section#new .item-g .item .item-con{background: linear-gradient(to right , #000 ,#9b00085f);border-radius: 10px;border: 1px solid #e31a23;padding: 20px;text-align: center;}
section#new .item-g .item .item-con h4  {color:#ff222d;margin: 0;} 
section#new .item-g .item .item-con p {color: #fff;margin: 0;}

section#new .box-item-g .box-item .box .box-title{background-color: #e31a23;padding:10px 20px;text-align: center;}
section#new .box-item-g .box-item .box .box-title h2,section#new .box-item-g .box-item .box .box-title h3 {margin: 0;color: #fff;font-weight: 600;}
section#new .box-item-g .box-item .box .box-title h3 {font-size: 1.5rem;font-weight: 400;}
section#new .box-item-g .box-item .box .focus-flex-g {display: flex;justify-content: space-between;padding:40px 20px 20px;}
section#new .box-item-g .box-item .box .focus-flex-g .focus-flex{display: flex;justify-content: space-between;align-items: center;width: 48%;}
section#new .box-item-g .box-item .box .focus-flex-g .focus-flex .icon{width: 150px;margin-right: 20px;}
section#new .box-item-g .box-item .box .focus-flex-g .focus-flex .icon img {width: 100%;}
section#new .box-item-g .box-item .box .focus-flex-g .focus-flex .text{width: calc(100% - 180px);}
section#new .box-item-g .box-item .box .focus-flex-g .focus-flex .text p {color: #fff;display: block;}


section#new .box-item-g .box-item {margin: 50px 0 250px;}
section#new .box-item-g .box-item .box .before-box {display: flex;min-height: 300px;border: 1px solid #e31a23;padding: 60px;border-radius: 10px;margin: 20px 0 ;}
section#new .box-item-g .box-item .box .before-box.bg1{
    background: url(../images/new-photo-01.jpg) , linear-gradient(to right,#9b00085f 10%, #000 50%)  ;background-size: contain;background-position:center right;background-repeat: no-repeat;}
section#new .box-item-g .box-item .box .before-box.bg2{
    background: url(../images/new-photo-02.jpg) , linear-gradient(to right,#9b00085f 10%, #000 50%)  ;background-size: contain;background-position:center right;background-repeat: no-repeat;}
section#new .box-item-g .box-item .box .before-box.bg3{
    background: url(../images/new-photo-03.jpg) , linear-gradient(to right,#9b00085f 10%, #000 50%)  ;background-size: contain;background-position:center right;background-repeat: no-repeat;}

section#new .box-item-g .box-item .box .before-box .text {width: 70%;}
section#new .box-item-g .box-item .box .before-box .text p{color: #fff;}
section#new .box-item-g .box-item .box .before-box .text h4 {color: #e31a23;font-size: 1.8rem;}



section#role {} 
section#role .box {background-color: #f3f3f3;}
section#role .box .photo {width: 100%;height: 350px;}
section#role .box .photo.photo-1 {background: url(../images/role-photo-01.jpg);background-size: cover;}

section#role .box .photo.photo-2 {background: url(../images/role-photo-02.jpg);background-size: cover;}

section#role .box .text {margin: 20px 0 ;padding:5px 20px;}
section#role .box .text h4{font-size: 1.6rem;text-align: center;}
section#role .box .text h4 span {background-color: #e31a23;padding: 5px 15px;margin: 5px 0 0;display: inline-block;color: #fff;}
section#role .box .text h4 br {display: none;}




section#compare {background: url(../images/compare-bg.jpg) no-repeat center center fixed;background-size: cover;} 
section#compare .table-g .table-head {border-bottom: 3px solid #e31a23;}

section#compare .table-g .table-row-flex {display: flex;align-items: stretch;}
section#compare .table-g .table-row-flex .table-td {border: 1px solid #e7e0e0;padding: 20px;display: flex;align-items: center;flex-wrap: wrap;}
section#compare .table-g .table-row-flex .table-td:nth-child(1) {width: 14%;font-weight: 600;font-size: 1.2rem;background-color: #f3f3f3;}
section#compare .table-g .table-row-flex .table-td:nth-child(2) {width: 43%;font-weight: 600;font-size: 1.2rem;background-color: #f3f3f3;}
section#compare .table-g .table-row-flex .table-td:nth-child(3) {width: 43%;font-weight: 600;font-size: 1.2rem;background-color: #f3f3f3;}

section#compare .table-g .table-row-flex .table-td.sing {width: 86%;}

section#compare .table-g .table-body .table-row-flex .table-td:nth-child(1) {background-color: #e31a23;color: #fff;font-weight: 600;font-size: 1.2rem;border-right: 3px solid #e31a23;border-top: 5px solid #e31a23;}
section#compare .table-g .table-body .table-row-flex .table-td:nth-child(1) h5 {color: #fff;margin: 0;}
section#compare .table-g .table-body .table-row-flex .table-td p {margin: 0;}
section#compare .table-g .table-body .table-row-flex .table-td a {font-weight: 400;color: #1655a8;margin: 0 0 5px;} 








/* 按鈕*/ 
section#BTN {position: relative;padding: 60px 0;background-color: #000;}
section#BTN  .btn h5{margin: 0;padding: 0; font-weight: 600;font-size: 1.4rem;transition: all ease 200ms;display: inline-block;color: #e31a23;text-wrap: wrap;}
section#BTN  a:hover h5 {color: #fff;}
section#BTN a {  text-decoration: none;display: block;text-align: center; width:100%;font-size: 1.2rem;font-weight: 600;transition: all ease 200ms;margin: 0 auto 20px;text-align: center;background-color: transparent;border: 3px solid #e31a23;padding: 10px;border-radius: 10px;}
section#BTN a:hover{background-color: #e31a23;}
section#BTN .btn {padding: 0;}










@media(max-width:1690px){
    .title h2 {font-size: 2rem;}
    /* 主視覺 */



}

@media(max-width:1440px){
     /* 主視覺 */
   

}

@media(max-width:1300px){
    /* 主視覺 */
    header#visual .logo { width: 25%; }



}
@media(max-width:1199px){
     /* 主視覺 */

     nav ul li { font-size: 1.1rem; }
     header#visual .header-title { width: 100%; }
   
}


@media(max-width:991px){


   section#BTN a {  width: 400px;}

     
     
}


@media(max-width: 767px){
    .container { padding: 15px;max-width: 98%; }
    .title h3 { font-size: 1.6rem; }
    h2{font-size: 1.6rem;}
    nav {position: relative;padding: 0;box-shadow: none;}
    nav ul li img { width: 20px; }
    nav ul { flex-direction: column;max-width: 100%; }
    nav ul li { margin:10px 0; }

    .master-title h2 {font-size: 1.8rem;}
    .master-title h2::before {left: -30px;top: -10px; width: 40px;height: 60px;}
    .master-title h2::after {right: -30px;top: -10px; width: 40px;height: 60px;}
    .master-title h4 { font-size: 1.3rem; }
    .master-title h5 { font-size: 1.1rem;line-height: 1.8; }
    .master-title p { font-size: 1.12rem; ; }
    
    section p, section li, section table tr td { font-size: 1.05rem; }

    section {padding: 20px 0;}

    header#visual { height: 620px; padding: 15% 2% 0; }
    header#visual .logo { width: 30%;    top: 3%; }
    header#visual .header-title h1 { font-size: 2.5rem; line-height: 1.6; }
    header#visual .header-title h2 { font-size: 1.4rem; }
    header#visual .con { right: 2%; bottom: 4%; width: 80%; }
    header#visual .con p { font-size: 1.2rem; line-height: 1.6; }


    section#now .box {margin: 0 0 20px;}
    section#now .box .box-con .photo { height: 320px; }




    
    section#new .box-item-g .box-item { margin: 20px 0 50px; }
    section#new .box-item-g .box-item .box .focus-flex-g { padding: 20px; flex-direction: column; }
    section#new .box-item-g .box-item .box .focus-flex-g .focus-flex { width: 100%; }
    section#new .box-item-g .box-item .box .focus-flex-g .focus-flex .icon { width: 100px; margin-right: 10px; }
    section#new .box-item-g .box-item .box .focus-flex-g .focus-flex .text { width: calc(100% - 140px); }
    section#new .box-item-g .box-item .box .before-box { min-height: 700px; padding: 20px; }
    section#new .box-item-g .box-item .box .before-box .text { width: 100%; }


    section#new .box-item-g .box-item .box .before-box.bg1 { background: url(../images/new-photo-01.jpg), linear-gradient(to bottom, #9b00085f 2%, #000 30%); background-position: bottom center;background-size: 100%; background-repeat: no-repeat;}
    section#new .box-item-g .box-item .box .before-box.bg2 { background: url(../images/new-photo-02.jpg), linear-gradient(to bottom, #9b00085f 2%, #000 30%); background-position: bottom center;background-size: 100%; background-repeat: no-repeat;}
    section#new .box-item-g .box-item .box .before-box.bg3 { background: url(../images/new-photo-03.jpg), linear-gradient(to bottom, #9b00085f 2%, #000 30%); background-position: bottom center;background-size: 100%; background-repeat: no-repeat;}


    section#compare .table-g .table-row-flex .table-td:nth-child(1) {width: 20%;font-size: 1.05rem;}
    section#compare .table-g .table-row-flex .table-td:nth-child(2) {width: 40%;font-size: 1.05rem;}
    section#compare .table-g .table-row-flex .table-td:nth-child(3) {width: 40%;font-size: 1.05rem;}
    section#compare .table-g .table-row-flex .table-td.sing { width: 80%; }
    section#compare .table-g .table-body .table-row-flex .table-td:nth-child(1) h5 { font-size: 1.15rem; }

    section#compare .table-g .table-row-flex .table-td { padding: 10px; }
    section#compare .table-g .table-row-flex .table-td ul {padding: 0 0 0 20px;margin: 0;}



    section#role .box .text h4 { font-size: 1.3rem; }
    section#BTN a { width:100%;margin: 0 0 40px;}










}












@media(max-width: 575px){
    .container { padding: 30px; }
    .title h3 { font-size: 1.6rem; }
    h2{font-size: 1.6rem;}
    h3{font-size: 1.3rem;}
    h4{font-size: 1.2rem;}
    h5{font-size: 1.1rem;}
    .title h4 { font-size: 1.3rem; }

    header#visual { height: 750px; padding: 20% 2% 0; }
    header#visual .logo { width: 45%; top: 5%; }
    header#visual .header-title {margin: 30px 0 0;}
    header#visual .header-title h1 { font-size: 2.5rem; line-height: 1.6; }
    header#visual .header-title h1 br {display: none}
    header#visual .header-title h2 { font-size: 1.4rem;line-height: 1.6; }
    header#visual .con { width: 85%; }

    section#now .box .box-con .photo { height: 200px; }
    section#role .box .photo { height: 200px; }

}