@charset "UTF-8";
/* CSS Document */

html, body{margin: 0; padding: 0; width:100%; height: 100%; background: #fff; font-family: "tt-hei-chs-variable",sans-serif; font-weight: 400; font-size: 16px; line-height: 24px;}
li, ul, ol{padding: 0; margin: 0; list-style: none;}
a{text-decoration: none; color:#333;}
img{padding: 0; margin: 0;}
input, select{appearance:none; outline: none; box-shadow: none; border:none;}
input[type="checkbox"], input[type="radio"]{appearance:auto; margin-right: 5px;}
select{background: url("../images/select_arrow_down.svg") #fff no-repeat right 3px center; padding: 0 15px; padding-right: 35px; color:#000;}
.roundBtn{border-radius: 12px;}
h1.title1{font-size: 24px; line-height: 32px; margin:20px auto;}
h1.title2{font-size: 48px; line-height: 52px; margin: 20px auto;}
h1 small{font-size: 14px; line-height: 18px;}
h2{font-size: 18px; line-height: 22px; font-weight: 400;}

:root{--manColor:#01F3FF; --womanColor:#FFE001;}

/*Navigation*/
/*上*/
#navigation{width: 100%; height: 60px; background: rgba(255,255,255,0.9); position: fixed; top:0; left: 0; z-index: 3; box-shadow: 0 0 10px rgba(0,0,0,0.3); backdrop-filter: blur(10px);}
.companyLogo{width:140px; height: 60px; margin: 0 20px; background: url("../images/nav_logo.svg") no-repeat center; background-size: contain; text-indent: -999px; overflow: hidden; display: inline-block;}
.webName, .socialMediaList{font-size: 18px; line-height: 70px; display: inline-block; height: 70px; margin-bottom: -10px; padding:0 30px; background-image: linear-gradient(to bottom, #000, #3A3A3A); color: #fff; vertical-align: top;}
.webName a{color: #fff;}
.nav-function{display: flex; align-items: center; float: right; height: 60px;}
.navBtn{margin-right: 30px; width:28px; height: 28px; border-radius: 28px; overflow: hidden;}
.navBtn.search{text-indent: -999px; background: url("../images/searchBtn.svg") no-repeat center; background-size: contain; cursor: pointer; display: none; margin-top:3px;}
.navBtn.member{text-indent: -999px; background: url("../images/navBtn_member.svg") no-repeat center; background-size: contain; cursor: pointer;}
.navBtn.languge{background: #000; transition: all 0.3s;}
.navBtn .cn{margin-bottom: 20px;}
.navBtn.en .cn{margin-top:-48px; transition: all 0.3s;}
.navBtn.languge:hover{height: 76px; margin-top: 48px;}
.navBtn.languge:hover .cn{margin: 0 0 20px;}
.navBtn.languge a{display:block; width: 28px; height: 28px; text-align: center; line-height: 28px; color: #EEE;}

/*下*/
#BtmNav{display:none; width: 100%; height: 90px; background: linear-gradient(to bottom, #333, #000); position: fixed; left: 0; bottom: 0; color: #fff; z-index: 5; font-size: 12px; line-height: 24px;}
#BtmNav .row{padding: 0; margin: 0; height: 100%;}
#BtmNav li{display: flex; flex-direction: column; align-items: center; justify-content: center; position:relative;}
#BtmNav li.on{background: linear-gradient(to bottom, #FF3F3D, #000);}
#BtmNav li.memberBtn.on{background:radial-gradient(circle, #09A1C2, #000 60%);}
#BtmNav li::before{content: ""; display: block; width:35px; height: 32px; background: no-repeat center; background-size: contain; margin-bottom: 5px;}
#BtmNav li.infosBtn::before{background-image: url("../images/btmNavIcon_pro.svg");}
#BtmNav li.productsBtn::before{background-image: url("../images/btmNavIcon_proList.svg");}
#BtmNav li.cartsBtn::before{background-image: url("../images/cart_icon.svg");}
#BtmNav li.memberBtn::before{background-image: url("../images/btmNavIcon_member.svg");}
#BtmNav li.cartsBtn span{display: flex; align-items: center;}
#BtmNav li.cartsBtn span span.cartNums{display: block; width: 20px; height: 20px; border-radius: 24px; font-size: 12px; line-height: 20px; text-align: center; background: #FF3F3D; margin-left: 5px;}
#BtmNav li a{display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 5;}

/*搜尋BAR*/
#searchBlock{height: 60px; width:200px; display:flex; align-items: center; position:fixed; z-index: 4; top:0; right:146px;}
.searchTextArea{display: block; width:100%; height: 28px; background: #fff; color: #999; line-height: 28px; border: 1px solid #000; border-radius: 30px; margin: 0; padding: 0 10px; padding-right: 32px; transition: all 0.3s;}
.searchTextArea:focus{color: #000; background:#efefef;}
.searchBtn{width:22px; height: 22px; background: url("../images/searchBtn.svg") no-repeat center; background-size: contain; position: absolute; top:19px; right:10px; overflow: hidden; text-indent: -999px; border:none; appearance:none;}


/*產品介紹頁面的選單*/
.index .webName ul.title{display: flex; align-items: center;}
.index .webName li.title{position: relative; padding: 0 20px; display: block;}
.index .webName ul.sub{display: none; min-width: 180px; position: absolute; background: #fff; left: 0; top:60px;}
.index .webName li.title:hover ul.sub{display: block;}
.index .webName ul.sub li{border-bottom:1px solid #999; transition:all 0.3s;}
.index .webName ul.sub li:hover{background:#eee;}
.index .webName ul.sub li a{display: flex; align-items: center; padding:15px 20px; font-size: 14px; line-height: 18px; color: #000;}
.index .webName ul.sub li a::before{content: ""; display: block; width:0px; height: 2px; background: #999; margin-right: 0px; transition:all 0.3s;}
.index .webName ul.sub li:hover a::before{width: 10px; margin-right: 5px;}
.navBtn.store{width: auto; padding: 0 30px; border:1px solid #000; border-radius: 50px; display: flex; justify-content: center; align-items: center;}
.navBtn.store a{display: flex; align-items: center;}
.navBtn.store a::before{display: block; content: ""; width:16px; height: 16px; margin-right: 5px; background: url("../images/cart_Black.svg") no-repeat center; background-size: contain;}


/*彈跳視窗（覆蓋）*/
.popwindow{display: none; width: 100%; height: 100%; position: fixed; z-index: 10; top:0; left: 0; align-items: center; justify-content: center;}
.popwindow .coverBG{position: absolute; z-index: -1; width: 100%; height: 100%; background: #000a; opacity: 0;}
.popwindow .windowBlock{background: #fff; padding: 20px 20px 0; max-width: 95%; max-height: 95%; overflow: scroll; border-radius: 12px; opacity: 0; margin-top:200px;}
.popwindow .windowBlock::-webkit-scrollbar{display: none;}

/*彈跳－加入購物車*/
#addCartPOP.singleProBlock{width:100%; display: none; margin-bottom: 20px;}
#addCartPOP .proIMG{margin-bottom: 20px;}
#addCartPOP .proPrice{margin: 20px auto;}
.proSecification{display: flex; justify-content: space-between; margin: 20px auto;}
.proSecification select{font-size: 16px; line-height: 36px; height: 36px; border: 1px solid #000; border-radius: 12px;}
.proSecification .quantities{width: 35%;}
.proSecification .sepcifications{width: 60%;}

/*彈跳－使用優惠券*/
#cooponCards{display: none; text-align: center; margin-bottom: 20px;}
#cooponCards .singleCoopon{border-color: #ccc;}
.cooponList{display: inline-block; text-align: left;}

/*彈跳－登入*/
#memberLogin{display: none;}
.commonForm{width:600px; max-width:100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding-bottom: 50px;}
.commonForm form{display: flex; flex-direction: column; justify-content: space-around; align-items: center; width:100%;}
.commonForm h1{text-align: center;}
.commonForm a.proBtn.loginByLine{border:none;}
.commonForm input, .commonForm select, .commonForm .proBtn{width: 100%; max-width: 500px; border-radius: 12px; line-height: 42px; height: 42px; margin: 10px auto; padding: 0 10px;}
.commonForm input, .commonForm select{border:1px solid #000;}
.commonForm .proBtn{border:none;}
.commonForm .functionArea{width: 100%; max-width: 500px; display: flex; justify-content: space-between;}
.commonForm .passCode input{width: 45%; margin:10px 0;}
.commonForm .passCode .proBtn{width: 45%; margin:10px 0; color: #fff;}
.commonForm a{color: #666; cursor: pointer;}
.commonForm .tips{font-size: 12px; line-height: 18px; color: #FF3F3D; text-align: left; display: flex; justify-content:flex-start; width:500px; max-width:100%; margin: -5px auto 10px;}
.commonForm input[type="checkbox"]{appearance:auto; width: auto; height: auto; margin: 0; margin-right: 5px;}
.commonForm .tips2{font-size: 16px; line-height: 20px; color: #666; text-align: left; display: flex; justify-content:flex-start; width:500px; max-width:100%; margin: 10px auto 10px;}
.commonForm .separateArea{width: 100%; height: 40px;}

a.proBtn.loginByLine{background:#06C755; color: #fff;}


/*彈跳－註冊*/
#memberRegister{display: none;}


/*彈跳－優惠券詳細說明*/
#discountDetailCard{width: 800px; max-width: 100%; padding-bottom: 20px;}
#discountDetailCard::before{content: ""; display: block; width: 100%; height:85px; margin: 30px 0; background:url("../images/cooponIcon.svg") no-repeat center; background-size:contain;}
#discountDetailCard .DCName{display: block; padding: 0 10%; font-size:42px; line-height: 48px; text-align: justify;}
#discountDetailCard .listRule{display: flex; padding: 10px 10%; font-size: 16px; line-height: 24px; margin: 10px 0; justify-content: space-between;}
#discountDetailCard .DCDate{border-bottom:1px solid #000;}
#discountDetailCard .listRule .content{display: block; flex-grow: 1;}
#discountDetailCard .DCInfos{color: #999;}





/*頁面主架構*/
#page{overflow: hidden; position: relative; z-index: 1;}

/*購物車面板*/
.cartBG{display: none; width: 100%; height: 100%; position: fixed; z-index:99; top:0; left: 0;}
#cartPanel{width: 400px; height: 100%; position: fixed; top:0; right: -401px; background: linear-gradient(to right, #000f, #000d); z-index: 100; transition:all 0.3s;}
#cartPanel.on{top:0; right: 0;}
#cartTag{width:50px; height: 100px; position: absolute; top:calc(50% - 50px); left: -50px; background: #000; border-radius: 12px 0 0 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;}
.cartIcon{display:block; width:28px; height: 28px; background: url("../images/cart_icon.svg") no-repeat center; background-size: contain;}
.cartPros{font-size: 18px; line-height: 28px; height: 28px; margin-top: 0px; color: #fff;}

.cartContents{margin: 60px 0 0; height: calc(100% - 60px); display: flex; flex-direction: column; justify-content: space-between; overflow: scroll; padding-bottom: 30px;}
.cartContents::-webkit-scrollbar{display: none;}
.cartContents h1{display: flex; border-bottom:1px solid #fff; padding: 10px 0; color: #fff; font-size:24px; line-height: 30px; justify-content: center; font-weight: 400; margin:0 auto 20px;}
.cartLists, .cartCount{width:calc(100% - 40px); margin: 0 auto;}
.cartContents li.singleProBlock{width:100%; max-width: none; position: relative; margin-bottom: 40px;}
.cartContents h1 span{display: block; margin: 0 5px;}
.cartContents .proIMG{width:120px; height: 120px; float: left;}
.cartContents .proTitle, .cartContents .proSubtitle{color: #fff; font-size: 14px; line-height: 18px; margin-left: 130px; margin-right: 55px; margin-bottom: 5px;}
.cartContents .proSecification{ margin: 5px 0; margin-left: 130px; margin-right: 55px;}
.cartContents .proPrice{justify-content: flex-end; margin-left: 130px; margin-right: 55px; margin-top: 10px; margin-bottom: 0;}
.cartContents .proPrice .s-price{color: #fff; font-size: 18px; line-height: 24px;}
.deleteBtn{width:55px; height: 100%; background:#FF3F3D; border-radius: 12px 0 0 12px; position: absolute; top:0; right: -20px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s;}
.deleteBtn:hover{width: 65px;}
.deleteBtn::before{content: ""; display: block; width:35px; height: 35px; background: url("../images/delete_Icon.svg") no-repeat center; background-size: contain;}

.cooponArea{padding: 20px 0; border-top:1px solid #fff; border-bottom:1px solid #fff; margin-bottom: 20px;}
.cooponArea p{color: #999; font-size: 14px; line-height: 18px; display: block; margin-top: 20px;}
.cooponArea p span{color:#FF3F3D;}

.cartCount ul{display: block; margin-bottom: 20px;}
.cartCount li{display: flex; margin: 5px 0; align-items: flex-end; justify-content: space-between; color: #fff;}
.cartCount li .title{font-size: 12px; line-height: 12px;}
.cartCount li .s-price{font-size: 20px;}
.cartCount li .s-price b{font-weight: 400; font-family: "Arial";}
.cartCount li.total{margin-top: 20px;}
.cartCount li.total .title{font-size: 18px; font-weight: 900;}
.cartCount li.total .s-price{font-size: 24px;}
.cartCount li.total .s-price b{font-family: "Arial Black";}
.cartBtn.proBtn{border-radius: 12px; background: #666; color: #fff; margin-top: 10px;}
.cartBtn.proBtn:hover{background: #FF3F3D;}







/*頁面主ＢＮ*/
.mainBN{width: 100%; height: 500px; margin-top: 60px;}
.mainBN .BN{display: block; width:100%; height: 100%; background: no-repeat center; background-size: cover;}
.mainBN .BN.mobile{display: none;}

.mainBN.otherPage{background: no-repeat center top; background-size: cover; height: 550px; max-height: 70vw;}
.mainBN.noBN{height: 50px;}
.checkout .mainBN.otherPage{background-image: url("../images/BN_checkout.png");}


.normalPgeSize{width:90%; margin: 0 auto; max-width: 1140px; padding: 50px 0;}

/*列表選單*/
.proListCategory{border-bottom: 2px solid #000; text-align: center; position: relative; z-index: 10;}
.proListCategory.noshow{display: none;}
.proListCategoryArea{display: block; width:100%; height: 100%;}
.proListCategory li{display: inline-block; height: 110px; margin: 0 15px; position: relative;}
.proListCategory a{display: flex; align-items: center;}
.proListCategory span{display: block;}
.proListCategory .icon{background: url("../images/proCategoryIconBG.jpg") no-repeat center;}
.proListCategory .texts{color: #999; font-size: 16px; line-height: 18px; font-weight: 400; text-align: left; padding-left: 5px; transition: all 0.3s;}
.proListCategory a:hover .texts{color: #000;}
.proListCategory .texts b{font-size: 20px; line-height: 22px; font-weight: 700; display: block;}
/*列表次選單*/
.proListCategory .subList{display: none; width: calc(100% - 20px); border:1px solid #000; position: absolute; top:111px; left: 0; background: #fff; padding: 10px; box-shadow: 0 5px 5px rgba(0,0,0,0.2); transition:all 0.3s;}
.proListCategory li:hover .subList{display: block;}
.proListCategory .subList li{display: block; height: auto; padding: 10px; border-bottom: 1px solid #000; background: #fff; transition:all 0.3s;}
.proListCategory .subList li:last-child{border-bottom: none;}
.proListCategory .subList li a{display: flex; align-items: center; color: #000;}
.proListCategory .subList li a::before{content: ""; display: block; width:11px; height: 11px; margin-right: 5px; background: url("../images/subList_icon.svg") no-repeat center; background-size: contain; opacity: 0; transition:all 0.3s;}
.proListCategory .subList li:hover{background: #f3f3f3;}
.proListCategory .subList li:hover a::before{opacity: 1;}

/*列表頁，列表區*/
.proListArea{padding: 50px 0;}
.proListArea .functionArea{display: flex; justify-content: space-between; align-items: center;}
.breadcrumb{color: #000; font-size: 16px; line-height: 18px;}
.breadcrumb a{color: #000;}
.breadcrumb a:hover{text-decoration: underline;}
.breadcrumb span{color: #999;}
.filters{font-size: 14px; line-height: 24px; height: 26px; display: flex; align-items: center;}
.filters::before{content: ""; display: block; width:20px; height: 20px; background: url("../images/filter_icon.svg") no-repeat center; background-size: contain; margin-right: 5px;}
.filters select{color: #000; border: 1px solid #000; height: 24px; border-radius: 20px;}

.proList{margin: 30px auto;}
.proList li{padding: 0 0 60px; margin: 0;}
.proList li:nth-child(3n+1){text-align: left;}
.proList li:nth-child(3n+2){text-align: center;}
.proList li:nth-child(3n+3){text-align: right;}

.singleProBlock{display: inline-block; width:90%; max-width: 320px; text-align: left;}
.proIMG{width:100%; height: auto;}
.proTitle{display: block; font-size: 18px; line-height: 24px; font-weight: 700;}
.proSubtitle{display: block; font-size: 14px; line-height: 18px; font-weight: 900;}
.profeatures{display: block; font-size: 12px; line-height: 16px; margin: 20px 0; color: #999;}
.proPrice{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;}
.o-price{font-size: 12px; line-height: 14px;}
.s-price{font-size: 28px; line-height: 30px; font-weight: 400;}
.s-price b{font-family: "Arial Black"; font-weight: 900;}
.proBtn{display: block; margin: 2px 0; font-size: 20px; line-height: 52px; text-align: center; color: #fff; background: #000; height: 52px; cursor: pointer;}
.proBtn:hover{background: #666;}
.up-btn{border-radius: 12px;}
.bottom-btn{border-radius: 0 0 12px 12px;}

.pageSelectBtnList{display: flex; width:90%; max-width:600px; margin: 0 auto; justify-content: space-between; align-items: center;}
.pageSelectBtnList li{display: block; font-size: 16px; line-height: 42px; color:#000; text-align: center;}
.pageSelectBtnList li a, .pageSelectBtnList li span{display: inline-block; width:42px; color: #000; height: 42px; border-radius: 50px; background: #fff; transition:all 0.3s;}
.pageSelectBtnList li a:hover{background: #EEE;}
.pageSelectBtnList li span{background: #000; color: #fff;}

/*footer*/
footer{position: relative; z-index: 5;}
.socialMediaList{height: auto; padding:25px 30px; line-height: normal;}
.socialMediaList li{display: inline-block; margin: 0 10px;}
.socialMediaList a{display: block; color: #fff; width:24px; height: 22px; text-indent: -999px; overflow: hidden; background: no-repeat center; background-size: contain;}
.socialMediaList .fb{background-image: url("../images/footer_icon_fb.svg");}
.socialMediaList .yt{background-image: url("../images/footer_icon_yt.svg");}
.socialMediaList .ig{background-image: url("../images/footer_icon_ig.svg");}
.socialMediaList .line{background-image: url("../images/footer_icon_line.svg");}
.socialMediaList .mail{background-image: url("../images/footer_icon_mail.svg");}
.footerService{background: #000; color: #fff; margin-top: -10px; padding: 100px 0 100px 186px; display: flex; justify-content: space-between; align-items: center;}
.footerService .linkArea{display: flex; align-items: flex-start;}
.footerService h3{font-size: 24px; line-height: 36px; display: block; margin-bottom: 30px;}
.footerService .firstLevel{margin-right: 80px;}
.footerService .secondLevel li{display: block; margin-bottom: 20px;}
.footerService .secondLevel li a{display: block; color: #ccc;}
.footerService .secondLevel li a:hover{text-decoration: underline; color: #fff;}
.copyRight{padding: 0 30px; font-size: 12px; line-height: 30px; background: #333; border-radius: 30px 0 0 30px;}



/*優惠券*/
.singleCoopon{display:block; max-width: 420px; width:100%; padding: 20px; border-radius: 12px; border:1px solid; margin-bottom: 20px; text-align: left;}
.singleCoopon::before{content: ""; display: block; width:40px; height: 25px; float: left; background:url("../images/cooponIcon.svg") no-repeat top left; background-size: contain;}
.singleCoopon h1{font-size: 18px; line-height: 24px; color:#666; margin-left: 50px;}
.singleCoopon .date{font-size: 14px; line-height: 18px; color: #666; margin-left: 50px;}
.cooponBtn{border-radius: 12px; margin-left: 50px; margin-top: 20px;}


/*產品內頁*/
#productArea{margin: 60px 0; width:100%; min-height: 50vw; padding: 0; position: relative;}

/*輪播區＝＝＝＝＝＝＝＝＝*/
.proSlides{position: relative; margin: 0; padding: 0; position: relative; z-index: 1; background: #202020;}
.myslides{width: 100%; height: 100%; overflow: hidden; z-index:1;}
.singleSlide{width: 100%; height: 100%; background: no-repeat center; background-size:cover;}
.proSlides::after{content: ""; width: 100%; height: 60px; display: block; position: absolute; left: 0; bottom:0; background:linear-gradient(to bottom, #0000, #000f); z-index: 2;}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{width:10px; height: 10px; background: #fff0; border:1px solid #fff; opacity: 1; margin:0 5px}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #ffff;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{width: auto; left: auto; right: 10px;}
.swiper-button-next, .swiper-button-prev{color: #fff;}

/*產品資訊區===========*/
.proInfos{background: #202020; margin: 0; padding: 0; position: relative; z-index: 2;}
.proInfos .singleProBlock{display: block; width:auto; max-width: none; color: #fff; padding:10% 5%; padding-right: 55px;}
.proInfos .proInfotitle{margin-left: -150px; text-align: justify;}
.proInfos .proTitle, .proInfos .proSubtitle{font-size: 3vw; line-height: 3vw; display:inline; margin-right: 10px; text-align: justify; text-shadow: 0 0 10px #000a;}
.proInfos .proSubtitle::before{content: "_";}
.proInfos .profeatures{position: absolute; bottom:15px; left: calc(-66.6vw + 15px); padding: 0; margin: 0; font-size: 18px; line-height: 18px; color: #fff;}
.proInfos .proPrice{padding:50px 0 10px; border-bottom: 1px solid #fff;}
.proInfos .proPrice .s-price b{color: #FFF3C8; font-size: 42px; line-height: 42px; padding-left: 5px; font-family: "Impact";}
.proDetails{font-size: 14px; line-height: 24px; color: #ddd; font-weight: 400; padding:20px 0;}
.proDetails li{list-style: disc; margin-left: 20px; margin-bottom: 10px;}

.proContent{color:#FFF3C8; border:1px dashed #FFF3C833; padding: 0px; display: flex; padding: 5px;}
.proContent h1{display: flex; width:20%; align-items: center; justify-content: center; flex-direction: column; font-size: 16px; line-height: 20px; font-weight: 400; padding: 5px;}
.proContent h1::before{content: ""; display:block; width:55px; height: 45px; background: url("../images/proContent.svg") no-repeat center top; background-size:contain;}
.proContent ul{display: block; width:80%;}
.proContent li{display: block; font-size: 12px; line-height: 16px; padding:5px 10px; }
.proContent li:nth-child(odd){background: #333;}

.actAlert{color: #FF7474; font-size: 14px; line-height: 16px; padding-left: 20px; position: relative; margin: 20px 0;}
.actAlert::before{content: ""; display: block; width:16px; height: 16px; float: left; background: url("../images/product_Icon_Alert.svg") no-repeat center; background-size:contain; position: absolute; left: 0; top:0;}

.guessLike{display: flex; justify-content: space-between; align-items: flex-start;}
.guessLike li{display: block; width:22%;}
.guessLike .proTitle{margin-top: 10px;}
.guessLike .proTitle, .guessLike .proSubtitle{font-size: 14px; line-height: 18px;}
.guessLike .proPrice{flex-direction: row-reverse; margin: 20px 0 10px;}
.guessLike .s-price{font-size: 16px;}
.guessLike .s-price b{font-size: 24px;}
.guessLike .proBtn{font-size: 16px; line-height: 42px; height: 42px;}


/*結帳頁*/
.checkoutLists{border:1px solid #000; padding: 30px 30px 0;}
.checkoutLists .part1{text-align: center; padding-bottom: 10px; margin-bottom: -1px; border-bottom:1px solid #000;}
.iconArrowTop{display: block; font-size: 32px; line-height: 32px; width:38px; height: 38px; margin: 20px auto 0; transform: scale(4,1); transition: all 0.3s; cursor: pointer;}
.iconArrowTop.on{transform: scale(4,-1);}
.checkoutLists .part1{cursor: pointer;}
.checkoutLists .part1 h1.title1{margin: 10px 0;}

.hiddenPanel{display: none;}
.checkoutLists .part2{margin: 30px 0; border-bottom: 1px solid #000;}
.checkoutTable{padding: 0; margin: 0;}
.checkoutTable.singleProBlock{display: flex; width: auto; max-width: none;}
.checkoutTable .t1{display: flex; align-items: center;}
.checkoutTable .t2{justify-content: center;}
.checkoutTable .t3{justify-content: flex-end;}
.checkoutTable.title{font-size: 20px; line-height: 24px; font-weight: 400; border-bottom: 1px solid #000;}
.checkoutTable .singleCol{padding: 15px 0; display: flex; align-items: center;}
.checkoutTable .singleCol .proIMG{width: 120px; height: auto; border: 1px solid #000; margin-right: 15px;}
.checkoutTable.singleProBlock .singleCol.t2{font-size: 24px; font-weight: 900;}
.checkoutTable .singleCol.proPrice{margin: 0;}
.checkoutTable .singleCol.proPrice .s-price{font-size: 16px;}
.checkoutTable .singleCol.proPrice .s-price b{font-size: 24px; margin-left: 10px;}

.cooponTips{margin: 30px 0; padding: 20px; background: #eee;}

.checkoutLists .part3{display: flex; margin: 30px 0; justify-content: space-between; align-items: flex-end;}
.checkoutLists .part3 a{display: flex; align-items: center; padding: 20px;}
.checkoutLists .cartCount{width:90%; max-width: 369px; margin: 0;}
.checkoutLists .cartCount ul{margin: 0;}
.checkoutLists .cartCount li{color: #000; align-items: center;}
.checkoutLists .cartCount li.discount{color: #FF0004;}
.checkoutLists .cartCount li .title{font-size: 16px;}
.checkoutLists .cartCount li.total{margin-top: 10px; border-top:1px solid #000; padding-top:10px;}
.checkoutLists .cartCount li.total .title{font-size:20px; font-weight:700;}

.checkoutForms{margin: 100px 0;}
.checkoutForms .block{margin: 50px 0; padding: 50px 0;}
.formGroup{display: flex; justify-content: space-between;}
.checkoutForms h1{font-size: 24px; line-height: 36px; font-weight: 700; border-bottom:2px solid #000; margin-bottom: 30px;}
.checkoutForms .formGroup .small{width:45%;}
.checkoutForms .formGroup.subLevel .small{width:48%;}
.singleLine{padding: 10px 0; margin-top:10px;}
.singleLine h2.title{font-size:20px; line-height: 24px;}
.singleLine h2.title .tips{font-size: 14px; color:#FF0004; margin-left: 10px;}
.singleLine h2.title a{display:inline-block; font-size: 14px; line-height: 30px; height: 30px; padding: 0 30px; margin-left: 20px; background: #000; color:#fff; vertical-align: middle; border-radius: 8px;}
.singleLine p{color: #999;}
.checkoutForms input, .checkoutForms select, .checkoutForms textarea{border:1px solid #000; border-radius: 12px; font-size: 16px; line-height: 24px; padding: 10px; width: 100%; color:#999;}
.checkoutForms input:focus, .checkoutForms select:focus{color: #000;}
.checkoutForms input[type="checkbox"], .checkoutForms input[type="radio"]{width: auto; height: auto; border-radius: 3px; vertical-align: middle; appearance:auto;}
.checkoutForms label{vertical-align: middle; font-size: 20px; line-height: 24px; font-weight: 400; margin-left: 10px;}
.checkoutForms .forRadio{margin-left: 20px; margin-top: 5px; width: calc(100% - 20px);}

.submitArea{display: flex; justify-content: space-between; align-items: center; padding: 50px; background: #F3F3F3;}
.submitArea a{display: block; width: 45%;}
.submitArea .singleLine{width: 45%;}
.submitArea label{vertical-align: top;}
.submitArea label small.tips{display: block; color: #FF0004;}


/*會員*/
.member .mainBN.otherPage{background-image: url("../images/memberBN0.jpg");}

.memeberProfileTitle{display: flex; align-items: center;}
.memeberProfileTitle .MGroup{width: auto; flex-grow: 1;}
.MHead{width: 120px; height: 120px; border: 2px solid #000; background:url("../images/member_head_工作區域 1.svg") no-repeat center; background-size:cover; border-radius: 120px; margin-right:20px;}
.MName{color: #000; font-size: 36px; line-height: 32px; display: flex; align-items: center;}
.MName a{display: flex; align-items: center;}
.MName a::before{content: ""; display: block; width: 32px; height: 32px; background: url("../images/editMemberBtn.svg") no-repeat center; background-size: contain; margin: 0 10px;}
.MName a span{background: #999; color: #fff; height: 30px; margin-top: 2px; border-radius: 30px; font-size: 16px; line-height: 30px; padding: 0 10px; opacity: 0; transition:all 0.3s;}
.MName a:hover span{opacity: 1;}
.MMail{color: #999; font-size: 16px; line-height: 24px; margin-top:10px;}

.MNav{border-bottom: 10px solid #aaa; display: flex; align-items: flex-end; justify-content: space-between; margin: 50px 0 100px; padding: 0;}
.MNav ul{display: flex;}
.MNav li{display: block; margin-right: 40px;}
.MNav a{color: #333; font-size: 16px; line-height: 36px; height: 36px;}
.MNav li{border-bottom: 10px solid #fff0; margin-bottom: -10px; transition: all 0.3s;}
.MNav li:hover{border-bottom-color: #ffff;}
.MNav li.on{border-color: #000;}

.logoutBtn{display: flex; align-items: center;}
.logoutBtn::before{content:""; display: block; width: 16px; height: 16px; background:url("../images/logout.svg") no-repeat center; background-size: contain; margin-left: 5px;}

.MFunctions{display: flex; justify-content: space-between; padding-bottom: 100px;}
.singleMF{border:1px solid #999; border-radius: 12px;}
.singleMF a{display: flex; width:100%; height: 100%; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px;}
#page .singleMF:hover{border-color:#000; box-shadow: 0 0 10px #0003;}
.singleMF.orders{width: 48%; flex-grow: 1; margin-right: 4%;}
.MGroup{display: flex; flex-direction: column; width: 48%;}
.singleMF.security{margin-bottom: 20px;}
.singleMF h2{display: block; width:100%; font-size: 32px; line-height: 32px; color: #999;}
.singleMF .counts{font-size:8vw; line-height: 8vw; display: flex; align-items: center;}

.singleMF .counts::before{content:""; display: block; width:8vw; height: 8vw; background:no-repeat center; background-size: contain; margin: 10px;}
.singleMF.orders .counts{flex-direction: column; align-items: center;}
.singleMF.orders .counts::before{background-image: url("../images/M_cart_icon.svg"); width: 9vw; height: 9vw;}
.singleMF.security .counts::before{background-image: url("../images/M_security_icon.svg");}
.singleMF.discounts .counts::before{background-image: url("../images/M_coopon_icon.svg");}

.singleMF .details{display: flex; justify-content: space-around; width: 100%; font-size: 16px; line-height: 16px; text-align: center; }

.member.male .mainBN.otherPage{background-image: url("../images/memberBN.jpg");}
.male .MHead{background-image: url("../images/member_man.jpg");}
.male .MNav{border-color: var(--manColor);}
.male .singleMF{border-color: var(--manColor);}


.member.female .mainBN.otherPage{background-image: url("../images/memberBN2.jpg");}
.female .MHead{background-image: url("../images/member_woman.jpg");}
.female .MNav{border-color: var(--womanColor);}
.female .singleMF{border-color: var(--womanColor);}

/*會員＿訂單查詢*/
.member h1.title1{color: #999; margin-top: -30px;}
.MOrderListArea{margin: -30px 0 100px;}
.MOrderList li{display: flex; align-items: center; text-align: center; justify-content: space-between; padding: 20px 0; border-bottom:1px solid #aaa;}
.MOrderList li:hover{background:#F1F1F1;}
.MOrderList li.title{border-bottom:2px solid #000; background: none;}
.MOrderList li span{display: block;}
.MOrderList li a{color: #999; text-decoration: underline;}
.MODate{width: 25%; text-align: left;}
.MONum{width: 30%; text-align: left;}
.MOPrice{width: 25%; text-align: center;}
.MOPayState, .MOShipState{width: 10%; text-align: center;}


/*會員＿訂單明細*/
.member .breadcrumb{margin-top: -50px;}
.orderDetailArea{padding: 30px 0; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.orderDetailArea h1{display: block; width: 100%; margin-bottom:20px;}

.singleODB{width:48%; margin-bottom: 50px;}
.singleODB h3{font-size: 20px; line-height: 24px; margin: 20px 0;}
.singleODB li{display: flex; font-size: 14px; line-height: 24px; margin: 15px 0;}
.singleODB li .title{display: block; width:20%; color: #999999}
.singleODB li .content{display: block; flex-grow: 1;}
.singleODB li a{color: #aaa; text-decoration: underline;}
.singleODB li p{font-size: 16px; line-height: 20px; font-weight: 400;}

.singleODB.orderContentTable{width: 100%;}
.singleODB .table li{padding: 15px 0; border-bottom:1px solid #999;}
.singleODB .table li.tTitle{border-bottom:2px solid #000;}
.singleODB .table li span{display: block;}
.singleODB .table li span.proName{width:65%;}
.singleODB .table li span.counts{width:5%; text-align: center}
.singleODB .table li span.singlePrice{width:15%; text-align: center;}
.singleODB .table li span.totalPrice{width:15%; text-align: center}
.singleODB .table li.discount{color: #a40000; border: none; padding-top: 5px;}
.singleODB .table li.tCount{flex-direction: row-reverse; border: none;}
.singleODB .table li.tCount ul{display: block; width:100%; max-width: 400px;}
.singleODB .table li.tCount ul li{justify-content: space-between; border: none;}
.singleODB .table li.tCount ul li .title{width:auto;}
.singleODB .table li.tCount ul li .content{flex-grow: 0;}
.singleODB .table li.tCount ul li.totalPrice{font-size: 24px; line-height: 26px; font-weight: 700;}

.ticketList{padding: 50px 0; display: flex; flex-wrap: wrap;}
.ticketList li{width:33.33%; margin-bottom: 50px; display: flex;}
.ticketList .singleMF{width: 90%; display: block; padding: 15px; position: relative;}
.ticketList .singleMF .DName{display: block; width: calc(100% - 32px); font-size: 32px; line-height: 36px;}
.ticketList .singleMF .SubLines{display: block; width: 100%;}
.ticketList .singleMF .DIcon{display: block; width: 100%; height: 60px; margin: 40px 0; background: no-repeat center; background-size:contain;}
.ticketList .singleMF .DIcon.win{background-image:url("../images/deviceIcon_win.svg");}
.ticketList .singleMF .DIcon.apple{background-image:url("../images/deviceIcon_apple.svg");}
.ticketList .singleMF .DIcon.devices{background-image:url("../images/deviceIcon_device.svg");}
.ticketList .singleMF a.colseBtn{display: block; width: 25px; height: 25px; text-indent: -999px; overflow: hidden; background: url("../images/closeBtn.svg") no-repeat center; background-size: contain; position: absolute; top:15px; right: 15px; padding: 0; transition:all 0.3s;}
.ticketList .singleMF a.colseBtn:hover{width: 35px; height:35px; top:10px; right: 10px; }
.ticketList li:nth-child(3n+1){justify-content: flex-start;}
.ticketList li:nth-child(3n+2){justify-content: center;}
.ticketList li:nth-child(3n+3){justify-content: flex-end;}

.ticketList.discountArea .singleMF{padding-left: 80px;}
.ticketList.discountArea .singleMF::before{content: ""; display: block; width: 50px; height: 100%; position: absolute; left: 15px; top:15px; background: url("../images/cooponIcon.svg") no-repeat center top; background-size: contain;}
.ticketList .DCName{font-size: 20px; line-height: 22px; font-weight: 400; text-align: justify;}
.ticketList .DCDate{display: block; font-size: 14px; line-height: 18px; margin: 10px 0;}
.ticketList .singleMF a{height: auto; padding: 0;}

.member .checkoutForms{margin-top: 0;}
.member .checkoutForms .block{margin: 0 0 100px; padding-top: 0; border-bottom:2px solid #000;}
.member .checkoutForms h1{color: #999; border: none; margin-bottom: 60px;}
.member .checkoutForms .helfFull{width:48%;}
.member .singleLine .singleLine{margin: 0; padding: 0;}
.proBtn.freeSize, .freeSize{width: auto; display: inline-block; padding: 0 40px;}
.singleLine .tips{margin-left: 20px; font-size: 16px;}
.member .singleForm.comfirmBlock{display: flex; align-items: flex-end; justify-content: flex-end;}
.member .singleForm.comfirmBlock a.proBtn{background: #FF3F3D;}


/*文字專區*/
#textBlock{color:#333;}
#textBlock h1{font-size: 48px; line-height: 52px; font-weight: 900; color: #000; position: relative;}
#textBlock h2{font-size: 32px; line-height: 42px; font-weight: 900; color: #000;}
#textBlock h3{font-size: 24px; line-height: 32px; font-weight: 900; color: #000;}
#textBlock h4{font-size: 18px; line-height: 24px; font-weight: 900; color: #000;}
#textBlock p{font-size:16px; line-height: 24px; margin:30px 0 60px; text-align: justify;}
#textBlock a{color: #f60; text-decoration: underline;}
#textBlock a:hover{color: #2C4887;}
#textBlock q{display: block; background: #eee; padding: 50px; font-size: 2em; line-height: 2.5em; position: relative; color: #666;}
#textBlock q::before, #textBlock q::after{display: block; position:absolute; font-size:72px; line-height: 72px; color: #999; top:10px; left: 10px; font-family: "Arial Black";}
#textBlock q::after{top:auto; left: auto; right: 10px; bottom: -20px;}
#textBlock ul{margin: 20px 0;}
#textBlock li{list-style: disc; margin-left: 30px; margin-bottom: 20px; color: #666; text-align: justify;}
#textBlock .numbers li{list-style: decimal;}
#textBlock img{max-width: 100%; width:auto; height: auto; margin: 50px 0;}
#textBlock.rulePage h3{border-left: 5px solid #000; color: #000; padding-left: 15px;}
#textBlock.rulePage ul.noTitle li.title{list-style: none; padding-left: 30px; margin: 50px 0 100px;}
#textBlock.rulePage ul.noTitle li h3{margin-left: -30px; margin-bottom: 20px;}

#textBlock .formGroup img{width: 48%; height: auto; border:1px solid #999; border-radius: 12px; box-shadow: 0 10px 10px #0003;}

#textBlock.rulePage{position: relative; border-radius: 20px; background: #fff; padding: 80px 50px; box-shadow: 0 0 10px #0003;}
#textBlock.rulePage::before, #textBlock.rulePage::after{content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; background:#bccddf66; border-radius: 20px; transform: rotate(1deg); top:0; left: 0; transform-origin: bottom left; box-shadow: 0 0 10px #0003;}
#textBlock.rulePage::after{z-index: -2; transform: rotate(-1deg); transform-origin: right bottom; background:#bbe1c166;}
#textBlock.rulePage h1::before{content:""; display:block; width:100%; height:5px; background: linear-gradient(to left, #bccddf, #bbe1c1); position:absolute; top:-50px; left: 0;}


/*服務據點*/
.store .mainBN.otherPage{background-image: url("../images/storesBN.jpg");}
.store h1.title2{margin: 0;}
.store .proListArea .functionArea{align-items: flex-end;}
.store .singleMF{overflow: hidden;}
.storeName{font-size: 28px; line-height: 30px; display: block; margin-bottom: 10px; color: #305689;}
.storeArea{display: inline-block; padding:0 20px; font-size: 14px; line-height: 24px; height: 24px; color: #fff; background: #305689; border-radius: 50px;}
.stores.formGroup{margin: 5px 0; align-items: end;}
.stores.formGroup span::before{display:block; font-size: 12px; line-height: 16px; color: #aaa;}
.storeTime::before{content: "營業時間："}
.storePhone::before{content: "聯絡電話："}
.storeAdd{color: #fff; background: #aaa; display: block; text-align: justify; padding: 20px 15px; margin:0 -15px -15px; }
.storeAdd a{color: #fff;}
.store a.reserveBtn{display: block; width: auto; padding: 5px 20px; background: #4EB814; color: #fff; font-size: 18px; line-height: 20px; border-radius: 12px;}
.store .tryoutEQ{font-size: 14px; line-height: 24px; color: #aaa; margin: 20px 0; padding: 10px; border-top:1px solid #666; border-bottom: 1px solid #666;}
.store .ticketList{align-items: flex-start;}

/*品牌介紹*/
.aboutArea{width:100%; background: url("../images/aboutBG.jpg") no-repeat center; background-size: cover; margin: -58px 0; padding: 150px 0; position: relative;}
.aboutArea::before{content: ""; width: 100%; height: 100%; display: block; background: #000a; z-index:0; position: absolute; top:0; left: 0;}
.aboutArea .normalPgeSize{color: #fff; z-index: 1; position: relative;}
.aboutTitle{width: 80%; height: 30vh; text-indent: -9999px; overflow: hidden; background: url("../images/nav_logo_white.svg") no-repeat center; background-size: contain; opacity: 0.7; margin: 0 auto;}
.aboutArea h1{font-size: 32px; line-height: 38px; display: block; text-align: center; margin: 30px 0;}
.aboutArea p{display: block; line-height: 32px; text-align: justify; font-size: 18px; width: 80%; margin: 0 auto 30px;}
.about .companyLogo, footer .index .companyLogo{background-image: url("../images/nav_logo_white.svg");}


/*年度代言人*/
#endorser{margin-top: 60px; font-size: 18px; line-height: 32px; color: #ccc;}
#endorser .mainBN{background: #000; display: flex; align-items: center; justify-content: center; height: auto;}
#endorser .mainBN img{width: 100%; max-width: 1140px;}
#endorser p{text-align: justify;}
.ENBlock1{background: url("../images/endorserBG.jpg") no-repeat top center #000; background-size:cover; border-top: 15px solid #999;}
.singleENBlock{width: 90%; max-width: 1140px; margin: 0 auto;}
.ENProfile{display: flex; align-items: center; padding: 30px 0; margin: 0 auto 30px; column-gap: 20px; border-bottom:2px solid #999;}
.ENHead{width: 300px; height: 300px; border-radius: 300px; border:3px solid #fff; overflow: hidden; margin-top: -80px;}
.ENHead img{width: 100%;}
.ENBasicInfos{display: flex; flex-direction: column; grid-row-gap: 10px; align-items: flex-start; justify-content: flex-start;}
.ENTitle{padding: 5px 30px; color: #999; border:1px solid #999; border-radius: 100px;}
.ENNamr{font-size:52px; line-height: 52px; color:#fff;}
.ENNamr small{font-size: 18px; line-height: 18px; margin-left: 10px;}
.ENSocial{display: flex; align-items: center; column-gap: 10px; color: #999;}
.ENSocial::before{content: ""; display: block; width: 32px; height: 32px; background: no-repeat center; background-size: contain;}
.ENSocial.IG::before{background-image: url("../images/icon_IG.svg");}

.ENContent{display: flex; flex-direction: column; grid-row-gap: 20px; align-items: center;}ww
.ENBlock4 .quoteBlock{padding: 50px; color: #fff; font-size: 32px; line-height: 48px; text-align: justify; position: relative;}
.ENBlock4 .quoteBlock::before{content:'“'; font-family:"Impact"; font-size: 92px; line-height: 92px; position: absolute; top:0; left: 0;}
.ENBlock4 .quoteBlock::after{content:'”'; font-family:"Impact"; font-size: 92px; line-height: 92px; position: absolute; bottom:-50px; right: 0;}


/*Tixteel網站＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#INDEXPageContent{width: 100%; padding: 60px 0 0; margin-bottom: -60px; min-height: 100dvh;}
#INDEXPageContent.dark{background: #666;}

.IMGPC{display: block;}
.IMGMobile{display: none;}

/*首頁*/
.indexSlide, .indexSlide a{display: block; width: 100%; height: auto;}
.indexSlide img{width: 100%; height: auto;}

.indexBoxLine{display: flex; gap:0px;}
.indexBoxLine a{display: block; width: 100%;}
.indexBoxLine a img{width: 100%; height: auto;}

.indexSingleBox{width: 100%; min-height: 800px; display: flex; flex-direction: column; gap:30px; align-items: center; justify-content: center; color: #fff; font-size: 14px; line-height: 1.2em; position: relative;}
.indexSingleBox::after{content: ""; display: block; width: 100%; height: 100%; z-index: 0; position: absolute; background: #0006;}
.indexSingleBox a{color: #fff; font-size: 14px; line-height: 1.2em; z-index: 1;}
.indexSingleBox.saleOnline{background: url("../images/BG_saleOnline.jpg") no-repeat center; background-size: cover;}
.indexSingleBox.saleOut{background: url("../images/BG_saleOut.jpg") no-repeat center; background-size: cover;}
.indexSingleBox p, .indexSingleBox h1{text-align: center; z-index: 1;}
.indexSingleBox .onlineStoreList{display: flex; align-items: center; gap:20px; z-index: 1;}
.indexSingleBox .onlineStoreList img.shopIcon{width: 72px; height: auto;}


.indexProList{display: grid; grid-template-columns: repeat(4, 1fr); gap:30px; width: 90%; max-width: 1440px; margin: 50px auto 0;}
.indexProBtn{display: flex; align-items: center; justify-content: center; padding:50px 0 100px;}
.indexProBtn a{display: block; padding: 20px 80px; border:1px solid #aaa; color: #aaa; font-size: 24px; line-height: 24px;}




@media screen and (max-width: 1140px) {
    
    .mainBN{height: 400px;}
    
    #navigation.index{z-index: 10;}
    .index .webName{position: fixed; z-index: 9; top:0; left: 0; width: 100vw; height: 0vh; background: linear-gradient(to bottom, #333, #000); overflow: scroll; transition:all 0.5s;}
    .index .webName.on{height: 100vh;}
    .index .webName ul.title{width:90vw; margin: 50px auto; flex-direction: column;}
    .index .webName li.title{padding-bottom: 50px; height: auto; width: 100%;}
    .index .webName li.title a{display: block; text-align: center; background: #666;}
    .index .webName ul.sub li a{text-align: center; display: block; background: #fff;}
    .index .webName ul.sub{display: block; position: static;}
    
    .menuBtn{width:40px; height:30px; display: block; position: absolute; top:15px; left: 10px;  cursor: pointer; z-index: 10;}
    .menuBtn .bar{width: 40px; height: 4px; background: #000; position: absolute; left: 0; transition: all 0.3s;}
    .menuBtn .bar.b1{top:0px;}
    .menuBtn .bar.b2{top:13px;}
    .menuBtn .bar.b3{top:26px;}
    .menuBtn.on .bar.b1{top:13px; transform:rotate(45deg); transform-origin: center; background: #fff;}
    .menuBtn.on .bar.b3{top:13px; transform:rotate(-45deg); transform-origin: center; background: #fff;}
    .menuBtn.on .bar.b2{width:0; background: #fff;}
    
    .index .companyLogo{margin-left: 70px;}    
    
    
    .footerService{padding-left: 50px;}
    
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{width:100%;}
    
    .proSlides{width:100%; height: 75vw;}
    .proInfos{width:100%;}
    .proInfos .proInfotitle{margin-left: 0;}
    .proInfos .singleProBlock{padding: 50px 60px;}
    .proInfos .profeatures{position: static; margin: 20px 0; color: #aaa;}
    .proInfos .proInfoGrop{display: flex; justify-content: space-between;}
    .proInfos .proDetails, .proInfoGrop2{width:47%; padding: 20px 0;}

    .ENSlogan span{display: block; width:100%; text-align: center;}
    .ENSlogan span.loss{display: none;}

    .ENContent .ENBlock2 p{margin-left: -160px; margin-top: 30px;}
    #endorser h3{white-space: nowrap;}
    
    /*Tixteel網站＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
    .indexBoxLine{flex-direction: column;}
    .indexProList{grid-template-columns: repeat(2, 1fr);}
    .indexProList li{display: flex; align-items: flex-start; justify-content: center;}
    
}


@media screen and (max-width: 840px) {
    
    .normalPgeSize{width: calc(100% - 104px);}
    .member .normalPgeSize{width: 90%;}
    
    .proListCategory li{height: 80px;}
    .proListCategory a{height: 100%;}
    .proListCategory span.icon{height: 100%;}
    .proListCategory .icon img{height: 100%; width: auto;}
    .proListCategory .texts{font-size: 14px;}
    .proListCategory .texts b{font-size: 16px; line-height: 18px;}
    .proListCategory .subList{top:80.5px;}
    
    .proTitle{font-size: 16px; line-height:20px;}
    .proPrice{display: block; padding: 5px 0; margin: 5px 0; border-top:1px solid #000;}
    .proPrice .o-price{display: block;}
    .proBtn{font-size: 16px; line-height: 42px; height: 42px;}
    
    .footerService{padding: 100px 20px 0; display: block;}
    .footerService .linkArea{justify-content: space-around;}
    .footerService h3{font-size: 18px; line-height: 28px;}
    .footerService .secondLevel li a{font-size: 14px; line-height: 18px;}
    .copyRight{border-radius: 0; height: 100px; line-height: 100px; margin: 0 -20px; padding: 0; text-align: center; background: none;}
    
    
    .proInfos .proPrice{display: flex; border-top:none;}
    
    .singleODB li .title{width: 30%;}
    
    .store .ticketList li{width:50%;}
    .store .ticketList li:nth-child(odd){justify-content: flex-start;}
    .store .ticketList li:nth-child(even){justify-content: flex-end;}

    .ENProfile{justify-content: center;}

    .ENBlock2{column-gap: 0;}
    .ENBlock2 .picArea .pic{margin-left: 50px; margin-right: 0;}
    .ENBlock2 .picArea::after{right: inherit; left: 0;}
    
    
    /*Tixteel 官網*/
    .IMGPC{display: none;}
    .IMGMobile{display: block;}

    
}



@media screen and (max-width: 768px) {
    #navigation{position: absolute; background: #fff; box-shadow: none;}
    .webName{background: none; color: #000; padding: 0; height: 60px; line-height: 60px;}
    
    .navBtn.search{display:block;}
    .navBtn.member{display: none;}
    
    #searchBlock{position: absolute; z-index: 2; background: #fff; top:0px; right: 0; width: 100%; box-shadow: 0 10px 10px rgba(0,0,0,0.3);}
    #searchBlock form{width:100%;}
    .searchTextArea{width:calc(100% - 60px); margin: 0 auto; padding-right: 100px;}
    .searchBtn{right: 30px; top:16px; background: #000; text-indent: 0; width: auto; height: 28px; color: #fff; padding: 0 30px; border-radius: 28px;}
    
    #BtmNav{display: block; z-index: 50;}
    #cartTag{display: none;}
    
    .mainBN{height: 350px;}
    
    /*購物車*/
    #cartPanel{position:fixed; top:100%; right: 0; width:100%; height: 100%; background: #fff; color: #000;}
    .cartContents{height: calc(100% - 90px); padding:60px 0 30px; overflow: scroll; margin: 0 0 90px;}
    .cartContents h1{color: #000; line-height:36px; font-size: 32px; font-weight: 900; font-style: italic; text-align: left; display: block; border-bottom:1px solid #000;}
    .cartContents h1 span.cartIcon{display: none;}
    .cartContents .proTitle, .cartContents .proSubtitle{color: #000;}
    .cartContents .proPrice{color: #000; border:none; text-align: right;}
    .cartContents .proPrice .s-price{color: #000;}
    .cooponArea{border-color:#000;}
    .cartCount{text-align: right;}
    .cartCount ul{display: inline-block; width: 100%; max-width: 300px;}
    .cartCount li{color: #000;}
    
    /*產品列表*/
    .proListCategory{position:fixed; top:100%; left: 0; width:100%; height: 100%; background: #fff;}
    .proListCategory.noshow{display: block;}
    .proListCategoryArea{display: block; height: calc(100% - 150px); margin: 60px auto 90px; overflow: scroll;}
    .proListCategoryArea::-webkit-scrollbar{display: none;}
    .proListCategoryArea .level1{display: block; height: auto; margin-bottom: 30px;}
    .proListCategoryArea .level1 a{border-bottom: 3px solid #000; margin-bottom: 10px;}
    .proListCategory .icon img{width:110px; height: auto;}
    .proListCategory .texts{font-size: 18px; line-height: 20px; color: #000;}
    .proListCategory .texts b{font-size: 20px; line-height: 24px; color: #000;}
    .proListCategory .subList{display: block; position:static; border:none; box-shadow: none; width: 100%; padding: 0; padding-left: 20px;}
    .proListCategory .subList li{padding: 10px 0; margin: 0; border-bottom:#999 1px dashed;}
    .proListCategory .subList li a{border: none; font-size: 18px; line-height: 24px;}
    .proListCategory .subList li a::before{opacity: 1;}
    
    .proListArea{padding-top: 0;}
    
    .proList .col-4{width: 50%;}
    .proList li:nth-child(2n+1){text-align: left;}
    .proList li:nth-child(2n+2){text-align: right;}
    
    .footerService{padding-bottom: 100px;}
    
    .proInfos .singleProBlock{padding: 5%;}
    .proInfos .proTitle, .proInfos .proSubtitle{font-size: 28px; line-height: 32px;}
    
    .checkoutTable .singleCol.proPrice{border:none; padding: 0;}
    .checkoutTable.title{display: none;}
    .checkoutTable.singleProBlock{display: block; position: relative; min-height: 95px; padding-bottom: 15px; margin-bottom: 20px; border-bottom:2px dotted #aaa;}
    .checkoutTable .singleCol{display: block; width: 100%; clear: both;}
    .checkoutTable .singleCol .proIMG{width: 80px; height: 80px; position: absolute; top:15px; left: 0;}
    .checkoutTable .singleCol .proTitle, .checkoutTable .singleCol .proSubtitle, .checkoutTable .singleCol.proPrice{margin-left: 110px;}
    .checkoutTable.singleProBlock .singleCol.t2{position: absolute; top:0; left: 65px; width: 30px; height: 30px; line-height: 30px; background: #FF3F3D; border-radius: 40px; color: #fff; text-align: center; padding: 0; margin: 0;}
    .checkoutLists .part3 a{display: none;}
    .checkoutLists .cartCount{width: 100%; max-width: none;}
    .checkoutLists .cartCount ul{max-width: none;}
    .checkoutForms .formGroup .small{width: 100%;}
    .formGroup.block{display: block;}
    .checkoutForms .block{margin: 0; padding: 0;}
    .singleForm, .singleForm.block{margin-bottom: 100px;}
    .checkoutForms h1{padding: 15px; background: #000; color: #fff; border: none; margin-bottom: 15px;}
    .submitArea{flex-direction: column;}
    .submitArea .singleLine, .submitArea a{width: 100%;}
    .submitArea a{padding: 20px 0; height: auto;}
    
    .singleODB{width: 49%;}
    
    .member .singleForm.comfirmBlock a.proBtn{width: 50%;}
    
    #textBlock .formGroup{display: block;}
    #textBlock .formGroup img{width: 100%; margin: 20px 0;}

    .singleENBlock{width: 93%;}

    .ENProfile{flex-direction: column; row-gap: 20px;}
    .ENBasicInfos{align-items: center;}
    .ENNamr small{display: block; margin: 10px auto; display: block; width: 100%; text-align: center;}
    .ENBlock2{justify-content: space-between; margin: 30px 0; align-items: flex-start;}
    .ENBlock2 .textArea, .ENBlock2 .picArea{width: 48%;}
    .ENBlock2 .picArea .pic{width: 100%; margin: 125px 0 0;}
    .ENBlock2 .picArea img{aspect-ratio:4/5; object-fit: cover; object-position: center top;}
    .ENBlock2 .picArea::after{display: none;}

    .ENBlock3{padding: 100px 0;}

}



@media screen and (max-width: 580px) {
    .mainBN{height: 50vh;}
    .mainBN .BN.mobile{display: block;}
    .mainBN .BN.laptop{display: none;}

    .navBtn{margin-right: 15px;}
    
    .navBtn.store{padding: 0; width: 28px;}
    .navBtn.store a{overflow: hidden; width: 20px; height: 20px; text-indent: -9999px; background: url("../images/cart_Black.svg") no-repeat center; background-size: contain;}
    .navBtn.store a::before{display: none;}
    
    .normalPgeSize{width:90%;}
    
    .proListArea .functionArea{display: block;}
    .breadcrumb{width:100%; text-align:left;}
    
    .singleCoopon{padding: 10px;}

    footer .index .companyLogo{margin: 0 auto;}
    
    footer .companyLogo{margin: 0 auto; display: block;}
    .socialMediaList{width:100%; margin: 0; padding: 20px 0; display: flex; justify-content: space-around; align-items: center; background: none;}
    .socialMediaList .fb{background-image: url("../images/footer_icon_fb_B.svg");}
    .socialMediaList .yt{background-image: url("../images/footer_icon_yt_B.svg");}
    .socialMediaList .ig{background-image: url("../images/footer_icon_ig_B.svg");}
    .socialMediaList .line{background-image: url("../images/footer_icon_line_B.svg");}
    .socialMediaList .mail{background-image: url("../images/footer_icon_mail_B.svg");}
    .footerService{margin-top: 0;}
    
    .footerService .linkArea{flex-direction: column; align-items: center;}
    .footerService .firstLevel{margin: 0 0 30px; padding-bottom:20px; border-bottom:1px dashed #666; display: flex; width:100%; justify-content: space-between;}
    .footerService .secondLevel li{text-align: right;}
    
    .cartCount ul{max-width: none;}
    
    #productArea{margin-bottom: 0;}
    .swiper-button-next, .swiper-button-prev{display: none;}
    .proSlides{height: 120vw;}
    .proInfos .profeatures{font-size: 14px; line-height: 18px;}
    .proInfos .proInfoGrop{display: block;}
    .proInfos .proDetails, .proInfoGrop2{width:100%; padding: 20px 0 0;}
    .guessLike{display: block;}
    .guessLike li{width: 100%; max-width: none; padding-bottom: 5px; margin-bottom: 15px; border-bottom: 1px solid #000;}
    .guessLike li .proIMG{float: left; width: 80px; height: 80px;}
    .guessLike .proTitle, .guessLike .proSubtitle{margin-left: 90px;}
    .guessLike .proPrice{margin-left: 90px; border:none; margin-top: 0;}
    .guessLike .s-price{display: block; width: 100%; text-align: right;}
    .guessLike .proBtn.gotoPro{clear: both; margin: 5px 0; border-radius: 0px;}
    .guessLike .proBtn.addToCart{display: none;}
    .product .normalPgeSize h1.title1{text-align: center; background: #EEE; margin-bottom: 20px; padding: 20px 0;}
    
    
    .checkoutForms{margin: 50px 0;}
    .submitArea{padding: 50px 20px;}
    
    .memeberProfileTitle{flex-direction: column; align-items: center;}
    .memeberProfileTitle .MGroup{flex-grow: 0;}
    .MHead{margin-bottom: 20px;}
    .MName a span{display: none;}
    .MNav li{margin-right: 30px;}
    .MNav{margin-bottom: 40px;}
    .MFunctions{flex-direction: column;}
    #page .singleMF{width: 100%; margin: 0 0 30px; flex-grow: 0;}
    .MFunctions .MGroup{width: 100%; margin: 0;}
    #page .counts{font-size: 20vw; line-height: 20vw; flex-direction: row; margin: 50px 10px 20px;}
    #page .counts::before{width: 16vw; height: 16vw;}
    
    .member h1.title1{margin-top: 0;}
    
    .member .breadcrumb{margin-top:0;}
    .singleODB{width: 100%; border-bottom:1px solid #000;}
    .singleODB .table li.tTitle{display: none;}
    .singleODB .table li{justify-content: space-between; flex-wrap: wrap; border-bottom:2px dashed #999;}
    .singleODB .table li span.proName{width: 100%; font-weight: 700; text-align: justify;}
    #page .singleODB .table li span.counts{font-size: 14px; line-height: 20px; width:100%; text-align: left; margin:10px 0 0;}
    #page .singleODB .table li span.counts::before{content: "數量："}
    .singleODB .table li span.singlePrice, .singleODB .table li span.totalPrice{width:auto; text-align: left;}
    .singleODB .table li span.totalPrice{font-size: 24px; line-height: 24px; font-weight: 700;}
    .singleODB .table li span.singlePrice::before{content: "單價："}
    .singleODB .table li span.totalPrice::before{content: "小計："; font-size: 14px; font-weight: 400;}
    .singleODB .table li.discount{margin: 10px 0; padding: 10px 15px; color: #fff; background: #a40000; border-radius: 5px; }
    .singleODB .table li.tCount ul li{margin: 0;}
    
    .MOrderListArea{margin-top: 0;}
    .MOrderList li.title{display: none;}
    .MOrderList li{border:1px solid #000; border-radius: 12px; margin-bottom: 20px; justify-content: space-between; flex-wrap: wrap; overflow: hidden; padding: 0;}
    .MOrderList li span{padding: 10px;}
    .MODate{width: 100%;}
    .MODate::before{content: "訂購日期"; display: block; font-size: 12px; line-height: 16px;}
    .MONum, .MOPrice{width: auto;  text-align: left;}
    .MONum::before{content: "訂單編號"; display: block; font-size: 12px; line-height: 16px;}
    .MOPrice{font-size: 24px; font-weight: 700; line-height: 24px;}
    .MOPrice::before{content: "總金額"; display: block; font-size: 12px; line-height: 16px; font-weight:400;}
    .MOrderList li span.MOPayState, .MOrderList li span.MOShipState{width: 50%; background: #F1F1F1; padding: 15px 0; position:relative;}
    .MOPayState::before{content: "付款狀態"; display: block; font-size: 12px; line-height: 16px;}
    .MOShipState::before{content: "出貨狀態"; display: block; font-size: 12px; line-height: 16px;}
    .MOShipState::after{content: ""; display: block; width:2px; height: 80%; background: #000; position: absolute; top:10%; left: -1px;}
    
    .ticketList li{width: 100%; margin-bottom: 0;}
    
    #discountDetailCard .DCName{font-size: 32px; line-height: 36px; padding: 0;}
    #discountDetailCard .listRule{padding: 10px 0;}
    #discountDetailCard .DCInfos{display: block;}
    
    .member .singleForm.comfirmBlock a.proBtn{width: 100%; padding: 20px 0; height: auto; border-radius: 12px; font-size: 24px; line-height: 24px;}
    
    .store .proListArea{padding-bottom: 15px;}
    .store .filters{justify-content: flex-end;}
    .store h1.title2{margin-bottom: 50px; text-align: center;}
    .store .ticketList{padding-top: 0;}
    .store .ticketList li{width:100%;}
    
    #textBlock h1{font-size: 32px; line-height: 38px;}
    #textBlock.rulePage{box-shadow: none; border-radius: 0; padding: 0;}
    #textBlock.rulePage::before, #textBlock.rulePage::after{display:none;}
    
    .aboutArea{padding: 30px 0;}
    .aboutArea p{width: 100%; font-size: 14px; line-height: 24px;}
    .aboutTitle{height: 20vh;}

    .ENSlogan{font-size: 32px; line-height: 42px;}
    #endorser p{font-size: 14px; line-height: 24px;}
    .ENBlock3 .singleENBlock .textArea{flex-direction: column; row-gap: 20px; align-items: center;}
    .ENBlock3 .picArea{flex-direction: column; row-gap: 10px; border-radius: 0;}
    .ENBlock3 .picArea img{width: 100%; border-radius: 22px;}

    .ENBlock4{padding: 50px 0 110px;}
    .ENBlock4 .quoteBlock{font-size: 24px; line-height: 32px;}
    
    /*Tixteel網站＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
    .indexProList{gap:10px; width: 98%;}
    .s-price{font-size: 22px; line-height: 26px;}
    
    .indexSingleBox{height: 100dvh;}
    .indexSingleBox.saleOnline{background-image: url("../images/BG_saleOnline_M.jpg");}
    .indexSingleBox.saleOut{background-image: url("../images/BG_saleOut_M.jpg");}
    .indexSingleBox h1{font-size: 4em; line-height: 1.2em;}
    .indexSingleBox p{font-size: 0.8em; line-height: 1.5em;}
    .indexSingleBox.saleOnline{background-position: right;}
    .indexSingleBox.saleOnline .onlineStoreList{display: grid; grid-template-columns: 1fr 1fr; gap:10px;}
    .indexSingleBox .onlineStoreList img.shopIcon{width: 120px;}
    .indexSingleBox.saleOut .onlineStoreList{flex-direction: column;}
    .indexSingleBox.saleOut .onlineStoreList li:nth-child(2){transform: rotate(30deg);}
    
}