@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body{ 
    font-size:14px; 
    font-family: 'Lexend','Noto Sans TC',Microsoft JhengHei,Arial, Helvetica,sans-serif,nsimsun; 
    color:#fff; 
    position:relative;
    background-color: #000000;
    line-height: 26px;
    width: 100%;
    overflow-x: hidden;
    transition: .3s;
    animation-name: fade-in;
    animation-duration:1s;
    animation-timing-function:ease-in;
}

/*@keyframes fade-in{
    0%{
        opacity:0;
    }
    100%{
        opacity: 1;
    }
}*/

a{ color:#333;}a:hover{ color:#9a74d6;}
* { 
 -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-x: hidden; 
} 

html.active{
    overflow-y: hidden; 
} 


body.active{
    overflow-y: hidden;
}


/*============================*/
/*基礎設置*/
::selection {
    background: #7e39ec;
    color: #fff;
}
::-moz-selection {
    background: #7e39ec;
    color: #fff;
}

::placeholder {
    font-family: 'Lexend','Noto Sans TC',Microsoft JhengHei,Arial, Helvetica,sans-serif,nsimsun; 
    color: #aaa;
}


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

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

::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 2px;
}

.small_scrollbar::-webkit-scrollbar {
    width: 5px;
}

.small_scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #000;
}

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

a ,a:hover{
    text-decoration: none!important;
}

strong {
    font-weight: bolder;
}

input,textarea{
    font-family: 'Lexend','Noto Sans TC',Microsoft JhengHei,Arial, Helvetica,sans-serif,nsimsun; 

}

input[type="text"]:disabled{
    background-color: #1b1f28;
    color: #aaa;
    box-shadow: 0px 3px 10px #0000;
}

textarea:focus, input:focus,select:focus{
    outline: none;
}

input[type="date"]{
    -webkit-appearance: none;
    min-height: 42px;
    text-align: left;
}

select{
    -webkit-appearance: none
}

/*============================*/
/*全站BTN 按鈕*/

.all_btn01{
    text-align: center;
    display: flex;
    color: #fff;
    background-color: #7e39ec;
    border-radius: 10px;
    padding: 12px 10px;
    letter-spacing: 2px;
    transition: .3s;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}


.all_btn01:hover{
    background-color: #9a74d6;
    color: #FFF;
}



.all_btn02{
    text-align: center;
    display: flex;
    color: #ccc;
    background-color: #212121;
    border-radius: 10px;
    padding: 12px 10px;
    letter-spacing: 2px;
    transition: .3s;
    align-items: center;
    justify-content: center;
    font-size: 16px;
/*    box-shadow: 0 0 15px #bbb8a733;*/
}


.all_btn02:hover{
    background-color: #333;
    color: #ddd;
}

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

/*限制行數*/
.limit_01{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    height: auto;
}

.limit_02{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: auto;
}

/*============================*/
/*編輯器 區域*/
.all_edit_box{

}

.all_edit_box img{
    max-width: 100%;
    height: auto!important;
}




/*============================*/
/*全站輸入框*/



.input_01{
    display: flex;
    color: #fff;
    background-color: #272d3a;
    border-radius: 10px;
    padding: 12px 20px;
    letter-spacing: 2px;
    transition: .3s;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border:2px #DDD0 solid ;
}

.input_01.white{
    background-color: #fff;
    box-shadow: 0px 3px 10px #47433b14;
}

input.input_01:focus{
    border:2px #7e39ec  solid ;
}


.input_02{
    display: flex;
    color: #625850;
    border-radius: 10px;
    padding: 10px 15px;
    letter-spacing: 2px;
    transition: .3s;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border:1px #DDD solid ;
}



input.input_02:focus{
    
}


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

.textarea_01{
    display: flex;
    color: #fff;
    background-color: #272d3a;
    border-radius: 10px;
    padding: 12px 20px;
    letter-spacing: 2px;
    transition: .3s;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border:2px #DDD0 solid ;
    height: 160px;
    resize:none;
}

.textarea_01.white{
    background-color: #fff;
    box-shadow: 0px 3px 10px #47433b14;
}

textarea.textarea_01:focus{
    border:2px #7e39ec  solid ;
}


