@charset "UTF-8";
html{font-size: 18px; width: 100%; overflow-x: hidden;}
*{font-family: "Noto Sans Lao","Noto Sans JP", sans-serif; font-size: 1rem;}
img{display: inline-block;}
a{text-decoration: none;}
section{width:calc(100% - 20px); max-width: 1440px; margin:0 auto; position: relative;}
.bx{transform: translateY(3px);}
.multiline-ellipsis{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.logo img{height: 150px; margin:10px 0; transition: ease-in-out 0.3s;}
.filler-white{filter: brightness(0) invert(1);}
.fillter-black{filter: brightness(0);}
.noto-serif-sc{font-family: "Noto Serif SC", serif;}
nav{text-align: center; margin:20px 0;}
nav .logo{display: none;}
nav a{display: inline-flex; padding: 0 10px; font-size: 1rem; font-weight: 600; color:#000;}
.hamburger {  width: 35px; height: 35px; cursor: pointer; display: none; position: fixed;  z-index: 912; right: 30px; top:50px;}
.hamburger .menu, .hamburger .menu::before, .hamburger .menu::after { background: #222; content: ''; display: block;  height: 2px; position: absolute; transition: background ease .15s, top ease .15s .15s, transform ease .15s; width: 100%;}
.hamburger .menu::before { top: -8px;}
.hamburger .menu::after { top: 8px;}
#navbar:checked + .hamburger .menu {  background: transparent;}
#navbar:checked + .hamburger .menu::before { transform: rotate(45deg);}
#navbar:checked + .hamburger .menu::after { transform: rotate(-45deg);}
#navbar:checked + .hamburger .menu::before, #navbar:checked + .hamburger .menu::after { top: 0; transition: top ease .15s, transform ease .15s .15s;}
header{position: fixed; z-index: 900; left:0; top:0; width: 100%; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.4);}
header .tools{position: fixed; z-index: 912; right: 10px; top:10px;}
header .tools a{font-size: 1rem;}
body.scroll header .logo img{height: 80px;}
body.scroll nav{margin-top:0px;}
main{margin-top: 236.97px;}
footer, #footer{background: #000;}
footer *, #footer *{color:#fff;}
#footer .logo{width: 100px;}
#floatbox{position: fixed; right:10px; bottom:100px;  z-index: 800; display: none;}
#floatbox a{background: #a4a4a4; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 8px; color: #fff; font-size: 40px;}
#indexbanner{background: #000;}
#indexbanner section{background: url('../img/banner01.jpg') no-repeat right center; background-size: auto 100%; height: 600px;}
#indexbanner section .info{display: flex; align-items: center; height: 100%; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 17.31%, #000000 46.63%); padding: 0 2rem;}
#indexbanner section h1{font-size: 3rem; color:#fff; font-weight: 900; margin-bottom: 1.4rem;}
#indexbanner section .txt{font-size: 1.1rem; color:#fff; font-weight: 500;}
#page_title{margin: 2rem 0 5rem 0; position: relative; font-size: 1.6rem; font-family: "Noto Serif SC", serif;}
#page_title:after{content: ''; display: inline-block; width: 100px; height: 4px; background: #9e9e9e; position: absolute; left:5px; bottom: -10px;}
.title{font-family: "Noto Serif SC", serif;}
.c3{display: flex; flex-wrap: wrap; gap:70px; width: calc(100% - 100px); margin:5rem 0; padding: 0;}
.c3 li{width:calc(33.33333% - 20px); padding: 0;}
.c3 li{box-shadow: 5px 5px 10px rgba(0,0,0,0.4);}
.c3 .info{margin:10px;}
.c3 .img{width:100%; padding-bottom: 68%; background: no-repeat center; background-size: cover; display: block;}
.c3 .title{font-size: 1.2rem;}
.row2{display: flex; flex-wrap: wrap; gap:80px; margin:80px auto; padding: 0;}
.row2 li{list-style: none; width:90%; display: flex; flex-wrap: wrap; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); border-radius: 20px; overflow: hidden;}
.row2 li .info{padding:20px; background: #f2f2f2; width: calc(100% - 500px);}
.row2 .img{width:100%; max-width: 500px; padding-bottom: 24%; background: no-repeat center; background-size: cover; display: block;}
.row2 li .tools{text-align: right;}
.row2 li .tools .box{display: inline-flex; background: #000; border-radius: 20px; padding:8px 15px; box-shadow: 2px 2px 5px rgba(157, 157, 157, 0.4);}
.row2 li .tools .box a{color:#fff; font-size: 1.4rem;}
.row2 li:nth-child(even){margin-left: 10%; flex-direction: row-reverse;}
.store_list{display: flex; gap: 40px; flex-wrap: wrap; margin:20px 0;}
.store_list li{list-style: none; width: calc(33.3333% - 40px);}
.store_list .hasicon{padding-left: 30px; position: relative;}
.store_list .hasicon svg{position: absolute; left:0; top:4px;}
.store_list .info div{margin-top:10px;}
.c4{margin:2rem 0; gap:20px; display: flex; flex-wrap: wrap; padding: 0;}
.c4 li{list-style: none; width:calc(25% - 15px);}
.c4 li .img{display: block; padding-bottom:68%; background: no-repeat center; background-size: cover; margin-bottom: 1rem;}
.c4 li .txt, .c4 li .txt *{font-size: 0.8rem;}
.elegant-box {
    position: relative;
    background-color: #fff;       /* 白色背景 */
    color: #000;                  /* 黑色文字 */
    margin:1rem 0;
    padding: 0px 20px;           /* 上下內距 15px，左右 40px */
    font-size: 1rem;
    font-weight: 900;
    font-family: "Serif", "SimSun", "PMingLiU"; /* 使用襯線字體更接近圖中風格 */
    border: 1px solid #000;       /* 內層黑線邊框 */
    letter-spacing: 0.2em;        /* 文字間距 */
    box-shadow: 0 0 0 4px #fff;   /* 用陰影模擬邊框外的白色間隙 */
    display: inline-block;
}
.elegant-box::before,
.elegant-box::after {
    content: "";
    position: absolute;
    width: 20px;  /* 裝飾線的長度 */
    height: 20px; /* 裝飾線的高度 */
}
.elegant-box::before {
    top: -10px;
    left: -10px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}
.elegant-box::after {
    bottom: -10px;
    right: -10px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}
#index2{background: #000; margin-top: 20rem;}
#index2 section{background: url('../img/Frame142.png') no-repeat right bottom; background-size: auto 100%;}
#index2-1{background: rgba(41, 41, 41, 1); padding:5rem 5rem 2rem 5rem; transform: translateY(-18rem);}
#index2-1 .img1{position: absolute; margin-top:2rem; width: 100%; max-height: 500px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 1)}
#index2-1 .info{margin:0 auto; margin-top:-2rem; max-width: 400px;}
#index2-1 .info .txt{font-size: 0.8rem;}
#index2-1 .box1{border: 1px solid rgba(166, 166, 166, 1); position: relative; width: 90%; max-width: 748px; text-align: right; padding:2rem 0;}
#index2-1 + div{margin-top:-6rem; padding-bottom: 8rem;}
.box1:has(#ul1){border: 1px solid rgba(166, 166, 166, 1); position: relative; padding:2rem 0; margin-top:4rem; width: 80%; height: 370px;}
#ul1{width: calc(100% - 100px); max-width: 350px; display: flex; flex-wrap: wrap; gap:10px; margin:0; padding:0; position: absolute; right: -80px; bottom:2rem;}
#ul1 li{list-style: none; background: rgba(224, 224, 224, 1); padding:10px 50px 10px 3rem; position: relative;}
#ul1 li .icon{width:80px; height: 80px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; position: absolute; left:-45px;}
#ul1 li .icon img{width: 60%;}
#ul1 li .title{font-weight: 900;}
#ul1 li .txt{font-size: 0.8rem;}
.img2box{position: relative; width: 80%; max-width: 748px; height: 300px; border: 1px solid rgba(166, 166, 166, 1); padding-bottom: 54%;}
.img2box img{position: absolute; left:-20%; top:4rem; width: 100%; max-width: 804px; border: 1px solid rgba(255, 255, 255, 1); object-fit: cover;  height: 100%;}
#index3{position: relative;}
#index3 section{background: url('../img/01563ebabafc34bd2b388708401488e95f74b24a.jpg') no-repeat -20% -1%; background-size: 50% auto;  padding:10rem 0;}
#index3:before{content: ''; display: block; width: 35%; height: 100%; position: absolute; background: rgba(239, 239, 239, 1); right: 0%; top:0;}
#index3 .img{width: 90%; height: 340px; object-fit: cover; margin-top:3rem;}
#index3 .box{display: flex; flex-wrap: wrap; justify-content: space-between; gap:1.5rem; width: 90%; margin-top:1rem; padding: 10px;}
#index3 .box .info{background: #000; padding:10px; width: 70%;}
#index3 .box .info .border{padding:20px 50px 20px 60px; position: relative;}
#index3 .box .info .border:before{content: ''; width: 8px; height: 50%; background: #fff; position: absolute; left:7%; top:25%;}
#index3 .box img{width:20%; object-fit: contain;}
#index3 .box:nth-child(3){flex-direction: row-reverse;}
#index3 .box .title{color:#fff; font-weight: 900; font-size: 1.1rem;}
#index3 .box .txt{color:#fff; font-size: 0.8rem;}
#index4{background: url('../img/01563ebabafc34bd2b388708401488e95f74b24a.jpg') no-repeat 170% 60%; background-size: 60% auto; position: relative; padding:5rem 0 2rem 0;}
#index4 .box1{background: #000; padding:4rem 0; transform: translate(0px, -10rem);}
#index4 .box1 .box{display: flex; flex-wrap: wrap; gap: 1.5rem; width: 80%; max-width: 1000px; margin:1rem auto; position: relative;}
#index4 .box1 .box .arrow{position: absolute; border: 0.5rem rgba(96, 96, 96, 1) solid; width: 3rem; height: 3rem;}
#index4 .box1 .box .arrow.lt{left:-0.5rem; top:-0.5rem; border-right: 0; border-bottom: 0;}
#index4 .box1 .box .arrow.rt{right:-0.5rem; top:-0.5rem; border-left: 0; border-bottom: 0;}
#index4 .box1 .box .arrow.lb{left:-0.5rem; bottom:-0.5rem; border-right: 0; border-top: 0;}
#index4 .box1 .box .arrow.rb{right:-0.5rem; bottom:-0.5rem; border-left:0; border-top:0;}
#index4 .box1 .box .item{width: calc(33.3333% - 1rem); background: rgba(41, 41, 41, 1);}
#index4 .box1 .box .item .img{display: flex; align-items: end; justify-content: center; width: 100%; height: 170px; margin-bottom: 1.5rem;}
#index4 .box1 .box .item .img img{width: 40%;}
#index4 .box1 .box .item .img.s img{width: 20%;}
#index4 .box1 .box .item .img.m img{width: 30%;}
#index4 .box1 .box .item .elegant-box{width: 100px;}
#index4 .box1 .box .item .txt{color:#fff; font-size: 0.8rem; text-align: center; margin: 1rem;}
#index4 .img1{width: 90%; height: 340px; object-fit: cover; object-position: 0 100%;}
#index4 ul{margin:0 1rem; padding: 0; width: 90%; max-width: 400px; display: flex; flex-wrap: wrap; gap: 1rem;}
#index4 ul li{list-style: none; border:1px #000 solid; padding: 1rem 1.5rem; margin: 0; width: 100%; background: #fff;}
#index4 ul li .title{font-weight: 900;}
#index4 ul li .txt{font-size: 0.8rem;}
#index5{background: #000;}
#index5 section{background-image:linear-gradient(to bottom right, #000, rgba(0,0,0,0.2)), url('../img/d51c7f0e3faec5d1be626b2f7579962b00410a0f.png'); background-repeat:  no-repeat; background-position:  20vw 25%; background-size: 100% auto; padding:2rem 1rem;}
#index5 .item{background: #fff; position: relative; margin:10px 0; width: 100%; padding:1rem 2rem; display: flex; gap:1.5rem; max-width: 500px;}
#index5 .item:after{content: ''; width: 1.1rem; height: 100%; background: rgba(255,255,255,0.7); position: absolute; right: -1.1rem; top:0;}
#index5 .item .icon{width: 30%; text-align: center;}
#index5 .item .icon img{width:60%;}
#index5 .item .info{width:calc(60%);}
#index5 .item .info .txt{font-size: 0.8rem;}
#index6{background-image:url('../img/01563ebabafc34bd2b388708401488e95f74b24a.png'), url('../img/01563ebabafc34bd2b388708401488e95f74b24a.png'), url('../img/042d151e003539ed43cf9edffa7278253c417270.jpg'); background-size: 40vw auto, 40vw auto, 100vw auto; background-position: 70vw -21vw, -10vw 30vw, left bottom; position: relative; background-repeat: no-repeat; padding: 3rem 0; padding-bottom: 10rem;}
.process-container {
    width: 450px;
    height: 450px;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
}
.segment-path {
    fill: #111111;
    stroke: #ffffff;
    stroke-width: 5;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.3s ease;
}
.step-group:hover .segment-path {
    fill: #f39800;
}
.icon-shape {
    fill: #ffffff;
    pointer-events: none;
}
#index_pie{position: relative; margin-bottom: 6rem;}
#index_pie svg{margin:0 auto; width: 100%;}
#index_pie .elegant-box{background: rgba(220, 220, 220, 1); position: absolute; left:50%; top:50%; padding: 0.5rem; width:40%; max-width: 250px;}
#index_pie .elegant-box .title{font-weight: 900; line-height: 1; font-size: 1rem;}
#index_pie .elegant-box .txt{font-weight: 400; font-size: 0.7rem; color:rgba(86, 86, 86, 1);}
#index_pie .elegant-box::before, #index_pie .elegant-box::after{border-color: rgba(220, 220, 220, 1); }
#index_pie .elegant-box:nth-child(2){transform: translate(-200%, -7rem);}
#index_pie .elegant-box:nth-child(3){transform: translate(100%, -7rem);}
#index_pie .elegant-box:nth-child(4){transform: translate(-200%, 2rem);}
#index_pie .elegant-box:nth-child(5){transform: translate(100%, 2rem);}
html:has(.navOpen), body.navOpen{overflow: hidden;}
body.navOpen header .tools a{color:#fff;}
body.navOpen .hamburger .menu, body.navOpen .hamburger .menu::before, body.navOpen .hamburger .menu::after{background: #fff;}

@media screen and (max-width:1320px) {
    nav{width: 100%; height: 100vh; position: fixed; z-index: 901; left:0; top:100vh; background: #000; opacity: 0; transition: all ease-in-out 0.3s; margin:0;}
    nav a{color:#fff; display: none; text-align: center; font-size:2rem; margin-top: 1rem;}
    nav.active{opacity: 1; height: 100%; top:0;}
    nav.active a{display: block;}
    nav .logo{display: block;}
    .hamburger{display: block;}
}
@media screen and (max-width:860px) {
    html{font-size: 14px;}
    .logo img{height: 100px;}
    main{margin-top: 119.97px;}
    #indexbanner section{height: 500px; background-position-y: 42px;}
    #indexbanner section div{margin-top:-1.3rem;}
    #indexbanner section .info{align-items: start; background: linear-gradient(340deg, rgba(0, 0, 0, 0) 17.31%, rgba(0,0,0,0) 120.63%);}
    #indexbanner section h1{font-size: 2.2rem; margin-top:4rem;}
    #indexbanner section .txt{width: 90%;}
    .c3, .c4, .store_list{width:calc(100% - 0px); gap:20px;}
    .c3 li, .c4 li{width: calc(50% - 10px);}
    .store_list li{width:100%;}
    .row2 .img{padding-bottom: 68%;}
    .row2 li{width: 100%;}
    .row2 li .info{width:100%;}
    .row2 li:nth-child(even){margin-left: 0;}
    #index2-1{padding:5rem 10px;}
    #index2-1 .img1{position: relative; max-height: 200px; margin-bottom: 2rem;}
    #index2-1 .info{margin-top:2rem;}
    .box1:has(#ul1){margin-top:2rem; height: 310px; margin-bottom: 2rem;}
    #ul1{width: calc(100% - 1rem);}
    #ul1 li .icon{width:60px; height: 60px; left:-30px;}
    .img2box{height: 200px;}
    .img2box img{top:2rem;}
    #index3 section{background-size: 100% auto; background-position: -30vw 0;}
    #index3 .box{width: 100%;}
    #index3 .box .info .border{padding-right: 30px;}
    #index3 .img{height: 220px;}
    #index4{background-size: 100%; background-position: 30vw 60%;}
    #index4 .box1 > .title{font-size: 1.2rem;}
    #index4 .box1 .box .item{width: 100%;}
    #index4 .box1 .box .item .img{height: auto;}
    #index4 .img1{margin-bottom: 2rem; height: 240px;}
    #index5 section{background-image: url('../img/d51c7f0e3faec5d1be626b2f7579962b00410a0f.png');     padding-bottom: 50vw; background-size: auto 100%; background-position: -10vw 40vw;}
    #index_pie .elegant-box:nth-child(2){ transform: translate(-130%, -15rem);}
    #index_pie .elegant-box:nth-child(3){ transform: translate(30%, -15rem);}
    #index_pie .elegant-box:nth-child(4){ transform: translate(-130%, 9rem);}
    #index_pie .elegant-box:nth-child(5){ transform: translate(30%, 9rem);}
    #index6{background-size: 40vw auto, 40vw auto, auto 60%;}
}

@media print{
    html, body{ width:100%; height:auto; overflow:auto; }
}