body { font-family: "Arial","微軟正黑體"; overflow-x: hidden;background: url("../images/bg.jpg") center 100px;background-size: 50%; }

header#Visual {background-image: linear-gradient(to top, rgba(22, 75, 102, 0.8), rgba(22, 75, 102, 0.8)), url("../images/header-bg.jpg");background-size: 100%,cover; background-position: center,center;  z-index: -99;height: 100vh;display: flex;align-items: center;justify-content: center;}

header .Visual_content{margin:0 auto;position: relative;padding:20px;}
header#Visual .Visual_content .Visual_title_content{margin: 20px auto;}
header#Visual .Visual_content .Visual_title_content > h1{font-size:5.2rem;line-height: 7rem;font-weight: bold;color:#fff;text-align:center;}
header#Visual .Visual_content .Visual_title_content > h1 span{color: #ffcc00;}

header#Visual .Visual_content .Visual_txt_content{margin:6% auto;}
header#Visual .Visual_content .Visual_txt_content > p{font-size:2rem;line-height:3.6rem; font-weight: 400;color:#d0ffff;text-align: center;margin-bottom: 0.8rem;}

.logo { position: absolute; top: -40px; left: 64%; width: 22%; }
.logo img{width: 100%;}


.responsive-img{width: 100%;}
.container { max-width: 70%;}