/*----------------*/
.select_box{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.select_01{
    display: flex;
    color: #625850;
    background-color: #f7f3ed;
    border-radius: 10px;
    padding: 12px 20px;
    letter-spacing: 2px;
    transition: .3s;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border:2px #DDD0 solid ;
}

.select_01.white{
    background-color: #fff;
    box-shadow: 0px 3px 10px #47433b14;
}

select.select_01:focus{
    border:2px #f4a323  solid ;
}

select.select:focus{
    border:1px #f4a323  solid ;
}


.select_02{
    display: flex;
    color: #625850;
    border-radius: 10px;
    padding: 10px 15px;
    letter-spacing: 2px;
    transition: .3s;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border:1px #DDD solid ;
}

.select_02.white{
    background-color: #fff;
}

select.select_02:focus{
    border:1px #f4a323 solid ;
}


/*----------------*/
/*全站搜尋框*/
.search_box {
    display: flex;
    background-color: #272d3a;
    border-radius: 10px;
    padding: 0px 10px;
    gap: 0 10px;
    align-items: center;
}

.search_box.shadow{
    box-shadow: 0px 5px 15px #47433b1f;
}

.search_box a{
    font-size: 20px;
    color: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search_box input{
    border: 0;
    font-size: 15px;
    padding: 12px 0;
    width: calc(100% - 40px);
    background-color: #272d3a;
    color: #fff;
}

/*----------------*/
/*全站選擇框 (radiobox)*/

.radio_01{
    display: flex;
    border-radius: 10px;
    background-color:#fff ;
    box-shadow: 0px 3px 10px #47433b14;
    overflow: hidden;
}

.radio_01 li{
    width: 100%;
}
.radio_01 input{
  display: none;
}
.radio_01 label{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-size: 16px;
    width: 100%;
    text-align: center;
/*    border-radius: 10px;*/
    cursor: pointer;
    transition: .3s;
    line-height: 22px;
}

.radio_01 input[type="radio"]:checked  + label{
    background-color: #7e39ec;
    color: #fff
}

/*----*/

.radio_03{
    display: flex;
    border-radius: 10px;
    background-color:#fff ;
/*    box-shadow: 0px 3px 10px #47433b14;*/
    border: 1px #ddd solid;
    overflow: hidden;
}

.radio_03 li{
    width: 100%;
}
.radio_03 input{
  display: none;
}
.radio_03 label{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 15px;
    letter-spacing: 1px;
    width: 100%;
    text-align: center;
/*    border-radius: 10px;*/
    cursor: pointer;
    transition: .3s;
    line-height: 22px;
    gap: 0 10px;
}

.radio_03 input[type="radio"]:checked  + label{
  background-color: #7e39ec;
  color: #fff
}


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

/*大頭照選擇框 (radiobox)*/
.radio_02{
    display: flex;
    border-radius: 10px;
    /*background-color:#fff ;
    box-shadow: 0px 3px 10px #47433b14;*/
}

.radio_02 li{
    width: 100%;
}
.radio_02 input{
  display: none;
}
.radio_02 label{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 5px;
    font-size: 14px;
    width: 100%;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s;
    height: 100%;
    opacity: .4;

}

.radio_02 label img{
    width: 100%;
    border-radius: 10px;
}

.radio_02 label .optional{
    background-color: #fce9c5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    color: #eb7448;
}

.radio_02 input[type="radio"]:checked  + label{
/*  background-color: #f4a827;*/
opacity: 1;
  color: #fff
}

/*---------------*/
/*仿ios開關*/


.switch_btn{
  display:block;
  vertical-align: middle;
  cursor: pointer;
}
.switch_btn input{
  vertical-align: middle;
  width: 52px;
  height: 31px;
  position: relative;
  border: 1px solid #dfdfdf;
  background-color: #fdfdfd;
  box-shadow: #dfdfdf 0 0 0 0 inset;
  border-radius: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-clip: content-box;
  display: inline-block;
  -webkit-appearance: none;
  user-select: none;
  outline: none; 
  cursor: pointer;
}

.switch_btn input:before {
    content: '';
    width: 29px;
    height: 29px;
    position: absolute;
    top: 0px;
    left: 0;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
}

.switch_btn input:checked {
    border-color: #65C366;
    box-shadow: #65C366 0 0 0 16px inset;
    background-color: #65C366; 
}

.switch_btn input:checked:before {
      left: 21px; 
}

.switch_btn input.mui-switch-animbg {
    transition: background-color ease 0.4s; 
}

.switch_btn input.mui-switch-animbg:before {
    transition: left 0.3s; 
}
.switch_btn input.mui-switch-animbg:checked {
    /* box-shadow: #dfdfdf 0 0 0 0 inset; */
    box-shadow: #65c366 0 0 0 16px inset;
    background-color: #65C366;
    transition: border-color 0.4s, background-color ease 0.4s; 
}
.switch_btn input.mui-switch-animbg:checked:before {
    transition: left 0.3s; 
}





/*============================*/
/*全站標題 // 內文*/

.all_title01{
/*    font-family: 'Lexend', sans-serif;*/
    font-size: 20px;
    letter-spacing: 1.5px;

}

.all_title02{
    font-size: 18px;
    font-weight: 700;
}

.all_title03{
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}



.all_container01{
    font-size: 14px;
    color: #ddd;
    letter-spacing: 0.5px;
}

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

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

/*全站寬度*/
.all_width_01{
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
}

.all_width_02{
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
}


/*--------------------------*/
/*各別頁面 padding*/
/*--------------------------*/

/*登入頁面*/
.login_page{
    padding: 3rem 1rem;
    background-image: url(../img/login_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    transition: .3s;
    height: 100vh;
}

.login_page:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 60vh;
    left: 0;
    bottom: 0;
    transition: .3s;
    background-image: linear-gradient(to top, #000 0%,#000 50%,  #0000 100%);
}

/*未登入前 其他頁面*/
.login_other_page{
    padding: 2rem 1rem;
}

/*首頁 (登入後)*/
.detail_box.home{
    padding: 2rem 1rem calc(2rem + 80px) 1rem;
    background-color: #0000;
    z-index: 1;
    position: relative;
}

/*其他內頁 (登入後)*/
.detail_box{
    background-color: #1b1f28;
    padding: 90px 1rem calc(2rem + 80px) 1rem;
    height: 100%;
}

.detail_box.height_auto{
    height: auto;
}

/*顧客顧客資料*/
.detail_box.client_detail{
    padding: 1rem 1rem calc(2rem + 80px) 1rem;
}


.detail_box.energy_center{
    padding: 2rem 1rem calc(2rem + 80px) 1rem;
    background-color: #0000;
    z-index: 1;
    position: relative;
}

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




/*登入頁 文字設定*/

.all_title_box {
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px 0;
}

/*提示*/
.all_notice.center{
    text-align: center;
}

.all_notice p{
    font-size: 14px;
    color: #ddd;
    letter-spacing: 1px;
}

.all_notice p a{
    color: #8e5ddd;
}

.all_notice p a:hover{
    color: #9a74d6;
}




/*==================*/
/*顏色設定*/
.color01{
    color: #8e5ddd;
}

.color02{
    color: #ec7449;
}

.color03{
    color: #3abb65;
}

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

/*all 區塊上下間距*/
.all_flex_box {
    display: flex;
    flex-direction: column;
    gap: 25px 0;
}


/*跳行*/
.block{
    display: block;
}

/*白底框 + 陰影*/
.all_divbox_01 {
    border-radius: 20px;
    background-color: #2a3342;
    overflow: hidden;
    box-shadow: 0px 5px 15px #47433b1f;
}

/*-----*/

/*各色底框 */
.all_divbox_02{
    border-radius: 20px;
}

.all_divbox_02.red {
    background-color: #7e39ec;
}

.all_divbox_02.yellow {
    background-color: #faefdc;
}

.all_divbox_02.grey {
    background-color: #262c36;
}




/*全站基本 區塊 上下排列  (小標+區塊) */
.all_block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.all_block .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.all_block .title h2{
    font-size: 17px;
    font-weight: 600;
}

.all_block .title h2 i{
    margin-right: 8px;
}

.all_block .title h2 i.red{
    color: #e76333 ;
}

.all_block .title a.more{
    color: #f4a323;
/*    font-family: 'Lexend', sans-serif;*/
    font-size: 15px;
    line-height: 22px;
}

/*按鈕區塊 左右排列  (按鈕) */
.block_01{
    display: flex;
    gap: 0 15px;
}

/*一行兩個 中按鈕*/
.block_btn_01 {
    width: calc(50% - 10px);
    padding: 15px 12px;
    display: flex;
    gap: 0 10px;
    align-items: center;
}

.block_btn_01 .icon {
    width: 35px;
    height: 35px;
    background-color: #f4cc44;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block_btn_01 .icon i{
    font-size: 20px;
    color: #fff;
}

.block_btn_01 p{
    font-size: 15px;
    color: #625850;
    width: calc(100% - 45px);
}
/*--------------------------*/
/*一行兩個 大按鈕(方形)*/
.block_btn_02 {
    width: calc(50% - 10px);
    padding: 12px 12px;
    display: flex;
    gap: 0 10px;
    align-items: center;
    position: relative;
}

.block_btn_02 .icon {
    width: 35px;
    height: 35px;
    position: absolute;
    right: 10px;
    top: 15px;
}

.block_btn_02 .icon i{
    font-size: 32px;
    color: #fff;

}

.block_btn_02.red .icon i{
    color: #ee3d57;
}

.block_btn_02.yellow .icon i{
    color: #f8bb55;
}

.block_btn_02 p{
    font-size: 16px;
    color: #625850;
    line-height: 28px;
    font-weight: 500;
}

.block_btn_02 p span{
    font-size: 14px;
    display: block;
    font-weight: 400;
    opacity: .8;
}

/*--------------------------*/
/*一行兩個 一般按鈕*/
.block_btn_03 {
    width: calc(50% - 10px);
    padding: 12px 12px;
    display: flex;
    gap: 0 10px;
    align-items: center;
    position: relative;
    justify-content: center;
}


.block_btn_03 p{
    font-size: 16px;
    color: #625850;
    line-height: 28px;
    font-weight: 500;
}

.block_btn_03.grey p{
    color:#bbb ;
} 

.block_btn_03.red p{
    color:#fff ;
} 


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

/*登入頁面*/

.login_logo_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100dvh - 208px - 6rem);
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 0 0 10rem 0px;
    transition: .3s;
}

.login_logo{
    width: 220px;
    max-width: 100%;
    margin: 0 auto;
    transition: .5s;
    padding-right: 10px;
}

.login_img{
    width: 200px;
    max-width: 100%;
    height: calc(100dvh - 300px - 6rem);
    margin: 30px auto;
    transition: .4s;
}
/*
.login_img img{
    width: auto!important;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    transition: .5s;
}

.login_info{
    margin: 30px auto;
    max-width: 100%;
    transition: .2s;
}*/


.login_logo_box p{
    letter-spacing: 12px;
    color: #fff;
    font-size: 16px;
}




.login_info{
    margin: 30px auto;
    max-width: 100%;
    transition: .2s;
    position: relative;
    z-index: 1;
}

.login_info h2{
    text-align: center;
}

.login_info p{
    text-align: center;
    color: #f5a323;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 3px;
}

.login_btn{
    display: flex;
    gap: 20px 0;
    flex-direction: column;
    transition: .2s;
    position: relative;
    z-index: 1;
}



.login_btn .pb_box{
    /*padding-bottom: 5px;*/
}

/*==================*/
/*.login_page.active .login_logo{
    width: 100px;
}*/

.login_page.active .login_logo_box {
    height: calc(100dvh - 460px - 6rem);
    padding: 0 0 0rem 0px;
}

.login_page.active:after{
    height: 70vh;
}

.login_page.active .login_img {
    height: calc(100dvh - 500px - 6rem);
    margin: 20px auto;
}

.login_page.active .login_info{
    opacity: 0;
}

.login_page.active .login_btn.list_01{
    opacity: 0;
}
/*==================*/
/*登入彈出視窗*/
.login_pop{
    position: fixed;
    padding: 3rem 1rem;
    background-color: #1b1f28;
    bottom: -150px;
    z-index: 200;
    opacity: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow:0 0 15px #00000017;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    transition: .5s;
    z-index:110;

}

.login_pop.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    bottom: 0;
}

