/* 字體設定 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* 顏色設定 */
:root{
    --c-blu-01: #19406d;
    --c-blu-02: #33B8B1;
    --f-family: "Noto Sans TC","Roboto",sans-serif;
}

/* 其他設定 */
* {box-sizing: border-box;margin: 0;padding: 0;font-family: var(--f-family);}
html {font-size: 16px;font-weight: 500;}
/* body{background-image:url(../images/texture.png);} */
h2{margin-bottom: 60px;position: relative;text-align: center;letter-spacing: 3px;}
h2:before {content: '';position: absolute;left: 50%;transform: translateX(-50%);width: 50px;height: 3px;bottom: -15px;background: linear-gradient(90deg, var(--c-orange-01) 0%, var(--c-orange-01) 50%, var(--c-orange-02) 50%, var(--c-orange-02));}
p {padding-bottom: 10px;}
a {text-decoration: none;}
img {display: block;}
main{margin-top: 100px;}
.container {max-width: 1240px;margin: 0 auto;padding: 0 20px;}
.ContentBox{padding: 60px 0;}
.font-0{opacity: 0;}

@media screen and (max-width:768px) {
    main{margin-top: 80px;}
    .ContentBox{padding: 50px 0;}
    .font-0{opacity: 0;font-size: 0;}
}

