@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=League+Spartan:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');
body{ 
    font-size:14px; 
    font-family: Montserrat,'Noto Sans TC', Helvetica,sans-serif,nsimsun; 
    color:#5b5b5b; 
    position:relative;
    background-color: #fff;
    /*overflow-y: hidden; */
}

a{ color:#333;}a:hover{ color:var(--orange_01);}
* { 
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
  
/*   html{
    overflow-y: hidden; 
    position:static;
} */

html{
  scroll-behavior: smooth;
}

body{
    width: 100%;
    overflow-x: hidden;
    animation-name: fade-in;
    animation-duration:1s;
    animation-timing-function:ease-in;
}
@keyframes fade-in{
    0%{
        opacity:0;
    }
    100%{
        opacity: 1;
    }
}

body.active{
    overflow: hidden;
}

::selection {
    background: #d3581f;
    color: #fff;
}
::-moz-selection {
    background: #d3581f;
    color: #fff;
}


/****** scrollbar ******/
 ::-webkit-scrollbar {
    width: 8px;
    background-color: #f5f5f5;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px #f5f5f5;
    background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background-color: #007987;
    border: 2px #f5f5f5 solid;
    border-radius: 5px;
}

/*==============================================*/

/*共用*/
:root {
    --green_01: #007987;

    --orange_01: #e76224;


  
}



.overflow-x{
    overflow-x: hidden;
}

.all_title01{
    font-size: 24px;
    font-weight: 700;
    color: #545454;
}

.all_title02{
    color: var(--green_01);
    font-size: 28px;
    font-weight: 700;
}

.all_title03{
    font-size: 22px;
    font-weight: 700;
    color: #003e52;
    line-height: 38px;
}


.all_title04{
    
}

/*-------*/


.all_introduce_01{
    font-size: 18px;
    line-height: 32px;
    color: #686868;
}

.all_introduce_02{
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #5b5b5b;
}

/*-------*/


.all_btn01{
    font-size: 18px;
    color: #fff;
    background-color: #1ba586;
    padding: 16px 25px;
    text-align: center;
    display: block;
    width: 100%;
    border-radius: 10px;
    transition: .3s;
    letter-spacing: 1.2px;
}

.all_btn01:hover{
    color: #fff;
    background-color: #1ba586;
}




.all_btn02{
    font-size: 15px;
    color: #fff;
    background-color: var(--orange_01);
    padding: 10px 18px;
    text-align: center;
    display: block;
    border-radius: 30px;
    transition: .3s;
    letter-spacing: 1.2px;
}

.all_btn02:hover{
    color: #fff;
    background-color: var(--green_01);
}



.all_btn03 {
    font-size: 16px;
    color: #fff;
    background-color: #1ba586;
    box-shadow: 0 0 10px #3332;
    padding: 16px 30px;
    text-align: center;
    display: block;
    border-radius: 10px;
    transition: .3s;
    letter-spacing: 1.2px;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}

.all_btn03:hover{
    color: #fff;
    background-color: var(--green_01);
}

.all_btn03 span{
    width: 20px;
    height: 20px;
    background-color: var(--green_01);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: .3s;
}

.all_btn03 span i{
    
}

.all_btn03:hover span{
    color:var(--green_01);
    background-color: #fff;
}



.all_btn03.white {
    color: #333;
    background-color: #fff;
}

.all_btn03:hover{
    color: #fff;
    background-color: var(--green_01);
}


.all_btn03.white i{
    color: var(--orange_01);
}

.all_btn03.white:hover i{
    color:#fff;
}




.all_btn03.color2 {
    color: #333;
    background-color: #ddd;
    box-shadow: 0 0 0 #3333;
}

.all_btn03:hover{
    color: #ddd;
    background-color: var(--green_01);
}

.all_btn03.color2 span{
    background-color: #aaa;
}

.all_btn03.color2 i{
    color: #fff;
}


.all_btn03.color2:hover span{
    background-color:#fff;
}

.all_btn03.color2:hover i{
    color:var(--green_01);
}



/*-------*/


.all_title_div{
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;

}

.all_title_div.style02 {
    gap: 20px;
    flex-direction: row;
    align-items: center;
}



.all_title_div.center{
    align-items: center;
}


.all_title_div h3{
    color: #e76224;
    font-size: 18px;
}

.all_title_div h3.bg{
    padding: 12px 25px;
    border-radius: 30px;
    background: linear-gradient(90deg,
        rgba(255, 241, 238, 1) 0%,
        rgba(255, 241, 238, 1) 30%,
        rgba(255, 241, 238, 0) 100%);
}

.all_title_div h2{
    font-size: 30px;
    font-weight: 800;
    color: #443f3b;
}

.all_title_div h4 {
    font-size: 28px;
    font-weight: 800;
    color: #000;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.all_title_div h5{
    color: #e76224;
    background-color: #fff;
    font-size: 16px;
    padding: 5px 15px;
    border-radius: 20px;
}

/*-------*/

.all_titlebox_01 {
    display: flex;
    gap: 13px 20px;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
    position: relative;
}

.all_titlebox_01:after{
    content: "";
    width: 13px;
    height: 13px;
    position: absolute;
    top: 7px;
    left: -40px;
    border-radius: 50%;
    border: 6px #eb6938 solid;
    background-color: #fff;
    z-index: 0;
}

.all_titlebox_01.white:after{
    border: 6px #fff solid;
    background-color: #eb6938;
    z-index: 0;
}

.all_titlebox_01 h3{
    font-size:40px;
    letter-spacing: 2px;
    color: #545454;
    font-weight: 700;
    line-height: 40px; 
}

.all_titlebox_01.white h3{
    color: #fff;
}

.all_titlebox_01 h4{
    color: #b1b1b1;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}


/*------*/


.all_titlebox_01.center {
    gap: 15px 20px;
    flex-direction: column;
    align-items: center;
}

.all_titlebox_01.center:after{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    

}




/*-------*/

.center{
    text-align: center;
}


.all_width{
    width: 1820px ;
    margin: 0 auto;
    max-width: 90%;
}

.all_width_02{
   width: 1520px ;
    margin: 0 auto;
    max-width: 90%; 
}

.all_width_03{
   width: 1320px ;
    margin: 0 auto;
    max-width: 90%; 
}

.all_width_04{
   width: 920px ;
    margin: 0 auto;
    max-width: 90%; 
}

.all_box{
    padding: 100px 0;
    position: relative;
    z-index: 1;
}


.bg_color01{
    background-color: #193847;
}
.bg_color02{
    background-color: #cfc6b5;
}
.bg_color03{
    background-color: #dbaaa3;
}

/*==============================================*/


.menu{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    z-index: 1000;
    background-color: #db6031;
    transition: .3s;
    padding: 20px 0;
    border-radius: 20px;
    border: 3px #fff0 solid;
    box-shadow: 0 0 10px #3330;
}

.menu.active{
    border: 3px #ffffff73 solid;
    box-shadow: 0 0 10px #3333;
}




.menu_logo{
    /*position: absolute;*/
    width: 217px; 
    position: relative;
    z-index: 10;
}


.menu_logo img{
    width: 100%;
}

.menu_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    padding: 0 30px;
}

.menu_list {
    display: flex;
    gap: 20px;
    align-items: center;
}


.menu_list>ul{
    display: flex;
    gap: 0 5px;
}

.menu_list>ul>li{

}

.menu_list>ul>li>a{
    font-size: 21px;
    font-weight: 500;
    display: block;
    padding: 7px 20px;
    border-radius: 30px;
    background-color:#fff0;
    transition: .3s;
    color: #fff;
}

.menu_list>ul>li>a:hover{
    color: #eb6938;
    background-color:#fff;
}




.menu_language{
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    font-size: 24px;
    background-color: #fff;
    color: #db6031;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s;
}

.menu_language:hover{
    background-color: #1ba586;
    color: #fff;
}


.language_Frame {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(25, 25, 25, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;

    
}

.language_Frame.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow-y: auto;
}

.language_Frame::-webkit-scrollbar {
    width: 3px;
    background-color: #fff;
}

.language_Frame::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #fff;
    background-color: #fff;
}

.language_Frame::-webkit-scrollbar-thumb {
    background-color: var(--gray_01);
    border-radius: 5px;
}



.language_Frame.disabled{
/*    display: none;*/
    
}

.language_Frame.disabled .setting_pop_BgClose {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

.language_box {
    position: relative;
    max-height: 93vh;
    background-color: #fff;
    text-align: center;   
/*    overflow: hidden;*/
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    margin-bottom: 50px;
}





/*========*/
.lan_title{
    font-weight: 600;
    font-size: 18px;
    padding: 15px 20px;
    width: 100%;
    border-bottom: 1px #ddd solid;
    text-align: left;
}

.lan_title h3{
    display: flex;
    gap: 0 10px;
}



.lan_list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

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

.lan_list li.active a{
    background-color: #ffece0;
    color:var(--orange_01);
}

.lan_list li a{
    padding: 20px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: .3s;
    font-size: 16px;
}

.lan_list li img{
    width: 35px;
    border-radius: 5px;
    border: 1px #eee solid;
}

.lan_list li:nth-last-child(1){
    border-bottom: 0px #ddd solid;
}






/*========*/

.language_box .close_box {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.language_box .close_box::before,
.language_box .close_box::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 15px;
    height: 2px;
    background-color: #9CA3AF;
}
.language_box .close_box::before {
    transform: rotate(45deg);
}
.language_box .close_box::after {
    transform: rotate(135deg);
}

/*========*/

.lan_body {
    width: auto;
    max-width: 100%;
/*    max-height:calc(95vh - 100px);*/
/*    overflow-x: hidden;*/
/*    overflow-y: auto;*/
    box-sizing: border-box;
    margin: 0 auto;
    /*text-align: center;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px 50px;

    overflow-y: auto;
    max-height: calc(93vh - 80px);
    
    /*padding:  20px 30px 20px 30px;*/
    flex-direction: row;
}


.lan_body::-webkit-scrollbar {
    width: 3px;
    background-color: #fff;
}

.lan_body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #fff;
    background-color: #fff;
}

.lan_body::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 5px;
}



