@charset "utf-8";

/*星空之旅*/
/*-------------------------------------------------------------------------*/
/*固定大圖隨著滑鼠往上移動*/
/*.pageIndex #header { position: static;}
#content_main { margin:0;}
.bannerindex { position:static; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
*/

:root{
    --f_base: 1vw;
    --f70: clamp(2.37rem, calc(1.97rem + (var(--f_base) * 2)), 4.37rem);/*38*/
    --f55: clamp(2.12rem, calc(1.86rem + (var(--f_base) * 1.31)), 3.43rem);/*34*/
    --f50: clamp(2rem, calc(1.77rem + (var(--f_base) * 1.12)), 3.12rem);/*32*/
    --f45: clamp(1.87rem, calc(1.68rem + (var(--f_base) * 0.93)), 2.81rem);/*30*/
    --f40: clamp(1.62rem, calc(1.45rem + (var(--f_base) * 0.87)), 2.5rem);/*26*/
    --f38: clamp(1.56rem, calc(1.4rem + (var(--f_base) * 0.81)), 2.37rem);/*25*/
    --f35: clamp(1.43rem, calc(1.28rem + (var(--f_base) * 0.75)), 2.18rem);/*23*/
    --f30: clamp(1.37rem, calc(1.27rem + (var(--f_base) * 0.5)), 1.87rem);/*22*/
    --f25: clamp(1.25rem, calc(1.18rem + (var(--f_base) * 0.31)), 1.56rem);/*20*/
    --f22: clamp(1.12rem, calc(1.07rem + (var(--f_base) * 0.25)), 1.3rem);/*18*/
    --f20: clamp(1.12rem, calc(1.1rem + (var(--f_base) * 0.12)), 1.3rem);/*18*/
    --f18: clamp(1rem, calc(0.97rem + (var(--f_base) * 0.12)), 1.13rem);/*16*/
    --f16: clamp(0.94rem, calc(0.9rem + (var(--f_base) * 0.65)), 1rem);
    --p3: 3%;
    --p5: 5%;
    --p70: clamp(45px,4vw,70px);
    --p100: clamp(calc(2vw + 50px),7vw,100px);
    --p150: clamp(calc(3.5vw + 50px),9vw,150px);
    --p200: clamp(calc(5vw + 50px),12vw,200px);
    --p250: clamp(calc(6.5vw + 50px),14vw,250px);
    --coM: #5FA9E2;
    --coS: #F9AA84;
}

@keyframes left01{
    50%{transform: translateX(-1vw);}
}
@keyframes right01{
    50%{transform: translateX(1vw);}
}
@keyframes shake01{
    50%{transform: rotate(3deg);}
}

.all_main_set * {
    box-sizing: border-box;
    max-width: 100%;
}

.all_main_set {
    max-width: 2000px;
    width: 100%;
    margin: auto;
    border: 0;
    text-decoration: none;
    overflow: hidden;
}

.all_main_set img {
    width: auto;
    max-width: 100%;
    vertical-align: bottom;
}

.all_main_set ul {
    padding: 0 0;
    margin: 0;
}

.all_main_set li {
    list-style: none;
}

.all_main_set h6,
.all_main_set h5,
.all_main_set h4,
.all_main_set h3,
.all_main_set h2 {
    margin: 0;
}

.all_main_set u {
    text-decoration: none;
}

.all_main_set p {
    margin: 0;
}

.all_main_set em,
.all_main_set i {
    font-style: normal;
}

.all_main_set a {
    text-decoration: none;
}

.all_main_set dd,
.all_main_set dt {
    margin: 0 0;
}

.swiper-slide img {
    height: auto;
}

.bannerindex {
    top: 60px;
}