/* header */
header {background: #fffffff1;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);position: fixed;top: 0;left: 0;right: 0;z-index: 100;}
header .header-area {display: flex;align-items: center;height: 100px;}
header .logo {font-size: 24px;font-weight: 800;}
header .logo a{color: var(--c-orange-01);}
header .nav {margin-left: auto; display: flex;align-items: center;gap: 10px;}
header .nav ul {display: flex;gap: 25px;list-style: none;}
header .nav .item{position: relative;}
header .nav a{display: block;color: #333;padding: 0 5px;text-align: center;}
header .menu{display: none;height: 50px;width: 50px;padding: 10px;flex-direction: column;justify-content: space-around;margin-left: auto;cursor: pointer;}
header .menu span{display: block;width: 100%;height: 3px;background-color: #333;}

/* footer */
footer{background-color: var(--c-orange-01);}
footer .footer-area{display: flex;flex-direction: column;padding: 100px 0;gap: 50px;}
footer .f-t{display: flex;padding: 0 100px 50px 100px;border-bottom: 1px solid #8996aa;flex-wrap: wrap;}
footer .f-t .project{width: 25%;}
footer .f-t .f-title{color: rgb(221 221 221);font-size: 18px;}
footer .f-t .link-area{display: flex;flex-direction: column;gap: 10px;margin: 20px 0;}
footer .f-t .link-area a{color: #8996aa;}
footer .f-b .information{display: flex;gap: 20px;justify-content: space-between;}
footer .f-b .logo-area p{font-size: 28px;display: block;margin: 40px;color:rgb(221 221 221);font-weight: 600;text-align: center;}
footer .f-b .text{color:rgb(221 221 221)}
footer .f-b .text p{padding-bottom: 20px;text-indent: -3em;padding-left: 3em;}
footer .f-b .text a{color: rgb(221 221 221);}
footer .f-b .icon{align-self: self-start;}
footer .f-b .icon a{display: inline-block;color:rgb(221 221 221);font-size: 35px;margin-right: 10px;}
footer .f-b .icon .site-map a{display:inline-block;color:rgb(221 221 221);border: 1px solid rgb(221 221 221);margin: 20px 0;padding: 5px 15px;border-radius: 50px;font-size: 16px;}
footer .copyright{color: rgb(240, 240, 240);text-align: center;padding:0 20px 30px;}

/* .maintitle */
.maintitle{margin: 100px 0 0 0;height: 220px;display: flex;align-items: center;justify-content: center;background-position: center;background-repeat: no-repeat;background-size: cover;-webkit-background-size: cover;background-image: url(../images/maintitle.jpg);}
.maintitle h1{color: #fff;font-size: 2.625rem;font-weight: 700;text-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);text-align: center;}

/* page_info */
.page_info{  position:relative; z-index:9;}
.page_info .label{ padding:15px 0;}
.page_info .label .page_name{ line-height:20px; color:#333; font-size:14px; display:inline-block; vertical-align:text-bottom; margin:0; padding: 0;}
.page_info .label a.page_name{ padding-right:25px; position:relative;}
.page_info .label a.page_name::before{content: "";display: block;position: absolute;width: 5px;height: 5px;border-right: 2px solid #333;border-top: 2px solid #333;transform: rotate(45deg);top: 0;bottom: 0;margin: auto;right: 9px;}
.page_info .label p.page_name{ color:var(--c-orange-01);}

/* Kanban-box */
.Kanban-box{padding: 60px ;max-width: 100%;margin: 0 auto;background-color: white;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);border-radius: 10px;}
.Kanban-box .n-title{font-size: 28px;}
.Kanban-box .n-data{margin-bottom: 60px;}
.Kanban-box .n-img{border-radius: 10px;overflow: hidden;height: 500px;margin-bottom: 60px;}
.Kanban-box .n-img img{object-fit: cover;width: 100%;height: 100%;}

/* tab */
.tab{display: flex;padding-bottom: 20px;margin-bottom: 60px;border-bottom: 2px solid #bdbdbd4f;width: 100%;gap: 20px;}
.tab a{color: var(--c-orange-02);padding: 8px 16px;background-color: white;width: min-content;white-space: nowrap;border-radius: 5px;border: 1px solid var(--c-orange-02);}
.tab .tab-focus{color: white;padding: 8px 16px;background-color: var(--c-orange-02);}

/* back-btn */
.back-btn{display: flex;justify-content: center;}
.back-btn a{color: white;padding: 8px 24px;background-color: var(--c-orange-01);margin: 20px auto 0;width: min-content;white-space: nowrap;border-radius: 5px;font-size: 24px;margin:0 auto 20px;}


/* card-box */
.card-box{display: flex;row-gap: 20px;column-gap: 2%;flex-wrap: wrap;}
.card-box .card{width: 32%;color: #333;background-color: white;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);border-radius: 5px;overflow: hidden;}
.card-box .card .Photo{padding-top: 80%;background: no-repeat center #eee;background-size: cover;}
.card-box .card .Note{padding: 20px;}
.card-box .card .Describe{margin: 10px 0;}
.card-box .card .btn-card{color: white;padding: 8px 16px;background-color: var(--c-orange-01);margin: 20px auto 0;width: min-content;white-space: nowrap;border-radius: 5px;}


/* 桌機hover */
@media screen and (min-width: 769px){
    header .nav a:hover{color: var(--c-orange-01);}
    header .nav .item::after{content: "";display: block;position: absolute;width: 0; height: 3px;background-color: var(--c-orange-01);left: 0;bottom: -8px;transition: .3s;}
    header .nav .item:hover::after{width: 100%;}
}


/* 平板 */
@media screen and (max-width: 1240px) and (min-width: 769px) {

/* footer */
footer .f-t{row-gap: 20px;}
footer .f-t .project{width: calc(100% / 3);}
footer .f-b .information{flex-wrap: wrap;padding: 0 50px;}
footer .f-b .logo-area {width: 100%;}
}



/* 手機 */
@media screen and (max-width:768px) {

/* header */
header .header-area {height: 80px;}
header .nav {display: none;margin: 0;flex-direction: column;position: fixed;top: 80px;left: 0;right: 0;bottom: 0;background-color: #fff;z-index: 10;}
header .nav ul{width: 100%;flex-direction: column;gap: 10px;margin-top: 20px;}
header .nav a{padding: 15px 0;}
header .menu {display: flex;}
header .logo {font-size: 18px;}

/* footer */
footer .footer-area{padding: 50px 0;}
footer .f-t {padding: 0 20px 50px;row-gap: 20px;}
footer .f-t .project{width: 100%;}
footer .f-b .information{flex-direction: column;flex-wrap: wrap;padding: 0;}
footer .f-b .logo-area {width: 100%;}
footer .f-b .logo-area p{margin: 20px 0;font-size: 24px;}

/* card-box */
.card-box{gap: 20px;}
.card-box .card{width: 100%;}

}



/* 客戶畫面查看 */
.img-box img{display: block;margin: 0 auto;}

.sidebar {position: fixed;right: 0;top: 50%;transform: translateY(-50%);border-radius: 5px 0 0 5px;display: flex;flex-direction: column;z-index: 80;align-items: end;}
.sidebar a:nth-child(1) {border-radius: 5px 0 0 0;}
.sidebar a:last-child {border-radius: 0 0 0 5px;}
.sidebar a {background-color: var(--c-blu-01);display:block;}
.sidebar a:hover {box-sizing: content-box;border-radius: 5px 0 0 5px;padding-left: 20px;background-color:var(--c-blu-02)}
.sidebar span {font-size: 14px;font-weight: 400;color: white;white-space: nowrap;display: block;width: 80px;height: 80px;line-height: 80px;text-align: center;}
.sidebar a:hover span {color: white}
.sidebar hr {width: 80px;border-color: white;}

@media screen and (max-width: 1360px) and (min-width: 769px) {
    .sidebar {position: fixed;flex-direction: row;justify-content:center;border-radius: 0;width: 100%;height: auto;top: auto;bottom: 0;transform: none;/* background-color: white; */overflow: auto;}
    .sidebar hr {height: 80px;width: auto;}
    .sidebar a:last-child {border-radius: 0 5px 0 0;}
    .sidebar a:hover {box-sizing: content-box;border-radius: 5px 5px 0 0;padding:5px 0 0 0;background-color: var(--c-blu-02);}
}
    
@media screen and (max-width:768px) {
    .sidebar {position: fixed;flex-direction: row;border-radius: 0;width: 100%;height: auto;top: auto;bottom: 0;left: 0;right: auto;transform: none;/* background-color: white; */overflow: auto;}
    .sidebar hr {height: 60px;width: auto;}
    .sidebar span{font-size: 14px;}
    .sidebar a:last-child {border-radius: 0 5px 0 0;}
    .sidebar a:hover {box-sizing: content-box;border-radius: 5px 5px 0 0;padding:5px 0 0 0;background-color: var(--c-blu-02);}
}