body,div,h1,h2,h3,h4,h5,h6,form,input,textarea,p,dl,dt,dd,ul,li,a,span{font-family:"微軟正黑體", "微軟正黑體 Light";margin:0;padding:0;list-style:none;;box-sizing: border-box;}
img{border:0;vertical-align:middle;}
a{outline: none;/*for Firefox Google Chrome*/text-decoration:none;}
/*定義了滾動條滑塊的樣式*/
::-webkit-scrollbar{
height: 5px !important;
width: 5px !important;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-track,::-webkit-scrollbar-thumb:hover {border-radius: 10px;}
::-webkit-scrollbar-thumb {
border-radius: 0;
border-style: dashed;
background-color: rgb(92, 124, 194,.5);
border-color: #e2242400;
border-width: 1.5px;
background-clip: padding-box;
}
/*定義了軌道的樣式*/ 
::-webkit-scrollbar-track {/*滾動條裡面軌道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #EEE;
}	
::-webkit-scrollbar-thumb:hover {
background-color: rgb(39, 89, 207)
}

.wrapper{margin: 0px auto;width: 100%;max-width: 1400px;padding: 10px;}
.container,.content{position: relative;}
#modal-obj{font-size: 18px;position: relative;}
#modal-obj header:before,#modal-obj .menu:after,#modal-obj ul:after,#modal_style3 .modal-content:before,#modal_style3 .modal-content:after{content: "";}
#modal-obj header{display: flex;flex-wrap:wrap;justify-content:center;align-items: center;font-size: 1.5rem;line-height: 1.2em;font-weight: bold;gap: 10px;}
#modal-obj header:before{background-color: #F1F1F1;width: 100%;height: 100%;left: 0;top: 0;position: absolute;z-index: -1;}
#modal-obj header .content{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
#modal-obj header .logo{display: flex;justify-content: center;align-items: center;gap: 10px;}
#modal-obj header .logo span.aiicon svg{width:clamp(30px, 4vw, 38px);height: 30px;}
#modal-obj header .logo span.aiicon svg{fill:#FC0;}
#modal-obj header .logo span.aiicon svg path:first-child{fill:rgb(255, 153, 0);}
#modal-obj header .title {display: flex;justify-content:center;align-items: center;flex-wrap: nowrap;gap: 10px;padding: 0 80px 0 170px;width: 100%;}
#modal-obj header .title font{overflow : hidden; text-overflow : ellipsis; white-space : nowrap;color: #666666;font-size: 18px;}
#modal-obj header .title span{padding: 5px 20px;font: 1rem sans-serif;background-color: #069;border-radius: 20px;color: #FFF;}
#modal-obj header .linebnt {font-size: 16px;position: absolute;right: 0;top:calc((100% - 30px) / 2);}
#modal-obj header .linebnt a{display: flex;flex-wrap:wrap;justify-content:center;align-items: center;background-color: #1FB21F;color: #FFF;border-radius: 20px;padding-right: 10px;}
#modal-obj header .linebnt a:hover{background-color: #1b971b;}
#modal-obj header .linebnt span svg{width:clamp(30px, 4vw, 38px);height: 30px;}
#modal-obj #menubox{box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);z-index: 2;position: relative;}
.menu{display: flex;justify-content:flex-start;align-items: flex-start;position: relative;padding:15px 10px;gap: 40px;}
.menu:after{position: absolute;top:25px;left: 10px;width: calc(100% - 20px);height: 1px;background-color: #eee;z-index: -1;}
@scope(#modal-obj .menu) {
.subtitle {width: 100%;z-index: 2;position: relative;display: flex;}
.subtitle p{color: #000;background-color: #F9F9F9;padding:0 20px;font-size: 18px;display: inline-block;margin: 0 10px;}
.subtitle:after{position: absolute;border-radius: 50%;width: 5px;height: 5px;background-color: #DDD;content: "";}
.stylemenu .subtitle:after{right:-3px;top: 8px;}
.bntbox .subtitle:after{left: -3px;top: 8px;}
ul{width: 100%;margin-top: 10px;}
.stylemenu{flex: 1;width: calc(100% - 180px);position: relative;}
.stylemenu ul{display: flex;justify-content:flex-start;align-items: center;gap: 10px;white-space: nowrap; overflow: auto;overflow-Y: hidden;justify-content: flex-start;position: relative;padding: 2px 40px;}
.stylemenu ul a{border-radius: 20px;border: 1px solid #ff880080;padding: 2px 10px;color: #ff8800;display: flex;}
.stylemenu ul a.select{background-color: #ff8800;color: #FFF;}
.stylemenu .menulist{position: relative;}
.stylemenu .menulist:before,.stylemenu .menulist:after{content:"" ;display: block;width: 50px;height: 40px;position: absolute;bottom: 0;z-index: 1;}
.stylemenu .menulist:before{background: linear-gradient(to right, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);left: -2px;}
.stylemenu .menulist:after{background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);right:-2px;}
.stylemenu .slick-prev,.stylemenu .slick-next {background-size: 50%;border-radius: 0px;z-index: 5;top: 5px;}
.stylemenu .slick-prev {left: 0px;}
.stylemenu .slick-next {right: 0px;}
.bntbox.fullbox ul{display: flex;justify-content: flex-start;align-items: center;gap: 10px;font-size: 16px;border-radius: 5px;padding:0 10px;position: relative;}
.bntbox.fullbox span{width: 30px;height: 33px;display: flex;align-items: center;justify-content: center;gap: 3px;}
.bntbox.fullbox span:before,.bntbox.fullbox span:after{content: "";box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.4);}
.bntbox.fullbox a span:before,.bntbox.fullbox a span:after{width: 45%;height: 27px;background-color: #CCCCCC;border-radius: 3px;}
.bntbox.fullbox a.f1 span:before{width: 100%;}
.bntbox.fullbox a.f1 span:after{display: none;}
.bntbox.fullbox a.f2 span{gap: 2px;}
.bntbox.fullbox a.f2 span:before{border-top-right-radius: 0px;border-bottom-right-radius: 0px;background-color: #AAA;}
.bntbox.fullbox a.f2 span:after{border-top-left-radius: 0px;border-bottom-left-radius: 0px;}
.bntbox.fullbox a.f2 span font{width:2px;height: 33px;background-color: #CCCCCC;display: block;border-radius: 3px;}
.bntbox.fullbox a span{opacity: .8;}
.bntbox.fullbox a:hover span{opacity: 1;}
.bntbox.fullbox a.select span:before,.bntbox.fullbox a.select span:after,.bntbox.fullbox a.f2.select span font{background-color: #ff8800;}
.bntbox.fullbox a.f2.select span:before{background-color: #ffa53e;}
}

#modal_style1 .container,#modal_style2 .container:first-child{max-width: 800px;margin: 0 auto;max-width: 600px;max-height: 450px;}
#modal_style1 img{max-width: 100%;max-height: 100%;}
#modal_style1 .single {display: flex;justify-content: center;position: relative;}

.bnt{position: absolute;z-index: 5;bottom: 20px;right:calc((100% - 217px) / 2);}
.bnt a{display: flex;justify-content: center;align-items: center;gap: 5px;border: 2px solid #0099CC;border-radius: 30px;background-color: #FFFFFFCC;padding: 5px 20px 5px 5px;color: #0099CC;font-weight: bold;}
.bnt a:hover{background-color: #FFFFFF;}
.bnt a span{background-image: url(../images/pattern_box_icon.png);width: 49px;height: 40px;display: flex;zoom: .8;}
.bnt a:active{background-color:#0099CC;border: 2px solid #0099CC;color: #FFF;}
.bnt a:active span{background-position:center bottom;}

@scope(#modal_style2){
.twentytwenty{max-height: 80vh;}
.twentytwenty img{max-width: 100%;}
}
@scope(#modal_style3){
.modal-content{height: calc(100% - 150px);}
.modal-content:before,.modal-content:after{display: block;position: absolute;top:0;z-index: -1;width: 50%;height: 100%;}
.modal-content:before{right:0;background-color: #5F98C633;}
.modal-content:after{left:0;background-color: #DDDDDD33;}
.modal-content .item {width: 100%;height: 100%;display: flex;}
.modal-content .item .before,.modal-content .item .after {width: 50%;height: 100%;display: flex;align-items: center;position: relative;border-radius: 5px;overflow: hidden;}
.modal-content .item .before:before,.modal-content .item .after:before {content: "";display: block;position: absolute;left: 10px;top: 10px;background-color: #66666680;color: #FFF;font-family:"微軟正黑體";border-radius: 20px;padding: 5px 20px;}
.modal-content .item .before:before {content: "變裝前";}
.modal-content .item .after:before {content: "變裝後";}
.modal-content .item .before .small-cover-image, .modal-content .item .after .small-cover-image {width: 100%;padding-top: 65%;}
}
.small-cover-image {display: block;width: 50px;height: 50px;background-size: cover;background-position: 50%;transition: transform 0.2s;}
.small-cover-image:hover{opacity: 1;}
.slider-nav{max-width: 800px;margin: 0 auto;}
.slider-nav .small{position: relative;text-align: center;width: 100%;height: 100%;border-radius: 5px;overflow: hidden;box-sizing: border-box;}
.slider-nav .small:before {content: "";display: block;padding-top: 75%;}
.slider-nav .small .small-cover-image{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 90%;height: 90%;border-radius: 5px;opacity: .5;}
.slider-nav .slick-slide {cursor: pointer;}
.slick-slide.is-active .small-cover-image{border: 1px solid #069;opacity: 1;}
.slick-prev:before, .slick-next:before {font-size: 30px;}
.slick-arrow {position: absolute;top:calc((100% - 30px) / 2);width: 62px;height: 62px;border-radius: 35px;border: none;z-index: 300;outline: none;color: transparent;cursor: pointer;z-index: 1;}
.slick-prev, .slick-next{width: 30px;height: 30px;}
.slick-prev {left: -40px;background: url(../images/button-prev.png) no-repeat center center;}
.slick-next {right: -40px;background: url(../images/button-next.png) no-repeat center center;}
.slick-prev:before,.slick-next:before {color: #666;}
.slider-nav .note{position: absolute;background-color: #ffa53e;color: #FFF;top:0px;left: 0px;padding:0px 5px;z-index: 5;border-bottom-right-radius: 5px;border-top-left-radius: 5px;font-size: 16px;}
@media screen and (min-width: 768px) {
#modal-obj header .logo{position: absolute;left: 0;top:calc((100% - 30px) / 2);}
@scope(#modal_style3){
.modal-content .item .before{border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
.modal-content .item .after{border-top-left-radius: 0px;border-bottom-left-radius: 0px;}
}
}
@media screen and (max-width: 769px) {
#modal-obj header{font-size: 1.2rem;width:100%;}
#modal-obj header .content{flex-direction: column;align-items: flex-start;gap: 5px;}
#modal-obj header .title {width: 100%;padding: 0;justify-content: flex-start;}
#modal-obj header .title span{font: 12px sans-serif;padding: 5px 10px;}
#modal-obj header .linebnt{top: 0px;}
#modal-obj > .container:first-child .wrapper{width: calc(100% - 20px);}
#modal_style1,#modal_style2,#modal_style3{margin-bottom: 80px;}

@scope(#modal-obj .menu) {
ul {margin-top: 0px;}
.bntbox.fullbox .subtitle,.bntbox.fullbox ul{justify-content: center;}
.stylemenu{position: fixed;bottom: 0;left: 0;width: 100%;border-radius: 0;background-color: #FFF;justify-content: center;z-index: 999;padding: 5px;border-top: 1px solid #EEE;box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;}
.stylemenu .subtitle:after{display: none;}
.stylemenu .subtitle p{background-color: transparent;font-size: 16px;padding: 0 0 5px 0;color: #666;}
.bntbox .subtitle:before{position: absolute;border-radius: 50%;width: 5px;height: 5px;background-color: #DDD;content: "";right:-3px;top: 8px;}
.bntbox.fullbox{justify-content: center;width: 100%;}
}
@scope(#modal_style3){
.modal-content:before,.modal-content:after{width: 100%;height: 50%;}
.modal-content:before{top:50%}
.modal-content .item{flex-direction: column;}
.modal-content .item .before,.modal-content .item .after {width: 100%;height: 50%;}
.modal-content .item .before{border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}
.modal-content .item .after{border-top-left-radius: 0px;border-top-right-radius: 0px;}
}
#modal_style1 .wrapper,#modal_style2 .wrapper,#modal_style3 .wrapper{width: calc(100% - 4rem);}
}
@media (prefers-color-scheme: dark){
::-webkit-scrollbar-track {/*滾動條裡面軌道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #333;
}	
body,#modal-obj .menu .subtitle p {background-color: #111;color: #FFF}
#modal-obj header:before {background-color: #25252B;}
#modal-obj header .title font{color: #DDD}
#modal-obj #menubox{box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.2);}
.stylemenu .menulist:before{background: linear-gradient(to right, rgba(17,17,17,1) 50%,rgba(17,17,17,0) 100%) !important;}
.stylemenu .menulist:after{background: linear-gradient(to right, rgba(17,17,17,0) 0%,rgba(17,17,17,1) 50%) !important;}
@scope (#modal-obj .menu) {
header{background-color: transparent;color: #FFF}
.bntbox.fullbox a span:before,.bntbox.fullbox a span:after{background-color: #FFF;box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);}
.bntbox.fullbox a.f2 span:before{background-color: #EEE;}
.bntbox.fullbox a.f2 span font{background-color: #FFF;}
@media screen and (max-width: 769px) {
.stylemenu{background-color: #25252B;border-top: 1px solid #333;}
.stylemenu .subtitle p{background-color: #25252B !important;}
}
}
}
.tips:after {
z-index: 99;
content: "提醒:變裝後為模擬示意圖，非物件現狀!";
display: block;
position: absolute;
right: 10px;
bottom: 110px;
background-color: #66666680;
color: #FFF;
font-family: "微軟正黑體";
border-radius: 5px;
padding:2px 5px;
font-size: 14px;
line-height: 1.5em;
}
@media screen and (max-width: 769px) {
.tips:after {font-size: 12px;bottom:100px;right: calc((100% - 220px ) / 2);}
.container:last-child .wrapper{padding-top: 30px;}
}