/*=======================*/


.lan_BgClose {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;

    
    transition: .3s;
    cursor: pointer;
}

.lan_BgClose.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/*=======================*/












.menu_close_bg{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #0003;
    left: 0;
    top: 0;
    transition: .3s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
}

.menu_close_bg.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}




.menu_close_bg {
    display: none;
}


.menu_3line_box {
    width: 60px;
    height: 60px;
    border-radius: 25px;
    position: relative;
    display: block;
    background-color: #653b1a;
    cursor: pointer;
    transition: .3s;
}

.menu_3line_box:hover{
    background-color: #121211;
}


.menu_3line {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    right: 0px;
    
    z-index: 30;
    transition: .5s;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}


.menu_3line li {
    width: 25px;
    height: 3px;
    background: #fff;
    transition: .5s;
    display: block;
    position: absolute;
    border-radius: 10px;
    top: 50%;
    right: 0;
    transform: translateY(-50%)rotate(0deg);
}

.menu_3line li:nth-child(1) {
    top: calc(50% - 8px);
    width: 25px;
}

.menu_3line li:nth-child(3) {
    top: calc(50% + 8px);
    width: 25px;
}

  
.menu_3line.active li:nth-child(1) {
    transform: translate(-50%,-50%)rotate(-45deg);
    top: 50%;
    left: 50%;
    width: 25px;
    transition: .5s; 
}
.menu_3line.active li:nth-child(2) {
    width: 0px;
}

.menu_3line.active li:nth-child(3) {
    transform: translate(-50%,-50%)rotate(45deg);
    top: 50%;
    left: 50%;

    width: 25px;
    transition: .5s; 
}


/*===================================*/


.menu_fix{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #fef0e5;
    z-index: 1000;
    display: flex;
    overflow-y: auto;

    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: .3s;
    top: 15px;
    align-items: flex-start;
}

.menu_fix.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    top: 0;
}



.menu_fix .list_box{
    width: 60%;
    padding: 30px 3% 100px 3%;
}

.menu_fix .list_box .top_logo{
    margin-bottom: 40px;
}





.menu_box_list {
    display: flex;
    gap: 50px 21px;
    flex-wrap: wrap;
    margin: 40px 0 0 2%;
    padding-bottom: 90px;
}

.menu_box_list>li{
    width: calc(33.3% - 14px);
}

.menu_box_list>li.two{
    width: calc(66.6% - 7px);
}