.main_part {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.show_content {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.page {
    margin-bottom: 0;
}

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

/*header logo*/

.nav-header {
    margin: 0px;
    padding: 0px;
}

.nav-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 250px;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.nav-brand img{
    height: auto;
    max-height: 100%;
}

.nav-brand h1 {
    position: absolute;
    opacity: 0;
}

/*-------------------------------------------------------------------------*/
/*header右側按鈕*/
.tp_links a:before {
   display: none;
}

/* .tp_links a.me_tp_line:before {
    background-image: url(https://pic03.eapple.com.tw/cltraveltrip/tp_line.png) !important;
}

.tp_links a.me_tp_call:before {
    background-image: url(https://pic03.eapple.com.tw/cltraveltrip/tp_call.png) !important;
}

.tp_links a.me_tp_mail:before {
    background-image: url(https://pic03.eapple.com.tw/cltraveltrip/tp_email.png) !important;
} */

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

.nav-menu {
    margin: 0px 0 0 0;
}


.nav-menu>li>a {
    color: #444;
    font-size: 16px;
    transition: all 0.5s;
    padding: 30px 13px;
}

.nav-menu>li:hover>a {
    color: #444;
    background: #FDF9E1;
}

.nav-dropdown>li>a {
    transition: all 0.5s;
}

.tp_links a {
    border-bottom: none !important;
}

.footer {
    background: #f2f2f2;
}

.footer_menu {
    border-top: 1px solid #f2f2f2 !important;
}

/* menu */
.main_header_area{
    padding: 0 2%;
    background: #FEEA8B;
}
.main_header_area .container {
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
}

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu {
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.nav-header {
    position: static;
}

.tp_links {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
}
.nav-menu>li.tp_links:hover a{
    background: none;
}

.tp_links a {
    transition: 0.5s;
}

.tp_links a:hover {
    transition: 0.5s;
    transform: translateY(-5px);
}

@media (max-width:1200px) {

    .nav-menu>li>a {
        padding: 30px 10px;
    }
}

@media (max-width:1100px) {
    .main_header_area{padding: 10px 2% 0;}
    .navigation{flex-direction: column;}
    .nav-menu>li>a{padding: 15px 8px;}
}

@media (max-width:768px) {
    .nav-menus-wrapper{
        margin:0;
    }

    .nav-header{
        margin:0;
    }

    .nav-toggle{
        top:3px;
    }

    .main_header_area {
        padding: 10px 5%;
    }

    .nav-brand{width: 80%;}
}



@media (max-width:480px) {
    .nav-brand img{
        margin:0;
        padding:0;
    }
}

@media (max-width:400px) {
    .nav-brand{
        max-width: 220px;
    }

}

.footer,
#bottom_menu {
    border-top: 1px solid #f2f2f2 !important;
}

.footer_logo img {
    width: 100%;
}

.footer_info li:nth-child(1) {
    width: 40%;
}

.footer_info li:nth-child(2) {
    width: 40%;
}

.footer_info li p.add:before {
    content: "北部：";
}

.footer_info li p.add2:before {
    content: "中部：";
}

/* *********************************** */

/*每頁底色+背景*/
#content {
    border-top: none !important;
    background: url(../img/siu_img018.jpg) #FFFEF9 no-repeat center top;
}

.banner {
    box-shadow: none;
    background: none;
    padding: var(--p150) var(--p3) var(--p70);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: clamp(100px, 40vw, 328px);
    min-height: fit-content;
    max-width: 2000px;
}
.banner:before{
    content: '';
    background: url(../img/ban_01.png) no-repeat center;
    background-size: contain;
    width: 30vw;
    max-width: 463px;
    height: 157px;
    position: absolute;
    left: 0;
    top: 55%;
    transform: translateY(-50%);
}
.banner h5{
    font-size: var(--f50);
    color: var(--coM);
    line-height: 135%;
    padding-top: 40px;
    position: relative;
}
.banner h5:before{
    content: '';
    display: block;
    color: var(--coS);
    font-size: var(--f18);
    letter-spacing: 0;
    line-height: 135%;
}
.banner h5:after{
    content: '';
    background: url(../img/ban_icon.png) no-repeat center;
    width: 23px;
    height: 34px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.banO h5{
    display: none;
}

.banN h5:before{
    content: 'NEWS';
}

.path{
    display: none;
}


/* *********************************** */

/*聯絡表單*/
.list_before li.btn .animated-arrow {
    display: none;
}

.noborder {
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
}

.contact_form li {
    border-bottom: 0px solid #ffffff;
}

.contact_content .information_left {
    display: none;
}

.contact_content .information_right {
    width: 100%;
}

.animated-arrow {
    background-color: #16306F;
}

@media screen and (max-width: 768px) {
    .bannerindex {
        top: 0;
    }
}

@media screen and (max-width: 480px) {

}


/* member */
.right_member_in {
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.right_member_in li {
    font-size: 13px;
}

/* footer */
.footer_in {
    background: url(../img/fbg.png) #FFFEF9 no-repeat center top;
    position: relative;
    z-index: 99;
    padding: 45px var(--p3) 0;
    text-align: center;
    overflow: hidden;
}
.footer_in:before{
    content: '';
    background: #EBF5FE;
    width: 100%;
    height: 50%;
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
}
.footer_in img{
    width: unset;
    max-width: 100%;
}
.footer_in var{
    width: 40vw;
    max-width: 704px;
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 0;
    animation: left01 10s ease-in-out infinite;
}
.footer_in dfn{
    width: 32vw;
    max-width: 508px;
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 0;
    animation: right01 8s ease-in-out infinite;
}
.footer_in dl{
    max-width: 1650px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    letter-spacing: 1px;
    gap: 5px;
}
.footer_in dl dd{
    line-height: 0;
}
.footer_in dl dd:first-child{
    padding-bottom: 3%;
}
.footer_in dl dd:first-child img{
    max-width: 50%;
    animation: shake01 3.5s ease-in-out infinite;
    transform-origin: left bottom;
}
.footer_in dl dd:last-child{
    text-align: right;
}
.footer_in dl dt{
    padding-bottom: clamp(25px,7%,45px);
}
.footer_in h5{
    font-size: var(--f55);
    color: #5FA9E1;
}
.footer_in h5 b{
    display: block;
    font-size: clamp(1rem, calc(0.97rem + (var(--f_base) * 0.12)), 1.13rem);
    color: #F98E8C;
    font-weight: 500;
    letter-spacing: 0;
}
.footer_in p{
    font-size: var(--f16);
    margin: 25px auto 40px;
    line-height: 180%;
}
.footer_in a{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin: 0 auto;
    border-radius: 50px;
    width: 100%;
    max-width: 240px;
    text-align: center;
    color: #fff;
    background: #67B72A;
    overflow: hidden;
    font-size: var(--f22);
    transition: all .4s;
}
.footer_in a:hover{
    background: #F98E8C;
}

.str_all {
    padding: 70px 20px 10px;
    background-color: #fff;
    position: relative;
    z-index: 99;
}

.f_inf{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
}

.str_01 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-right: 5%;
}

.str_logo {
    display: block;
    width: fit-content;
    padding-bottom: 3%;
    margin-right: 4%;
}

.str_01 p {
    width: fit-content;
}

.str_01 p a {
    display: block;
    width: fit-content;
    font-size: var(--f16);
    line-height: 180%;
    color: #444;
    transition: 0.5s;
}

.str_01 p a:hover {
    transition: 0.5s;
}

.su_footer {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 15px 5px;
    grid-auto-columns: minmax(80px, auto);
    margin-top: 35px;
}

.su_footer a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: var(--f16);
    font-weight: 400;
    line-height: 120%;
    background: #83C8F4;
    text-align: center;
    padding: 6px 5px 4px;
    transition: 0.4s;
}

.su_footer a:hover {
    background: #4EA0DE;
    transition: 0.5s;
}

.copy {
    background-color: #FEEA8B;
    color: #444;
    font-size: 14px;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    padding: 10px 20px;
    position: relative;
    z-index: 99;
    margin: 0;
    border: none;
}

@media (max-width:1350px) {
    .su_footer{grid-template-columns: repeat(5,1fr); gap: 6px;}
}

@media (max-width:1024px) {
    .str_all {
        padding: 50px 15px 10px;
    }
    .str_01{flex-direction: column;}
    .str_logo{padding-bottom: 0; margin: 0 0 20px;}
    .str_01 p{margin: 0 auto;}
}

@media (max-width:768px) {
    
    .footer_in{
        padding: 45px var(--p3) 0px;
    }
    .footer_in dl{
        grid-template-columns: 1fr;
    }
    .footer_in dl dd:first-child{
        width: 10vw;
        max-width: 181px;
        position: absolute;
        left: 0;
        bottom: 0;
        text-align: left;
    }
    .footer_in dl dd:first-child img{
        max-width: 100%;
    }
    .footer_in dl dd:last-child{
        width: 20vw;
        max-width: 413px;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .str_all {
        padding: 40px 15px 10px;
    }

    .str_01 {
        flex-direction: column;
    }

    .su_footer {
        max-width: 500px;
        grid-template-columns: repeat(4, 1fr);
        margin-top: 15px;
    }

}

@media (max-width:425px) {
    .footer_in dl dd:first-child{
        width: 15vw;
    }
    .footer_in dl dd:last-child{
        width: 30vw;
    }
    .footer_in p{
        margin: 15px auto 25px;
    }

    .su_footer {
        max-width: 250px;
        grid-template-columns: repeat(2, 1fr);
    }

    .str_all {
        padding: 30px 10px 10px;
    }

    .str_logo {
        max-width: 80%;
    }

    .str_logo img {
        width: 100%;
    }
    
}

/* workshow */
body.work_page .main_part {
    padding: 120px 20px;
}

body.work_page .main_part .show_content {
    max-width: 1406px;
    margin: auto;
}

body.work_page .path {
    max-width: 1378px;
    margin: auto;
    margin-bottom: 35px;
}

body.work_page .show-list .show_name {
    color: #343426;
    font-size: var(--f18);
    font-weight: 400;
    line-height: 120%;
    margin: 0;
    margin-top: 15px;
}

body.work_page .show-list .show_pic {
    padding-bottom: 66%;
}

body.work_page .show-list .show_name {
    height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    box-sizing: border-box;
}

body.work_page .show-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

body.work_page .show-list .item {
    width: 32%;
    padding: 0;
    margin: 20px 0.5%;
}

body.work_page .show-list .item {
    padding: 0;
}

body.work_page .show-list .show_pic img {
    width: 100%;
}

body.work_info_page .other_album_choice li {
    background: linear-gradient(to bottom, rgba(82, 70, 254, 1) 0%, rgba(47, 23, 255, 1) 100%);
}

.other_album_choice li,
.other_album_choice li .fa {
    transition: ease .4s;
}

.other_album {
    margin-top: 50px;
}

.pageIndex .news_part{
    display: none;
}

@media (max-width:1200px) {

    .all_banner::before {
        width: 43vw;
        height: 34vw;
    }
}

@media (max-width:1024px) {
    body.work_page .main_part {
        padding: 80px 20px;
    }
}

@media (max-width:800px) {
    body.work_page .main_part {
        padding: 50px 20px;
    }
}

@media (max-width:600px) {
    body.work_page .show-list .item {
        width: 47.5%;
        margin: 20px 1%;
    }

    body.work_page .show-list .item {
        width: 100%;
    }

    body.work_info_page .pic-list .item {
        width: 100%;
    }
}

/* 預約 */
body.about_page .main_part {
    max-width: 1290px;
    margin: auto;
    padding: 0 var(--p3) var(--p100);
}

.box_le blockquote i {
    display: block;
    max-width: 308px;
    margin-bottom: 25px;
}

/* 文章 */
body.blog_page .all_banner {
    background-image: url('../img/siu_img024.jpg');
}

body.blog_page .main_part {
    padding: 0 var(--p3) var(--p100);
}

body.blog_page .show_content {
    max-width: 1515px;
    margin: auto;
}

body.blog_page .path {
    max-width: 1515px;
    margin: auto;
    margin-bottom: 40px;
}

body.blog_page .accordion li .link {
    font-weight: 400;
}

.blog_subbox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px 3%;
    position: relative;
    top: -30px;
    max-width: 1210px;
}
.blog_subbox:before{
    display: none;
}

.subbox_item {
    width: 100%;
    float: none;
    position: relative;
    transition: 0.5s;
}

.subbox_item:hover::before {
    transition: 0.5s;
    opacity: 1;
}

.subbox_item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 8;
    opacity: 0;
    border: 1px #ddd solid;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: 0.5s;
    pointer-events: none;
}