.login_pop h2{
    margin-bottom: 30px;
}

.login_pop_close{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
}

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


/*忘記密碼*/
.forgot_btn{
    color:#8e5ddd ;
    text-align: center;
}

.forgot_btn:hover{
    color: #9a74d6;
}


.login_pop .add{
    margin-top: 50px;
}

.login_pop .add p{
    color: #b5b5b5;
}

.login_pop .add a{
    color:#8e5ddd ;
}

.login_pop .add a:hover{
    color: #9a74d6;
}


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

/*未登入前 MENU*/
.menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: .3s;
    background-color: #ffffff;
    border-bottom: 1px #ddd0 solid ;
}

.menu_box {
    display: flex;
    padding: 10px 1rem 10px 1rem;
    align-items: center;
    transition: .5s;
    justify-content: space-between;
}

.logo_box{
    transition: .3s;
    opacity: 1;
}

.logo_box:hover{
    opacity: .8;
}

.logo_box img{
    width: 150px;
}

.header_padding {
    padding-bottom: 70px;
}


.forgot_password_info{
    margin-top: 30px;
}


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

/*登入後 上方MENU*/

.top_menu_box {
    background-color: #11151e;
    /*background-image: linear-gradient(90deg, #f4a323 0%, #f4b12f 80%, #f4be38 100%);*/
    display: flex;
    padding: 14px 1rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    transition: .3s;
}