.menu_box_list>li h3{
    color: #f06b38;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}

.menu_box_list>li h2{
    color: #333;
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #979797;
}


.menu_box_list>li ul {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
}

.menu_box_list>li.two ul{
    flex-direction: row;
}

.menu_box_list>li ul li{
    list-style-type: disc;
    font-size: 16px;
    width: 100%;
    transition: .3s;
}

.menu_box_list>li ul li a{
    transition: .3s;
}

.menu_box_list>li ul li a:hover{
    color: #f06b38;
}

.menu_box_list>li.two ul li{
    width: calc(50% - 5px);
}







.menu_fix .info_box{
    width: 40%;
    padding: 30px 3% 100px 3%;
    background-color: #f06b38;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

.menu_fix .info_box .btn_box{
    position: relative;
    z-index: 1;
    padding-top: 90px;
    margin-bottom: 50px;
}

.menu_fix .info_box .menu_fix_bg{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 120%;
    z-index: 0;
}

.menu_fix .info_box .top_icon{
    position: relative;
    z-index: 3;
    cursor: pointer;
}

.menu_fix .info_box .top_icon div {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 30;
    transition: .5s;
    width: 55px;
    height: 55px;
    border-radius: 20px;
    display: flex;
    background-color: #35c178;
    color: #fff;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    border: 2px #fff solid;
}

.menu_fix .info_box .top_icon div:hover{
    background-color: #333;
}


/*=======*/


.menu_fix .info_box .btn_box{
    display: flex;
    gap: 20px;

}

.menu_fix .info_box .btn_box a {
    display: flex;
    position: relative;
    padding: 20px 20px;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    flex-direction: column;
    gap: 18px;
    max-width: calc(50% - 10px);
    box-shadow: 0 0 10px #3333;
    width: 280px;
}

.menu_fix .info_box .btn_box a img {
    position: absolute;
    right: 10px;
    bottom: -12%;
    width: 70px;
    transform: rotate(-20deg);
}

.menu_fix .info_box .btn_box a img{
    
}


.menu_fix .info_box .btn_box a h3{
    font-size: 20px;
    font-weight: 500;
    color: #333;
}

.menu_fix .info_box .btn_box a span{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--orange_01);
}



.menu_fix .info_box .info_text{
    position: relative;
    z-index: 1;
}


.menu_fix .info_box .icon{
    display: flex;
    gap: 15px;
    margin-bottom: 50px;
}
    

.menu_fix .info_box .icon a {
    width: 45px;
    height: 45px;
    font-size: 20px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fc7e1a;
    background-color: #fff;
    transition: .3s;
}

.menu_fix .info_box .icon a:hover{
    background-color: #35c178;
    color: #fff;
}




.menu_fix .info_box .icon a.text{
    width: auto;
    border-radius: 30px;
    padding: 0 20px;
    font-size: 16px;
}



.menu_fix .info_box .info{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.menu_fix .info_box .info p{
    font-size: 17px;
    color: #fff;
    transition: .3s;
    font-weight: 500;
}

.menu_fix .info_box .info a:hover{
    color: var(--orange_01);
}





















/*------------------------------------------*/


.footer {
    display: flex;
    align-items: center;
    align-items: stretch;
    position: relative;
}

.footer_b1{
    position: absolute;
    bottom: calc(100% - 50px);
    left: -10px;
    z-index: 1;
}

.footer_list {
    width: 60%;
    padding: 80px 6% 120px calc(50% - 660px);
    background-color: #f06b38;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow: hidden;
}

.footer_btn{
    position: relative;
    z-index: 1;
}

.footer_btn h4{
    font-size: 18px;
    color: #ffffffb5;
    margin-bottom: 20px;
}

.footer_btn .btn_box{
    display: flex;
    gap: 20px;
}

.footer_btn .btn_box a {
    display: flex;
    position: relative;
    padding: 20px 20px;
    border-radius: 20px;
    background-color: #fff;
    overflow: hidden;
    flex-direction: column;
    gap: 18px;
    max-width: calc(50% - 10px);
    box-shadow: 0 0 10px #3333;
    width: 280px;
}

.footer_btn .btn_box a img {
    position: absolute;
    right: 10px;
    bottom: -12%;
    width: 100px;
    transform: rotate(-20deg);
}

.footer_btn .btn_box a img{
    
}

.footer_btn .btn_box a img{

}

.footer_btn .btn_box a h3{
    font-size: 20px;
    font-weight: 500;
    color: #333;
}

.footer_btn .btn_box a span{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--orange_01);
}





.footer_menu {
    display: flex;
    gap: 15px 40px;
    position: relative;
    z-index: 1;
    margin: 20px 0 40px 0;
    flex-wrap: wrap;
    width: 500px;
    max-width: 100%;
}

.footer_menu a{
    font-size: 17px;
    color: #fffb;
    font-weight: 500;
    transition: .3s;
}

.footer_menu a:hover{
    color: #fff;
}



.footer_list .copyright{
    position: relative;
    z-index: 1;
    font-size: 18px;
    color: #fffa;
}

.footer_list .copyright a{
    transition: .3s;
    color: #fff8;
}

.footer_list .copyright a:hover{
    color: #fff;
}



.footer_bg {
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
}




.footer_info{
    width: 40%;
    padding: 50px calc(50% - 700px) 80px 6%;
    background-color: #fef0e5;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer_info .copyright{
    display: none;
}

.footer_info .logo{
    /*max-width: 90%;*/
    
}
.footer_info .logo img{
    width: 213px;
    margin-bottom: 10px;
}

.footer_info .logo h1{
    color: #333;
    font-size: 19px;
    letter-spacing: 2px;
}

.footer_info .icon{
    display: flex;
    gap: 15px;
}
    

.footer_info .icon a {
    width: 45px;
    height: 45px;
    font-size: 20px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background-color: #fc7e1a;
    transition: .3s;
}

.footer_info .icon a:hover{
    background-color: var(--orange_01);
}

.footer_info .icon a.text {
    width: auto;
    border-radius: 30px;
    padding: 0 20px;
    font-size: 16px;
    background-color: #1ba586;
}




.footer_info .info{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer_info .info p{
    font-size: 18px;
    color: #666666;
    transition: .3s;
    font-weight: 500;
}

.footer_info .info a:hover{
    color: var(--orange_01);
}



/*------------------------------------------*/


.padding_top{
    padding-top: 98px;
}



.i_b1{
    width: 100%;
    display: block!important;
    position: relative;
    /*margin-bottom: 40px;*/
    overflow: hidden;
}



.i_box1{
    width: 100%;
    position: relative;
    overflow: hidden;
    background-image: url(../img/bn_01_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.i_box1 .img{
    width: 922px;
    max-width: 60%;
    position: absolute;
    right: 5%;
    bottom: 5%;
}

.i_box1 .img img{
    width: 100%;
}

.i_box1 .info {
    position: absolute;
    display: flex;
    width: 600px;
    max-width: 50%;
    align-items: flex-start;
    z-index: 5;
    flex-direction: column;
    top: 25%;
    left: 5%;
}

.i_box1 .info .top_title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.i_box1 .info .top_title h5{
    color: #fc7e1a;
    font-size: 22px;
}



.i_box1 .info h3{
    font-size: 54px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #383535;
    margin-bottom: 20px;
}


.i_box1 .info p{
    font-size: 20px;
    color: #333;
    letter-spacing: 1.5px;
    line-height: 38px;
    margin-bottom: 30px;
}






.i_box2{
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.i_box2.about_page{
    padding: 120px 0 160px 0;
}

.i_box2.about_page.style2{
    padding: 100px 0 80px 0;
}    

.i_bg_01{
    position: absolute;
    left: 0%;
    top: 10%;
    max-width: 20%;
    will-change: transform;
    transition: transform 0.3s linear;
}

.i_bg_02{
    position: absolute;
    right: 0%;
    top: 23%;
    max-width: 50%;
    will-change: transform;
    transition: transform 1s linear;
}

.i_bg_03{
    position: absolute;
    right: 10%;
    top: 10%;
    max-width: 10%;
    will-change: transform;
    transition: transform 0.8s linear;
}



.i_b2_list{
    margin-bottom: 200px;
    position: relative;
    z-index: 1;
}

.i_service_list {
    display: flex;
    gap: 140px 28px;
    flex-wrap: wrap;
    align-items: center;
    margin: 120px auto 50px auto;
}

.i_service_list li {
    
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px #3332;
    width: calc(25% - 21px);
    
    min-height: 270px;
    position: relative;
    margin-bottom: -50px;
}

.i_service_list li:nth-child(even){
    margin-bottom: -130px;
}

.i_service_list li a{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 20px 20px 20px;
}

.i_service_list li .img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 10px #3333;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
}

.i_service_list li .img img{
    width: 90px;
    max-width: 100%;
}

.i_service_list li .info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}



.i_service_list li:nth-child(1){
    background-color: #e19a15;
}

.i_service_list li:nth-child(2){
    background-color: #f06b38 ;
}

.i_service_list li:nth-child(3){
    background-color: #3db887 ;
}

.i_service_list li:nth-child(4){
    background-color: #02c2cf ;
}

.i_service_list li:nth-child(5){
    background-color: #744ad8 ;
}

.i_service_list li:nth-child(6){
    background-color: #11a6a0 ;
}

.i_service_list li:nth-child(7){
    background-color: #852c7a ;
}

.i_service_list li:nth-child(8){
    background-color: #fb7ea8 ;
}





.i_service_list li .info h3{
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.i_service_list li .info p{
    color: #fff;
    font-size: 18px;
    line-height: 32px;
}








.i_about {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    background-color: #f8ede7;
    border-radius: 20px;
    padding: 60px 40px 40px 30px;
}

.i_about.about_page{
    margin: 150px auto 200px auto;
}

.i_about.align_center{
    align-items: center;
}

.i_about .img {
    width: calc(50% - 0px);
    display: flex;
    gap: 0;
    align-items: flex-start;
}

.i_about .img>div{
    position: relative;
}

.i_about .img .img02{
    width: 100%;
}




.i_about .img img{
    width: calc(50% - 0px);
}

.i_about .img .img01{
    margin-top: -20%;
}

.i_about .img .img02{
    margin-bottom: -20%;
    position: relative;
    z-index: 2;
}

.i_about .img .img02_icon{
    position: absolute;
    top: -80px;
    right: 20px;
    width: 120px;
    z-index: 1;
} 


.i_about .info{
    width: calc(50% - 10px);
    padding-left: 5rem;
    overflow: hidden;
}

.i_about .info .title{
    margin-bottom: 40px;
}

.i_about .info .title h3{
    font-size: 20px;
    font-weight: 700;
    color: var(--orange_01);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.i_about .info .title h2{
    color: #443f3b;
    font-size: 28px ;
    font-weight: 700;
}

.i_about .info p{
    margin-bottom: 40px;
    line-height: 38px;
}

.i_about .info p span{
    color: #0c8b9a ;
    font-size: 18px;
    /*margin-top: 20px;*/
    display: block;
}


.i_about .btn{
    display: flex;
}


.i_box2.about_page.style2.doctor {
    padding: 8% 0 100px 0;
}

.i_box2.about_page.style2{

}



/*========================*/



.i_box3{
    background-color:#f06b38 ;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}


.i_bg_04{
    position: absolute;
    left: 0%;
    top: 10%;
    max-width: 30%;
}


.i_bg_05{
    position: absolute;
    right: 0%;
    top: 40%;
    max-width: 30%;
}

.i_box3 .top_title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}

.i_box3 .top_title .all_titlebox_01{
    margin-bottom: 0;
}

.owl_nav_box {
    display: flex;
    gap: 15px;
}

.owl_nav_left,
.owl_nav_right{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: .3s;
    display: flex;
    align-items: center;
    color: var(--orange_01);
    justify-content: center;
    background-color: #fff;
    z-index: 100;
}

.owl_nav_left i,
.owl_nav_right i{
    font-size: 20px;
    
}



.owl_nav_left:hover,
.owl_nav_right:hover{
    background-color: #333;
    color: #fff;
}




.color2 .owl_nav_left,
.color2 .owl_nav_right{
    color: #67c186;
    /*background-color: var(--orange_01);*/
}

.color3 .owl_nav_left,
.color3 .owl_nav_right{
    color: #5fc0db;
    /*background-color: var(--orange_01);*/
}




.i_news{
    position: relative;
    z-index: 1;
}

.i_news .btn {
    display: flex;
    justify-content: center;
}

.i_news_ul{
    margin-bottom: 50px;
}

.i_news_ul li{
    margin: 20px 15px;
    border: 5px #ed819500 solid;
    border-radius: 23px;
    transition: .3s;
    /*border: 10px #f6b096 solid;*/
    position: relative;
}

.service_page_box.i_news_ul li{
    margin: 20px 5px;
}

.service_page_box.i_news_ul li:after{
    display: none;
}

.i_news_ul li:after{
    content: "";
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #f6b096;
    z-index: -1;
    border-radius: 23px;
    transition: .3s;
}


.i_news_ul li:hover:after{
    background-color: #fde1d6;
}

.i_news_ul li a {
    display: flex;
    gap: 20px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 0 10px #3333;
    position: relative;
    background-color: #fff;
    align-items: center;
    flex-direction: column;
}

.i_news_ul li a .img{
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 66%;
    border-radius: 20px;
}



.i_news_ul li a .info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px 10px 10px;
}

.i_news_ul li a .info h3{
    font-size: 22px;
    line-height: 32px;
    color: #565656;
    letter-spacing: 1.2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: .3s;
    text-align: left;
}

.i_news_ul li a .info h5 {
    background-color: #d3ede2;
    padding: 5px 20px;
    border-radius: 30px;
    color: #197e6a;
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
    display: inline-flex;
}


.i_news_ul li a .more {
    font-size: 16px;
    color: #777777;
    display: flex;
    gap: 5px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    align-items: center;
}


.i_news_ul li a .more span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 5px var(--orange_01) solid;
    background-color: #fff;
    z-index: 0;
}




.top_box{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--orange_01);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: .3s;

}

.top_box.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}







.i_box4{
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}






.i_book{
    position: relative;
    z-index: 1;
}

.i_book .btn {
    display: flex;
    justify-content: center;
}

.i_book_ul{
    margin-bottom: 50px;
    margin-top: 20px;
    width: 100%;
}

.book_b1 .i_book_ul {
    display: flex;
    gap: 30px 18px;
    flex-wrap: wrap;
}

.book_b1 .i_book_ul li{
    width: calc(33.3% - 12px);
    border: 2px #56b188 solid;
    margin: 0;
    background-color: #dbfae759;
}

.book_b1 .i_book_ul li a .info>div span{
    background-color: #46b192;
}

.book_b1 .i_book_ul li a .info>div h5{
    color: #aaa;
}


.i_book_ul li{
    margin: 20px 15px;
    border-radius: 23px;
    transition: .3s;
    border: 2px #f06b38 solid;
    position: relative;
    background-color: #fae9db;
}


.i_book_ul li a {
    display: flex;
    gap: 20px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 0 10px #3333;
    position: relative;
    align-items: center;
    flex-direction: column;
}

.i_book_ul li a .img{
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 66%;
    border-radius: 20px;
}



.i_book_ul li a .info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px 10px 10px;
}