.page_title{margin: 0 auto 30px;}
.page_title h2{text-align: center;font-size: 2.4rem;line-height: 3.8rem;}
.page_title.white h2{color: #FFF;}
.page_title h4{text-align: center;font-size: 1.6rem;line-height: 2.8rem;margin: 60px 0;color: #E8540A;}
.page_title .icon{width: 80px;margin: 0 auto 10px;}


.banner{width: 100%;height: 480px;background: url("../images/banner.jpg") center 35% no-repeat;background-size: cover;}

header#Visual .Visual_content .Visual_btn_all{display: flex;justify-content: space-around;width: 100%;}
header#Visual .Visual_content .Visual_btn_all .btn{width: 25%;background-color: #fff;margin: 20px 0;transition: all .3s linear;border-radius: 5px;   white-space:inherit;position: 0;position: relative;}
header#Visual .Visual_content .Visual_btn_all .btn a{color: #1E4558;font-size: 1.4rem;margin: 0;font-weight: 600;transition: all .3s linear;display: block;padding: 10px 15px;}

header#Visual .Visual_content .Visual_btn_all .btn:hover{transform: translateY(-5px);}
header#Visual .Visual_content .Visual_btn_all .btn:hover a{color: #3584ac;}
header#Visual .Visual_content .Visual_btn_all .btn::after{content: "";position: absolute;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #ffffff transparent transparent transparent;
transform: translate(-50%,-50%);left: 50%;bottom:-30px;}

/* pageA 頁面*/
.pageA{display: block;}
.pageA_box_content{width: 100%;display: flex;margin: 100px 0;}
.pageA_box_content.right_content{justify-content: flex-end;}

.pageA_box_content .pageA_box{width: 70%;padding: 50px 20px;position: relative;color: #fff;}
.pageA_box_content .pageA_box .pageA_box_bg{width: 100%;height: 100%;position: absolute;top:0;}
.pageA_box_content:nth-child(odd) .pageA_box .pageA_box_bg{background-color: #00818A;right:0;}
.pageA_box_content:nth-child(even) .pageA_box .pageA_box_bg{background-color:#1787BC;left: 0;}
.pageA_box_content:nth-child(5) .pageA_box .pageA_box_bg{background-color:#EB7D3E;right: 0;}

.pageA_box_content .context{display: flex;transform:translateX(20%);}

.pageA_box_content.right_content .context{display: flex;transform:translateX(-20%);}
.pageA_box_content .pageA_box .context .context_img{width:40%;}
.pageA_box_content .pageA_box .context .content_text{width: 56%;margin: 0 2%;}
.pageA_box_content .pageA_box .context .content_text .person{text-align: end;color: #ffea97;}
.pageA_box_content .pageA_box .context .content_text .person > p{font-size: 1.2rem;font-weight: 400;}


.pageA_box_content .pageA_box .context .content_text .box_title{margin: 20px 0;text-align: end;position: relative;padding: 0 5px;text-align: justify;}
.pageA_box_content .pageA_box .context .content_text .box_title > h3{color: #ffea97;font-size: 2rem; line-height: 2.8rem;font-weight: 600;}
.pageA_box_content .pageA_box .context .content_text .box_title::before{content: '“';position: absolute;left:-30px;top:-5px;font-size: 1.75rem;font-family: 'Noto Sans TC', sans-serif, "微軟正黑體";font-weight: 600;color: #ffea97;}
/* 
.pageA_box_content .pageA_box .context .content_text .box_title::after{content: '‛‛';position: absolute;right:-25px;bottom:-35px;font-size: 3rem;transform: rotate(180deg);} */

.pageA_box_content .pageA_box .context .content_text  i {margin-right:5px;}
.pageA_box_content .pageA_box .context .content_text .btn{padding: 0;margin: 0;}
.pageA_box_content .pageA_box .context .content_text .btn i {margin-left: 5px;transition: all .3s linear;}
.pageA_box_content .pageA_box .context .content_text .btn:hover i{margin-left: 10px;}

.pageA_box_content .pageA_box .text_more{position: relative;height:350px;overflow: hidden;}
.pageA_box_content .pageA_box .text_more.active{height:auto;}
.pageA_box_content .pageA_box .text_more:after{content: "";  width: 100%;position:absolute;  height: 100px;background: linear-gradient(to top ,#00818A,#00818a31);z-index: 99;bottom:0;}
.pageA_box_content .pageA_box .text_more.active:after{height:0;} 

#more_text .modal-body{padding:0 30px 30px;}
#more_text .modal-body p:first-child{margin: 10px 0 0;}
#more_text .modal-body p{font-family: '標楷體';font-size: 1.4rem;}
#more_text .modal-body .person{text-align: end;margin: 10px 0;color: #00818A;font-size: 1.2rem;}
.modal-mx{max-width: 80%;}
.modal-content.yellow{background-color: #FBF2D1;text-align: center;}
.modal-content.yellow img{width: 94%;}


/* pageB 頁面*/
.pageB{display: block;background: linear-gradient(to top, rgba(22, 75, 102, 1), rgba(22, 75, 102, 1));padding: 80px 0;position: relative;}
.pageB .letter_bg{position: absolute;width: 100%;top: 0;left:0;z-index: 1;}
.pageB .letter_bg_icon{position: absolute;width: 15%;top: 5%;right:20%;z-index: 1;}
.pageB .pageB_title > h2{color: rgba(255, 255, 255, 0.3);font-size:5rem;font-weight: 100;padding: 15px;}
.pageB .letter_box{ display: flex; align-items: center; justify-content: space-between; background-color: #fff;border-radius: 10px;padding: 20px;margin:15px 0;cursor: pointer;transition: all .3s linear;z-index: 99;position: relative;}
.pageB .letter_box:hover{transform: translateY(5px);}
.pageB .letter_box .letter_img{width:50px;margin-right: 10px; }
.pageB .letter_box .letter_text{width: 82%;}
.pageB .letter_box .letter_text h5{margin: 0;}

/* 跳窗修正 */


/* pageC 頁面*/
.pageC{padding: 80px 0;}

.pageC .pageC_box{background-color: #1787BC;border-radius: 10px;padding: 15px;display: flex;justify-content: space-between;align-items: center;width: 80%; margin: 0 auto;}
.pageC .pageC_box .icon{width:6%;margin:0  auto;}
.pageC .pageC_box .text{background-color: #fff;border-radius: 10px;width:88%;padding:  30px 15px;text-align: center;}
.pageC .arrow{margin: 0 auto;width: 2%;margin: 10px auto;}
.pageC .pageC_photo {margin:80px auto;}
.pageC .pageC_photo .photo{margin:20px auto;border-radius: 10px;overflow: hidden;}




/* pageE 頁面*/


@media(max-width:1440px){
    .container{max-width: 80%;}

}
@media(max-width:1199px){
    .container{max-width: 90%;margin:0 auto;}
    header .Visual_content{width: 100%;padding:0 15px;}
    header#Visual .Visual_content .Visual_title_content > h1{font-size:4.2rem;line-height: 6rem;}
    header#Visual .Visual_content .Visual_txt_content > p { font-size: 1.8rem; line-height: 3rem; }
     
    .banner { height: 280px; }
    /* pageA 頁面*/
    .pageA_box_content .pageA_box { width: 80%; }
    .pageA_box_content.right_content .context { transform: translateX(-5%); }
    .pageA_box_content .pageA_box .context .context_img { width: 40%; }
    .pageA_box_content .pageA_box .context .content_text { width: 56%; }
  

      /* pageC 頁面*/
    
 
    
     /* pageE 頁面*/

}
@media(max-width:991px){

}
@media(max-width:768px){

    .page_title h2{text-align: center;font-size: 1.8rem;line-height: 3rem;}
    .page_title h4{font-size: 1.4rem; line-height: 2.6rem;}
    .page_title .icon{width: 50px;}



    header#Visual { z-index: -99; height:auto; padding: 40px 0; }
    header#Visual .Visual_content .Visual_title_content > h1{font-size:2.7rem;line-height: 4rem;}
    header#Visual .Visual_content .Visual_txt_content > p { font-size: 1.4rem; line-height: 2.6rem; }
    header#Visual .Visual_content .Visual_txt_content { margin:50px auto 0; }

    /* pageA 頁面*/
    .pageA_box_content .pageA_box { width: 100%;padding: 0 5%; }
    .pageA_box_content .context { display: flex;flex-direction:column-reverse; transform: translateX(0%); }
    .pageA_box_content.right_content .context { transform: translateX(0%); }
    .pageA_box_content.right_content .context { display: flex; flex-direction: column; transform: translateX(0%); }
    .pageA_box_content .pageA_box .context .context_img { width: 100%;margin: 30px 0 0; }
    .pageA_box_content .pageA_box .context .content_text { width: 100%;margin: 20px 0; }
    .pageA_box_content .pageA_box .context .content_text .box_title { padding: 15px; }
    .pageA_box_content .pageA_box .context .content_text .box_title  h3 { font-size: 1.4rem; }
    .pageA_box_content:nth-child(odd) .pageA_box .context .content_text .box_title > h3 { line-height: 2rem; }
    .pageA_box_content:nth-child(even) .pageA_box .context .content_text .box_title > h3 { line-height: 2rem; }
    .pageA_box_content .pageA_box .context .content_text .person > p { font-size: 1.2rem; }
    /* pageB頁面 */
    .pageB .letter_bg_icon {width:25%; top: 2%; right:5%; z-index: 1; }
    .modal-body img { width: 100%; }

    /* pageC頁面 */
    .page_title h4 { font-size: 1.4rem; line-height: 2.6rem; margin: 40px 0; }
    .pageC .pageC_box { padding: 15px; flex-direction: column; width: 100%; }
    .pageC .pageC_box .icon { width: 10%; margin:0 auto 10px ; }
    .pageC .pageC_box .text { width: 100%; padding: 30px 15px; text-align: center; }
    .pageC .arrow { width:8%; }
}

@media(max-width:575px){
    .container { max-width: 98%; }
    .banner { height: 250px; }
    

    header#Visual .Visual_content .Visual_btn_all .btn{width:48%;}
    header#Visual .Visual_content .Visual_btn_all .btn a{font-size: 1.4rem;padding: 8px 12px;}
  

    .pageA_box_content .pageA_box .context .content_text .box_title { margin: 0; text-align: end; }
    .pageA_box_content .pageA_box .context .content_text .box_title::before{content: '“';left:-15px;top:15px;}
    .pageA_box_content .pageA_box .context .content_text .person > p { font-size: 1rem;text-align: left; }
    .pageA_box_content .pageA_box .context .content_text .box_title > h3 { text-align: left; }
    .pageA_box_content .pageA_box .context .content_text .box_title { padding: 15px 0 0; }
 
}