.subbox_item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.5s;
}

.subbox_item a:before {
    content: "+MORE";
    color: white;
    font-size: 15px;
    font-weight: bold;
    line-height: 120%;
    background-color: transparent;
    z-index: 50;
    transition: 0.5s;
}

.subbox_item a:after {
    display: none;
}

.blog_list_le {
    width: 100%;
}

.blog_list_ri {
    width: 100%;
}

.page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.page li {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 150px;
    line-height: 25px;
}

.page li a {
    border-radius: 150px;
    padding: 0;
    border: 1px #ccc solid;
}

.page strong,
.page a {
    min-width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

@media (max-width:1024px) {
    .blog_subbox{grid-template-columns: 1fr 1fr;}
}

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

@media(max-width:425px) {
    .subbox_item {
        width: 100%;
        margin: 25px 0;
    }

    .page {
        margin-top: 0;
    }
}

/* 促銷方案 */
body.promotions_page .all_banner {
    background-image: url('../img/siu_img026.jpg');
}

body.promotions_page .main_part {
    padding: 100px 20px;
    max-width: 1240px;
    margin: auto;
}

body.promotions_page .path {
    max-width: 1240px;
    width: 100%;
    margin-bottom: 40px;
}

body.promotions_page .time {
    margin-bottom: 20px;
}

.promotion_title span {
    display: none;
}

.promotion_title h2 {
    border: none;
    color: #333326;
    font-size: var(--f25);
    font-weight: bold;
}

.edit {
    width: 100%;
    padding: 20px 0;
}

.promotion_title {
    border-bottom: 1px #ccc solid;
}

@media (max-width:600px) {
    body.promotions_page .main_part {
        padding: 50px 20px;
    }
}

/* contact */
body.contact_page .all_banner {
    background-image: url('../img/siu_img027.jpg');
}

body.contact_page .main_part {
    max-width: 1240px;
    margin: auto;
    padding: 100px 20px;
}

.contact_form li .form__insert img {
    margin-left: 10px;
}

.contact_content {
    width: 100%;
    padding: 0;
    margin: 0;
}

.contact_form li input {
    padding: 5px;
}

.contact_form li:last-child>input {
    padding: 5px 15px;
}

.contact_form li:last-child .animated-arrow input {
    padding: 0px;
    padding-left: 50px;
}

@media (max-width:800px) {
    body.contact_page .main_part {
        padding: 50px 20px;
    }
}

@media(max-width:400px) {
    .contact_form li.last {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .last .animated-arrow {
        margin-top: 10px;
    }
}

/* 會員 */
body.member .main_part {
    padding: 0 var(--p3) var(--p100);
    min-height: auto;
}

body.member .path {
    display: none;
}

body.member .member_title {
    margin-bottom: 100px;
}

body.member .member_title p {
    display: none;
}

body.member .show_content {
    max-width: 1360px;
    width: 100%;
    margin: auto;
}

.member_login_regist {
    max-width: 500px;
    width: 100%;
    margin: 0;
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.member_login_regist img {
    width: fit-content;
    position: absolute;
    right: 0;
    bottom: 22px;
    width: 162px;
    height: 162px !important;
}

.mr01 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 50;
}

.mr01 h2 {
    font-size: var(--f25);
    font-weight: bold;
    line-height: 120%;
    margin: 0;
    margin-left: 10px;
}

.member_login_regist i {
    display: block;
    color: #FF0000;
    font-style: normal;
    line-height: 120%;
    font-size: var(--f16);
}

.member_login_regist p {
    text-align: justify;
    color: #888888;
    font-size: var(--f16);
    font-weight: 400;
    line-height: 140%;
    position: relative;
    z-index: 50;
}

.member_login_regist a {
    max-width: 250px;
    width: 100%;
    padding: 17px 5px;
    background-color: #89CBF5;
    margin-top: 25px;
    transition: 0.5s;
    position: relative;
    z-index: 50;
}

.member_login_regist a:hover {
    transition: 0.5s;
    background-color: #5FA9E2;
}

.member_login {
    margin: 0;
}

.member_index {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.member_index form {
    margin: 0 0 0 auto;
    width: fit-content;
}

body.member .banner{
    padding-bottom: 0;
}

body.member .member_login tr td:nth-child(1) {
    width: 115px;
    white-space: nowrap;
}

body.member .member_login tr td:nth-child(2) {
    width: 400px;
    padding-top: 20px;
}

body.member .login_mem_submit {
    background: #89CBF5;
    padding: 14px 5px;
    transition: 0.5s;
}

body.member .login_mem_submit:hover {
    transition: 0.5s;
    background: #5FA9E2;
}

body.member .login_mem_other_link {
    text-align: right;
}

body.member .login_mem_other_link a {
    color: #FF0000;
}

.member_index01,
.member_index02 {
    width: 50%;
}

.member_index01 {
    padding-right: 50px;
}

.member_index02 {
    border-left: 1px #CCCCCC solid;
    padding-left: 50px;
}

body.member .member_login tr td:nth-child(1) {
    font-size: var(--f16);
}

body.member.member_rei .main_part {
    padding: 0 var(--p3) var(--p100);
}

body.member.member_rei .member_title {
    margin-bottom: 30px;
}

body.member.member_rei .mem_regist_title_s_s02 input {
    max-width: 205px;
    width: 100%;
    margin: auto;
    background-color: #89CBF5;
    color: white;
    font-size: var(--f16);
    font-weight: bold;
    line-height: 120%;
    letter-spacing: 0.15em;
    text-indent: 0.15em;
    text-align: center;
    padding: 15px 5px;
    transition: 0.5s;
}

body.member.member_rei .mem_regist_title_s_s02 input:hover {
    transition: 0.5s;
    background-color: #5FA9E2;
}

body.member .edit {
    padding: 0;
}

.mu01 b {
    display: block;
    font-size: var(--f25);
    font-weight: 600;
    line-height: 120%;
    text-align: center;
    margin-bottom: 50px;
}

.mu01 p {
    font-size: 15px;
    font-weight: 500;
    line-height: 120%;
    text-align: center;
}

.mu01 p span {
    color: var(--coM);
    font-size: var(--f25);
    font-weight: 600;
    line-height: 120%;
    padding: 0 5px;
}

.mu01 h6 {
    max-width: 900px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.mu01 h6 a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    background-color: #EEEEEE;
    border-radius: 150px;
    margin: 0 10px;
    transition: 0.3s;
}

.mu01 h6 a:hover {
    transition: 0.3s;
    background-color: #66ADE3;
}

.mu01 h6 a:hover img {
    filter: invert(1);
}

.mu01 h6 a span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    margin-top: 15px;
    transition: 0.3s;
}

.mu01 h6 a:hover span {
    transition: 0.3s;
    color: white;
}

.mu02 h6 {
    max-width: 910px;
}

.mu03 {
    max-width: 1040px;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 50px auto 85px auto;
}

.mu03 h4 {
    font-size: var(--f18);
    font-weight: 400;
    line-height: 120%;
    color: #FF0000;
}

.mu03 h4 a {
    color: #FF0000;
}

.mu03 h5 {
    font-size: var(--f18);
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.05em;
}

.mu03 h5:nth-of-type(2) {
    margin: 0 10px;
}

.mu03 h5 a {
    color: black;
}

/* 司機隱藏 */
.mu02 {
    display: none;
}

/* 修改密碼 */
body.member.member_pd .member_title {
    margin-bottom: 50px;
}

body.member.member_pd .mem_regist_title_s_s input {
    padding: 16px 5px;
    background-color: #89CBF5;
    max-width: 250px;
    width: 100%;
    color: white;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: 0.15em;
    text-indent: 0.15em;
    transition: 0.5s;
}

body.member.member_pd .mem_regist_title_s_s input:hover {
    transition: 0.5s;
    background-color: #5FA9E2;
}

.mem_box2 input.bbtn01,
.mem_box2 input.bbtn02,
.mem_box2 input.bbtn02 {
    max-width: 225px;
    width: 100%;
    background: #89CBF5;
    margin: 15px 10px;
}

.mem_box2 input.bbtn02 {
    background: #65ACE3;
}

body.member.member_pd .member_title {
    max-width: 100%;
}

.mask_order_history {
    max-width: 1200px;
    width: 100%;
    margin: auto;
}

.mask_order_history table {
    width: 100%;
    margin-bottom: 50px;
    border-collapse: separate;
    border-spacing: 5px;
    background-color: transparent;
    border-bottom: 1px #CCCCCC solid;
}

.mask_order_history table tr td {
    font-size: 15px;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    background: white;
    border: none;
    padding: 15px 5px;
    letter-spacing: 0.05em;
    text-indent: 0.05em;
}

.member_icon {
    max-width: 1200px;
    margin: auto;
    text-align: right;
    margin-bottom: 20px;
}

.member_icon h5,
.member_icon h5 a {
    color: #D90000;
    font-size: var(--f18);
    font-weight: 400;
    line-height: 140%;
}

@media (max-width:900px) {
    .member_index {
        flex-direction: column;
    }

    .member_index01,
    .member_index02 {
        width: 100%;
        padding: 0;
    }

    .member_index02 {
        border: none;
        border-top: 1px #cccccc solid;
        padding-top: 30px;
        margin-top: 30px;
    }

    .member_index form,
    .member_login_regist {
        margin: auto;
    }

    .member_login_regist {
        margin-top: 0;
    }

    .mu03 {
        justify-content: center;
    }

    .mu01 h6 {
        justify-content: center;
    }

    .mu02 h6 {
        max-width: 550px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .mu01 h6 a,
    .mu02 h6 a {
        margin: 15px 10px;
    }

    .member_icon {
        text-align: center;
    }
}

@media (max-width:800px) {

    body.member .member_title {
        margin-bottom: 50px;
    }
}

@media (max-width:768px) {
    .order_history tr td:nth-child(n) {
        text-align: justify;
        word-break: break-all;
    }

    .mask_order_history table tr td::before {
        content: attr(data-str);
        margin-right: 5px;
    }

    .order_history tr {
        padding: 30px 0;
    }

    .mask_order_history table {
        margin-bottom: 35px;
        border: none;
    }

    .mask_order_history table tbody {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .order_history tr {
        margin: 15px 1%;
        width: 100%;
    }

    .order_history tr td:nth-child(n) {
        width: 50%;
        padding: 15px 5px;
    }
}

@media (max-width:600px) {
    .mu03 {
        flex-direction: column;
        align-items: center;
        margin: 40px 0;
    }

    .mu03 h5:nth-of-type(2) {
        margin: 15px 0;
    }
}

@media (max-width:500px) {
    .member_login_regist {
        padding: 35px 20px;
    }

    .order_history tr {
        width: 100%;
    }

    .mask_order_history {
        padding: 0;
    }
}

@media (max-width:450px) {
    .order_history tr {
        padding: 15px 0;
    }

    .order_history tr td:nth-child(n) {
        width: 100%;
    }

    .member_icon {
        margin: 0;
    }

}

@media (max-width:600px) {
    .mu01 h6{
        max-width: 450px;
        flex-wrap: wrap;
    }
}

@media (max-width:400px) {
    .mu01 h6 a {
        width: 120px;
        height: 120px;
        margin: 5px;
    }

    .mu01 h6 a span {
        font-size: 14px;
    }

    .mu01 p {
        flex-direction: column;
        align-items: center;
    }

    .mu01 p span {
        display: block;
        margin: 10px 0;
    }
}

/* 線上購物 */
.str_detail01 {
    padding: 0 var(--p3) var(--p100);
}

.str_detail02 {
    max-width: 1200px;
    margin: auto;
}

.str_detail02 p {
    padding: 0 30px;
    margin-bottom: 45px;
}

.str_detail03 {
    max-width: 1200px;
    margin: auto;
    padding: 70px 20px 100px 20px;
    background-color: #FAFAFA;
}

.str_detail03 b {
    display: block;
    color: var(--coM);
    font-size: var(--f25);
    font-weight: 400;
    line-height: 130%;
    text-align: center;
    padding-bottom: 40px;
    margin: 0 auto 60px;
    border-bottom: 1px solid #EDF0F3;
    max-width: 890px;
}

.str_detail03 ul {
    max-width: 600px;
    margin: auto;
    width: 100%;
}

.str_detail03 li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.str_detail03 li+li {
    margin-top: 25px;
}

.str_detail03 li i {
    display: block;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    width: 140px;
    min-width: 140px;
    margin-right: 15px;
    word-break: break-all;
}

.str_detail03 li u {
    display: block;
    color: #FF0000;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    white-space: nowrap;
    padding-right: 30px;
}


.str_detail03 li em,
.str_detail03 li input {
    display: block;
    width: 100%;
    color: #575747;
    font-size: 14px;
    font-weight: 400;
    line-height: 120%;
    border: 1px #E6E6E6 solid;
    padding: 10px 15px;
    background-color: #EDF0F3;
}

.str_detail03 li input {
    background-color: white;
}

.str_detail03 ul:nth-of-type(1) li:nth-child(3) i {
    width: 211px;
    min-width: 211px;
}

.str_detail03 ul:nth-of-type(2) {
    margin-top: 110px;
}

.str_detail03 ul:nth-of-type(2) li:last-child {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.str_detail03 ul:nth-of-type(2) li:last-child input {
    max-width: 280px;
}

.str_detail03 ul:nth-of-type(2) li:last-child img {
    margin: 0 10px;
}

.str_detail_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 200px;
    width: 100%;
    height: 50px;
    background-color: #83C8F4;
    border-radius: 10px;
    margin: auto;
    margin-top: 60px;
    transition: 0.5s;
}

.str_detail_btn input[type="button"] {
    background: transparent;
    color: white;
    font-size: 20px;
    font-weight: bold;
    line-height: 140%;
    letter-spacing: 0.05em;
    text-indent: 0.05em;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.str_detail_btn:hover {
    transition: 0.5s;
    background-color: #5FA9E2;
}

@media (max-width:700px) {
    .str_detail03 ul:nth-of-type(2) li:last-child {
        flex-direction: column;
        align-items: flex-start;
    }

    .str_detail03 ul:nth-of-type(2) li:last-child img {
        margin: 10px 0;
    }

    .str_detail03 ul:nth-of-type(2) li:last-child i {
        margin: 0;
        margin-bottom: 15px;
    }
}

@media (max-width:600px) {
    .str_detail03 b {
        padding-bottom: 25px;
        margin-bottom: 40px;
    }

    .str_detail03 ul:nth-of-type(2) {
        margin-top: 50px;
    }
}

@media (max-width:500px) {

    .str_detail03 li {
        flex-direction: column;
        align-items: flex-start;
    }

    .str_detail03 li i {
        margin: 0;
        margin-bottom: 15px;
    }

    .str_detail03 li:nth-child(n) i {
        min-width: unset;
        width: 100%;
    }

    .str_detail03{
        padding:35px 20px;
    }

    .str_detail02 p {
        text-align: center;
    }
}

/* 頁碼 */
.page{
    margin:80px 0 50px 0;
}