.i_book_ul li a .info h3{
    font-size: 22px;
    line-height: 32px;
    color: #333;
    letter-spacing: 1.2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: .3s;
    text-align: left;
    margin-bottom: 25px;
}

.i_book_ul li a .info>div {
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.i_book_ul li a .info>div h5{
    font-size: 16px;
    font-weight: 600;
    color: var(--orange_01);
}

.i_book_ul li a .info>div span{
    background-color: #f06b38;
    color:  #fff;
    padding: 10px 30px;
    border-radius: 10px;

}


.service_page{
    padding: 20px 0 120px 0;
}


.service_info {
    font-size: 18px;
    line-height: 32px;
    background-color: #9cbfe733;
    border-radius: 20px;
    padding: 40px 25px;
}


.terms_info {
    font-size: 18px;
    line-height: 32px;
    background-color: #fff;
    border-radius: 20px;
    padding: 40px 25px;
    box-shadow: 0 0 10px #3333;
}












/*============================================*/




.in_page{
    background-color: #fff7f1;
}



.all_top_box{
    width: 100%;
    background-color: #eb6938;
    padding: 160px 0 40px 0;
    position: relative;
    margin-bottom: 10%;

}

.all_top_box .title_box {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: center;
}

.all_top_box .title_box h1{
    font-size: 38px;
    color: #fff;
    font-weight: 700;
}

.all_top_box .title_box h3{
    font-size: 24px;
    color: #fff;
}


.page_list {
    display: flex;
    gap: 5px 10px;
    align-items: center;
    margin-top: 20px;
    padding: 8px 22px;
    border-radius: 30px;
    background-color: #ffddd17d;
    flex-wrap: wrap;
}

.page_list a,
.page_list p{
    color: #fff;
    font-size: 18px;
}

.page_list span{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #fff;

}


.all_title_bg{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}








.all_page{
    padding-bottom: 100px;
}


.all_tab{
    margin:0px auto 20px auto;
}


.all_tab ul {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.all_tab ul li a {
    padding: 10px 20px;
    border-radius: 10px;
    display: flex;
    color: #0c8b9a;
    background-color: #f2edea;
    position: relative;
    font-size: 18px;
    transition: .3s;
}

.all_tab ul li.active a{
    color: #fff;
    background-color: var(--green_01);
}

.all_tab ul.active li a{
    color: #fff;
    background-color: var(--green_01);
}

.all_tab ul.active li a:hover{
    color: #fff;
    background-color: var(--orange_01);
}

.all_tab ul li a:hover{
    background-color: #e0dcd9;
}

.all_tab ul li.active a:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 7px 0;
    border-color: var(--green_01) transparent transparent;
}

.all_tab ul li.active a:hover{
    color: #fff;
    background-color: var(--green_01);
}


.all_tab.color1 ul li a {
    color: #0c8b9a;
    background-color: #f2edea;
}


/*=======================*/


.about_01 {
    padding: 60px 0 60px 0;
    background-color: #fbeae0a8;
    position: relative;
    /* background: linear-gradient(100deg, #fcf1ed, #edf6fc 50.35%, #f3f1fc 99.67%); */
}

.about_01>div{
    display: flex;
    gap: 50px;
}

.about_01 .img {
    width: 300px;
    max-width: 100%;
    margin-top: -120px;
}

.about_01 .img img {
    width: 100%;
    /*border-radius: 30px;*/
    /* border: 8px #fff solid; */
    /*box-shadow: 0px 8px 10px #1c1c1c1a;*/
}

.about_01 .info {
    width: calc(100% - 350px);
    display: flex;
    gap: 50px;
    flex-direction: column;
    padding-left: 20px;
}

.about_01 .info .title {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.about_01 .info .title span {
    margin: 12px 0 0 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 5px var(--orange_01) solid;
    background-color: #fff;
    display: inline-flex;
    padding-top: 10px;
}

.about_01 .info p{
    line-height: 38px;
}
    




.i_box2.style2 .i_about .info{
    width: 100%;
    padding-left: 0rem;
    padding-right: 5rem;
}



/*=====================*/

.news_page{
    padding: 20px 0 150px 0;
}

.news_page .all_tab,
.health_page .all_tab {
    margin-bottom: 50px;
}

.health_page{
    padding: 0px 0 150px 0;
}

.news_list {
    display: flex;
    gap: 50px 28px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.news_list.index{
    padding: 50px 0;
}

.news_list li{
    width: calc(25% - 21px);
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #3333;
    transition: .3s;
    overflow: hidden;
}

.news_list li:hover{
    box-shadow: 0 0 15px #725e4073;
}



.news_list li .img{
    width: 100%;
    padding-bottom: 66%;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    
}



.news_list li .info{
    padding: 20px 1.5rem;
}

.news_list li .info h3{
    font-size: 20px;
    line-height: 30px;
    color: #000;
    margin-bottom: 20px;
    letter-spacing: 1.2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 60px;
    transition: .3s;
}

.news_list li:hover .info h3{
    color: var(--orange_01);
}

.news_list li .info p{
    color: #7d8094;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 1px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 56px;
    margin-bottom: 20px;
}

.news_list li .info>div {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.news_list li .info h6{
    color: #242e45;
    font-size: 16px;
}

.news_list li .info>div span{
    background-color: #d3ede2;
    border-radius: 10px;
    color: #197e6a;
    font-size: 15px;
    right: 10px;
    top: 10px;
    padding: 5px 10px;
    transition: .3s;

}

.news_list li:hover .info span{
/*    color: #fff;
    background-color: #ed5d1b;*/
}





/*頁碼*/
.page_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    list-style: none;
    margin: 0;
    gap: 10px 12px;
}

.page_box li{
    margin: 0px;
}


.page_box li a{
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    width: 35px;
    height: 35px;
    transition: .3s;
    background-color: #f2edea;
    color: #333;
}


.page_box li.active a,
.page_box li.active:hover a{
    background-color: var(--orange_01);
    color: #fff;
}

.page_box li:hover a{
    background-color: var(--orange_01);
    color: #fff;
}

/*=============================*/




.contact_box{
    display: flex;
    gap: 30px 50px;
    margin: 180px auto 150px auto ;
    flex-wrap: wrap;
}

.contact_form{
    width: 700px;
    max-width: 100%;
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 0 10px #3333;
}

.contact_p{
    margin-bottom: 30px;
    font-size: 17px;
    color: #888;
}

.contact_p a{
    color: var(--orange_01);
}


.contact_form_box {
    display: flex;
    gap: 20px 20px;
    flex-wrap: wrap;
}

.reserve_bus_box .contact_form{
    width: 1000px;
    margin: 0 auto;
}


.reserve_bus_notice{
    font-size: 18px;
    line-height: 32px;
    background-color: #9cbfe733;
    border-radius: 20px;
    padding: 40px 25px;
    width: 1000px;
    margin: 0 auto;
    max-width: 100%;
}

.reserve_bus_info{
    font-size: 16px;
    line-height: 32px;
    background-color: #ffddda;
    border-radius: 20px;
    padding: 40px 25px;
    width: 1000px;
    margin: 0 auto;
    max-width: 100%;
}

.reserve_bus_info h3{
    color: #333;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 18px;
}


.contact_form_box .hr{
    border-bottom: 1px #ddd solid;
    width: 100%;
    padding-top: 20px;
    margin-bottom: 20px;
}

.contact_form_box .contact_title{
    color: #333;
    font-weight: 700;
    width: 100%;
    font-size: 18px;
}


.input_box01 {
    font-size: 17px;
    padding: 15px 20px;
    border: 1px #fff solid;
    width: 100%;
    outline: none;
    background-color: #ebebeb;
    border-radius: 30px;
    transition: .3s;
}

.input_box01:focus{
    background-color: #eee;
}

.input_box01:disabled{
    background-color: #d3d5db;
}

.input_box01[type="date"]{
    height: 53px;
}



.select_box01 {
    font-size: 17px;
    padding: 15px 20px;
    border: 1px #fff solid;
    width: 100%;
    outline: none;
    background-color: #ebebeb;
    border-radius: 30px;
    transition: .3s;
}

.select_box01:focus{
    background-color: #eee;
}

.select_box01:disabled{
    background-color: #eeedef;
}


.new_checkbox[type="checkbox"] {
    font-size: 20px;
    /* zoom: 180%; */
    -webkit-appearance: none;
    vertical-align: middle;
    /* margin-top: 0; */
    background: #fff;
    border: #d2d2d2 solid 1px;
    border-radius: 3px;
    min-height: 17px;
    min-width: 17px;
    position: relative;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.new_checkbox[type="checkbox"]:checked {
    background: var(--orange_01);
}

.new_checkbox[type=checkbox]:checked::after{
    content: '';
    top: 4px;
    left: 4px;
    position: absolute !important;
    background: transparent;
    border: #fff solid 3px;
    border-top: none;
    border-right: none;
    height: 4px !important;
    width: 7px !important;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


textarea.input_box01{
    height: 150px;
    font-size: 16px;

}

.contact_b1{
    width: calc(50% - 10px);
}

.contact_b2{
    width: 100%;
}


.gender_box {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 0 20px;
}

.gender_box label{
    color: #999;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.gender_box label input{
    width: 20px;
    height: 20px;
}





.contact_info{
    width: calc(100% - 750px);
    padding-top: 20px;
}

.contact_info .logo{
    margin-bottom: 40px;

}

.contact_info .logo img{
    max-width: 100%;
}



.contact_info .info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
}

.contact_info .info span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 5px var(--orange_01) solid;
    background-color: #fff;
    display: inline-flex;
}

.contact_info .info a {
    font-size: 16px;
    color: #222;
    transition: .3s;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}



.contact_info .icon {
    display: flex;
    gap: 15px;
}

.contact_info .icon a {
    width: 40px;
    height: 40px;
    font-size: 18px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--green_01);
    background-color: #fff;
    transition: .3s;
    box-shadow: 0 0 9px #0c8b9a14;
}




.contact_info .icon a:hover{
    color: #fff;
    background-color: var(--green_01);
}






.contact_info .other{
    margin-bottom: 20px;
}



.book_box{
    display: flex;
    gap: 70px;
    margin: 170px auto 100px auto;

}


.book_cate{
    width: 280px;
}

.inspection_page_title{
    color: #333;
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 20px;
    padding-left: 3px;
}

.book_cate_ul {
    width: 100%;
    background-color: #fff;
    padding: 10px 8px;
    border-radius: 15px;
    box-shadow: 0 0 10px #3332;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.book_cate_ul li a {
    padding: 10px 14px;
    font-size: 18px;
    display: flex;
    transition: .3s;
    border-radius: 7px;
}

.book_cate_ul li:hover a{
    color: #197e6a;
}

.book_cate_ul li.active a{
    background-color: #d3ede2;
    color: #197e6a;
}


.book_cate_ul li.logout{
    padding-top: 10px;
    border-top: 1px #ddd solid;
}
.book_cate_ul li.logout a{
    background-color: #ededed;
    color: #aaa;
    justify-content: center;
    transition: .3s;
}

.book_cate_ul li.logout:hover a{
    background-color: #edd3d3;
    color: #dd4a4a;
}


.book_b1{
    width: calc(100% - 350px);
}







.inspection_ul {
    display: flex;
    gap: 40px 24px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.inspection_ul.index{
    padding: 50px 0;
}

.inspection_ul li{
    width: calc(25% - 18px);
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #3331;
    transition: .3s;
    overflow: hidden;
}

.inspection_ul li:hover{
    box-shadow: 0 0 10px #725e4073;
}



.inspection_ul li .img{
    width: 100%;
}

.inspection_ul li .img img{
    width: 100%;
}



.inspection_ul li .info {
    padding: 18px 1rem;
}

.inspection_ul li .info h3{
    font-size: 18px;
    line-height: 28px;
    color: #000;
    margin-bottom: 2px;
    letter-spacing: 1.2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: .3s;
}

.inspection_ul li:hover .info h3{
    color: var(--orange_01);
}

.inspection_ul li .info p{
    color: var(--green_01);
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 1px;
    font-weight: 500;
}


.inspection_ul li .info>div span{
    background-color: #d3ede2;
    border-radius: 10px;
    color: #197e6a;
    font-size: 15px;
    right: 10px;
    top: 10px;
    padding: 5px 10px;
    transition: .3s;

}

.inspection_ul li:hover .info span{
/*    color: #fff;
    background-color: #ed5d1b;*/
}




/*====================*/


.inspection_d_box{
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.inspection_d_img{
    width: 400px;
}

.inspection_d_img img{
    width: 100%;
    border-radius: 10px;
    border: 10px #fff solid;
    box-shadow: 0 0 10px #3332;
}


.inspection_d_info{
    width: calc(100% - 450px);
}

.inspection_d_info h3.title{
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

.inspection_d_info p.num{
    padding: 7px 16px;
    color: #fff;
    background-color: var(--orange_01);
    font-size: 15px;
    border-radius: 20px;
    display: inline-flex;
}



.inspection_d_info .info_box{
    padding: 20px 0 50px 0;

}


.inspection_d_info .btn{
    display: flex;
}


.inspection_d_info .btn .all_btn03 {
    font-size: 14px;
    padding: 12px 20px;
}


.inspection_d_moreinfo{
    width: 100%;
}

.inspection_d_moreinfo h4.title{
    font-size: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.inspection_d_moreinfo h4.title span{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 5px var(--orange_01) solid;
    background-color: #fff;
    display: inline-flex;
}



.inspection_d_moreinfo .edit_box table{
    width: 100%;
    border-radius: 20px;
    /*border: 1px #ddd solid;*/
}

.inspection_d_moreinfo .edit_box table td{
    padding: 10px 10px;
    text-align: center;
    background-color: #fff;
}



.inspection_d_moreinfo .edit_box table tr:first-child th{
    background-color: #9ee0c7;
    padding: 10px 10px;
    color: #006f5a;
    text-align: center;
    font-weight: 700;
    
}


.inspection_d_moreinfo .edit_box table tr{
    border-radius: 15px 15px 0 0;
}


.inspection_d_moreinfo .edit_box table tr:first-child th:first-child {
    border-radius: 15px 0 0;
}

.inspection_d_moreinfo .edit_box table tr:first-child th:last-child {
    border-radius: 0 15px 0 0;
}


.inspection_d_moreinfo .edit_box table.table tr:not(:first-child) td {
    border: 1px solid #ddd;
}

.inspection_d_moreinfo .edit_box table.table tr:nth-child(odd) td {
    background-color: #f7f7f7;
}


/*================================*/




.news_d_page {
    padding: 20px 0 100px 0;
}

.news_d_page .all_title02{
    color: #333;
}

.news_d_page .title_box{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

.news_d_page .title_box h1{

}

.news_d_page .title_box .date {
    display: flex;
    gap: 20px;
    align-items: center;
}

.news_d_page .title_box .date span{
    background-color: #d3ede2;
    border-radius: 10px;
    color: #197e6a;
    font-size: 17px;
    right: 10px;
    top: 10px;
    padding: 5px 10px;
    transition: .3s;
}

.news_d_page .title_box .date span.color2{
    background-color: #dde6ee;
    color: #2d53ad;
}

.news_d_page .title_box .date h6{
    color: #242e45;
    font-size: 14px;
    line-height: 31px;
}


.news_d_page .info_box{
    width: 100%;
    background-color: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 0 10px #ddd3;
}

.news_d_page .info_box img{
    width: 100%;
    margin-bottom: 50px;
}

.news_d_page .info_box .edit_box{
    margin-bottom: 50px;
}

.news_d_page .info_box .edit_box img{
    max-width: 100%;
    height: auto!important;
}


.news_d_page .info_box .btn{
    display: flex;
    justify-content: center;
    gap: 20px;
}




.cate_btn i {
    display: none;
}

/*=====================*/


.traffic_box{
    margin-top: 30px;
    border-top: 1px #ddd solid;
    padding-top: 40px;
    width: 100%;
}

.map_b1 {
    display: flex;
    gap: 20px 21px;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
}

.map_b1>div{
    background-color: #fff;
    padding: 20px 20px 20px 20px;
    border-radius: 20px;
    width: calc(33.3% - 14px);
}

.map_b1 h4 {
    color: var(--green_01);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}


.map_b1 p{
    font-size: 18px;
    margin-bottom: 20px;
}


.map_b1>div div{
    width: 100%;
}

.map_b1 iframe{
    height: 200px;
    width: 100%;
}


/*=========================================*/

.service_title{
    position: relative;
    width: calc(100% - 50px);
    padding: 10px 20px 10px 80px;
    color: #fff;
    background-color: #e19a15;
    margin-left: 50px;
    font-size: 24px;
    font-weight: 700;
    border-radius: 20px;
    margin-bottom: 40px;


}


.service_title .img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 10px #3333;
    display: flex;
    align-items: center;
    justify-content: center;
    left: -50px;
    transform: translateY(-50%);
    top: 50%;
}

.service_title .img img {
    width: 90px;
    max-width: 100%;
}




.service_title.color1{
    background-color: #e19a15;
}

.service_title.color2{
    background-color: #f06b38 ;
}

.service_title.color3{
    background-color: #3db887 ;
}

.service_title.color4{
    background-color: #02c2cf ;
}

.service_title.color5{
    background-color: #744ad8 ;
}

.service_title.color6{
    background-color: #11a6a0 ;
}

.service_title.color7{
    background-color: #852c7a ;
}

.service_title.color8{
    background-color: #fb7ea8 ;
}




.service_info_box{
    background-color: #ffead8;
    border-radius: 20px;
    padding: 40px 25px;
    box-shadow: 0 0 10px #3333;
}














/*=========================================*/


/*會員登入*/


.login_box{
    width: 550px;
    max-width: 100%;
    border-radius: 20px;
    margin: 200px auto 50px auto;
    padding: 50px 50px 50px 50px;
    background-color: #fffef9;
    box-shadow: 0 0 15px #0000001f;    
}



.login_box .info{
    margin: 20px 0;
}



.login_box .input_box01{
    margin: 10px 0;
}

.login_box.title01,
.join_box.title01{
    display: flex;
    gap: 10px;
}

.login_box .title01 h2,
.join_box .title01 h2,
.member_b1 .title01 h2{
    font-size: 28px;
}


.login_box_a{
    text-align: center;
    display: block;
    font-size: 17px;
    margin: 0px 0 30px 0;
    transition: .3s;
}


.login_box p{
    text-align: center;
    display: block;
    font-size: 17px;
    padding: 5px 0;
    margin: 0px 0 0 0;
}

.login_box p a{
    border-bottom: 1px #aaa solid;
    padding: 3px 0;
    margin-left: 8px;
    transition: .3s;
}

.login_box p a:hover{
    color: var(--orange_01);
    border-bottom: 1px var(--orange_01) solid;
}

.login_code .input_box01{
    width: calc(100% - 150px);
    display: inline-block;
    vertical-align: middle;
}

.login_code .login_code_div{
    width: 142px;
    display: inline-block;
    vertical-align: middle;
}


.login_box .all_btn01{
    width: 100%;
    margin-bottom: 20px;
}

/*------------------------*/

/*加入會員*/

.join_box{
    width: 900px;
    max-width: 100%;
    border-radius: 20px;
    margin: 250px auto 150px auto;
    padding: 50px 50px 50px 50px;
    background-color: #fffef9;
    box-shadow: 0 0 15px #0000001f;    
}



.join_box .info {
    margin: 40px 0 20px 0;
    display: flex;
    gap: 20px 20px;
    flex-wrap: wrap;
    align-items: flex-end;
}


.join_input_01{
    width: calc(50% - 10px);
}

.join_input_02{
    width: calc(100% - 10px);
}

.join_input_02 textarea{
    height: 150px;
}


.join_gender{
    display: flex;
    gap: 10px;
}

.join_gender input{
    display: none;
}

.join_gender li{
    width: calc(50% - 5px);
}


.join_gender label{
    display: inline-block;
    text-align: center;
    font-size: 15px;
    padding: 12px 15px;
    border: 1px #acb6b488 solid;
    color: #acb6b488;
    width: 100%;
    background-color: #fffef900;
    cursor: pointer;
    border-radius: 30px;
}

.join_gender input[type="radio"]:checked  + label{
  border: 1px var(--orange_01) solid;
  color: var(--orange_01)
}




.join_line{
    display: block;
    /*border-top: 1px #ddd solid;*/
    margin-top: 30px;
    padding-bottom: 20px;
}



.member_agree{
    vertical-align: middle;
    margin: 20px 0;
    display: block;
    cursor: pointer;
    font-size: 18px;
}

.member_agree input[type="checkbox"]{
    margin-right: 10px;

}

.member_agree a{
    color:var(--orange_01) ;
    transition: .3s;
}


.join_btn{
    text-align: center;
}


.join_btn p{
    text-align: center;
    display: block;
    font-size: 17px;
    padding: 5px 0;
    margin: 20px 0 0 0;
}

.join_btn p a:hover {
    color: #8154a9;
    border-bottom: 1px #8154a9 solid;
}

.join_btn p a {
    border-bottom: 1px #aaa solid;
    padding: 3px 0;
    margin-left: 8px;
    transition: .3s;
}

/*==========================================*/



.class_list{
    display: flex;
    gap: 50px 21px;    
    flex-wrap: wrap;
    margin: 60px auto 40px auto;

}

.class_list li{
    width: calc(33.3% - 14px);
    box-shadow: 0 0 10px #3333;
    background-color: #fff;
}

.class_list li a{
    display: block;
    
}

.class_list li .img{
    width: 100%;
    margin-bottom: 20px;
}

.class_list li .img img{
    width: 100%;
}


.class_list li h3{
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.class_list li p{
    font-size: 17px;
    line-height: 30px;
    color: #888;
    margin-bottom: 20px;
    letter-spacing: 1.2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 60px;
    transition: .3s;
}


.class_list li .info{
    width: 100%;
    padding: 0 20px 20px 20px;
}

.class_list li .info .more{
    padding: 10px 20px;
    font-size: 18px;
    text-align: center;
    border-radius: 10px;
    color: #fff;
    background-color: #edba61;
    transition: .3s;
}



.class_list li a:hover .more{
    background-color: #ed8061;
}






.class_top_info {
    width: 100%;
    padding: 2rem 2rem;
    background-color: #d9e7f9;
    border-radius: 20px;
    display: flex;
    gap: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
    box-shadow: 0 3px 10px #154d9459;
    /* background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%); */
}



.class_bg_01{
    position: absolute;
    left: 0;
    top: 0;
    max-width: 16%;
    opacity: .3;
}

.class_bg_02 {
    position: absolute;
    right: -2%;
    bottom: -25%;
    max-width: 15%;
}

.class_top_info .info{
    width: calc(100% - 200px);
    position: relative;
    z-index: 1;
}

.class_top_info .btn {
    width: 180px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class_top_info .btn a.all_btn01{
    background-color: #1b6da5;
}


.class_top_info .info h3 {
    font-size: 22px;
    line-height: 38px;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-bottom: 7px;
}



.class_top_info .info h3 span{
    font-size: 14px;
}

.class_top_info .info p{
    font-size: 15px;
}

.class_top_info .info h6 {
    font-size: 12px;
    line-height: 15px;
    padding: 6px 10px;
    border-radius: 20px;
    background-color: #4988ef;
    color: #fff;
    display: inline-flex;
    margin-bottom: 8px;
}







.class_d_b1 {
    background-color: #fff;
    padding: 30px 30px;
    border-radius: 20px;
    box-shadow: 0 0 10px #3333;
    margin-bottom: 70px;
}

.class_d_b1 .all_title02{
    color: #333;
}

.class_d_b1 .title_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 1px #ddd solid;
    padding-bottom: 20px;
}

.class_d_b1 .title_box h1{

}

.class_d_b1 .title_box .date {
    display: flex;
    gap: 20px;
    align-items: center;
}

.class_d_b1 .title_box .date span{
    background-color: #d3ede2;
    border-radius: 10px;
    color: #197e6a;
    font-size: 17px;
    right: 10px;
    top: 10px;
    padding: 5px 10px;
    transition: .3s;
}

.class_d_b1 .title_box .date span.color2{
    background-color: #dde6ee;
    color: #2d53ad;
}

.class_d_b1 .title_box .date h6{
    color: #242e45;
    font-size: 14px;
    line-height: 31px;
}


.class_d_b1 .info_box{
    width: 100%;
    border-radius: 20px;
    padding: 0px 30px 40px 30px;
}

.class_d_b1 .info_box img{
    width: 500px;
    max-width: 100%;
    margin-bottom: 50px;
}

.class_d_b1 .info_box .edit_box{
    margin-bottom: 0px;
}

.class_d_b1 .info_box .edit_box img{
    max-width: 100%;
    height: auto!important;
}


.class_d_b1 .info_box .btn{
    display: flex;
    justify-content: center;
}

.class_Signup_box{
    width: 100%;
    background-color: #f4d0cf;
    padding: 30px 30px;
    border-radius: 20px;
    position: relative;
}

.class_Signup_box .contact_form{
    width: 100%;
}

.class_Signup_tag{
    position: absolute;
    top: -220px;
}

/*===================*/



.member_box{
    display: flex;
    gap: 70px;
    margin: 170px auto 100px auto;

}


.book_cate{
    width: 280px;
}


.member_box .join_box{
    width: calc(100% - 350px);
    margin: 0;
}

.member_input_title{
    margin-bottom: 8px;
}



.member_b1{
    width: calc(100% - 350px);
    padding: 3rem 2rem;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0px 5px 10px #0002;
}


.member_order_title{
/*    border-top: 1px #113034 solid;*/
/*    border-bottom: 1px #113034 solid;*/
    padding: 0 10px;
    background-color: #8154a9;
    display: flex;
}





.member_order_title li{
    font-size: 16px;
    padding: 10px 0;
    color: #fff;
}

.member_order_title li:nth-child(1),
.member_order_info li:nth-child(1){
    width: 120px;
}

.member_order_title li:nth-child(2),
.member_order_info li:nth-child(2){
    width: calc(100% - 330px);

}

.member_order_title li:nth-child(3),
.member_order_info li:nth-child(3){
    width: 120px;
    text-align: center;
}

.member_order_title li:nth-child(4),
.member_order_info li:nth-child(4){
    width: 90px;
    text-align: center;
}






/*--------------------------------*/


.member_order_info{
    border-bottom: 1px #c3cac8 solid;
    padding: 0 10px;
    display: flex;
    align-items: center;
}


.member_order_info li{
    
    font-size: 16px;
    padding: 25px 0;
}



.m_order_left{
    display: none;
}




.member_order_info li a{
    color: #934dd1;
    transition: .3s;
}

.member_order_info li a:hover{
    color: #934dd1;
}

.member_order_info li p{
    color: #ea6a6a;
}


.member_order_info li a.btn{
    background-color:#934dd1 ;
    color: #fff;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    transition: .3s;
}
.member_order_info li a.btn:hover{
    background-color: #ea6a6a;
}

.member_order_notice{
    margin: 30px auto 0px auto;
    text-align: center;
}

.member_order_notice h2{
    font-size: 16px;
    color: #888;
    line-height: 36px;
}

.member_order_notice a{
    border-bottom: 1px #934dd1 solid;
    color: #934dd1;
    padding: 0 0px;
    margin: 0 5px;
}


.member_order{
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 5;
}

.member_order a{
    padding: 8px 10px;
    background-color: #fffef9;
    color: #934dd1;
    display: block;
    font-size: 14px;
    border: 1px #e2dfd3 solid;
    transition: .5s;
}


.member_order span{
    margin-right: 5px;
}

.member_order a:hover{
    background-color: #934dd1;
    color: #fff;
    border: 1px #934dd1 solid;
}




.member_order_cancel{
    background-color: #E4ECE6;
    color:#839F96 ;
    margin-top: 10px;
    display: inline-block;
    padding: 1px 4px;
    transition: .3s;
}

.member_order_cancel:hover{
    color:#fff ;
    background-color: #839F96;
}




.member_order_results{
    color:#839F96 ;
    display: inline-block;
    vertical-align: middle;
    padding: 1px 6px;
    transition: .3s;
}

.member_order_results:hover{
    background-color: #E4ECE6;
    color:#839F96 ;
}

.member_order_results span{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 5px;
}


.member_order_d_notice{
    background-color: #efecdf;
    padding: 10px;
    height: 250px;
    overflow-y: scroll;
}

.member_order_d_notice p{
    font-size: 14px;
    color: #11303485;
}

.member_order_d_notice::-webkit-scrollbar {
    width: 6px;
}

.member_order_d_notice::-webkit-scrollbar-track {
    background-color: #f5f2e8;
}

.member_order_d_notice::-webkit-scrollbar-thumb {
    background-color: #cbc8be; 
}

.member_order_d_notice::-webkit-scrollbar-corner {
      background-color: #f5f2e8;
}

.m_order_atm5{
    display: block;
}


.member_b1 .title01{
    margin-bottom: 30px;
}





.member_class_d_list{
    margin-bottom: 50px;
}

.member_class_d_list li{
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px #ddd solid;
}

.member_class_d_list li h3{
    width: 200px;
    color: #333;
    font-weight: 700;
    font-size: 18px;
}

.member_class_d_list li>div {
    width: calc(100% - 220px);
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}


.member_class_d_list li>div .link {
    padding: 7px 10px;
    border-radius: 10px;
    background-color: #88a0e1;
    display: inline-flex;
    font-size: 16px;
    /*margin-left: 20px;*/
    color: #fff;
    transition: .3s;
}

.member_class_d_list li>div .link:hover{
    background-color: #f36f33;
}



.member_class_d_box .back_btn{
    width: 100px;
    margin: 0 auto;
}






.about_value_01{
    margin-bottom: 50px;
    position: relative;
}

.about_value_01 .all_title_div{
    margin-bottom: 20px;
}

.about_value_01 .all_introduce_01{
    text-align: center;
    color: #666;
}


.about_value_b1_ul{
    display: flex;
    gap: 20px 30px;
    margin: 50px auto;
    width: 1200px;
    max-width: 100%;
}

.about_value_b1_ul li{
    padding: 30px 20px 40px 20px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px #37312830;
    width: calc(33.3% - 20px);
}

.about_value_b1_ul li:nth-child(1){
    background-color:#eb5557 ;
}

.about_value_b1_ul li:nth-child(2){
    background-color: #3db887;
}

.about_value_b1_ul li:nth-child(3){
    background-color: #02c2cf;
}



.about_value_b1_ul li img{
    margin: 0 auto 30px auto;   
    width: 280px;
    max-width: 100%;
}

.about_value_b1_ul li h3{
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
}

.about_value_b1_ul li p{
    font-size: 17px;
    color: #fff;    
}




.about_value_b2 {
    display: flex;
    padding: 50px 0 80px 0;
    gap: 40px 50px;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
}

.about_value_b2_list {
    display: flex;
    padding: 20px 0 20px 0;
    gap: 20px 42px;
    flex-wrap: wrap;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    justify-content: flex-end;
}

.about_value_b2_list li{
    display: flex;
    gap: 20px 30px;
    width: calc(33.3% - 28px);
    flex-wrap: wrap;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #3333;
    position: relative;
    padding: 20px 10px 20px 50px;
}

.about_value_b2_list li .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #02ceaf;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
}


.about_value_b2_list li .info {
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 100%;
}

.about_value_b2_list li .info h2 {
    font-size: 17px;
    color: #6966db;
    font-weight: 600;
}

.about_value_b2_list li .info h3{
    color: #252f46;
    font-size: 22px;
    font-weight: 400;
}

.about_value_b2_list li .info p{
    font-size: 16px;
    line-height: 28px;
    color: #9b9ca9;
}



.about_value_b2 .btn{
    display: flex;
    justify-content: center;
}





.about_value_b3 {
    position: relative;
    display: flex;
    gap: 20px;
    overflow: hidden;
    border-radius: 20px;
    padding: 60px 50px 60px 50px;
    flex-direction: column;
    background: linear-gradient(100deg, #fcf1ed, #edf6fc 50.35%, #f3f1fc 99.67%);

   /* background: linear-gradient(180deg, 
        rgba(255, 241, 238, 1) 0%, 
        rgba(255, 241, 238, 1) 30%, 
        rgba(255, 241, 238, 0) 100%);*/
}

/*.about_value_b3 .all_title_div{
    width: 200px;
}*/

.about_value_b3 p{
    width: 100%;
    font-size: 17px;
    line-height: 32px;
    /*padding-top: 30px;*/
}

.about_value_b3 p span{
    background-color: #e57f58;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-flex;
    margin-right: 20px;
}





.about_value_b3_list {
    display: flex;
    gap: 30px 30px;
    flex-wrap: wrap;
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
}

.about_value_b3_list li {
    display: flex;
    flex-direction: column;
    width: calc(33.3% - 20px);
}

.about_value_b3_list li img{
    margin: 0 auto;
    max-width: 80%;
}

.about_value_b3_list li h3 {
    color: #fff;
    padding: 10px 15px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 0 12px #3333;
    font-size: 20px;
    border:3px #fff solid;
}


.about_value_b3_list li:nth-child(1) h3{
    background-color: #e19a15;
}

.about_value_b3_list li:nth-child(2) h3{
    background-color: #f06b38 ;
}

.about_value_b3_list li:nth-child(3) h3{
    background-color: #3db887 ;
}

.about_value_b3_list li:nth-child(4) h3{
    background-color: #02c2cf ;
}

.about_value_b3_list li:nth-child(5) h3{
    background-color: #744ad8 ;
}

.about_value_b3_list li:nth-child(6) h3{
    background-color: #fb7ea8 ;
}

.about_value_b3_list li:nth-child(7) h3{
    background-color: #852c7a ;
}

.about_value_b3_list li:nth-child(8) h3{
    background-color: #fb7ea8 ;
}









.about_organize_img{
    width: 1600px;
    max-width: 100%;
    border-radius: 20px;
    border: 5px var(--orange_01) solid;
    padding: 20px;
    background-color: #fff;
}




.about_tab{
    position: absolute;
    top: -150px;
}




.service_album_box{
    margin: 80px auto 50px auto ;
}


.service_album_top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;

}



.album_d_box{
    border-radius: 20px;
    background-color: #f3e6d2;
    overflow: hidden;
}

.album_d_info{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: #fff;
    border-radius: 16px;
    margin: 20px 20px 0 20px;
}

.album_d_info .gallery_caption_title{
    min-width: 0;
}

.gallery_share_group{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.album_d_text .gallery_share_group{
    margin-top: 20px;
}

.gallery_share_btn,
.gallery_copy_link_btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    height: 45px;
    padding: 0 20px;
    font-size: 15px;
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    white-space: nowrap;
    transition: .3s;
}

.gallery_copy_link_btn{
    background-color: var(--orange_01);
}

.gallery_copy_link_btn:hover{
    background-color: #c94f18;
}

.gallery_share_fb{
    background-color: #1877f2;
}

.gallery_share_fb:hover{
    background-color: #145dc4;
}

.gallery_share_line{
    background-color: #06c755;
}

.gallery_share_line:hover{
    background-color: #05a648;
}

.album_d_text {
    padding: 20px 20px 40px 20px;
    background-color: #f9dfa6;
}

.album_d_text .info_box{
    font-size: 18px;
    color: #333;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;

}



.album_d_list{
    display: flex;
    gap: 30px 16px;
    margin: 20px auto 0px auto;
    flex-wrap: wrap;
    padding: 40px 20px 20px 20px;
    /*box-shadow: 0 0 10px #3333;*/
    

}

/*.album_d_list li{
    width: calc(25% - 12px);
}*/

.album_d_list li{
    padding: 6px;
    border-radius: 10px;
    background-color: #fff;
    margin: 0 6px;
}

.album_d_list li img,
.album_d_list.owl-carousel .owl-item img{
    width: 100%;
    display: block;
    border-radius: 8px;
}



.album_d_list .owl-dots{
    margin-top: 30px!important;
}

.album_d_main{
    padding: 40px 20px 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.album_d_main_prev,
.album_d_main_next{
    flex-shrink: 0;
}

.album_d_main_img_wrap{
    max-width: 700px;
    width: 100%;
    min-width: 0;
    border: 6px solid #f9dfa6;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f9dfa6;
}

.album_d_main_img_wrap img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.album_d_list li{
    cursor: pointer;
}

.album_d_list li.active{
    background-color: #f9dfa6;
}







.album_title {
    position: relative;
    width: calc(100% - 50px);
    padding: 15px 25px 15px 80px;
    color: #fff;
    background-color: #67c186;
    margin-left: 50px;
    font-size: 24px;
    font-weight: 700;
    border-radius: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.album_title.color2{
    background-color: #5fc0db;
}

.album_title h3 {
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px 20px;
    flex-wrap: wrap;
}

.album_title h3 span {
    background-color: #ff865a;
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 16px;
}


.album_title .img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 10px #3333;
    display: flex;
    align-items: center;
    justify-content: center;
    left: -50px;
    transform: translateY(-50%);
    top: 50%;
}

.album_title .img img {
    width: 60px;
    max-width: 100%;
}



.bottom_btn_box {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.btn_prev, 
.btn_next{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: .3s;
    display: flex;
    align-items: center;
    color:#fff;
    justify-content: center;
    background-color:  var(--orange_01);
    z-index: 100;
    font-size: 20px;
}

.btn_prev:hover, 
.btn_next:hover{
    color: #fff;
    background-color: #ffbf16;
}



/*=======================*/

/*20260714增加*/

.footer_info .visit {
    position: relative;
    z-index: 1;
    background-color: #ffffffb3;
    border-radius: 10px;
    padding: 10px 15px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer_info .visit i{
    font-size: 20px;
    color: #1ba586;
}

.footer_info .visit p{
    font-size: 16px;
    color: #1ba586;
    transition: .3s;
    font-weight: 500;
}