.top_menu_box.color{
    background-image: linear-gradient(90deg, #4159c3 0%, #6047bd 50%, #7d37b7 100%);
}

.top_menu_box.no_color{
    background-color:#0000
}


.page_title {
    width: 160px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 35px;
}

.page_title p{
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
}

.top_menu_box .left {
    width: calc(50% - 80px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.top_menu_box .right {
    width: calc(50% - 80px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    position: relative;
}

.icon_box01{
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 35px;
    height: 35px;
}

.icon_box01 i{
    font-size: 22px;
    color: #fff;
    
}

.icon_box01.big i{
    font-size: 24px;
}


.icon_box01 span{
    position: absolute;
    right: 4px;
    top: 4px;
    width: 10px;
    height: 10px;
    background-color: #e16844;
    border-radius: 50%;
    display: none;
}

.icon_box01 span.notice{
    display: block;
}

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

/*登入後-首頁*/
.home_b1{
    background-image: linear-gradient(90deg, #f4a323 0%, #f4b12f 80%, #f4be38 100%);
    padding: 75px 1rem 20px 1rem;
    display: flex;
    gap: 15px 0;
    flex-direction: column;
    position: relative;
}


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

.home_title h2{
    font-size: 20px;
    color: #fff;
/*    font-family: 'Lexend';*/
    font-weight: 700;
    letter-spacing: 1px;
}

.home_title p{
    font-size: 16px;
    color: #fff;
}

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

/*首頁上方 簡易數據*/
.home_data {
    display: flex;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 8px;
    z-index: 2;
}

.home_data>div{
    width: calc(33.3% - 12px);
    text-align: center;
    color: #625850;
}

.home_data>div h3{
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 8px;
}

.home_data>div p{
    font-size: 26px;
/*    font-family: 'Lexend';*/
}

.home_data_bottom,
.client_data_bottom,
.personal_data_bottom
{
    position: absolute;
    width: calc(100% + 2px);
    height: 70px;
    background-color:#f9f8f3 ;
    bottom:0 ;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;

}

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

/*客戶 簡易數據*/
.client_data {
    display: flex;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 8px;
    z-index: 2;
}

.client_data>div{
    width: calc(50% - 12px);
    text-align: center;
    color: #625850;
}

.client_data>div h3{
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 8px;
}

.client_data>div p{
    font-size: 26px;
/*    font-family: 'Lexend';*/
}
/*===================================*/
/*===================================*/

/*顧客消費列表*/
.work_list{

}

.work_list>li {
    border-bottom: 1px #ebebeb solid;
}

.work_list>li a{
    padding: 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px 20px;
}

.work_list>li:nth-last-child(1){
    border-bottom: 0px #ebebeb solid;
}


.work_list>li .img{
    width: 50px;
    height: 50px;
    background-color: #f2f2f0;
    border-radius: 20px;
    overflow-y: hidden;
    position: relative;
}

.work_list>li .img img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.work_list>li .info{
    width: calc(100% - 75px);
}

.work_list>li .info .name{
    display: flex;
    justify-content: space-between;
    width: 100%;

}

.work_list>li .info .name h2{
    font-size: 16px;
    color: #625850;
}

.work_list>li .info .name span{
    font-size: 14px;
    color: #aaa;
}

.work_list>li .info p{
    color: #b99f72;
}

.work_list>li .info p i{
    margin-right: 8px;
}


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

/*底部MENU*/
.bottom_menu_box {
    background-color: #11151e;
    display: flex;
    padding: 10px 1rem;
    position: fixed;
    bottom: 0;
    width: 600px;
    max-width: 100%;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    justify-content: space-between;
    z-index: 20;
}

.bottom_menu_box .add_btn{
    position: relative;
    min-width: 50px;
}

.bottom_menu_box .add_btn a {
    background-image: linear-gradient(115deg, #4159c3 0%, #564dbe 50%, #7d37b7 100%);
    width: 65px;
    height: 65px;
    border-radius: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
}

.bottom_menu_box .add_btn a i{
    transition: .3s;
}

.bottom_menu_box .add_btn.active a i{
    transform:rotate(135deg);
}


.bottom_menu_box .menu_btn{
    min-width: 50px;
}

.bottom_menu_box .menu_btn a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    gap: 10px;
}

.bottom_menu_box .menu_btn a i{
    font-size: 24px;
}

.bottom_menu_box .menu_btn a p{
    font-size: 12px;
    line-height: 12px;
}

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

/*整合 底部pop 彈出視窗*/

.pop_box{
    position: fixed;
    padding: 2rem 1rem calc(2rem + 80px) 1rem;
    background-color: #303640;
    bottom: -150px;
    z-index: 15;
    left: 50%;
    transform: translateX(-50%);
    box-shadow:0 0 15px #00000017;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    transition: .5s;
}

.pop_box.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    bottom: 0;
}



.pop_box h2.all_title03{
    margin-bottom: 30px;
}

.pop_box_close{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 12;
    opacity: 0;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    background-color: #1a191794;
    transition: .3s;
}

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

/*---------*/
/*右上方 X*/
.pop_box .close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 24px;
    color: #bbb;
    cursor: pointer;
}


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

/*頁面內Footer*/
.page_footer{
    margin-top: 70px;
    padding-bottom: 40px;
}

.page_footer img{
    width: 100px;
    margin: 0 auto;
    margin-bottom: 5px;
}

.page_footer p{
/*    font-family: 'Lexend', sans-serif;*/
    font-size: 12px;
    text-align: center;
    color:#888 ;

}

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

/*訊息公告*/

.pop_news_box{
    position: fixed;
    top: 0;
    width: 420px;
    max-width: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    height: 100%;
    background-color: #434d5b ;
}

.news_list{

}

.news_list>li {
    
    border-bottom: 1px #434d5b  solid;
    display: flex;
/*    align-items: center;
    gap: 10px 20px;*/
}

.news_list>li:nth-last-child(1){
    border-bottom: 0px #434d5b  solid;
}



.news_list>li .info{
    width: 100%;
    padding: 12px 12px;
}

.news_list>li .info .name{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.news_list>li .info h2{
    font-size: 16px;
    color:#fff ;
    padding-right: 15px;
}


.news_list>li .info .date {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.news_list>li .info .date span{
    font-size: 14px;
    color: #aaa;
}

.news_list>li .info p{
    color: #b99f72;
}


.news_list>li.unread{
    position: relative;
}

.news_list>li.unread:after{
    position: absolute;
    content: "";
    right: 10px;
    top: 10px;
    background-color: #fff;
    width: 10px;
    height: 10px;
    background-color: #e16844;
    border-radius: 50%;
}

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

/*顧客列表*/
.client_list{

}

.client_list>li {
    border-bottom: 1px #434d5b solid;
}

.client_list>li a,
.client_list>li>label{
    padding: 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px 20px;
    cursor: pointer;
}

.client_list>li:nth-last-child(1){
    border-bottom: 0px #434d5b solid;
}


.client_list>li .img{
    width: 50px;
    height: 50px;
    background-color: #f2f2f0;
    border-radius: 20px;
    position: relative;
    overflow-y: hidden;
}

.client_list>li .img img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}



.client_list>li .info{
    width: calc(100% - 105px);
}

.client_list>li .info .name{
    display: flex;
    justify-content: space-between;
    width: 100%;

}

.client_list>li .info .name h2{
    font-size: 16px;
    color: #fff;
}

.client_list>li .info .name span{
    font-size: 14px;
    color: #aaa;
}

.client_list>li .info p{
    color: #b99f72;
    font-weight: 100;
/*    font-family: 'Lexend';*/
}

.client_list>li .info p i{
    margin-right: 8px;
}


.client_list>li .icon{
    width: 15px;
    font-size: 16px;
    color: #aaa;
}

.client_list>li .radiobox{
    display: none;
}

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

/*顧客資料 內容頁*/
.client_b1{
    background-image: linear-gradient(90deg, #f4a323 0%, #f4b12f 80%, #f4be38 100%);
    padding: 75px 1rem 20px 1rem;
    display: flex;
    gap: 20px 0;
    flex-direction: column;
    position: relative;
}


.client_name_box{
    display: flex;
    gap: 10px 15px;
}

.client_name_box .img{
    width: 80px;
    height: 80px;
    background-color: #f2f2f0;
    border-radius: 20px;
    position: relative;
    overflow-y: hidden;
    border: 3px #fff solid;
    box-shadow: 0px 5px 15px #47433b1f;
}

.client_name_box .img img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.client_name_box .info {
    display: flex;
    flex-direction: column;
    gap: 6px 0;
    width: calc(100% - 180px);
}

.client_name_box .info h2{
    font-size: 24px;
    color: #fff;
    letter-spacing: 1.5px;
    line-height: 24px;
}

.client_name_box .info h2 span{
    color: #fff;
    font-size: 13px;
    padding-left: 10px;
}

.client_name_box .info>div {
    display: flex;
    color: #fff;
    align-items: center;
    gap: 10px;
}

.client_name_box .info>div a {
    color: #fff;
    font-size: 16px;
/*    font-family: 'Lexend';*/
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.client_name_box .info>div a span{
    color: #fff;
    background-color: #ffffff40;
    border-radius: 5px;
    padding: 0px 5px;
    font-size: 13px;
    margin-left: 10px;
}

.client_name_box .info>div a span i{
    margin-right: 3px;
}

.client_name_box .btn{

}

.client_name_box .btn a {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    background-color: #fff;
    box-shadow: 0px 5px 15px #47433b1f;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    gap: 5px 0;
}

.client_name_box .btn a i{
    font-size: 26px;
    color: #f4a323 ;
}

.client_name_box .btn a p{
    font-size: 12px;
    line-height: 14px;
    color: #f4a323 ;
    letter-spacing: 1px;
}


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

/*顧客資料  註記(備註區)*/
.client_remark{
    display: flex;
    flex-direction: column;
    gap: 10px 0;
    padding: 12px 12px;
}

.client_remark .text{
    background-color: #f5f5f5; 
    border-radius: 10px;
    padding: 10px;
}

.client_remark .img{
    
}


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

/*顧客消費紀錄_顧客內頁*/
.client_work_list{

}

.client_work_list>li {
    border-bottom: 1px #434d5b solid;
}

.client_work_list>li a,
.client_work_list>li label {
    padding: 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px 15px;
    align-items: flex-start;
    justify-content: space-between;
}

.client_work_list>li:nth-last-child(1){
    border-bottom: 0px #434d5b solid;
}

.client_work_list>li .info{
    width: calc(100% - 100px);
    display: flex;
}

.client_work_list>li .info .detail {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
    gap: 10px 8px;
}


.client_work_list>li .info .detail span{
    font-size: 14px;
    color: #aaa;
    line-height: 16px;
}

.client_work_list>li .info .detail .work {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.client_work_list>li .info .detail .work i{
    color: #b99f72;
}

.client_work_list>li .info .detail ul{
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
}

.client_work_list>li .info .detail ul li {
    padding: 4px 6px 4px 6px;
    border-radius: 10px;
    background-color: #7e39ec;
    color: #fff;
    line-height: 16px;
    font-size: 13px;
    letter-spacing: 1px;
}

/*.client_work_list>li .info .detail ul li.yellow{
    background-color: #f4a727;
}*/


.client_work_list>li .info .detail .work i{
    color: #b99f72;
}

.client_work_list>li .info .detail .name h2 {
    font-size: 16px;
    color: #625850;
}


.client_work_list>li .cost {
    display: flex;
    color: #fff;
    gap: 0 4px;
    width: 80px;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 5px;
}


.client_work_list>li .cost span{
    font-size: 14px;
    line-height: 16px;
}

.client_work_list>li .cost p{
    font-size: 18px;
    line-height: 18px;
}

/*--------------------*/
/*顧客消費紀錄_有圖片*/
.client_work_list.has_img{

}

.client_work_list.has_img .img{
    width: 50px;
    height: 50px;
    background-color: #f2f2f0;
    border-radius: 20px;
    overflow-y: hidden;
    position: relative;
}

.client_work_list.has_img .img img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.client_work_list.has_img>li .info {
    width: calc(100% - 160px);
}

.client_work_list.has_img>li .info .detail{
    gap: 6px 8px;
}

/*--------------------*/
/*顧客消費紀錄_排名(有編號)*/
.client_work_list.ranking_ul{

}

.client_work_list.ranking_ul>li a{
    align-items: center;
}

.client_work_list.ranking_ul .ranking {
    width: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.client_work_list.ranking_ul>li .ranking:after{
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 26px;
    height: 26px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.client_work_list.ranking_ul>li:nth-child(1) .ranking:after{
    background-image: url(../img/medal_1.png);
}

.client_work_list.ranking_ul>li:nth-child(2) .ranking:after{
   background-image: url(../img/medal_2.png);
}

.client_work_list.ranking_ul>li:nth-child(3) .ranking:after{
   background-image: url(../img/medal_3.png);
}



.client_work_list.has_img.ranking_ul>li .info {
    width: calc(100% - 215px);
}

.client_work_list.has_img.ranking_ul>li .cost {
    width: 90px;
}

.client_work_list.ranking_ul>li{
    position: relative;
}


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


/*條列式 icon+標題*/
.all_info_list{

}

.all_info_list>li {
    border-bottom: 1px #434d5b solid;
}

.all_info_list>li>a,
.all_info_list>li>div.box {
    padding: 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px 10px;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.all_info_list>li:nth-last-child(1){
    border-bottom: 0px #ebebeb solid;
}

.all_info_list>li .icon{
    display: flex;
    color: #aaa;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    width: 40px;
}

.all_info_list>li .info{
    width: calc(100% - 75px);
    display: flex;
}

.all_info_list>li .go_icon{
    display: flex;
}

.all_info_list>li .go_icon{
    display: flex;
    width: 15px;
    font-size: 16px;
    color: #aaa;
    align-items: center;
    justify-content: center;
}

/*登出*/
.all_info_list>li a.red .icon{
    color: #e87147;
}

.all_info_list>li a.red .info{
    color: #e87147;
}

/*訂閱*/
.all_info_list>li a.green .icon{
    color: #3abb65;
}

.all_info_list>li a.green .info{
    color: #3abb65;
}

/*深色模式*/
.all_info_list.dark>li .info{
    width: calc(100% - 65px);
}

.all_info_list.dark>li .switch{
    width: 55px;
    display: flex;
}



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

/*個人資料頁*/
.personal_b1{
    background-image: linear-gradient(90deg, #4159c3 0%, #6047bd 50%, #7d37b7 100%);
    padding: 75px 1rem 20px 1rem;
    display: flex;
    gap: 20px 0;
    flex-direction: column;
    position: relative;
}


.personal_name_box{
    display: flex;
    gap: 10px 15px;
    justify-content: center;
    /* padding-bottom: 90px; */
    flex-direction: column;
    align-items: center;
}

.personal_name_box h2{
    font-size: 24px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}

.personal_name_box p {
    font-size: 13px;
    color: #fff;
    /* line-height: 20px; */
    letter-spacing: 0.5px;
}



/*訂閱到期日：*/
.maturity_box{
    display: flex;
    color: #fff;
    justify-content: center;
}

.maturity_box span{
    color: #a57ee3;
}




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


/*隱私權政策*/

.privacy_box{
    display: flex;
    flex-direction: column;
    gap: 20px 0;
}

.privacy_box li {
    display: flex;
    gap: 15px;
    flex-direction: column;
}


.privacy_box .title{
    display: flex;
    align-items: flex-start;
    font-size: 18px;
    font-weight: 700;
}
    


.privacy_box .info_01{
    padding-left: 15px;
    display: block;
}

.privacy_box .info_01.no_padding{
    padding-left: 0px;
}

.privacy_box .info_01>div{
    display: flex;
    align-items: flex-start;
    gap: 0 7px;
}

.privacy_box .info_02{
    padding-left: 30px;
    display: block;
}

.privacy_box .info_02>div{
    display: flex;
    align-items: flex-start;
}


.privacy_last_date{
    text-align: center;
    padding: 30px 0 0 0;
    color: #f4a323;
}


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

/*輸入框區塊*/
.all_input_box{
    display: flex;
    gap: 22px 0;
    flex-direction: column;
    transition: .2s;
}

.all_input_box .box1{
    width: 100%;
    display: flex;
    gap: 5px 0;
    flex-direction: column;
}

.all_input_box .box1 input,
.all_input_box .box1 textarea{
    width: 100%;
}

.all_input_box .box1 p {
    color: #fff;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 5px;
}

/*搜尋輸入框區塊*/
.all_input_box.search{
    gap: 15px 0;
}
/*-------------------------*/

/*特殊>> 照片上傳*/
.all_input_box .box1.pic_upload{
    margin-top: 10px;
}

.box1.pic_upload{
   display: none;
}

.box1.pic_upload.active{
    display: flex;
}

.pic_upload_btn{
    background-color: #f4cd44;
    width: 50%;
}

.box1.pic_upload input{
    display: none;
}

.upload_view{
    width: 100%;
    height: 200px;
    background-color: #fff;
    border-radius: 7px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    position: relative;
}

.upload_view img{
    /*width: 100%;
    height: 100%;*/
    max-width: calc(100% - 15px);
    max-height: calc(100% - 15px);
    margin: 0 auto;
    object-fit: contain;
}

/*-----------*/
/* 消費紀錄 附圖上傳*/
.box1.pic_upload.work{
   display: inline-flex;
   width: calc(50% - 6px);
}

.box1.pic_upload.work .pic_upload_btn{
    width: 100%;
}

.box1.pic_upload.work .upload_view {
    height: 100px;
    margin-top: 0px; 
}

.pic_upload_workbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px 12px;
}



/*消費紀錄 附圖區塊*/
.all_input_box .box1.work_pic_upload_box{
    display: none;
}

.all_input_box .box1.work_pic_upload_box.active{
    display: flex;
}



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

.input_name_box {
    display: flex;
    justify-content: space-between;
}

.input_name_box input.input_01{
    width: calc(100% - 105px);
}




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




.mycode_box {
    padding: 30px 20px;
    background-image: url(../img/mycode_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 20px;
    min-height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0px 5px 15px #47433b1f;
    transition: .3s;
    position: relative;
}         

.mycode_box h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
    width: 100%;
    text-align: center;
    color: #fff;
    letter-spacing: 0.5px;
}

.mycode_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px 0;
    max-width: 90%;
    width: 380px;
}

.mycode_info .code{
    display: flex;
    color: #333;
    background-color: #ffffffbf;
    border-radius: 10px;
    padding: 8px 10px;
    letter-spacing: 2px;
    transition: .3s;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 2px #DDD0 solid;
    width: 100%;
    text-align: center;
}

.mycode_info a {
    display: inline-flex;
    padding: 5px 25px;
    border-radius: 20px;
    background-color: #eb7449;
    align-items: center;
    gap: 0 8px;
    color: #fff;
    transition: .3s;
}

.mycode_info .copy:hover{
    background-color: #f4a323;
}


.mycode_box.small{
    min-height: 180px;
    padding: 20px 20px;
}

.mycode_box.small h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

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

/*條列式 標題 between 左右分*/
.all_text_list{

}

.all_text_list>li {
    border-bottom: 1px #434d5b solid;
}

.all_text_list>li .box {
    padding: 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px 10px;
    align-items: center;
    justify-content: space-between;
}

.all_text_list>li:nth-last-child(1){
    border-bottom: 0px #434d5b solid;
}

.all_text_list>li .title{
    width: 100px;
    display: flex;
}

.all_text_list>li .info{
    width: calc(100% - 110px);
    text-align: right;
}

/*----*/

/*消費版，標題長 價格短*/
.all_text_list.work>li .box{
    align-items: flex-start;
}

.all_text_list.work>li .box.total{
    background-color: #fbf0eb;
    color: #eb7448;
}



.all_text_list.work>li .title{
    width: calc(100% - 110px) ;
    display: flex;
}

.all_text_list.work>li .info{
    width: 100px;
    text-align: right;
    font-size: 16px;
}

.all_text_list.work>li .info span{
   font-size: 14px;
}
/*------*/

/*條列式 FAQ*/
.faq_list{

}

.faq_list>li {
    border-bottom: 1px #434d5b solid;
}

.faq_list>li .box {
    padding: 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px 10px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.faq_list>li:nth-last-child(1){
    border-bottom: 0px #434d5b solid;
}

.faq_list>li .title{
    width:  calc(100% - 40px);
    display: flex;
    font-size: 15px;
}

.faq_list>li .icon {
    width: 30px;
    text-align: right;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq_list>li .box.active .icon{
    transform: rotate(180deg);
}

    

.faq_list>li .info {
    
    display: none;
}

.faq_list>li .text_box{
    padding: 7px 12px 12px 22px;
}

.faq_list>li .text_box img{
    max-width: 100%;
    height: auto!important;
}


/*===================================*/
/*===================================*/
/*消息內容頁*/
.news_detail_box{
    padding: 12px 12px;
}


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


/* 新增消費> 選擇顧客 POP*/
.change_client_pop{

}

.change_client_div{
/*    height: calc(98vh - 420px);*/
/*height: calc((var(--vh, 1vh) * 95) - 480px);*/

    height: calc(98dvh - 400px);
    overflow-y: auto;
}

.client_radiobox{
    cursor: pointer;
}

.client_radiobox.active {
    background-color: #e66e46;
}

.client_radiobox.active .img{
    border: 3px #fff solid;
}



.client_list>li.client_radiobox.active .info .name h2 {
    color: #fff;
}
.client_list>li.client_radiobox.active .info p {
    color: #fffb;
}

.client_radiobox .img {
    opacity: .6;
    transition: .3s;
}

.client_radiobox.active .img{
    opacity: 1;
}

.change_client_sure{
    pointer-events: none;
    opacity: .5;
}

.change_client_sure.active{
    opacity: 1;
    pointer-events: auto;
}

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

/* 新增消費> 選擇消費項目*/
/*.work_change_box{
    padding: 15px 12px;
}*/



/* 增消費> 消費項目在記一筆*/
.work_change_add_btn_box{
    padding: 10px 15px;
}

.work_change_add_btn {
    text-align: center;
    display: flex;
    color: #5c524d;
    background-color: #f6efd9;
    border-radius: 10px;
    padding: 10px 10px;
    letter-spacing: 2px;
    transition: .3s;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    gap: 0 10px;
}

.work_change_add_btn:hover{
    color: #5c524d;
}

.work_change_add_btn i {
    font-size: 18px;
}


.work_change_item{
    display: flex;
    gap: 15px 0;
    flex-direction: column;
    transition: .2s;
/*    border-top: 1px #ddd solid ;*/
    padding-top: 25px;
    position: relative;
    border-bottom: 1px #ddd solid;
    padding: 35px 15px 18px 15px ;
}

.work_change_box .work_change_item:nth-child(1){
/*    border: 0;*/
    padding: 18px 15px ;
}

.work_change_box .work_change_item:nth-child(even){
    background-color: #f3f3ee;
}

.work_change_item .delete {
    position: absolute;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    right: 4px;
    top: 5px;
    background-color: #f58b69;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}


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

/*關於*/
.about_box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about_box .logo{
    margin: 0 auto;
    border-radius: 20px;
    width: 100px;
    box-shadow: 0px 5px 15px #47433b1f;
    margin-bottom: 10px;
    transition: .3s;
}

.about_box h2{
    font-size: 16px;
    margin-bottom: 30px;
}

.about_box p {
    font-size: 12px;
    text-align: center;
    color: #888;
}


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

/*分析圖表*/



.report_01{
    padding: 15px 15px;
    background-image: url(../img/report_01_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 20px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0px 5px 15px #47433b1f;
    transition: .3s;
    position: relative;
    margin-bottom: 15px;
    letter-spacing: 3px;
}

.report_01 h2{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    width: 100%;
    text-align: center;
    color: #ea5f2e;
    letter-spacing: 0.5px;
}

.report_01 h5{
    font-size: 28px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 0 10px #b56d6d82;
    line-height: 46px;
    letter-spacing: 1.5px;
}


.report_01 h5 span{
    font-size: 40px;
    margin-left: 10px;
}

.report_01 p{
    color: #fff;
    margin-top: 2px;
    opacity: 0.9;
    font-size: 14px;
}


.report_box{
    display: flex;
    justify-content: space-between;
    gap: 20px 15px;
}

.report_left,
.report_right{
    width: calc(50% - 7.5px);
    display: flex;
    justify-content: space-between;
    gap: 15px 20px;
    flex-direction: column;
}


.report_style {
    padding: 15px 15px;
    position: relative;
    border-radius: 20px;
    /* min-height: 160px; */
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 5px 15px #47433b1f;
    transition: .3s;
    justify-content: flex-start;
    gap: 10px 0;
    overflow: hidden;
}

.report_style .title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 2;
}

.report_style .title h2{
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    width: calc(100% - 50px );
    min-height: 58px;
    padding-top: 5px;

}

.report_style .title .icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    background-color: #e0a19a;
    color: #fff;
    font-size: 16px;
    align-items: center;
    justify-content: center;
}

.report_style .title .icon i{

}

.report_style .info{
    width: 100%;
    display: flex;
    gap: 10px 0;
    flex-direction: column;
    z-index: 2;
}

.report_style .info h3{
    font-size: 34px;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 600;
}

.report_style .info p{
    color: #fff;
    font-weight: 600;
}

.report_style .bg{
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 0;
}

.report_style .bg img{
    width: 100%;
}

/*.report_style .bg_box{
    height: 100px;
}*/





/*各別設定 和 顏色*/
.report_02{
    background-color: #f9b5ac;
    min-height: 300px;
}

.report_02.report_style .title h2,
.report_02.report_style .info p{
    color: #c86254;
}





.report_03{
    background-color: #679185;
    min-height: 250px;
}

.report_03.report_style .title h2,
.report_03.report_style .info p{
    color: #3a5b52;
}


.report_03.report_style .title .icon{
    background-color: #5c8177;
}



.report_04{
    background-color: #264e71;
    min-height: 230px;
}

.report_04.report_style .title h2,
.report_04.report_style .info p{
    color: #9dbcd4;
}

.report_04.report_style .title .icon{
    background-color: #234664;
}


.report_05{
    background-color: #fdebd3;
    min-height: 320px;
}

.report_05.report_style .title h2,
.report_05.report_style .info p{
    color: #a7712a;
}

.report_05.report_style .title .icon{
    background-color: #e9cfae;
}

.report_05.report_style .info h3{
    color: #a7712a;
}

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

/*日期區間樣式*/
.date_interval{
    display: flex;
    gap: 0 10px;
    align-items: center;
}

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

.sub_notice{
    color: #eb5e48;
    margin-right: 15px;
}

.sub_notice i{
    margin-right: 5px;
}

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

/*===================================*/
/*===================================*/
/*立即續訂*/

.sub_select_radio{
    display: none;
}

input[type="radio"]:checked  + .sub_radiobox{
    border: 2px #7e39ec solid;
}

input[type="radio"]:checked  + .sub_radiobox .radio_icon i:after{
    background-color: #7e39ec;
}



.sub_select_ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sub_radiobox{
    border: 2px #eb744800 solid;
    cursor: pointer;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px 15px;
    align-items: flex-start;
    justify-content: space-between;
    transition: .3s;
}

.sub_radiobox ul>li{
    border-bottom: 0px #ebebeb solid;
}

.sub_radiobox label{
    cursor: pointer;
}


.sub_select_ul>li .radio_icon {
    width: 20px;
    display: flex;
    padding-top: 5px;
}

.sub_select_ul>li .radio_icon i{
    display: block;
    border-radius: 50%;
    border: 1px #ddd solid;
    background-color: #fff;
    width: 20px;
    height: 20px;
    position: relative;
    transition: .3s;

}

.sub_select_ul>li .radio_icon i:after{
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #eb744800;
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 50%;
    transition: .3s;
}



.sub_select_ul>li .info {
    width: calc(100% - 125px);
    display: flex;
}

.sub_select_ul>li .info .detail {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
    gap: 10px 8px;
}

.sub_select_ul>li .info .detail .name h2 {
    font-size: 16px;
    color: #fff;
}

.sub_select_ul>li .info .detail span {
    font-size: 13px;
    color: #aaa;
    line-height: 16px;
}

/*---*/
.sub_select_ul>li .info .detail .work {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.sub_select_ul>li .info .detail ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
}


.sub_select_ul>li .info .detail ul li {
    padding: 4px 6px 4px 6px;
    border-radius: 10px;
    background-color: #7e39ec;
    color: #fff;
    line-height: 16px;
    font-size: 13px;
    letter-spacing: 1px;
}

.sub_select_ul>li .info .detail ul li.yellow{
    background-color: #f4a727;
}
/*---*/

.sub_select_ul>li .cost {
    display: flex;
    color: #fff;
    gap: 0 4px;
    width: 75px;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 5px;
}

.sub_select_ul>li .cost.sale {
    display: flex;
    flex-direction: column;
}

.sub_select_ul>li .cost>div {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: #ffc107;
    gap: 0 4px;
}

.sub_select_ul>li .cost h5{
    position: relative;
}

.sub_select_ul>li .cost h5:after{
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    border-top: 2px #7e39ec solid;
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 100%;
}



.sub_select_ul>li .cost span{
    font-size: 14px;
    line-height: 16px;
}

.sub_select_ul>li .cost p{
    font-size: 18px;
    line-height: 18px;
}

/*===================================*/
/*===================================*/
/*同意 按鈕*/

.agree_box{
    
}

.agree_box input[type="checkbox"]{
    display: none;
}

.agree_box_label{
    border: 2px #eb744800 solid;
    cursor: pointer;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px 10px;
    align-items: flex-start;
    justify-content: space-between;
    transition: .3s;
}

.agree_box_label.active{
    border: 2px #7e39ec solid;
}

.agree_box_label .icon{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px #ddd solid;
    margin-top: 3px;
}

.agree_box_label .info{
    width: calc(100% - 30px);
}



.agree_box input[type="checkbox"]:checked  + label .icon{
    background-image: url(../img/checked_icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 1px #ddd0 solid;
}

/*-----*/

.agree_rule_info {
    height: calc(98dvh - 260px);
    overflow-y: auto;
    padding: 0 10px;
}




















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

/*首頁提示*/
.home_notice{
    font-size: 12px;
    background-color: #fff;
    color: #fff;
    padding: 7px 8px;
    display: flex;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #47433b0d;
}

.home_notice a{
    color: #e87047;
    font-size: 12px;
    line-height: 14px;
}


/*===================================*/
/*===================================*/
/*首頁*/
.index_box{
    position: fixed;
    left: 50%;
    top: calc(45%);
    transform: translate(-50%,-50%);
}

.index_box h2{
    font-size: 16px;
    font-weight: 600;
    color: #e87047;
    text-align: center;
    margin-top: 15px;
    letter-spacing: 2px;
}

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

/*ios 主選單 教學  */
.ios_teach{
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px 0;
}

.ios_teach .title{
    display: flex;
    flex-direction: column;
    gap: 10px 0;
}

.ios_teach .title h2{
    font-size: 16px;
    font-weight: 600;
}

.ios_teach .title h2 span{
    font-size: 18px;
    margin-right: 15px;
}

.ios_teach img{
    margin: 0 auto;
    max-width: 100%;
}

.ios_teach_img01{
    width: 100px;
    max-width: 100%;
}




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



.principle_box{

}

.principle_box img{
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
}

.all_text_box{

}

.all_text_box img{
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
}


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

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


.knowledge_list li a{
    padding: 8px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #363c4a;
    display: block;
}

.knowledge_list li .img{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 60%;
    margin-bottom: 10px;
    border-radius: 10px;
}

.knowledge_list li h2{
    color: #fff;
    font-size: 15px;
}

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

.all_bg{
    background-color: #1b1f28;
}

.home_top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    position: relative;

}

.home_top .logo,
.home_top .right{
    position: relative;
    z-index: 1;
}

.home_top .logo img{
    width: 160px;
}

.home_relative{
    background-color: #1b1f28;
    position: relative;
}


.home_top_bg{
    width: 100%;
    height: 50vh;
    background-image: url(../img/home_top_bg.jpg);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:  bottom center;
    z-index: 0;
}





.home_ad{
    overflow: hidden;
    margin-top: 50px;
}

.home_ad .owl-carousel{

}

.owl-item.active.center .home_ad_list{
    border: 1px #7e39ec solid;
    opacity: 1;
}

.home_ad_list{
    padding: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    position: relative;
    min-height: 190px;
    display: flex;
    align-items: center;
    border: 1px #fff4 solid;
    transition: .3s;
    opacity: .5;
}

.home_ad_list span{
    font-size: 12px;
    color: #fff;
    background-color: #7e39ec;
    border-radius: 20px;
    padding: 0px 10px;
    position: absolute;
    right: 15px;
    top: 15px;
    display: block;
}

.home_ad_list .title{
    display: flex;
    gap: 8px;
    flex-direction: column;
    padding-left: 15px;
}

.home_ad_list .title h2{
    font-size: 28px;
    color: #fff;
    font-weight: 700;
}

.home_ad_list .title h3{
    color: #fff;
    font-size: 16px;
}


.home_ad_list .play {
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #7e39ec;
    display: flex;
    position: absolute;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding-left: 3px;
}


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


.home_menu_list{
    display: flex;
    gap: 10px;
    justify-content: space-around;
}

.home_menu_list li{
    max-width: calc(20% - 10px);
}

.home_menu_list li a {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
}

.home_menu_list li a div{
    width: 70px;
    height: 70px;
    border-radius: 30px;
    background-color: #363636;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.home_menu_list li a div img{
    max-width: 100%;
}

.home_menu_list li a p{
    color: #fff;
    font-size: 13px;
}

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


.home_ai {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    flex-direction: column;
    align-items: flex-start;
}


.home_ai_robot{
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.home_ai_robot img{
    width: 44px;
    animation: robotPop 0.6s ease-out forwards;
}

.home_ai_robot .text {
    background-color: #49475b;
    border-radius: 20px;
    color: #fff;
    padding: 8px 20px;
    max-width: calc(100% - 64px);
    position: relative;

    /* 初始狀態 */
    opacity: 0;
    transform: scale(0.8) translateY(10px);

    /* 動畫 */
    animation: bubblePop 0.5s ease-out forwards;
    animation-delay: 0.5s; /* 等機器人出現後再說話 */
}

.home_ai_robot .text p{
    letter-spacing: 1.2px;
    font-size: 15px;
}



.home_ai_robot .text:after {
    content: "";
    position: absolute;
    left: -12px;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 15px 5px 0;
    border-color: transparent #49475b transparent transparent;
    transform: rotate(-19deg);
    z-index: 0;
}


/* 動畫 keyframes */
@keyframes bubblePop {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    80% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes robotPop {
    from {
        opacity: 0;
        transform: translateY(0px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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



.energy_list{
    display: flex;
    gap: 12px 12px;
    width: 100%;
    flex-wrap: wrap;
}

.energy_list li{
    width: calc(33.3% - 8px);
}

.energy_list li a{
    display: flex;
    gap: 8px;
    position: relative;
    background-color: #8152cd;
    border-radius: 20px;
    padding: 12px 15px;
    flex-direction: column;
}

.energy_list li a h3{
    color: #fff;
    font-size: 18px;
    font-weight: 700;


    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 52px;


}


.energy_list li a .play {
    width: 30px;
    height: 30px;
    background-color: #fff;
    color: #8152cd;
    display: flex;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding-left: 2px;
}

.energy_list li a p{
    color: #fff8;
    font-weight: 600;
    font-size: 14px;
}



.energy_list li a.color1{
    background-color: #8152cd;
}

.energy_list li a.color1 .play{
    color: #8152cd;
}



.energy_list li a.color2{
    background-color: #337c55;
}

.energy_list li a.color2 .play{
    color: #337c55;
}



.energy_list li a.color3{
    background-color: #b26870;
}

.energy_list li a.color3 .play{
    color: #b26870;
}



.energy_list li a.color4{
    background-color: #b08e56;
}

.energy_list li a.color4 .play{
    color: #b08e56;
}



.energy_list li a.color5{
    background-color: #4ca0e2;
}

.energy_list li a.color5 .play{
    color: #4ca0e2;
}



.energy_list li a.color6{
    background-color: #596fc2;
}

.energy_list li a.color6 .play{
    color: #596fc2;
}



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


.energy_center_top{
    position: relative;
    background-color: #8647ff;
    padding: 0 1rem 2rem 1rem;
    border-radius: 0 0 30px 30px;
    overflow: hidden;
}


.energy_center_top .top_box {
    position: relative;
    width: 100%;
    display: flex;
    padding: 10px 0px;
    justify-content: flex-end;
    z-index: 1;
    position: relative;
}

.energy_center_top .search_box{
    background-color: #272d3a75;
}

.energy_center_top .search_box input{
    padding: 14px 0;
    background-color: #0000;
}



.energy_center_top .text_info{
    gap: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
}


.energy_center_top .text_info h2{
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    padding-left: 10px;

}

.energy_center_top .text_info h2 span{
    font-size: 16px;
    margin-right: 10px;
}

.energy_center_top .text_info p{
    color: #fff;
    font-size: 16px;
    padding-left: 10px;
    margin-bottom: 5px;

}




.energy_center_top .round_01 {
    width: 150px;
    height: 150px;
    position: absolute;
    left: -50px;
    top: -70px;
    background-color: #a579fe;
    border-radius: 50%;
    z-index: 2;
}

.energy_center_top .round_02 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: -50px;
    top: -100px;
    background-color: #9965ff;
    border-radius: 50%;
    z-index: 1;
}

.energy_center_top .bg_img{
    position: absolute;
    bottom: 10px;
    right: 5px;
    z-index: 0;

}

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


.hot_box{
    display: flex;
    gap: 12px;
}

.hot_box>a {
    display: flex;
    gap: 12px;
    width: calc(50% - 6px);
    padding: 12px;
    border-radius: 30px;
    background-color: #2196f3;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: #fff;
}


.hot_box>a:nth-child(2){
    background-color:#13b57c ;
}

.hot_box>a .icon {
    width: 50px;
    height: 50px;
    border-radius: 20px;
    background-color: #36363633;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}


.hot_box>a h3{
    font-size: 16px;
    font-weight: 700;
}


.hot_box>a:after{
    content: "";
    background-image: url(../img/hot_box_bg1.png);
    background-position: center;
    background-size: 80px;
    background-repeat: no-repeat;
    width: 100px;
    height: 100%;
    position: absolute;
    right: -10px;
    background-size: 110px;
}

.hot_box>a:nth-child(2):after{
    background-image: url(../img/hot_box_bg2.png);

}


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



.energy_set_list{
    display: flex;
    gap: 20px 12px;
    width: 100%;
    flex-wrap: wrap;
}

.energy_set_list li{
    width: 100%;
}

.energy_set_list li a{
    display: flex;
    gap: 5px;
    position: relative;
    /*background-color: #8152cd;*/
    border-radius: 20px;
    padding: 15px 15px;
    flex-direction: column;
    background: linear-gradient(#713eb97d, #1b1f28) padding-box, linear-gradient(135deg, #4656c1, #753cb9) border-box;
    /*border: 1px solid transparent;*/

}

.energy_set_list li a h3{
    color: #fff;
    font-size: 18px;
    font-weight: 700;


    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;


}

.energy_set_list li a p{
    color: #ffffff9c;
}



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


.energy_time_bg{
    height: 100vh!important;
    background-image: url(../img/energy_time_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /*background-image: linear-gradient(to bottom, #171032 0%,#171032 50%, #210762 90%, #210762 100%);*/
}


.energy_time_bg .detail_box{
    background-color: #3330;
}

.energy_time_bg.no_menu .detail_box{
    padding: 90px 1rem calc(0rem + 50px) 1rem;
}



.icon_like{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #fff;
    cursor: pointer;
}

.icon_like i{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.icon_like i.like{
    opacity: .0;
/*    transition: .3s;*/
}

/*.icon_like:hover .like{
    opacity: 1;
}*/

.icon_like.active .like{
    opacity: 1;
}

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



.energy_time_box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    padding-bottom: 7rem;
}

.energy_time_box .title{
    width: 100%;
    text-align: center;
}

.energy_time_box .title h3{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.energy_time_box .title p{
    font-size: 16px;
    margin-bottom: 30px;
}



.energy_time_list {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

.energy_time_list li {
    width: 180px;
    max-width: calc(50% - 10px);
    height: 180px;
    
    position: relative;
    border-radius: 20px;
    
    border: 4px #fff0 solid; 
    display: flex;
    box-shadow: 0 0 30px #00000038;
    overflow: hidden;
    transition: .3s;
}

.energy_time_list li:hover{
     border: 4px #fff solid; 
}

.energy_time_list li a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    background-image: url(../img/energy_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.energy_time_list li p{
    color: #fff;
    font-size: 50px;
    font-weight: 700;
}

.energy_time_list li p span{
    font-size: 20px;
    margin-left: -5px;
}



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



.energy_start_box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    padding-bottom: 6rem;
    position: relative;
}

.energy_start_box .title {
    text-align: center;
    margin-bottom: 110px;
}

.energy_start_box .title p{
    font-size: 15px;
    margin-bottom: 10px;
    color: #f272ff;
}

.energy_start_box .title h3{
    font-size: 18px;
    margin-bottom: 130px;
}


/* 能量核心容器 */
.energy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 300px;
  height: 300px;
  z-index: -1;
}
 
/* 中心能量球 */
.energy::before {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  /*background: radial-gradient(circle, #e861eb, #3452f0);*/
  background: radial-gradient(circle, #a961eb, #3950cc);
  box-shadow:
    0 0 20px rgba(187, 86, 251, 0.8),
    0 0 40px rgba(40, 124, 255, 0.6);
  z-index: 2;
}

/* 能量波紋 */
.energy span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(187, 86, 251, 0.6);
  animation: ripple 4s infinite;
  filter: blur(0.5px);
  opacity: 0;
}

/* 不同時間差，製造連續散波 */
.energy span:nth-child(1) { animation-delay: 0s; }
.energy span:nth-child(2) { animation-delay: 1s; }
.energy span:nth-child(3) { animation-delay: 2s; }

/* 能量擴散動畫 */
@keyframes ripple {
  0% {
    transform: scale(0.3);
    opacity: 0.9;
    box-shadow: 0 0 12px rgba(187, 86, 251, 0.8);
  }
  70% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
    box-shadow: 0 0 40px rgba(0, 124, 255, 0);
  }
}




.time_box{
    font-size: 24px;
}


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


.energy_finish_box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    padding-bottom: 6rem;
}

.energy_finish_box img{
    margin-bottom: 50px;
    width: 180px;
    max-width: 85%;
}

.energy_finish_box .title{
    width: 100%;
    text-align: center;
}

.energy_finish_box .title h3{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}


.energy_finish_box .btn{
    display: flex;
    gap: 10px 0;
    flex-direction: column;
    transition: .2s;
    position: relative;
    z-index: 1;
    width: 100%;
}



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



.energy_history{
    border-radius: 20px;
    background-color: #2a3342;
    overflow: hidden;
    box-shadow: 0px 5px 15px #47433b1f;
}



.energy_history>li {
    border-bottom: 1px #434d5b solid;
}

.energy_history>li {
    padding: 12px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px 10px;
    justify-content: center;
    color: #fff;
    flex-direction: column;
}

.energy_history>li:nth-last-child(1){
    border-bottom: 0px #ebebeb solid;
}

.energy_history>li div {
    display: flex;
    width: 100%;
    justify-content: space-between;
}


.energy_history>li h3{
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
}


.energy_history>li .time {
    font-size: 12px;
    display: flex;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 8px;
    background-color: #4d5666;
    align-items: center;
    line-height: 14px;
}


.energy_history>li .time i {
    font-size: 10px;
}

.energy_history>li div h5{

}

.energy_history>li div h5.finish{
    color: #3abb65;
}

.energy_history>li div h5.fail{
    color: #ec7449;
}


.energy_history>li p{
    color: #aaa;
}




.energy_statistics_box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    padding-bottom: 6rem;
}

.energy_statistics_box .title{
    text-align: center;
}

.energy_statistics_box .title h3{
    font-size: 16px;
    margin-bottom: 20px;
}

.energy_statistics_box .title p {
    font-size: 44px;
    font-weight: 700;
    line-height: 44px;
    min-width: 150px;
}

.energy_statistics_box .title h4{
    font-size: 18px;
    margin-top: 20px;
}

.energy_statistics_box .title div {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-end;
}