@charset "UTF-8"; /* CSS Document */ :root{ --title-size:36px; --title-LH:42px; --title-size2:24px; --title-LH2:30px; --subtitle-size:18px; --subtitle-LH:24px; --content-size:16px; --content-LH:20px; --blueGradient:linear-gradient(to bottom, #333E50, #4652B0); --green:#44D100; --ColorBlue:#333E50; --ColorBlue2:#536075; --ColorOrange:#d2822d; --ColorOrange2:#d2672d; --ColorGolden:#c69d2b; --ColorLight:#F3F3E9; } html, body{margin: 0; padding: 0; width:100%; height: 100%; font-family:"Arial", "new-order", sans-serif, "Lantinghei TC Demibold"; color: #fff; background: var(--ColorBlue);} li, ul, ol{padding: 0; margin: 0; list-style: none;} a{color: var(--ColorBlue); text-decoration: none; cursor: pointer;} /* icons */ i{display: block; background: no-repeat center; background-size: contain;} i.login{width: 24px; height: 24px; background-image: url("../images/icon_login.svg"); margin-right: 5px;} i.favorite{width:24px; height: 24px; background-image: url("../images/icon_favorite+.svg");} .added i.favorite, i.addedFav{width:24px; height: 24px; background-image: url("../images/icon_favorite.svg");} i.fb{width:30px; height: 30px; background-image: url("../images/icon_fb.svg");} i.line{width:30px; height: 30px; background-image: url("../images/icon_line.svg");} i.yt{width:30px; height: 30px; background-image: url("../images/icon_yt.svg");} i.ig{width:30px; height: 30px; background-image: url("../images/icon_ig.svg");} i.tiktok{width:30px; height: 30px; background-image: url("../images/icon_titok.svg");} i.history{width:30px; height: 30px; background-image: url("../images/icon_history.svg");} i.service{width:30px; height: 30px; background-image: url("../images/icon_service.svg");} i.top{width:24px; height: 26px; background-image: url("../images/icon_top.svg");} i.pointer{width: 50px; height: 90px; background-image: url("../images/icon_pointer.svg");} i.sort{width: 20px; height: 20px; background-image: url("../images/icon_sort.svg");} i.loginPhone{width: 30px; height: 30px; background-image: url("../images/iocn_login_phone.svg");} i.passwords{width: 30px; height: 30px; background-image: url("../images/icon_passwords.svg");} i.wait24h{width: 200px; height: 200px; background-image: url("../images/icon_24h.svg"); margin-bottom: 30px;} i.u-Profile{width: 18px; height: 18px; background-image: url("../images/icon_member_01_profile.svg");} i.u-buy{width: 18px; height: 18px; background-image: url("../images/icon_member_02_buy.svg");} i.u-invoice{width: 18px; height: 18px; background-image: url("../images/icon_member_03_invoice.svg");} i.u-business{width: 18px; height: 18px; background-image: url("../images/icon_member_04_businessman.svg");} i.u-social{width: 18px; height: 18px; background-image: url("../images/icon_member_05_line.svg");} i.u-history{width: 18px; height: 18px; background-image: url("../images/icon_member_06_history.svg");} i.u-favorite{width: 18px; height: 18px; background-image: url("../images/icon_member_07_favorite.svg");} i.u-paper{width: 18px; height: 18px; background-image: url("../images/icon_member_08_paper.svg");} i.u-alert{width: 18px; height: 18px; background-image: url("../images/icon_member_09_alert.svg");} i.u-cloudPaper{width: 18px; height: 18px; background-image: url("../images/icon_member_10_cloudPaper.svg");} i.u-cloudView{width: 18px; height: 18px; background-image: url("../images/icon_member_11_cloudSearch.svg");} i.u-paper{width: 18px; height: 18px; background-image: url("../images/icon_member_12_paperSearch.svg");} i.u-myCase{width: 18px; height: 18px; background-image: url("../images/icon_member_13_my_case.svg");} i.u-mail{width: 18px; height: 18px; background-image: url("../images/icon_member_16_mail.svg");} i.question{width: 18px; height: 18px; background-image: url("../images/icon_question.svg"); margin-right:5px;} i.tags{width: 18px; height: 25px; background-image: url("../images/icon_tags.svg");} i.articles{width: 18px; height: 25px; background-image: url("../images/icon_articles.svg");} i.u-consultation{width: 18px; height: 18px; background-image: url("../images/icon_member_14_consultation.svg");} i.u-logout{width: 18px; height: 18px; background-image: url("../images/icon_member_15_logout.svg");} i.review{width: 80px; height: 80px; background-image: url("../images/icon_review.svg"); position: relative; z-index: 2;} .read i{width: 26px; height: 26px; background-image: url("../images/icon_mail_read.svg");} .unread i{width: 26px; height: 26px; background-image: url("../images/icon_mail_unread.svg");} .replied i{width: 26px; height: 26px; background-image: url("../images/icon_mail_replied.svg");} i.u-payment{width: 18px; height: 18px; background-image: url("../images/icon_member_18_levelCard.svg");} i.u-points{width: 18px; height: 18px; background-image: url("../images/icon_member_19_points.svg");} i.u-callUpDocuments{width: 18px; height: 18px; background-image: url("../images/icon_member_20_callUpDocuments.svg");} i.checked{width: 24px; height: 24px; background-image: url("../images/icon_checked.svg");} /* 通用規則 */ .commonContainer{width:calc(100% - 130px); max-width: 1140px; margin: 0 auto;} h1{font-size: var(--title-size); line-height: var(--title-LH);} h1 small{display:block; font-size:16px; line-height: 18px; font-family: "Arial";} .btnCheck{display: block; font-size: 16px; color: #fff; line-height: 32px; padding: 10px 0; text-align: center; width: 100%; background: var(--ColorOrange); border-radius: 12px; transition: all 0.3s;} /*.laptop .btnCheck:hover{background: var(--ColorBlue);}*/ .btnP{cursor: pointer;} /*通用表單*/ .SBF{appearance:none; outline: none; width:100%; font-size: 16px; line-height: 16px; padding:10px; color: #aaa; height: 42px; border:1px solid #999; border-radius: 12px;} textarea.SBF{height: auto;} /*lightBox*/ #lightBoxArea{display: none; position: fixed; width:100%; height: 100%; top:0; left: 0; z-index: 50; justify-content: center; align-items: center;} .popBG{position: absolute; top:0; left: 0; width: 100%; height: 100%; background: #000d; z-index: -1; opacity: 0;} .LBContent{display:none; width:90%; max-width: 800px; max-height: 90%; background: #fff; border-radius: 20px; overflow: scroll; position: relative;} .LBContent::-webkit-scrollbar{display: none;} .LBContent .content{margin: 30px 30px 0;} .closePopBtn{display: none; width:40px; height: 40px; background: #fff; position:fixed; top:10px; right: 10px; border-radius: 40px; cursor: pointer; z-index: 2; border:2px solid #000;} .closePopBtn::before, .closePopBtn::after{content: ""; width:80%; height: 5px; background: var(--ColorBlue); border-radius: 5px; position: absolute; top:calc(50% - 2.5px); left: 10%; transform-origin: center;} .closePopBtn::before{transform: rotate(45deg);} .closePopBtn::after{transform: rotate(-45deg);} .singleFilterBlock{ margin: 80px 0 30px; padding: 20px; background: #ddd; border-radius: 12px; position: relative;} .singleFilterBlock h1{font-weight: 300; position: absolute; top:-50px; left: 0;} .singleFilterBlock .layer1.for1{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin-bottom: -10px;} .singleFilterBlock .layer1 > li{display: flex; align-items: flex-start; padding: 10px; padding-right: 0; background: #fff; border-radius: 12px; margin-bottom: 15px;} .singleFilterBlock .layer1 > li:last-child{margin-bottom: 0;} .singleFilterBlock .layer1 > li h2, .singleFilterBlock .selectedBtn{font-size:var(--content-size); line-height: var(--content-LH); display: block; padding: 5px 10px; margin-right: 10px; border-radius: 5px;} .singleFilterBlock .layer1 > li h2{background: var(--blueGradient); color: #fff; white-space: nowrap; margin-bottom: 0;} .singleFilterBlock .layer2{display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; width:100%; margin-bottom: -10px;} .singleFilterBlock .selectedBtn{cursor: pointer; color: #666; margin-bottom: 10px;} .singleFilterBlock .selectedBtn.on{background: #000; color: #fff;} .singleFilterBlock ul.for1 li.selectedBtn{display: block; margin-right: 10px; margin-bottom: 10px; text-align: center; padding: 10px 0;} .singleFilterBlock ul.for1 li.selectedBtn:nth-child(4n){margin-right: 0;} .singleFilterBlock .layer3{display: none; flex-direction: column; align-items: flex-end;} .singleFilterBlock .layer3 > h3{font-size: var(--title-size2); line-height: var(--title-LH2); font-weight: 300; display: block; margin-bottom: 10px; width:100%;} .singleFilterBlock .layer3 > ul{display: flex; flex-wrap: wrap; padding: 10px; padding-right: 0; background: #fff; border-radius: 12px;} .backToLayer2{padding: 10px 20px; background: var(--blueGradient); color: #fff; margin: 15px 0 0; border-radius: 12px; cursor: pointer;} /*lightBox===表單*/ .LBContent.loginBlock{border-radius: 20px; max-width: 500px; display:none; overflow: scroll;} .LBContent.loginBlock .singleLoginBlock{position: static; display: block; min-height:inherit;} .LBContent.loginBlock .singleLoginBlock h2{text-align: center; margin-bottom: 20px;} .LBContent .singleLoginBlock .textsBlock b{color: var(--ColorBlue); font-weight: 900;} /*lightBox===業務*/ #salePanel{background: var(--ColorBlue) url("../images/darkBG.png"); overflow: visible; position: relative; padding-bottom: 80px; margin-top: 90px;} #salePanel .SABasicInfos{display: block; text-align: center; margin-bottom: 50px;} #salePanel .SAHead{width:180px; height: 180px; border-radius: 320px; margin: -90px auto 0;} #salePanel .SAInfos{display: inline-block; text-align: left;} #salePanel .SAName{align-items: center; margin: 10px auto; flex-direction: column;} #salePanel .SAName h1{margin: 10px auto; justify-content: center; font-weight: 900;} #salePanel .addMySalesCollections{display:flex; justify-content: center; padding: 20px 0; margin: 0; height: auto; width: 100%; position: absolute; bottom:0; left: 0; border-radius: 0 0 20px 20px;} #salePanel .addMySalesCollections.cancel{background: #aaa;} #salePanel .addMySalesCollections .texts{display: block;} #salePanel .SAInfos .infos .title{color: #ccc;} #salePanel .functionArea{display: flex; justify-content: space-between; flex-wrap: wrap; color: #fff;} #salePanel .onlineStatus{justify-content: center; color: var(--ColorBlue); margin-bottom: 20px; width: 100%;} #salePanel .on .statusLight::after, #salePanel .statusLight::after{color: var(--ColorBlue);} #salePanel .on .statusLight::before, #salePanel .statusLight::before{border:1px solid var(--ColorBlue);} #salePanel .saleBtnType{margin: 0; width:48%; height: 80px; background:var(--ColorBlue2);} #salePanel .communications .btnP{width: 100%;} #salePanel .callBackBtn.saleBtnType{margin-left: 10px; padding: 0; height: 60px; color: #fff;} #salePanel .addToMySaleBtn{margin-bottom: -50px; justify-content: center;} /*lightBox===客服*/ .SBHead{width:100%; padding: 100px 30px 50px; color: #fff; background: url("../images/serviceBG.jpg") no-repeat center; background-size: cover;} .SBHead h5{font-size: 18px; line-height: 24px;} .SBHead ul{padding-left: 20px;} .SBHead li{margin: 15px 0; list-style: disc;} .SBHead .group{border:1px solid #fff; border-radius: 12px; padding: 30px; margin-top: 50px; background:#0009;} .SBBody{padding: 30px; display: flex; align-items: flex-start; column-gap: 100px; position: relative;} .SBBody::before{content: ""; width:1px; height: calc(100% - 60px); background: var(--ColorBlue); display: block; position: absolute; top:30px; left: 50%;} .SBBody.oneBlock::before{display: none;} .SBBody .group{width:100%;} .singleSBF{width:100%; display: flex; align-items: center; column-gap: 15px;} .singleSBF.freeSize{width:auto;} .singleSBF.outside{flex-direction: column; align-items: flex-start; margin-bottom: 30px;} .singleSBF h2{font-size: 16px; line-height: 16px; display: block; margin: 0 0 10px;} .singleSBF h2.imp{margin-left: -15px;} .singleSBF h2.imp::before{content: "＊"; color: #f00;} .singleSBF label{white-space: nowrap;} .SBFBtn{height: 42px; width:100%; background: var(--ColorBlue); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer;} .SBFBtn.freeSize{width:auto; padding: 0 30px;} .SBFBtn.orange{background:var(--ColorOrange);} input.SBFBtn{appearance:none; outline: none; border:none;} .singleSBF .tips{font-size: 12px; line-height: 18px; text-align: justify; color: #999; margin: 10px 0;} .singleSBF .tips a{color: var(--ColorOrange); margin: 0 5px; text-decoration: underline;} /*lightBox===業務*/ #agentPanel.LBContent{background: var(--ColorBlue);} #agentPanel .content{padding:80px 30px 0; margin: 0; background: var(--ColorBlue);} #agentPanel .businessHead{margin: 0 -30px;} #agentPanel .btnGroup{right: 15px;} #agentPanel .caseListArea{margin: 0; width: 100%;} #agentPanel .listBlock{grid-template-columns: repeat(3, 1fr);} #servicePanel.LBContent{color: var(--ColorBlue);} /* side panel */ .sidePanel{position: fixed; height: 50vh; top:25vh; z-index: 10;} .sidePanel.right{right:0; width:50px; display: flex; justify-content: center; align-items: center;} .sidePanel ul{display: flex; flex-direction: column; justify-content: center; align-items: center;} #sidefunction ul{width:100%; border:1px solid var(--ColorBlue); border-right:none; border-radius: 12px 0 0 12px; background:#fffc;} #sidefunction li{display: block; margin: 10px 0;} #sidefunction li.mob, #sidefunction li span{display: none;} #sidefunction i{width: 24px; height: 24px;} .sidePanel.left{left:10px; width: 50px; display: flex; justify-content: center; align-items: center;} #sideLink ul{width:100%; height: 100%;} #sideLink li{width:100%; border:1px solid var(--ColorBlue); border-radius: 12px; margin: 5px 0; background: #fffc; display: flex; justify-content: center; align-items:center;} #sideLink a{display: block; margin: 5px 0; font-size: 12px; line-height: 14px; font-weight: 500; text-align: center;} /* page外框 */ #pageMainContainer{width:100%; height: 100%; padding: 0; margin: 0; position: relative;} /* Navigation */ #navigation{height: 95px; width:100%; padding:20px 15px; position: absolute; top:0; left: 0; background: linear-gradient(#333E50ee 50%, #333E5099 70%, #333E5000 100%); z-index: 10;} .index #navigation{height: 150px; padding-bottom: 75px;} .navLogo{ height: 100%; display: flex; align-items: center;} .navLogo img{height: 40px; width: auto;} #navigation .functionArea{position: absolute; top:20px; right:15px; height: 55px; display: flex; align-items: center;} #navigation .menu{height: 100%; display: none;} #navigation .mainMenu{display: flex; height:100%; align-items: center;} #navigation .ML1{margin-right:100px; display: flex; align-items: center; height: 30px; font-size: 18px; line-height: 18px; font-weight: 500;} #navigation .ML1 small{display: block; font-size: 10px; line-height: 12px; color: #666; font-weight: 500;} #navigation .subMenu{display: none; position: absolute; top:42px; background: #fffe; flex-direction: column; padding: 30px; min-width: 200px; margin-left: -30px; font-weight: 400; box-shadow: 0 10px 10px #0003;} #navigation .subMenu li{padding: 10px 0; border-bottom:1px solid var(--ColorBlue); position: relative;} #navigation .subMenu li a{z-index: 1; display: block; position: relative; font-size: 16px; padding-right: 10px; transition: all 0.3s;} #navigation .subMenu li::before{content: ""; display: block; position: absolute; top:0; left: 0; width:0; height: 100%; background: var(--ColorBlue); transition: all 0.1s; z-index: 0;} .laptop #navigation .ML1:hover .subMenu{display: flex;} .laptop #navigation .subMenu li:hover a{padding-left: 10px; color: #fff;} .laptop #navigation .subMenu li:hover::before{width: 100%;} #navigation .loginBtn{display: flex; padding: 0 15px; height: 40px; background: #fff; align-items: center; justify-content: center; color: var(--ColorBlue); font-size: 16px; line-height: 24px; border-radius: 50px;} #navBtn{display: none;} #navigation .memberBtn{height: 40px; display: flex; justify-content: center; align-items: center;} #navigation .memberBtn img{margin: 0; width:auto; height: 100%; border-radius: 40px;} #navigation .memberBtn h3{font-size: 18px; line-height: 20px; color: #fff; display: block; margin:0 10px;} #navigation .memberBtn h3 small{display:block; font-size: 12px; line-height: 14px;} .innerPage #navigation{background:#333E50;} .memberTips{background: linear-gradient(to bottom, #ffff 15%, #fffe 30%); position: absolute; right: 55px; top:100px; box-shadow: 0 0 10px #0003; padding: 20px; display: flex; grid-row-gap: 20px; flex-direction: column; z-index: 2;} .memberTips::before{content: ""; display: block; width: 0px; height: 0px; border:20px; border-style: solid; border-color: transparent; border-bottom-color: #fff; position: absolute; top:-38px; right: 30px;} .memberTips .titleGroup h1{font-size: 24px; line-height: 28px; color: #999; font-weight: 500; display: block; border-bottom:1px solid var(--ColorBlue); margin-bottom: 10px;} .memberTips .titleGroup h1 b{color:var(--ColorBlue);} .memberTips .titleGroup h2{display: flex; align-items: center; font-size: 18px; line-height: 24px; color: #666;} .singleMTip{display: flex; column-gap: 5px; align-items: flex-start;} .singleMTip h3{display: block; height: 24px; line-height:24px; font-size: 18px; color: #000;} .singleMTip p{font-size: 13px; line-height: 18px; color: #666; margin-top: -5px;} .MTcloseBtn{width: 24px; height: 24px; background: url("../images/icon_closeBtn.svg") no-repeat center; background-size: contain; cursor: pointer; position: absolute; top:-12px; right: -12px; z-index: 3;} .memberTips.mobile{display: none; top:inherit; bottom: 85px; right: 0; background: #fff; border: solid 2px var(--ColorBlue); padding: 40px 30px 30px;} .memberTips.mobile::before{border-color: transparent; border-top-color: #fff; top:inherit; bottom: -38px; right:15px; z-index: 2;} .memberTips.mobile::after{content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 21px; border-color: transparent; border-top-color: var(--ColorBlue); top:inherit; position: absolute; bottom:-42px; right:14px; z-index: -1;} .memberTips.mobile .MTcloseBtn{top:5px; right: 5px;} .memberTips.laptop.off, .memberTips.mobile.off{display: none;} /* index============================================================================================================ */ /* slide */ #indexMainSlides{width:100%; height: calc(100vh - 60px); min-height: 500px; overflow: hidden;} #indexMainSlides .swiper-slide{width: 100%; height: 100%; background: no-repeat center; background-size: cover;} .main-pagination{margin: 10px 0; text-align: center;} .main-pagination .swiper-pagination-bullet{background: #fff;} /* search panel */ .searchPanel.noshow{display: none;} .searchPanel{width: 100%; background: #333E50bb; position: absolute; left: 0; z-index:5;} .searchPanel .commonContainer{margin: 20px auto;} .STypeSelection{margin: 10px 0; position: relative;} .STypeSelection ul{display: inline-flex; align-items: center; position: relative; z-index: 1;} .STypeSelection li{display: flex; align-items: center; padding: 10px 0; justify-content: center; width:120px; height: 52px; cursor: pointer;} .STypeSelection .btnBG{display: block; width: 33.33%; height: 52px; border-radius: 12px; background: var(--ColorOrange); position: absolute; z-index: -1; top:0; left: 0;} .STypeSelection li span{display: block; padding: 2px 20px; font-size: 16px; line-height:26px; color: #fff; border-bottom:2px solid #fff; font-weight: 200;} .STypeSelection li.on span{font-size: 24px; font-weight: 500; border-bottom:3px solid #fff; transition: all 0.3s;} .SSeachBar{margin: 10px 0; position: relative;} .addFilterBtn{color:var(--ColorBlue); display: flex; justify-content: center; align-items: center; font-size: 18px; line-height: 24px; font-weight: 500; padding: 20px 0; width: 150px; position: absolute; top:0; left: 0; background: linear-gradient(to bottom, #ccc, #fff); border-radius: 12px 0 0 12px; border-right: 1px solid #999; cursor:pointer;} .addFilterBtn::before{display: block; content: ""; width:20px; height: 20px; background: url("../images/icon_add.svg") no-repeat center; background-size: contain; margin-right: 5px;} .SSeachBar input{appearance:none; outline: none; width:100%; padding:20px 170px; color: #999; border:none; background: #fff; border-radius: 12px;} .SSeachBar input[type=submit]{position: absolute; top:0; right:0; width:150px; background: var(--ColorOrange); text-align: center; color: #fff; padding: 20px 0;} .SResult{width: 100%;} .SResult ul{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;} .SResult li{display: flex; align-items: center; padding: 3px 10px; margin: 5px; background:#fff; border-radius: 5px; cursor: pointer; color: #999;} .SResult li.clearAll{background: #fbffca;} .SResult li::before{content: ""; display: block; width:14px; height: 14px; background:url("../images/icon_add.svg") no-repeat center; background-size: contain; transform: rotate(45deg); opacity: 0.3; margin-right: 3px;} .laptop .SResult li:hover{color: var(--ColorBlue);} .laptop .SResult li:hover::before{opacity: 1;} .small .commonContainer{width:calc(100% - 30px);} .small.searchPanel{background: #333E50EE;} .small.searchPanel .commonContainer{display: flex; max-width: none; justify-content: space-between; flex-wrap: wrap; margin: 0 auto;} .small .STypeSelection{width:250px; margin: 10px 5px; display: flex; align-items: center;} .small .STypeSelection li{padding: 0; height:42px; width: auto;} .small .STypeSelection li span, .small .STypeSelection li.on span{font-size: 18px; line-height: 24px;} .small .STypeSelection li span{border-bottom-width: 0;} .small .STypeSelection li.on span{border-bottom-width: 3px;} /*.small .STypeSelection .btnBG{display: none;}*/ .small .SSeachBar{width:calc(100% - 285px); margin: 20px 5px;} .small .SSeachBar input{padding: 10px 150px; font-size: 18px; line-height: inherit;} .small .SSeachBar input[type=submit], .small .addFilterBtn{padding: 10px; font-size: 18px; line-height:inherit; width:130px;} .small .SResult{width: calc(100% + 30px); background:linear-gradient(to bottom, #fc0, var(--ColorOrange)); margin:0 -15px;} .small .SResult ul{padding: 10px 15px;} .small .SResult ul::before{content: "已篩選條件："; color: #fff; font-size: 16px; font-weight: 500;} .indexSingleBlock{padding: 150px 0 0; display: flex;} .titlegroup{width:200px; margin-right: 20px; position: relative;} .titlegroup .infos{margin-top:30px;} .titlegroup .infos span{display: block; color:var(--ColorGolden); font-size: 12px; line-height: 14px;} .titlegroup .infos span::before{content: "--"; display: block;} .titlegroup .btnCheck{position: absolute; left: 0; bottom: 50px;} .menuBlocksArea{width: calc(100% - 222px);} .menuBlocksArea{display: flex; flex-wrap: wrap; justify-content: space-between;} .singleBlock{color:var(--ColorBlue); width:31%; max-width: 250px; box-shadow: 0 0 10px #0006; position: relative; margin-bottom: 50px; transition:all 0.3s; background: #fff;} .singleBlock.lastBtn{display: none;} .laptop .singleBlock:hover{margin:-5px 5px 55px -5px; box-shadow: 5px 5px 10px #0003;} .singleBlock a{display: block;} .MBIMG, .MBIMG img{width:100%; aspect-ratio:5/3; object-fit: cover; object-position: top left; position: relative;} /*.MBImg{width: 100%; aspect-ratio:5/3; background: no-repeat top left; background-size: cover;}*/ .MBAdress{display:block; font-size: 12px; line-height: 14px; margin:5px 8px; } .MBTags{display: block; margin: 15px 8px 5px;} .MBTags a{color: #000; font-size: 14px; display: inline-block; margin-left: -2px; margin-right: 5px; padding: 0; font-weight: 500; cursor: default;} .MBArea{margin: 5px 8px; font-weight: 300; font-size: 14px; line-height: 14px;} .MBPrice{display:flex; align-items: center; color: var(--ColorOrange2); font-size: 32px; font-weight: 900; margin: 10px 8px; font-family: "Arial";} .MBPrice small{font-size: 18px; font-weight: 400; font-family: "new-order";} .MBPrice::before{content: "拍"; font-size: 14px; font-weight: 400; display: flex; align-items: center; justify-content: center; width:24px; height: 24px; line-height: 24px; border: 1px solid var(--ColorOrange); border-radius: 24px; margin-right: 5px;} .btnAddFavorite{position: absolute; right: 10px; bottom: 10px; cursor: pointer; margin-bottom: 0;} .MBPrice.oldPrice{display: flex; align-items: center; justify-content: flex-start; column-gap: 5px;} .MBPrice.oldPrice::before{content: "原拍價："; border:none; width:auto; height: auto; color: #999; margin: 0; padding: 0; margin-top: 20px;} .MBPrice.oldPrice span, .MBPrice.oldPrice small{font-size: 16px; line-height: 16px; text-decoration: line-through; color: #999; font-weight: 400; margin-top: 20px;} .MBPrice.oldPrice span.downPercent, .MBPrice.oldPrice span.upPercent{font-size: 12px; line-height: 12px; color: #fff; background: #a40000; border-radius: 6px; padding: 5px 10px; text-decoration:none; flex-direction: row; column-gap: 5px; display: flex; align-items: center;} .MBPrice.oldPrice span.downPercent::before, .MBPrice.oldPrice span.upPercent::before{content: ""; display: block; width: 18px; height: 18px; background: url("../images/icon_priceDown.svg") no-repeat center; background-size:contain;} .MBPrice.oldPrice span.upPercent{background: var(--green);} .MBPrice.oldPrice span.upPercent::before{background-image: url("../images/icon_priceUp.svg");} .clearAlertBtn{display: flex; align-items: center; padding: 5px 20px; background:var(--ColorOrange); color: #fff; border-radius: 12px;} .clearAlertBtn::before{content: ""; display: block; width: 24px; height: 24px; background:url("../images/icon_deleteBtn.svg") no-repeat center; background-size: contain;} .singleBlock.soldOut a, .singleBlock.suspension a{position: relative;} .singleBlock.soldOut a::after{content: ""; display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0; background: url("../images/soldOut_BG_single.png") no-repeat center #000a; background-size: contain;} .singleBlock.suspension a::after{content: ""; display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0; background: url("../images/suspension_BG_single.png") no-repeat center #000a; background-size: contain;} .soldOut .MBTags a::after{display: none;} .suspension .MBTags a::after{display: none;} /* 廣告1 */ .mobileV{display: none;} .laptopV{display: block;} .picBlock.type1{margin-top: 50px; background: url("../images/darkBG.png") var(--ColorBlue2);} .picBlock.type1 img{width: 100%; height: auto; max-width: 1920px; margin: 0 auto;} /* 廣告2 */ .picBlock.type2{margin-top: 100px; margin-bottom: 50px; position: relative;} .picBlock.type2::before{content: ""; display: block; background: url("../images/lightBG.png") var(--ColorBlue2); width:100%; height: calc(100% - 100px); position: absolute; top:50px; left: 0; z-index: -1;} .picBlock.type2 a{display: flex; margin: -50px auto;} .picBlock.type2 a img{ width: 70%; height: auto;} .picBlock.type2 .textContent{width:30%; color: #fff; padding: 15px; background:#000;} .picBlock.type2 .textContent .title{font-size: 32px; font-weight: 200;} .picBlock.type2 .textContent .subTitle{font-size: 16px; line-height: 20px;} .picBlock.type2 .textContent .content{font-size: 14px; line-height: 18px; margin-top: 50px;} /*.singleBlock.clip{background: #fff; rl("../images/colorBar.jpg") #fff no-repeat bottom; background-size:contain; padding-bottom: 20px;}*/ .singleBlock.clip{background: #fff; background-size:contain;} .singleBlock.clip a{padding-bottom: 20px; display: block; position: relative;} .singleBlock.clip a::after{content: "進入觀看"; font-size: 24px; line-height: 24px; color: var(--ColorOrange); font-weight: 900; position: absolute; bottom: 5px; right: 5px;} .clip .MBIMG::after{content: ""; width: 100%; height: 100%; display: block; background:url("../images/clip_hover.png") no-repeat center; background-size:cover; position: absolute; top:0; left: 0; opacity: 0; transition: all 0.3s;} .laptop .singleBlock.clip:hover{margin:0 0 50px; box-shadow: 0 0 10px #0006;} .laptop .singleBlock.clip:hover .MBIMG::after{opacity: 1;} .MBInfos{margin: 10px 8px 5px; min-height: 80px; color: #666; font-size: var(--content-size); line-height: var(--content-LH); text-align: justify;} .supplies{margin-top: 100px; padding: 100px 0; background:#f6f6f6; color:var(--ColorBlue);} .supplies h1{display: block; text-align: center;} .suppliesList{display: flex; justify-content: space-between; flex-wrap: wrap;} .suppliesList li{width:18%; display: block; margin: 20px 0;} .suppliesList li img{width:100%; max-width: 120px; height: auto; margin: 0 auto; display: block;} /*.chatPanel{padding: 150px 0; background:url("../images/chatPanelBG.jpg") no-repeat center; background-size:cover;} .chatPanel h1{color: #fff; display: block; width: 200px;} .chatPanel .commonContainer{display: flex;} .chatPanel .chatInputBlock{border:10px solid #88BD91; border-radius: 12px; min-height: 500px; width:calc(100% - 200px); background: #fff; } .chatPanel a.chatBtn{display: none;}*/ .chatPanel{position: relative;} .chatPanel::before{content: ""; display: block; width:100%; height: 20%; position: absolute; top:40%; left: 0; z-index: 0; background: var(--ColorBlue2) url("../images/darkBG.png");} .chatPanel::after{content: ""; display: block; width: 60%; height: 10px; position: absolute; bottom:0; left: 20%; z-index: 0; background: var(--ColorBlue2);} .chatPanel .commonContainer{padding: 100px 0; z-index: 1; position: relative;} .chatPanel h1{text-align: center; width: 100%; display: block;} .chatPanel .subtitle{color: #ccc; font-size: 18px; line-height: 24px; text-align: center; margin-top: 20px;} .chatPanel .subtitle a{color: #fff; margin: 0 5px;} .chatPanel .subtitle a.btnP{display:flex; width:240px; height: 50px; align-items: center; justify-content: center; background: var(--ColorOrange); border-radius: 12px; margin: 20px auto; color: #fff;} .occupations{display: flex; column-gap: 15px; grid-row-gap: 20px; margin-top: 50px;} .occupations > li{text-align: center; background: linear-gradient(var(--ColorBlue) 0 30%, #fff 40%, #eee 100%); border-radius: 12px;} .occupations h2{display: inline-flex; margin:0; color: #fff; font-size:24px; line-height: 24px; align-items: center; justify-content: center; font-style: italic; padding: 5px 20px; border-radius: 100px; border:1px solid #fff;} .chatPanel .singleBusinessBlock{box-shadow: none; margin: 10px 0; background: none;} .chatPanel .singleBusinessBlock .SAHead{width:100px; height:auto; margin: 0; padding: 0;} .chatPanel .singleBusinessBlock img{width: 100%; height: auto; padding: 0; margin: 0; border-radius: 50%;} .chatPanel .singleBusinessBlock a{display: flex; column-gap: 10px; flex-direction: row; align-items: center; color: var(--ColorBlue);} .chatPanel .singleBusinessBlock .SAName{margin-bottom: 0;} .chatPanel .singleBusinessBlock .SAName h1{display: flex; flex-direction: column; align-items: flex-start; font-size: 16px; line-height: 24px;} .chatPanel .singleBusinessBlock .SAName small{margin: 0; padding: 0; color: #999; padding: 5px 10px; background:#eee; border-radius: 6px; margin-top: 0;} .chatPanel .singleBusinessBlock.main{padding: 10px; border-radius: 12px; background-image:url("../images/darkBG.png"); border:none;} .chatPanel .singleBusinessBlock.main a{flex-direction: column; align-content: center;} .chatPanel .singleBusinessBlock.main .SAHead{width: 70%; height: auto; margin: 30px auto 10px;} .chatPanel .singleBusinessBlock.main .SAName h1{align-items: center; grid-row-gap: 5px; font-size: 22px; line-height: 32px;} .chatPanel .singleBusinessBlock.main .SAName small{padding: 0; margin: 0; background: none;} .chatPanel .singleBusinessBlock.main .SAGroup .infos{font-size: 14px; line-height: 18px; display: flex; align-items: center; flex-direction: column; margin-bottom: 10px; grid-row-gap: 5px;} .chatPanel .singleBusinessBlock.main .SAGroup .infos .title{width: 100%; text-align: center; padding: 5px; border-radius: 6px; background: #fff; color: #999;} .chatPanel .occ1 .singleBusinessBlock.main{background-color: #fdd;} .chatPanel .occ2 .singleBusinessBlock.main{background-color: #cec;} .chatPanel .occ3 .singleBusinessBlock.main{background-color: #fec;} .chatPanel .occ4 .singleBusinessBlock.main{background-color: #edc;} .chatPanel .occ5 .singleBusinessBlock.main{background-color: #cdd;} .indexSingleBlock.news{padding: 150px 5% 0;} .news .titlegroup{width:250px; margin-right: 50px;} .titlegroup .tags li{display: inline-block; margin-right: 10px;} .titlegroup .tags li a{font-size: 14px; line-height: 18px; color: var(--ColorGolden);} .titlegroup .tags li a:hover{text-decoration: underline;} .news .singleBlock{max-width: 400px; width:23%;} .news .MBTags{margin: 5px 8px 20px;} .news .MBTags a{font-size: 18px; line-height: 24px;} .ourService{display: flex; margin-top: 100px; color: #fff; text-align: center;} .singleServiceBlock{width:100%; position: relative;} .singleServiceBlock::before{content: ""; width: 100%; height: 100%; display: block; position: absolute; top:0; left: 0; z-index: -1; background: no-repeat center; background-size: cover; opacity: 0.5;} .singleServiceBlock::after{content: ""; width: 100%; height: 100%; display: block; position: absolute; top:0; left: 0; z-index: -2; background: var(--ColorBlue);} .singleServiceBlock.SB1::before{background-image: url("../images/index_ourService_BG1.jpg");} .singleServiceBlock.SB2::before{background-image: url("../images/index_ourService_BG2.jpg");} .singleServiceBlock.SB3::before{background-image: url("../images/index_ourService_BG3.jpg");} .singleServiceBlock h1{display: inline-block; padding: 70px 0 0; padding-left: 20px; margin-bottom: 50px; position: relative;} .singleServiceBlock h1::before{content: ""; display: block; width: 10px; height: 100%; position: absolute; top:0; left: 0; background: #fff;} .singleServiceBlock ul{display: flex; flex-direction: column; width:80%; max-width: 300px; margin: 0 auto 100px;} .singleServiceBlock li{display: block; margin-bottom: 30px;} .singleServiceBlock li a{display: block; color: #fff; font-size: 18px; line-height: 24px; font-weight: 400;} .singleServiceBlock li a:hover{text-decoration: underline;} .singleServiceBlock.SB2 li a{text-align:justify;} /* footer */ footer .functionArea{color: #fff; background: var(--ColorBlue); padding: 50px 0; border-top:15px solid #fff3;} footer .functionArea a{color:#fff;} footer .functionArea a:hover{color:var(--ColorOrange); text-decoration: underline;} .footerNav{display: flex; padding: 20px 0; border-bottom:2px solid #fff;} .footerNav li{margin-right: 20px;} .footerNav li.title{color:var(--ColorGolden);} .footerNav li a{font-size: 16px; line-height: 24px; font-weight: 400; color: #fff;} .mapArea .city{display: grid; grid-template-columns: repeat(10, 1fr); margin: 30px 0; column-gap: 10px; row-gap:10px;} .mapArea .city li{padding:15px; display: flex; justify-content: center; align-items: center; border:1px solid #fff; border-radius: 12px;} .mapArea .city li.on{background: #fff;} .mapArea .city li.on a{color: var(--ColorBlue); font-weight: 900; cursor: default;} .mapArea .city li.on a:hover{text-decoration: none;} .mapArea .area li{display: block; margin-bottom: 20px; padding-left: 80px; position: relative;} .mapArea .area li .title{color: var(--ColorGolden); display: block; position: absolute; top:0; left: 0;} .mapArea .area li a{margin-right: 10px;} footer .infosArea{padding: 50px 0; background: #0b1425; color: #fff;} footer .infosArea a{color: #ccc;} footer .p1{display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid var(--ColorBlue); padding-bottom: 20px; margin-bottom: 20px;} footer .footerLogo{display: block; text-indent: -999999px; overflow: hidden; background: url("../images/footer_logo.svg") no-repeat left center; background-size: contain; width:130px; height: 50px;} footer .socialMedia{display: flex;} footer .socialMedia li{display: block; margin-left: 15px;} footer .p2{display: flex; justify-content: space-between; font-size: 14px; line-height: 24px;} footer .copyright{display: flex; flex-direction: column; align-items: flex-end;} footer .statements{display: flex; margin-bottom: 24px;} footer .statements li{display: block; padding: 0 10px; border-right:1px solid var(--ColorBlue);} footer .statements li:last-child{padding-right: 0; border-right: none;} .footerNav2{background: #1c2536; padding: 80px 0;} .footerNav2 h1{font-size: 28px; line-height: 38px; color: #ffd114; font-weight: 400;} .FNBtns{margin: 30px 0; display: flex; align-items: center; justify-content: space-between; width: 100%;} .FNBtns li{display: block; width: 22%;} .FNBtns li a{display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px 0; border-radius: 12px; background: linear-gradient(to bottom, #f6cf2a, #d98129); color: #fff; text-shadow: 2px 2px 2px #0003;} .FNBtns a .texts{display: flex; flex-direction: column; align-items: flex-start; grid-row-gap: 5px;} .FNBtns a .texts .CN{font-size: 32px; line-height: 32px; font-weight: 900;} .FNBtns a .texts .EN{font-size: 20px; line-height: 20px; font-weight: 200;} /*列表頁*/ .innerPage .pageTopBN{width:100%; min-height: 400px; background: url("../images/lightBG.png") #aaa;} .innerPage .searchPanel{background: none;} .innerPage .searchPanel .commonContainer{background: #333E50bb; padding: 20px; border-radius: 12px;} .innerPage .small.searchPanel{background: #333E50ee;} .innerPage .small.searchPanel .commonContainer{background: none; width:auto; padding:0 15px;} .pageContent{position: relative;} .pageContent.stable{padding-top:95px;} .breadcrumb{margin-top: -100px; background: var(--ColorBlue2); position: sticky; z-index: 1; top:0; font-size: var(--content-size); line-height: var(--content-LH);} .breadcrumb::before{content: ""; display: block; width:100%; height: 100px; transition: all 0.2s;} .breadcrumb.on::before{height: 160px;} .breadcrumb .commonContainer{position: relative;} .BCBar{display: flex; align-items: center; border:0px solid #ddd; border-radius: 12px; height: 40px; background:#fff; margin-bottom: 20px; overflow: hidden;} .BCBar i.document{display: flex; justify-content: center; align-items: center; background: var(--ColorBlue); width: 60px; height: 40px;} .BCBar i.document::before{content: ""; display: block; width: 24px; height: 24px; background: url("../images/icon_folder.svg") no-repeat center; background-size: contain;} .BCBar .path{display: flex; align-items: center; padding: 0 10px; flex-wrap: wrap;} .BCBar .path li{display: block; color: #999; padding-right: 5px;} .BCBar .path li::before{content: " / "; color: #666;} .BCBar .path li:first-child::before{display: none;} .BCBar .path li a{color: var(--ColorBlue);} .stable .BCBar{margin: 20px 0;} .breadcrumb .sortBtn{position: absolute; top:0px; right: 0px; background: var(--ColorBlue); border-radius:0 12px 12px 0; cursor: pointer; transition: all 0.3s; overflow: hidden;} .breadcrumb .sortBtn .title{padding:0 20px; height: 40px; display: flex; align-items: center;} .breadcrumb .sortBtn .title span{display: block; padding: 0 5px;} .breadcrumb .sortBtn .title span::before{content:"排序：";} .breadcrumb .sortBtn .sortList{display: none; padding: 20px; text-align: center;} .breadcrumb .sortBtn .sortList li{display: block; margin: 0 -20px 0; border-bottom:1px solid #999; padding: 10px 0;} .breadcrumb .sortBtn .sortList li:last-child{border:none;} .breadcrumb .sortBtn .sortList li.on{background:var(--ColorBlue); color: #fff;} .breadcrumb .sortBtn .sortList li.on::before{content: ">> ";} .breadcrumb .sortBtn.on{border-radius: 0 12px 12px 12px;} .breadcrumb.stable{position: static; margin: 0;} .breadcrumb.stable::before{display: none;} .caseListArea{margin: 100px auto;} .caseListArea .titlegroup{width: 100%; display: flex; justify-content: space-between; align-items: flex-end;} .caseListArea .titlegroup .functionArea{display: flex; align-items: center;} .listStyle{display: flex;} .listStyle li{display: flex; justify-content: center; align-items: center; width:24px; height: 24px; margin-right: 5px; overflow: hidden; text-indent: -9999px; cursor: pointer; border:1px solid #fff; border-radius: 3px; opacity: 0.3;} .listStyle li.on{background: none; cursor: default; opacity: 1;} .listStyle li::before{content: ""; display: block; width:18px; height: 18px; background:no-repeat center; background-size: contain; transition:all 0.3s;} .listStyle li.sqMode::before{background-image: url("../images/icon_squareMode.svg");} .listStyle li.liMode::before{background-image: url("../images/icon_listMode.svg");} .caseListArea .functionArea .total{font-size: 14px; line-height: 14px; color: #999; padding-left: 10px;} .listBlock{margin: 20px 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 2%; grid-row-gap: 50px;} .listBlock .singleBlock{margin-bottom: 0; width:100%; max-width: none;} .listBlock .singleBlock:hover{margin-bottom: 5px;} .listBlock.list{grid-template-columns: 1fr; column-gap: 0;} .listBlock.list .singleBlock{display:flex; justify-content: space-between; align-items: flex-start;} .listBlock.list .singleBlock a{display: block; width:100%; max-width: 420px;} .listBlock.list .singleBlock .group1{width: 100%; height: 100%; padding: 5px;} .listBlock.list .singleBlock .MBAdress, .listBlock.list .singleBlock .MBTags a, .listBlock.list .singleBlock .MBArea{font-size: 20px; line-height: 28px;} .listBlock.list .singleBlock .MBTags{display: flex; margin-top: 30px;} .listBlock.list .singleBlock .MBTags a{width: auto;} .listBlock.list .singleBlock .MBPrice{white-space: nowrap;} .listBlock.list .singleBlock .btnAddFavorite{margin: 0;} .pageSelection{margin: 70px 0;} .pageSelection ul{display: flex; width:100%; justify-content: center; align-items: center;} .pageSelection li{display: block; margin: 0 10px;} .pageSelection li a, .pageSelection span{display: flex; justify-content: center; align-items: center; width:32px; height: 32px; font-size: 18px; line-height: 18px; color: #999; border-radius: 12px; border:1px solid #fff0;} .pageSelection li a:hover{color: #666; border-color: #666;} .pageSelection li span{background:var(--ColorBlue); color: #fff; border-color:#fff;} /*服務人員面板＝＝＝扁版*/ .salePanel{height: 110px; padding:5px 0; background: url("../images/darkBG.png") #000; color: #fff; position: sticky; top:0; z-index: 2;} .salePanel .commonContainer{display: flex; justify-content: space-between; align-items: center; width:98%; height: 100%;} .SABasicInfos{display:flex; align-items: center;} .SAHead{width:100px; height: 100px; border:3px solid #fff; border-radius: 80px; overflow: hidden; margin-right: 10px;} .SAHead img{width: 100%; height: auto;} .SAName{display: flex; align-items: center; margin-bottom: 10px;} .SAName h1{display: flex; align-items: flex-end; margin:0; font-size: 32px; line-height: 32px; font-weight: 400;} .SAName .title{font-sizw:16px; line-height: 16px; padding-left: 10px;} .addMySalesCollections{margin-left: 10px; padding: 0; display: flex; align-items: center; height: 26px; background: var(--ColorOrange); border-radius: 26px; color: #fff; font-size: 20px; line-height: 20px;} .addMySalesCollections.cancel{background: #eee; color: var(--ColorBlue);} .addMySalesCollections .add{padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; width:26px; height: 26px; font-family: "verdana";} .addMySalesCollections.cancel .add{transform: scaleY(0.8);} .addMySalesCollections .texts{font-size: 16px; line-height: 16px; height: 16px; padding: 0; margin: 0; padding-right:10px;} .addMySalesCollections:hover{background: var(--ColorOrange);} .addMySalesCollections.cancel:hover{background: #eee;} .addMySalesCollections:hover .texts{display: block;} .SAInfos .infos{font-size: 16px; line-height: 20px;} .saleBtnType{height: 60px; display: flex; justify-content: center; align-items: center; padding: 0 20px; border:1px solid #fff; background:#000; border-radius: 12px; margin-left: 10px;} .saleBtnType.red{background:#a40000;} /*離線******************/ .salePanel .functionArea{display: flex; justify-content: center; align-items: center; color: #fff;} .onlineStatus{display: flex; align-items:center;} .statusLight{display: flex; align-items: center;} .statusLight::before{content: ""; display: block; width: 20px; height: 20px; background:#a40000; border-radius: 20px;} .statusLight::after{content:"離線"; display: block; text-indent: 10px; font-size: 18px; line-height: 20px; color:#fff9;} .communications .btnP{width:35px; height: 35px; background: no-repeat center; background-size: contain; margin: 0 10px;} .phoneBtn.btnP{background-image: url("../images/icon_phone_green.svg"); display: none;} .lineBtn.btnP{background-image: url("../images/icon_line_green.svg");} /*線上******************/ .on .statusLight::before{background: var(--green);} .on .statusLight::after{content: "線上"; color: #fff;} .on .callBackBtn{display: none;} .on .phoneBtn.btnP{display: block;} /*業務按鈕*******************/ .addToMySaleBtn{font-size: var(--title-size); line-height: var(--title-LH); font-weight: 500; display: flex; align-items: center; cursor: pointer;} .addToMySaleBtn::before{content: ""; display: block; width: 60px; height: 60px; margin-right: 5px; background: url("../images/icon_addToMySale.svg") no-repeat center; background-size: contain;} .pageFunctions{width: 100%; padding: 10px 0; background: var(--ColorBlue2); position: sticky; top:110px; z-index: 2;} .pageFunctions .commonContainer{width: 98%; display: flex; justify-content: flex-end; align-items: center;} .pageFunctions .btnP{font-size: 14px; line-height: 28px; height: 28px; padding: 0 20px; margin-left: 10px; border-radius: 20px; background: var(--ColorBlue); color: #fff; display: flex; align-items: center;} .pageFunctions .btnP::before{content: ""; width: 18px; height: 18px; display: block; background:no-repeat center; background-size: contain; margin-right: 5px;} .pageFunctions .papers::before{background-image: url("../images/icon_papers.svg");} .pageFunctions .prints::before{background-image: url("../images/icon_print.svg");} .pageFunctions .addfavorite::before{background-image: url("../images/icon_addFavorite_white.svg");} .pageFunctions .addfavorite.cancel::before{background-image: url("../images/icon_cancelFavorite_white.svg");} .pageFunctions .addfavorite.cancel::after{content: "取消";} .pageFunctions .share::before{background-image: url("../images/icon_share.svg");} .pageFunctions .report::before{background-image: url("../images/icon_report.svg");} /*案件內容＊＊＊＊＊＊＊*/ .caseContent{margin: 100px auto;} .caseContent .titlegroup{display:flex; flex-direction: column; width: 100%; position: relative; margin-bottom: 10px; grid-row-gap: 10px; align-items: flex-start;} .caseContent .MBAdress{display: flex; align-items: center; font-size: 24px; line-height: 24px; padding:0px; margin: 0; column-gap: 10px;} .caseContent .MBAdress::before{content: ""; display: block; width:8px; height: 24px; background:var(--ColorOrange);} .MBAdress ul{display: flex; margin: 0; align-items: center; column-gap: 10px; padding: 5px 10px; background:var(--ColorBlue2); border-radius: 6px;} .MBAdress li a{display: flex; align-items: center; color: #fff; font-size: 14px; text-decoration: underline;} .MBAdress li a::before{content: ""; display: block; width:20px; height: 20px; margin-right: 5px; background:no-repeat center; background-size: contain;} .MBAdress li a.map::before{background-image: url("../images/icon_map.svg");} .MBAdress li a.street::before{background-image: url("../images/icon_street.svg");} .MBAdress li a.navigation::before{background-image: url("../images/icon_navi.svg");} .caseContent .MBPrice{position: absolute; right: 0; bottom:0; margin: 0; padding: 0; font-size: 42px; line-height: 42px; height: auto; display: flex; align-items: center; justify-content: center;} .caseContent .MBPrice::before{display: none;} .caseContent .MBPrice small{font-size: 18px;} .caseContent .MBPrice small.title{font-size: 14px; line-height: 14px; padding: 0 10px; margin-right:5px; border-radius: 6px; color: #fff; background:var(--ColorOrange); height: 28px; display: flex; align-items: center; justify-content: center;} .caseContent .MBPrice small span{color: var(--ColorGolden);} .systemInfos{display: flex; width:100%; padding: 10px 0; border-top:1px solid #fff; font-size: 14px; line-height: 18px; color: #666;} .systemInfos .title{font-weight: 500; color: #aaa;} .systemInfos li{padding-right: 10px; margin-right: 10px; border-right:1px solid #aaa; color: #fff;} .systemInfos li:last-child{margin: 0; padding: 0; border:none;} .caseContent .caseGroup.g1{margin: 50px 0; display: grid; grid-template-columns: 640px auto; column-gap: 50px;} #caseSlides{width:100%; overflow: hidden; margin-bottom: 30px;} #caseSlides img{width: 100%; aspect-ratio:5/3; object-fit: cover; object-position: top left;} .case-pagination{text-align: center; margin: -10px 0 20px;} .case-pagination .swiper-pagination-bullet {background:#fff;} .caseContent .caseGroup.g3 .infoBlock{padding-bottom: 20px; margin-bottom: 20px; border-bottom:1px solid var(--ColorBlue);} .caseContent .caseGroup.g3 .infoBlock:last-child{margin-bottom: 0; border:none;} .caseContent .caseGroup.g3 h2{font-size: 20px; line-height: 20px; color: var(--ColorOrange); margin-bottom: 20px;} .infoBlock .MBTags{margin:0 0 20px;} .infoBlock .MBTags a{font-size: var(--content-size); padding: 2px 8px; margin-right: 10px; cursor: default; color: #fff; background: var(--ColorBlue2); border-radius: 5px;} .laptop .infoBlock .MBTags a:hover{text-decoration: none;} .infoBlock li{font-size: var(--content-size); line-height: var(--content-LH); display: block; margin-bottom: 15px;} .infoBlock li .tips{padding: 5px; font-size: 14px; color: #999; line-height: 24px; text-align: justify; border: 1px solid #999; border-radius: 6px; margin-top: 5px;} .infoBlock li .title{color: #999;} .infoBlock ul.shortSize{display: grid; grid-template-columns: repeat(2,1fr); column-gap: 10px; grid-row-gap: 15px;} .infoBlock ul.shortSize li{margin: 0;} .caseTypeContainer .singleForm{margin: 0; padding:50px 10px;} .caseTypeContainer .typeTitle{font-size: 28px; line-height: 32px; color: #fff; background:var(--ColorOrange); border-radius: 50px 0 0 50px; padding:10px 30px; display: block; margin:0 -10px 20px 0; display: flex; align-items: center; justify-content: flex-start; column-gap: 10px;} .caseTypeContainer .typeTitle::before{content: ""; display: block; width: 32px; height: 32px; background: url("../images/icon_folder_color.svg") no-repeat center; background-size: contain;} .tableStyle .gridGroup2, .tableStyle .gridGroup3, .tableStyle .gridGroup5{border: 1px solid #ccc; padding: 5px; padding: 5px; column-gap: 5px; grid-row-gap: 5px;} .tableStyle .group4{flex-direction: column; width: 100%; grid-row-gap: 5px;} .tableStyle .TSTitle, .tableStyle .TSTitle2, .tableStyle .TSContent, .tableStyle .TSContent2{border:none; padding: 10px; display: block; width:100%; margin: 0; background: #eee; text-align: center;} .tableStyle .TSTitle{border-bottom:3px solid #aaa;} .tableStyle .TSContent{background: none; color: var(--ColorBlue);} .tableStyle div.TSContent{border:1px solid #ccc;} .tableStyle .TSContent2{text-align: justify; background: none; color: var(--ColorBlue);} .tableStyle .TSList li{margin-bottom: 10px; margin-left: 16px; list-style: decimal;} .tableStyle .outsideLine{border: none; border-top:1px solid #aaa; border-radius:0;} .tableStyle .alignSide{text-align: justify;} .popIMG{display: block; width: 95%; margin: 20px auto;} .popIMG img{width: 100%; height: auto;} .caseContent .caseGroup.g4{display: grid; grid-template-columns: 150px auto; border-radius: 20px; border:1px solid var(--ColorBlue);} .caseTypeMenu{background: var(--ColorBlue2) url("../images/darkBG.png"); padding:30px 10px; border-radius: 20px 0 0 20px;} .caseTypeMenu ul{display: block; position: sticky; top:165px; z-index: 1;} .caseTypeMenu li{display: block; margin-bottom: 20px; margin-right: -10px; color: #fff; font-size: 20px; line-height: 20px; font-weight: 900; padding: 10px 0; text-align: center; cursor: pointer;} .caseTypeMenu li.on{background: #fff; color: var(--ColorBlue); font-weight: 500; border-radius: 100px 0 0 100px;} .caseTypeContainer{padding: 30px 10px; background: #fff; border-radius: 0 20px 20px 0; color:var(--ColorBlue);} .caseTypeContainer .singleForm h2{color:var(--ColorBlue); width: 100%;} .caseTypeContainer .singleForm .title{color: var(--ColorBlue);} .caseTypeContainer a.formBtn{color: #fff;} .QAStyle > li{display: block; margin-bottom: 20px;} .QAStyle h3{display: block; font-size: 16px; line-height: 42px; height: 42px; background: #eee; border-bottom:1px solid var(--ColorBlue); padding: 0 10px;} .QAStyle li ul, .QAStyle p{display: block; padding: 30px 20px; font-size: var(--content-size); line-height:24px; color: #666;} .QAStyle li li{list-style: decimal; margin-bottom: 20px; margin-left: 15px;} .QAStyle .subLine{color: #999; padding-left: 10px; border-left:8px solid #999;} .caseTable{display: table; width:100%;} .caseTr{display: table-row;} .caseTd{display: table-cell; padding: 10px 5px; text-align: center; vertical-align: middle;} .caseTr:nth-child(even){background: #eee;} .caseTd.t3{text-align: left; color: #999;} .caseTd.t4{text-align: right;} .caseSoldTimes{display: flex; align-items: center; justify-content: center; padding: 5px; border-radius: 100px; color: var(--ColorOrange); border:1px solid var(--ColorOrange); } .caseSoldType{color: var(--ColorOrange); font-weight: 900;} .advancedBlock{width: 100%; height: 400px; padding: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ccc; border:1px solid #ccc; border-radius: 20px; margin-bottom: 50px;} .advancedBlock h1{color: #aaa;} .advancedBlock p{font-size: 14px; line-height: 24px; margin: 30px 0;} .advancedBlock a{display: flex; align-items: center; justify-content: center; padding: 10px; width: 200px; background:#ccc; color: #fff; border-radius: 12px;} .advancedBlock a:hover{background:var(--ColorOrange);} .advancedBlock .singleCopy a{background: none; color: var(--ColorBlue);} .advancedBlock .singleCopy a .copyPrintTime{background: #fff; color: var(--ColorBlue);} .advancedBlock .singleCopy a .copyPrintTime i.pt{background-image: url("../images/icon_printCopy_Dark.svg");} .advancedBlock .singleCopy a .copyPrintTime .time{color: var(--ColorBlue);} .advancedBlock .singleCopy a h3{color: var(--ColorBlue);} .caseAlert{margin: 30px 0 0; color: #999; font-size: 0.8em;} .recommandArea{padding: 80px 0; background: var(--ColorBlue2) url("../images/darkBG.png"); margin-bottom: -50px;} .recommandArea h1 small{display: inline-block;} /*售出*/ .soldOut .salePanel, .suspension .salePanel{display: none;} .soldOut .pageFunctions, .suspension .pageFunctions{top:0;} .soldOut .pageContent.stable{background: url("../images/soldOut_BG.png");} .suspension .pageContent.stable{background: url("../images/suspension_BG.png");} /*登入系統-----------------------------------------------*/ .loginContainer{display: grid; grid-template-columns: 450px auto; border-radius: 20px; box-shadow: 0 0 10px #0003; margin: 50px auto;} .loginBlock{overflow: hidden; border-radius: 20px 0 0 20px; display: block; position: relative;} .loginBlock .singleLoginBlock{width:100%; max-width: none; min-height: 700px; display: none; align-items: center; justify-content: center; flex-direction: column; margin: 0; padding:40px; position: absolute; top:0; left: 0; background:#fff;} .loginBG{border-radius: 0 20px 20px 0; background: url("../images/login_BG.jpg") no-repeat center; background-size:cover;} .singleLoginBlock h4{font-size: 18px; line-height: 22px; font-weight: 400;} .singleLoginBlock input[type="text"], .singleLoginBlock select{font-size: 16px; line-height: 42px; color: #aaa; padding: 0 10px; margin: 10px 0; outline: none; border:1px solid #999; border-radius: 12px; width:100%; height: 42px;} .singleLoginBlock input[type="text"]:focus{color: #666;} .phoneNumInput{width: 100%; position: relative;} .phoneNumInput i.loginPhone, .phoneNumInput i.passwords{position: absolute; top:16px; left: 10px; z-index: 1;} .singleLoginBlock .phoneNumInput input{padding-left: 50px; font-weight: 900;} .singleLoginBlock .checkBlock{width:100%; padding-left: 15px; display: flex; align-items: flex-start; font-size:var(--content-size); line-height:var(--content-size);} .singleLoginBlock .checkBlock label{margin-left: 5px; margin-bottom: 10px;} .singleLoginBlock .loginBtn{width:100%; height: 42px; background: var(--ColorOrange); font-size: 18px; line-height: 42px; border-radius: 12px; text-align: center; color:#fff; font-weight: 400; display: block; margin: 10px 0; cursor: pointer;} .singleLoginBlock .loginBtn.green{background: var(--ColorBlue);} .singleLoginBlock .tips{margin: 10px 0; width: 100%; padding: 20px; background: #f6f6f6; font-size: var(--content-size); line-height: 24px; color:#666; text-align: justify; border-radius: 12px;} .singleLoginBlock .separateArea{border-top:1px solid #999; width:100%; margin: 45px 0 15px; height: 30px; display: flex; justify-content: center; align-items: center;} .singleLoginBlock .separateArea span{display:block; color: #999; line-height: 30px; height: 30px; margin-top: -30px; background: #fff; padding: 0 20px;} .singleLoginBlock .tips2{font-size: var(--content-size); line-height: var(--content-LH); color: #999; margin: 0 0 10px;} .singleLoginBlock .tips3{font-size: var(--content-size); line-height: var(--content-LH); color: #999; margin: 20px 0; text-align: justify;} /*會員種類選擇*/ .memberTypeContent{padding: 100px 0; background: url("../images/memberTypeBG.jpg") no-repeat center; background-size: cover; min-height: 900px;} .memberTypeContent .commonContainer{display: flex; justify-content: center; align-items: center; flex-direction: column;} .memberTypeContent .content{display: block; width:80%; max-width: 600px; margin: 30px 0;} .memberTypeContent .content ul{padding-left: 20px; margin-top:30px;} .memberTypeContent .content li{margin-bottom: 20px; list-style: decimal; color: #ccc;} .typeSelection{display: flex; justify-content: space-between; align-items: center; width: 80%; max-width: 800px;} .typeSelection li{width:30%; display: block; border:1px solid var(--ColorBlue); background: #fff9;} .typeSelection li a{display: flex; justify-content: center; flex-direction: column; align-items: center; width:100%; padding: 50px 0; font-size: 32px; line-height: 36px;} .typeSelection li a:hover{background: #fc06;} .typeSelection li a::before{content: ""; display: block; width:20vw; height: 20vw; max-width: 160px; max-height: 160px; background: no-repeat center; background-size: contain; margin-bottom: 20px;} .typeSelection li.level1 a::before{background-image: url("../images/icon_star1.svg");} .typeSelection li.level2 a::before{background-image: url("../images/icon_star3.svg");} .typeSelection li.level3 a::before{background-image: url("../images/icon_star5.svg");} .windowBox{margin: 30px auto; border-radius: 20px; border:1px solid #ccc; background:var(--ColorBlue2);} .windowBox .title{background: var(--ColorOrange); font-size: 24px; line-height: 65px; padding: 0 20px; color: #fff; height: 65px; border-radius: 20px 20px 0 0;} .windowBox .content{padding: 40px 20px; text-align: center;} .MIFContainer{width:100%; position: relative; margin: 100px 0;} .MIFContainer::before{content: ""; width: 100%; height: 60%; position: absolute; top:20%; left: 0; z-index: 1; background: url("../images/darkBG.png") var(--ColorBlue2);} .MIFContainer .commonContainer{width:90%; max-width: 600px; padding: 0; border-radius: 20px; background:#fff; border:1px solid #999; margin: 0 auto; overflow: hidden; position: relative; z-index:2;} .MIFContainer .singleLoginBlock{width:100%; min-height: inherit; padding:60px 50px; display: none; position: absolute; top:0; left: 0; color:var(--ColorBlue);} .MIFContainer .singleLoginBlock h1{text-align: center; display: block; margin-bottom: 30px;} .singleLoginBlock .textsBlock{margin-bottom: 30px; line-height: 32px; color: #999;} .singleLoginBlock .textsBlock li{margin-left: 20px; list-style: decimal; color: #666;} .singleLine{margin-bottom: 30px;} .singleLine h5{font-size: var(--suntitle-size); line-height: var(--subtitle-LH);} .singleLine h5.imp::before{content: "＊"; margin-left: -18px; margin-right: 5px; color: #f00;} .singleLoginBlock .singleLine input{margin-top: 0;} .singleLoginBlock .formGroup{display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 10px; grid-row-gap: 10px; margin-bottom: 10px;} .singleLoginBlock label{margin-left: 5px; color: #999;} /*會員=======================*/ .userHead{width:100%; background:url("../images/darkBG.png") #000; position: relative; z-index: 2;} .userHead .commonContainer{display: flex; justify-content: space-between; align-items: center;} .userInfos{display: flex; align-items: center;} .UHead{width: 30vw; height: 30vw; max-width:200px; max-height: 200px; border-radius: 200px; overflow: hidden; border:2px solid #fff;} .UHead img{width: 100%; height: auto;} .UName{font-size: 28px; line-height: 28px; font-weight: 300; color: #fff; margin-left: 20px;} .UName small{font-size: 14px; line-height: 14px;} .UName::before{content:"您好，"; display: block; font-size: 20px; line-height: 24px; margin-bottom: 10px;} .memberCardBlock{width:500px; margin-bottom: -100px; display: flex; flex-direction: column; align-items: center;} .memberCard{width:500px; height: 300px; background:no-repeat center; background-size:contain; display: flex; justify-content: space-between; align-items: center; border-radius: 20px; box-shadow: 0 0 10px #0003; margin: 30PX 0 15px;} .memberCard.level1{background-image: url("../images/memberCard_level1.jpg");} .memberCard.level2{background-image: url("../images/memberCard_level2.jpg");} .memberCard.level3{background-image: url("../images/memberCard_level3.jpg");} .memberCard .MCCardInfos{margin-left: 20px; display: flex; flex-direction: column; grid-row-gap: 10px; align-items: flex-start;} .memberCard .MCLevel{color: #fff; font-size: 32px; line-height: 32px; font-weight: 300; display: flex; align-items: center;} .memberCard .MCExpirationDate{display: block; font-size: 14px; line-height: 14px; color: #ccc;} .memberCard.level2 .MCLevel::before, .memberCard.level3 .MCLevel::before{content: ""; display: inline-block; width:32px; height: 32px; background: url("../images/icon_upgrade_white.svg") no-repeat center; background-size:contain; margin-right: 10px;} .userPoints{display: flex; width: 124px; height: 100%; justify-content: space-around; align-items: center; flex-direction: column; color: #47402F; text-align: center;} .userPoints li{display: flex; align-items: center; justify-content: center; column-gap: 5px; grid-row-gap: 5px; flex-direction: column;} .userPoints li i{width: 48px; height: 48px; opacity: 0.5;} .userPoints li i.u-points{background-image:url("../images/icon_member_19_points_Dark.svg"); opacity: 1;} .userPoints .title{display: block; color: #857856; border-bottom:1px solid #857856; width: 100%;} .userPoints .counts{font-size: 32px; line-height: 32px; font-weight: 900;} .userPoints .counts small{font-size: 14px; font-weight: 400;} .memberCardBlock .tips{color: #ccc; padding:10PX 15px; border:0px solid #999; font-size: 14px; line-height: 24px; background: var(--ColorBlue2);} .userFunctionBlock{display: none;} .userBody .commonContainer{display: grid; grid-template-columns: 180px auto;} .userMenu{font-size: 18px; line-height: 24px; padding: 150px 0; border-right:1px solid #999;} .userMenu li{display: block; padding: 8px; margin-bottom: 15px; position: relative; transition: padding 0.3s;} .userMenu li.imp{border:1px solid #999; border-right:none; border-radius: 50px 0 0 50px;} .userMenu li::before{content: ""; display: block; width:0; height: 100%; background:#c69d2b33; position: absolute; top:0; right: 0; z-index: 0; transition: width 0.3s; border-radius: 100px 0 0 100px;} .userMenu li a{display: flex; width: 100%; align-items: center; position: relative; color:#fff;} .userMenu li a.numbers.show .counts{display: flex; width:28px; height: 28px; border-radius: 50%; background:var(--ColorGolden); color: #fff; font-size: 12px; line-height: 12px; align-items: center; justify-content: center; position: absolute; right: 0; top:calc(50% - 14px);} .userMenu li.on a.numbers.show .counts{background: #fff; color: var(--ColorBlue);} .userMenu li a.upgrade{color: #fff3; cursor: default;} .userMenu li a.upgrade i{opacity: 0.3;} .userMenu li a.upgrade::after{content: ""; width: 18px; height: 18px; display: block; background: url("../images/icon_upgrade.svg") no-repeat center; background-size: contain; margin-left: 5px;} .userMenu li a i{margin-right: 5px;} .userMenu .counts{display: none;} .userMenu li.on{padding-left: 15px;} .userMenu li.on::before{width: 100%; background:linear-gradient(to right, #c69d2bff 70%, #c69d2b00); border-radius: 30px 0 0 30px;} .laptop .userMenu li:hover{padding-left: 15px;} .laptop .userMenu li:hover::before{width:100%;} .userContent{padding: 150px 0; padding-left: 50px;} .userGrid{display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; grid-row-gap: 20px;} .singleUserBlock{display: block; border-radius: 12px; /*border:1px solid #999;*/ background:linear-gradient(to bottom, #999, #666);} .singleUserBlock.c3{grid-column: span 3;} .singleUserBlock a{width:100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 24px; line-height: 24px; padding: 3vw 0; color:#fff;} .singleUserBlock a .counts{display: block; width:100%; font-size: 5vw; line-height: 5vw; font-weight: 900; text-align: center; margin-bottom: 20px; color: #fff;} .singleUserBlock a .counts small{font-size: 18px; line-height: 24px; display: block; color: #ccc;} .singleUserBlock a i{width:24px; height: 24px;} .userBody .caseListArea.commonContainer{display: block; width:100%; margin: 0;} .userContent h1{display: flex; align-items: center;} .userContent h1 i{width:42px; height: 42px; margin-right: 10px;} .userBody .caseListArea.commonContainer .functionArea .listStyle{display: none;} .userBody .listBlock{grid-template-columns: repeat(3, 1fr);} .userBody .listBlock.list{grid-template-columns: 1fr; column-gap: 0;} .userBody .pageSelection{margin-bottom: 0;} .singleBusinessBlock{box-shadow: 0 0 10px #0003; display: flex; flex-direction: column; align-items: center; padding: 0; background: var(--ColorBlue2);} .singleBusinessBlock a{display: flex; flex-direction: column; align-items: center; color: #fff;} .singleBusinessBlock .SAHead{width:100%; border-radius: 0; height: auto; margin: 0; border:none;} .singleBusinessBlock .SAName h1{margin: 20px 0; font-size: 24px;} .singleBusinessBlock .SAInfos{width:80%; display: flex; flex-direction: column; align-items: center;} .singleBusinessBlock .SAInfos .SAGroup{width: 100%;} .singleBusinessBlock .SAInfos .infos{font-size: 16px; line-height: 24px; margin-bottom: 5px;} .singleBusinessBlock .cancelTrackBtn{margin: 20px; display: flex; width:80%; justify-content: center; align-items: center; padding: 10px 0; background: #eee; color: #999; border-radius: 12px;} .singleBusinessBlock .cancelTrackBtn:hover{background: #ccc; color:#666} .singleBusinessBlock .trackBtn{margin: 20px; display: flex; width:80%; justify-content: center; align-items: center; padding: 10px 0; background: var(--ColorGolden); color: #fff; border-radius: 12px;} /*業務資料單頁*/ .businessHead{background: var(--ColorBlue2) url("../images/darkBG.png"); position: relative; margin-top: 50px; margin-left: -50px; padding:20px 0; padding-left: 50px; display: flex; justify-content: space-between;} .btnGroup{display: flex; align-items: center; position: absolute; top:-50px; right: 0;} .btnGroup li{display: block; margin-left: 10px; height: 40px;} .btnGroup li a{display: block; padding: 0 20px; color:#fff; background: #aaa; height: 40px; text-align: center; font-size: 18px; line-height: 40px; border-radius: 12px;} .btnGroup li a.green{background:var(--ColorOrange);} .businessHead .SAHead{width:200px; height: 200px; margin-top: -70px; border-radius: 200px;} .SABigs{display: flex; align-items: center;} .singleBig{width:130px; height: 130px; border-radius: 130px; background: var(--ColorBlue2); border:3px solid var(--ColorBlue); margin: 0 10px; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; color: #fff;} .singleBig .count{font-weight: 900; font-size: 28px; line-height: 42px;} .businessInfos{margin: 50px 0; display: flex; align-items: flex-start;} .businessInfos .SAName{margin-right: 10px;} .businessInfos .SAName h1{font-weight: 500; white-space: nowrap;} .businessInfos .SAName h1 small{font-weight: 400;} .businessInfos .SAName h1 small::after{content: "|"; font-weight: 900; margin-left: 10px;} .businessInfos .SAGroup .infos.phone{font-weight: 900; font-size: 32px; line-height: 32px; margin-bottom: 30px;} .businessInfos .SAGroup .infos{margin-bottom: 10px;} .businessInfos .SAGroup .infos .title{color: #999;} .businessInfos .SAGroup .infos.tags a{display: inline-block; margin-right: 10px; cursor: default;} .businessInfos .SAGroup .introduction{width: 100%; padding: 40px; border:1px solid #999; border-radius: 12px; color: #ccc; margin-top: 50px; font-size: 16px; line-height: 32px; text-align: justify; position: relative;} .businessInfos .SAGroup .introduction::before{content: ""; width: 30px; height: 60px; display: block; position: absolute; top:-30px; left: 30px; background:var(--ColorOrange);} .businessInfos .SAGroup .introduction h1, .businessInfos .SAGroup .introduction h2, .businessInfos .SAGroup .introduction h3, .businessInfos .SAGroup .introduction h4, .businessInfos .SAGroup .introduction h5, .businessInfos .SAGroup .introduction h6{font-size: 24px; line-height: 36px; color:var(--ColorBlue);} .businessInfos .SAGroup .introduction ul{padding-left: 20px;} .businessInfos .SAGroup .introduction li{list-style: disc; color: #999; margin-bottom: 20px;} .businessCases .title{width: 100%; color: #fff; background: var(--ColorBlue2); padding: 15px; font-size:24px; line-height: 24px; margin-bottom: 30px;} .typeFilter{display: flex; align-items: flex-end; margin-top: 30px;} .typeFilter li{display: block; padding: 2px 10px; border-right:2px solid #999;} .typeFilter li:last-child{border: none;} .typeFilter li a, .typeFilter li span{display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; border-bottom: 1px solid #999; font-size: 18px; line-height: 24px; font-weight:700; color: #999;} .typeFilter li span.number{display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 12px; width: 22px; height: 22px; border-radius: 32px; background: var(--ColorGolden); color: #fff; margin: 0 5px; text-decoration: none;} .typeFilter li span{color: #fff; border:none;} /*價格表*/ .priceContent.commonContainer{margin: 80px auto;} .priceContent.commonContainer h1, .priceContent.commonContainer p{display: block; text-align: center;} .priceContent.commonContainer p{color: #999;} .priceTable{margin: 50px 0; display: grid; grid-template-columns: repeat(4, 4fr);} .pPlanRow{border:1px solid #aaa; border-radius: 20px 20px 0 0; margin: 0 -0.5px; overflow: hidden;} .pPlanRow.on{border-color:var(--ColorBlue); z-index: 2; box-shadow: 0 0 10px #0003;} .pPlanRow.level3{border-radius: 20px 20px 20px 0;} .PTTitle{padding:0 20px; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; background:linear-gradient(to bottom, #fff, #eee); border-bottom:1px solid #999; text-align: center; color:var(--ColorBlue);} .PTTitle.empty{background: none; border:none;} .pDetailTitle, .pDetailContent{display: block; width:100%;} .pDetailTitle{border:1px solid #999; border-radius: 20px 0 0 20px; margin-right: -0.5px; overflow: hidden;} .PTTitle h2 small{display: block; font-size: 16px; line-height: 24px;} .PTTitle .priceBlock{margin-top: 20px; color: var(--ColorOrange); font-weight: 700; font-size:24px; line-height: 24px;} .PTTitle .priceBlock small{display: block; font-size: 16px; line-height: 20px; text-decoration: line-through; font-weight: 400;} .PTTitle .tips{color: #999; display: block; font-size: 16px; line-height: 30px; font-weight: 400;} .level1 .PTTitle .priceBlock{padding: 20px 0 30px;} .pricePlanBtn{display: block; width:80%; padding: 10px 0; font-size: 16px; color: var(--ColorOrange); background: var(--ColorBlue); border-radius: 12px; margin-top: 10px;} .on .pricePlanBtn{background: #999; color: #fff; cursor:default;} .level1 .pricePlanBtn{background:#44D100; color: #fff;} .rowContent li{display: flex; align-items: center; justify-content: center; color: #666; font-size:14px; line-height: 14px; height: 54px; background: #fff;} .rowContent li:nth-child(odd){background: #eee;} .pDetailContent .text{display: none;} span.include, span.exclude{display: block; width:24px; height: 24px; background:url("../images/icon_include.svg") no-repeat center; background-size: contain;} span.exclude{background-image:url("../images/icon_exclude.svg");} .MIFContainer .commonContainer .userInfos{flex-direction: column; color: var(--ColorBlue); margin-bottom: 30px;} .MIFContainer .commonContainer .UName{color: var(--ColorBlue); margin: 10px 0;} .MIFContainer .commonContainer .UName::before{display: none;} .MIFContainer .commonContainer .UPhone{font-size: 24px; line-height: 28px; font-weight: 700;} .singleLoginBlock .formGroup.column{display: block;} .singleLoginBlock .formGroup.column div{width: 100%; margin: 10px 0 30px;} .windowBox h2{color: var(--ColorOrange); font-weight: 700;} .windowBox h2 small{color: #999; font-weight: 400; font-size: 16px;} .memberPlanNotes{background: #eee; padding: 50px 0 100px; margin-top:50px; color: #999; font-size: 14px; line-height: 1.4em;} .memberPlanNotes h1{font-size: 1.2em; line-height: 1.3em; margin-top: 50px; color: #666;} .memberPlanNotes p, .memberPlanNotes ul{margin-left: 20px; text-align: justify;} .memberPlanNotes li{list-style: decimal; margin-bottom: 15px; margin-left: 15px;} .memberPlanNotes .imp{color: #a40000;} /*會員：個人資料*/ .singleForm{margin: 50px 0 0; width:100%; font-size: 16px; line-height: 20px; display: flex; flex-direction: column; align-items: flex-end; border-bottom:50px solid var(--ColorBlue2);} .singleForm.noBottom{border-bottom: none;} .singleForm h2{display:flex; column-gap: 10px; align-items: center; width: 100%; font-size: 28px; line-height: 28px; color: #ccc; padding-bottom: 10px; margin-bottom: 50px; border-bottom:1px solid #ccc;} .singleForm h2 .backBtn{display: block; height: 28px; font-size: 16px; color: #fff; line-height: 28px; background: var(--ColorOrange); padding: 0 15px; border-radius: 30px; cursor: pointer; white-space: nowrap;} .singleForm h3{display: flex; width: 100%; padding: 30px 50px 50px; align-items: center; justify-content: center; color: #999;} .singleForm .titleGroup{width: 100%; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 50px; border-bottom:1px solid var(--ColorBlue);} .singleForm .titleGroup h2{padding: 0; margin: 0; border:none;} .singleForm .titleGroup .functionArea{display: flex; column-gap: 10px; align-items: center;} .singleForm .titleGroup .functionArea select{width: auto; height: auto; padding: 3px 20px; appearance:none;} .singleForm.basicSetting .group{display: flex; width:100%; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start;} .singleForm .userHead{padding-left: 20px; width: auto; height: auto; background: none;} .singleForm .headUpload, .singleForm .headSample{width: 180px; height: 180px; background: var(--ColorBlue2); border-radius: 180px; overflow: hidden; cursor: pointer;} .singleForm .userHead .tips{display: block; width:100%; text-align: center; font-size: 14px; line-height: 14px; color: #999; margin-top: 20px;} .singleForm input[type="text"], .singleForm input[type="password"], .singleForm input[type="submit"], .singleForm input[type="reset"], .singleForm textarea{outline: none; appearance:none; border:none;} .singleForm input[type="text"], .singleForm input[type="password"], .singleForm select, .singleForm textarea, .singleForm .emptyBlock{font-size: 16px; width:100%; max-width:300px; line-height: 32px; border:1px solid #999; border-radius: 12px; color: #999; padding:0 10px; height: 52px;} .singleForm input[type="text"]::placeholder{color: #999;} .singleForm input[type="text"].strech, .singleForm input[type="password"].strech, .singleForm select.strech, .singleForm textarea.strech{max-width:none;} .singleForm input[type="text"]:focus{color: var(--ColorBlue);} .singleForm textarea{height: auto;} .singleForm textarea.disable{background: #eee; color: var(--ColorBlue);} .formBtn{font-size: 18px; line-height: 18px; display: flex; justify-content: center; align-items:center; background:var(--ColorOrange); border-radius: 12px; color: #fff; padding: 20px 30px; cursor: pointer;} .formBtn.gray{background: #aaa;} .formBtn.orderBtn{white-space: nowrap;} .formBtn.orderBtn::before{content: ""; display: block; width:24px; height: 24px; margin-right: 5px; background:url("../images/icon_member_09_alert_white.svg") no-repeat center; background-size: contain;} .formBtn.orderBtn.uncheck{background: #aaa;} .singleForm .emptyBlock{height: auto; min-height: 200px; width: 100%; max-width: none; overflow: hidden;} #pageMainContainer .singleForm .strech{width: 100%;} #pageMainContainer .singleForm .tNowrap{white-space: nowrap;} #pageMainContainer .singleForm .fWrap{flex-wrap:wrap; grid-row-gap: 10px;} #pageMainContainer .singleForm .largeGap{column-gap: 50px;} .formSingleLine, .formSingleLine2{width:100%; display: flex; align-items: center; margin-bottom: 60px; padding-left: 20px; position: relative;} .formSingleLine a, .formSingleLine2 a{color: #ccc;} .formSingleLine.full{padding-left: 0;} .formSingleLine.disabled::before{content: "此欄位禁止填入"; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top:0; left: 0; background: #fffa; color: #FF0004; font-size: 16px; line-height: 16px; font-weight: 700; border:2px dashed #999;} .formSingleLine.block{padding: 20px; border:1px solid #999; border-radius: 12px;} .formSingleLine.between{justify-content: space-between; column-gap: 30px; flex-wrap: nowrap;} .formSingleLine .formSingleLine{margin: 0;} .formSingleLine.top{align-items: flex-start;} .formSingleLine.multi, .formSingleLine2.multi{flex-wrap: wrap;} .formSingleLine .title, .formSingleLine2 .title2{color:#ccc; font-weight: 700; margin-right: 20px; min-width:100px; border-right:2px solid #ccc;} .formSingleLine .title.imp::before{content: "＊"; color: var(--ColorGolden); margin-left: -15px;} .formSingleLine .title.freeSize{width: auto; padding-right: 10px; white-space: nowrap;} .formSingleLine .title.box{border:none; width:auto; margin-left: -20px;} .formSingleLine .title .box{display: flex; align-items: center; width:auto; padding: 10px 30px; border-radius: 100px; color:#fff; background: var(--ColorOrange); font-weight: 400;} .formSingleLine .text.bolder{font-size: 24px; line-height: 24px; font-weight: 900;} .formSingleLine .text{font-size: 18px; line-height: 18px;} .formSingleLine .formBtn{margin: 0 10px; padding: 5px 10px; font-size: 14px; line-height: 14px; background: var(--ColorGolden); color:#fff;} .formSingleLine .formBtn.green{background: var(--green); color: #fff;} .formSingleLine .formBtn.orange{background:var(--ColorOrange);} .formSingleLine .formBtn.largeSize{font-size: 18px; line-height: 32px; padding: 11px 20px;} .formSingleLine .formBtn.largeSize.strech{margin: 0;} .formSingleLine .formBtn.uncheck{color: #fff; background: #aaa;} .formSingleLine .formBtn.uncheck.copiesPaper, .formSingleLine .formBtn.copiesPaper{margin:0; white-space: nowrap;} .formSingleLine .tips{display: flex; align-items: center; font-size:16px; line-height: 16px; color: #aaa; margin:10px 0; column-gap: 5px;} .formSingleLine .tips i{width:18px; height: 18px;} .formSingleLine .tips i.loginPhone{background-image: url("../images/iocn_login_phone_Light.svg");ㄋ} .formSingleLine .tips a{text-decoration: underline; color: var(--ColorGolden);} .formSingleLine .group2{margin-right: 15px;} .formSingleLine label{margin-left: 5px;} .formSingleLine .group3{width:100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px;} .formSingleLine p{color: #999; text-align: justify;} .singleForm .group4{display: flex; align-items: center; column-gap: 10px;} .singleForm .group5{display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; row-gap: 10px;} .singleForm .freeSize{width: auto;} .singleForm .formSingleLine .tipSmall{font-size: 12px; line-height: 16px; color: #999; margin-left: 20px; text-align: justify;} .singleForm .formSingleLine .tipSmall:before{content: "＊"; display: inline-block; margin-left: -16px;} .singleForm .formSingleLine .tipSmall a{color: var(--ColorOrange); text-decoration: underline; margin: 0 5px;} .singleForm .saveFixed{width: 100%; max-width:300px; height: 60px; margin:50px 0 -30px; margin-right: 20px;} .crossArea{grid-column-start:1; grid-column-end:-1;} .crossArea2{grid-column-start:auto; grid-column-end: span 2;} .outsideLine{border:1px solid #ccc; border-radius: 6px; padding:10px;} .gridGroup2{display: grid; width:calc(100% - 120px); grid-template-columns: repeat(2,1fr); column-gap: 10px; grid-row-gap: 30px;} .gridGroup3{display: grid; width:calc(100% - 120px); grid-template-columns: repeat(3,1fr); column-gap: 10px; grid-row-gap: 30px;} .gridGroup5{display: grid; width:calc(100% - 120px); grid-template-columns: repeat(5,1fr); column-gap: 10px; grid-row-gap: 30px;} .gridColumn{display: grid; width:calc(100% - 120px); grid-template-rows: auto; grid-row-gap: 10px; } .gridGroup2.strech, .gridGroup3.strech, .gridGroup5.strech{width: 100%;} .gridGroup2.freeSize, .gridGroup3.freeSize, .gridGroup5.freeSize{width:auto;} .formSingleLine.multi .title, .formSingleLine2.multi .title2{display: block; width:100%; margin-bottom:10px; border:none;} .picBox{display: flex; flex-direction: column; width: 100%; padding: 30px 0; align-items: center; justify-content: center;} .picBox .tips{margin-top: 15px;} .headSample img{width:100%; height: auto;} .uploadCredit{width:90%; max-width: 500px; height: 300px; border-radius: 20px; border:3px dashed #999; display: flex; flex-direction: column; align-items: center; justify-content: center;} .uploadCredit .text{font-size: 24px; line-height: 24px; color: #666; display:flex; width:100%; align-items: center; justify-content: center;} .uploadCredit .tips{display: block; font-size: 14px; line-height: 14px; margin-top: 20px;} .uploadCredit .text::before{content: "+"; font-size: 24px; line-height: 24px; display: flex; align-items: center; justify-content: center; width:24px; height: 24px; text-align: center; border:2px solid #666; border-radius: 24px; margin-right:10px;} .singleForm .formConntent{margin-bottom: 50px; font-size: 16px; line-height: 32px; width:100%;} .singleForm .formConntent a{color: var(--ColorOrange); padding: 0 5px; font-weight: 700;} .singleForm .formConntent li{color: #666; list-style: decimal; margin-left: 30px; padding-left: 10px;} .singleForm .formConntent b{color: var(--ColorBlue); font-style: italic;} .explainIMG{width:100%; margin: 15px auto 30px; display: block; border-radius: 12px; border:3px #eee solid;} /*會員：我的法拍*/ .caseStatus{display: flex; align-items: center; justify-content: space-around; margin: 50px 0;} .caseStatus li{display:block; opacity: 0.3;} .caseStatus li a{display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; padding: 30px 10px; cursor: pointer; color:#fff;} .caseStatus li.on{opacity: 1;} .caseStatus .number{font-size: 6vw; line-height: 6vw; font-weight: 900;} .caseStatus .text{font-size: 18px; line-height: 32px;} .myCastList{display: block; width:100%;} .singleCaseBlock{display:grid; grid-template-columns: 20% auto 140px; width:100%; margin-bottom: 30px; border:1px solid #999; border-radius: 12px; overflow: hidden; background: #eee;} .singleCaseBlock .MBIMG{background-size: cover; background-position: center; aspect-ratio:auto;} .singleCaseBlock .caseBlock{display: grid; grid-template-columns: auto 150px; grid-template-rows: auto auto; background: #fff; border-radius: 0 12px 12px 0;} .singleCaseBlock .caseBlock > div{padding: 5px; margin: 5px;} .singleCaseBlock .caseInfos{grid-row: 1/2; grid-column: 1/2; background: #fff; color: var(--ColorBlue);} .singleCaseBlock .MBPrice{grid-row: 1/2; grid-column: 2/3; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content:center;} .singleCaseBlock .MBPrice::before{display: none;} .singleCaseBlock .caseMenu{grid-row: 2/3; grid-column: 1/3; background: #fff;} .caseBlock .MBAdress, .caseBlock .MBArea, .caseBlock .MBTags li{font-size: 16px; line-height: 24px;} .caseBlock .MBArea{color: #999;} .caseBlock .MBTags{display: flex;} .caseBlock .MBTags li{font-size: 14px; line-height: 18px; font-weight: 700; margin-right: 5px; margin-bottom: 5px; color: var(--ColorOrange);} .singleCaseBlock .MBPrice span{display: block;} .singleCaseBlock .price1{font-size: 32px; line-height: 36px;} .singleCaseBlock .price2{font-size: 16px; line-height: 24px; font-weight: 500; color: #999; display: block; padding: 5px; border:1px solid #999; border-radius: 6px; background:#fff;} .caseMenu ul{display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 5px; width:100%; height: 100%;} .caseMenu li a{display: flex; width:100%; height: 100%; padding: 5px; align-items: center; justify-content: center; border-radius: 6px; background: var(--ColorBlue); color: #fff;} .caseMenu li a.on{background: #999; cursor: default;} .caseProgress{min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; grid-row-gap: 10px;} .progressCircle, .fullCircle, .finishCircle{width:100px; height: 100px; overflow: hidden;} .progressCircle{display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;} .fullCircle{position: absolute; top:0; left: 0; border:12px solid #fff; border-radius: 50%;} .finishCircle{position: absolute; top:0; left: 0; transform: rotate(-90deg);} .progressNumber{font-size: 22px; line-height: 22px; font-weight: 900; color: var(--green);} .caseProgress p{font-size: 16px; line-height: 16px; color: #999;} .reviewing .caseProgress p{color: var(--ColorBlue); position: relative; z-index: 2;} .formBtn.caseComfirm{padding: 10px; width: 90%;} .userContent .functionArea{display: flex; justify-content: space-between; align-items: stretch;} .searchCaseArea{display: flex; align-items: stretch;} .searchCaseArea input{outline: none; appearance:none; border:none;} .searchCaseArea input[type="text"]{padding: 0 10px; height: 100%; font-size: 16px; line-height: 16px; color: #999; border:1px solid var(--ColorBlue); border-radius: 12px;} .searchCaseArea input[type="submit"]{ padding:0 10px; background: var(--ColorBlue); border-radius: 12px; color: #fff; margin-left: 10px;} .formNumberList{display: block;} .formNumberList li{list-style: decimal; padding-left: 5px; margin-left: 30px; display: list-item; margin-bottom: 60px;} .formNumberList.strech li{width:calc(100% - 30px);} .formNumberList li.formSingleLine .title{margin-bottom: 20px;} .singleCaseBlock.innerPage{margin: -50px 0 0;} .MBTitle{margin: 5px 8px 20px; font-size: var(--title-size2); line-height: var(--title-size2); font-weight: 900;} .MBCollector{margin: 5px 8px; font-size:16px; line-height: 16px; display: inline-flex; align-items: center; justify-content: center; column-gap: 5px; color:#fff; background: var(--ColorOrange); padding: 5px 10px; border-radius: 12px;} .MBCollector::before{content: ""; display: block; width: 18px; height: 18px; background: url("../images/icon_track.svg") no-repeat center; background-size: contain;} .formSingleLine.uploadFilm{display: flex; align-items: flex-start; column-gap: 20px; padding: 0; border-bottom:1px solid #999;} .formSingleLine.uploadFilm .coverBlock{width:320px;} .formSingleLine.uploadFilm .coverBlock .cover{width:320px; height: 192px; border:1px solid #999; display: flex; flex-direction: column; justify-content:flex-end; align-items: center;} .uploadCoverBtn.formBtn{margin-bottom: 10px;} .formSingleLine.uploadFilm .group{width:100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;} .formSingleLine.uploadFilm .tips{width: 100%;} .singleCaseBlock.finished, .singleCaseBlock.reviewing{background: var(--ColorBlue) url("../images/darkBG.png");} .singleCaseBlock.reviewing{position: relative;} .singleCaseBlock.reviewing::before{content: ""; display: block; width: 100%; height: 100%; background: #aaa; position: absolute; top:0; left: 0; z-index: 1; mix-blend-mode: screen;} .reviewing .MBCollector, .reviewing.singleCaseBlock .caseMenu{display: none;} /*照片上傳*/ .imgUploadArea{display: grid; grid-template-columns: repeat(3,1fr); column-gap: 20px; grid-row-gap: 20px;} .imgUploadArea li{background-size: cover; background-position: center; position: relative;} .imgUploadArea li img{width:100%; height: auto;} .imgUploadArea .deleteBtn{width: 40px; height: 40px; background: url("../images/icon_deleteBtn.svg") center var(--ColorBlue); background-size: contain; position: absolute; right:0; bottom: 0; cursor: pointer;} /*文章分享＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/ .articleHead{position: relative;} .articleHead::before{content: ""; display: block; width:100%; height: 70%; background:url("../images/darkBG.png") var(--ColorBlue); position: absolute; z-index: -1; top:0; left: 0;} .articleHead .commonContainer{position: relative;} #newsSlide{width: 100%; overflow: hidden;} #newsSlide .singleNewsSlide{display: grid; grid-template-columns: minmax(180px, 1fr) 3fr;} .singleNewsSlide .textSide{background:linear-gradient(to top, #fff, #eee); padding: 30px 20px 50px; display: flex; flex-direction: column; justify-content: space-between; position: relative;} .singleNewsSlide .textSide::after{content: ""; display: block; width:180.5px; height: 10px; background:var(--ColorBlue); position: absolute; left: 0; bottom:0;} .textSide a, .textSide a h1{display: block; text-align: justify; font-size: 26px; line-height: 32px;} .textSide .articleInfos{display: grid; grid-template-columns: 5fr 6fr; grid-template-rows: auto auto; grid-template-areas: "aTime aOption" "aTags aTags";} .articleInfos .ARTime{grid-area: aTime; display: flex; align-items: flex-end; color: #999; border-bottom:1px solid var(--ColorBlue); padding-bottom: 3px;} .articleInfos .AROption{grid-area: aOption; font-size: 24px; line-height: 24px; font-weight: 700; text-align: right; border-bottom: 1px solid var(--ColorBlue); padding-bottom: 3px; color: #999;} .ARTags{grid-area: aTags; display: flex; column-gap: 10px; grid-row-gap: 5px; padding: 10px 0; flex-wrap: wrap;} .ARTags a{font-size: 14px; line-height: 16px;} .singleNewsSlide .IMGSide img{width: 100%; height: auto;} .articleHead .main-pagination{text-align: right; margin: 0; position: absolute; right:0; bottom:0; margin-bottom: -40px;} .articleList .userMenu li a{justify-content: center;} .singleMenuBlock{margin-top: 50px;} .singleMenuBlock h2{display: flex; column-gap: 10px; font-size: 20px; line-height: 20px; align-items: center; margin-bottom: 10px; border-bottom:1px solid var(--ColorBlue); padding-bottom: 10px;} .tagsBlock .ARTags{display: flex; flex-wrap: wrap; column-gap: 10px; grid-row-gap: 10px;} .singleMenuBlock.hotArticles ul{display: block; padding-left: 15px; padding-right: 5px;} .singleMenuBlock li{display: block; padding: 0; margin: 0;} .singleMenuBlock.hotArticles li{margin-bottom: 20px; list-style: disc; display: list-item;} .singleMenuBlock a{font-size: 12px; line-height: 16px;} .singleMenuBlock.hotArticles a{font-size: 14px; line-height: 18px; color: var(--ColorGolden);} .singleMenuBlock.hotArticles a:hover{text-decoration: underline;} .laptop .userMenu .singleMenuBlock li:hover{margin: 0; padding: 0;} .laptop .userMenu .singleMenuBlock li:hover::before{display: none;} .laptop .userMenu .singleMenuBlock.hotArticles li:hover{margin-bottom: 20px;} .articleList .userContent .functionArea{border-bottom:1px solid var(--ColorBlue); margin-bottom: 30px; padding-bottom: 10px;} .singleBlock .ARTags{padding: 10px;} .singleBlock .ARTags a{color: #999;} .textSizeControl{display: flex; column-gap: 10px; height: 42px; align-items: center; font-size: 14px; color: #999; position: absolute; top:-60px; right:0;} .articleList .caseListArea.commonContainer{position:relative;} .sizeBtn{width: 42px ; height: 42px; border:1px solid #999; color:#999; display: flex; align-items: flex-end; justify-content: center; padding: 5px; font-weight: 500; border-radius: 6px;} .size1{font-size: 14px; line-height: 26px;} .size2{font-size: 18px; line-height: 28px;} .size3{font-size: 24px; line-height: 32px;} .sizeBtn.on{cursor: default; background: #eee;} #articleContent, .commonTextStyle{font-size: 16px; line-height:2em; font-weight: 400; color: #ddd; text-align: justify;} #articleContent p, .commonTextStyle p{margin-bottom: 40px;} #articleContent h1, #articleContent h2, #articleContent h3, .commonTextStyle h1, .commonTextStyle h2, .commonTextStyle h3{margin-bottom: 20px; color:var(--ColorBlue);} #articleContent h1, .commonTextStyle h1{font-size: 2em; line-height: 1.2em;} #articleContent h2, .commonTextStyle h2{font-size: 1.5em; line-height: 1.2em;} #articleContent h3, .commonTextStyle h3{font-size: 1.2em; line-height: 1.2em;} #articleContent img, .commonTextStyle img{display: block; width: auto; height: auto; margin-bottom: 40px; max-width: 100%;} #articleContent small, .commonTextStyle small{margin: -30px 0 60px; display: block;} #articleContent ul, .commonTextStyle ul{padding-left: 30px;} #articleContent li, .commonTextStyle li{list-style: disc; margin-bottom: 20px;} .commonTextStyle .numbers li{list-style: decimal;} .commonTextStyle .noList li{list-style: none;} #articleContent a, .commonTextStyle a{color:var(--ColorGolden); text-decoration: underline; margin: 0 5px;} #articleContent.size2{font-size: 18px;} #articleContent.size3{font-size: 22px;} .articleFunctions{width:100%; height: 40px; display: flex; align-items: center; justify-content: space-between; position: absolute; bottom: 0; left: 0; margin-bottom: -40px;} .articleFunctions ul{display: flex; justify-content: space-between; align-items: center; column-gap: 10px; height: 100%;} .articleFunctions li{display: flex; align-items: center; justify-content: center; font-size: 14px; color: #999;} .articleFunctions li a{display: block; width:28px; height: 28px; background: no-repeat center; background-size: contain;} .articleFunctions .shareBlock{background: #666; width:180.5px; justify-content: space-around;} .articleFunctions li.fb a{background-image:url("../images/icon_fb_white.svg");} .articleFunctions li.line a{background-image:url("../images/icon_line_white.svg");} .articleFunctions li.link a{background-image:url("../images/icon_link_white.svg");} /*專業團隊諮詢*/ .consultationType{width:90%; max-width: 600px; height: 80px; background:linear-gradient(to bottom, #999, #ccc); border-radius: 12px; position: relative; margin: 80px auto;} .consultationType::before{content: ""; display: block; width: 60%; height: 100%; border-radius: 12px; background: var(--ColorOrange); position: absolute; top:0; left: 0; z-index: 0; transition: all 0.3s;} .consultationType.type2::before{left: 40%;} .consultationType ul{display: flex; width:100%; height: 100%; position: relative; z-index: 1;} .consultationType li{width: 40%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 32px; color: #fff; font-weight: 900; cursor: pointer; transition: all 0.3s;} .consultationType li.on{width:60%;} .professionalFields{display: flex; column-gap: 10px; justify-content: space-between; width:100%;} .professionalFields li{display: flex; background: #999; color: #fff; width:100%; align-items: center; justify-content: center; padding: 20px 10px; font-size: 18px; line-height: 18px; border-radius: 12px; cursor: pointer;} .professionalFields li.on{background: var(--ColorBlue); cursor: default; border:1px solid #fff;} .formSingleLine2 .listBlock{margin: 0;} /*文字資訊頁面*/ .commonTextStyle{margin: 50px 0; padding: 50px; border-radius: 20px; box-shadow: 0 0 10px #0003; line-height: 26px; background: #fff;} .commonTextStyle h1{margin-bottom: 30px;} .commonTextStyle p{margin-bottom: 20px; display: block;} .commonTextStyle h3{margin-top: 50px; display: inline-block; padding: 10px 30px; border-radius: 100px; border:1px solid #999;} .commonTextStyle ul.titleList{margin: 30px 0;} .commonTextStyle ul.titleList li{margin-bottom: 10px;} .commonTextStyle ul.titleList li span{font-weight: 900; margin-right: 10px; color: var(--ColorBlue);} .commonTextStyle ul{margin-bottom: 30px;} /*訊息中心*/ .messageType{width: 100%; display: flex; align-items: center; justify-content: space-between; column-gap: 20px;} .messageType li{width: 100%; padding: 20px 0; font-size: 24px; line-height: 24px; color: #ccc; display: flex; align-items: center; justify-content: center; column-gap: 10px; border:1px solid #ccc; border-radius: 12px; cursor: pointer; background: var(--ColorBlue2);} .messageType li.on{color: var(--ColorBlue); background: #eee; border-color: var(--ColorBlue);} .messageType li .counts{width:32px; height: 32px; font-size: 18px; line-height: 18px; background: var(--ColorGolden); color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center;} .mailBox{border:1px solid var(--ColorBlue2); background: #fff; border-radius: 12px; padding: 5px; margin: 40px 0; font-size: 14px; line-height: 14px; position:relative;} .mailBox::before{content: "＊橘色表頭可以進行篩選、搜尋功能"; display: block; height: 24px; font-size: 14px; line-height: 24px; color: #999; position: absolute; top:-24px; left: 0;} .MBXColumn{display: grid; grid-template-columns: 3fr 3fr 8fr 4fr 4fr; column-gap: 3px;} .MBXColumn:last-child{border-radius: 0 0 9px 9px; overflow: hidden;} .MBXTitle{height: 60px; overflow: hidden; border-radius: 9px 9px 0 0; color: #fff;} .MBXTitle .MBXBlock{background: var(--ColorBlue); padding: 0;} .MBXTitle .MBXBlock input, .MBXTitle .MBXBlock select{appearance:none; outline: none; border:none; width:100%; height: 100%; text-align: center; padding: 5px; color: #fff; background: var(--ColorOrange); border-radius: 0;} .MBXTitle .MBXBlock input::placeholder{color: #fff;} .MBXContent .MBXBlock{border-bottom: 1px solid #999; color: #999;} .MBXContent:last-child .MBXBlock{border:none;} .MBXContent.unread .MBXBlock{background: #eee; color: var(--ColorBlue);} .MBXBlock{display: flex; align-items: center; justify-content: center; padding:10px 5px; overflow: hidden;} .MBXContent .MBXBlock.MBX3{justify-content: flex-start;} .MBXBlock p{margin: 0; padding: 0; text-align: left; width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900;} .MBXContent .MBXBlock.MBX5{font-family: "verdana"; font-size: 10px;} /*付款紀錄*/ .memberCard.head{width:100%; background: no-repeat left; background-size:cover; column-gap: 30px; display: grid; grid-template-columns: 4fr 5fr;} .memberCard.head.level1{background-image: url("../images/member-card-innerPage1.jpg");} .memberCard.head.level2{background-image: url("../images/member-card-innerPage2.jpg");} .memberCard.head.level3{background-image: url("../images/member-card-innerPage3.jpg");} .memberCard.head .MCCardInfos{justify-content: center; align-items: center;} .memberCard .memberPrice{font-size: 24px; line-height: 24px; color: #fff; font-weight: 900;} .memberOrderInfos{display: flex; flex-direction: column; grid-row-gap: 20px; align-items: flex-start; justify-content: center; color: #fff; padding:0 20px; height: 90%; border-left: 2px dashed #fffa;} .memberOrderInfos li{display: flex; align-items: flex-start; column-gap: 20px;} .memberOrderInfos li.center{align-items: center;} .memberOrderInfos li .title{font-weight: 700; opacity: 0.7;} .memberOrderInfos li span.tips{display: block; color: #a40000; font-size: 12px; line-height: 16px; font-weight: 700;} .paymentHistory{display: flex; flex-direction: column; width: 100%; grid-row-gap: 2px; margin-top: -35px; font-size: 14px; line-height: 24px;} .PHColumn{display: grid; grid-template-columns: 2fr 3fr 2fr 2fr; column-gap: 5px; background: #fff; color: var(--ColorBlue);} .PHColumn:nth-child(odd){background: #eee;} .PHColumn.Alert{background: #e74146; color: #fff; padding: 0; margin: 0; border-radius: 0;} .PHColumn.fail{background: #666; color: #fff; padding: 0; margin: 0; border-radius: 0;} .PHColumn.title{background: var(--ColorBlue2); color: #fff;} .PHBlock{padding: 8px 5px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #999;} .PHBlock:last-child{border: none;} .PHBlock.PHB1{justify-content: flex-start;} /*謄本*/ .CCPage.caseContent{margin-top: 30px;} .CCPage .functionArea{display: flex; align-items: center; justify-content: flex-end; column-gap: 10px; margin-bottom: 10px;} .CCPage .functionBtn{padding:0 10px; height:36px; min-width: 36px; display: flex; align-items: center; justify-content: center; column-gap: 5px; border-radius: 6px; background: #ccc; border:1px solid #fff; opacity: 0.3; color: var(--ColorBlue); cursor: pointer;} .CCPage .functionBtn.on{opacity: 1; border-color: var(--ColorBlue); background: #fff;} .CCPage .large{font-size: 24px;} .CCPage i.noBG{width: 22px; height: 22px; background-image: url("../images/icon_noBG.svg");} .CCPage i.prints{width: 18px; height: 18px; background-image: url("../images/icon_print_Dark.svg");} .CCContent{padding: 50px; border:1px solid #686956; background:url("../images/paperBG.png") #fff; box-shadow: 0 0 10px #0003; color: var(--ColorBlue);} .CCContent a{color: #ff0000; text-decoration: underline; font-weight: 500; font-family: "Verdana";} .CCContent .titleGroup{display: flex; justify-content: space-between; align-items: flex-start; column-gap: 30px;} .CCContent .qrCode{display: flex; flex-direction: column; align-items: center; justify-content: flex-start; grid-row-gap: 10px;} img.code{width: 120px; border:1px solid #000;} .CCContent .titleText{display: flex; flex-direction: column; align-items: flex-start; grid-row-gap: 10px;} .CCContent .printTime{display: flex; align-items: center; column-gap:10px; font-size: 16px; font-weight: 700; border:2px solid var(--ColorBlue); padding: 5px; margin-top: 50px;} i.i-printTime{width: 18px; height: 18px; background-image: url("../images/icon_print_Dark.svg");} .CCContent h2{font-size: 24px; line-height: 28px; color: #FF0000; font-weight: 900;} .CCContent .tips{margin-top:30px;} .CCBlock{margin: 50px 0; display: flex; flex-direction: column; grid-row-gap: 60px; align-items: flex-start; padding-bottom: 40px;} .CCBlock h1{width:100%; display: flex; align-items: center; white-space: nowrap; column-gap: 10px;} .CCBlock h1::before, .CCBlock h1::after{content: "*****************************************************************"; display: block; width: 50%; overflow: hidden; text-align: left;} .CCBlock h1::before{text-align: right;} .CCPartTitle{width: 100%; font-size: 26px; line-height: 32px; text-align: center; border:1px solid #000; border-radius: 12px; padding: 8px 0; margin-top: -40px;} .CCPartTitle.noMargin{margin-top: 0;} .signUpDate{background: #000; color: #fff; padding: 8px; font-size: 26px; line-height: 32px; margin-top: -40px;} .CCDataList{display: flex; flex-wrap: wrap; column-gap: 10%; grid-row-gap: 30px;} /*.CCDataList{display: grid; grid-template-columns: 1fr 1fr; column-gap: 10%; grid-row-gap: 30px;}*/ .CCDataList li{display: flex; min-width: 45%; align-items: flex-start; column-gap: 10px;} .CCDataList li .title{color: #fff; background: #000; padding: 0 5px; white-space: nowrap;} .CCAlert{ margin-top: 30px; color: #999;} .CCAlert .title{margin: 10px 0;} .CCAlert li{margin-bottom: 10px; font-size: 14px; line-height: 18px; list-style:cjk-ideographic; margin-left: 50px;} .CCContent.largeSize{font-size: 22px; line-height: 26px;} .largeSize .CCBlock{grid-row-gap: 80px;} .largeSize .signUpDate{margin-top: -60px;} .largeSize .CCDataList{grid-row-gap: 60px;} .CCContent.noBG{background: #fafafa; color: #666;} .noBG .CCBlock h1{color: var(--ColorBlue);} .noBG .signUpDate{background: #eee; color: #999;} .noBG .CCDataList li .title{background: #999; color: #fff;} .infoSquare{padding: 20px; width: 100%; border:1px solid #ccc; color:#999; font-size: 14px; line-height: 18px;} .infoSquare.alert{color: var(--ColorGolden);} /*申請雲端謄本*/ .applyCopy, .copyResult, .copyResult2{width: 100%;} .copyResult .paymentHistory{margin: 0; grid-row-gap: 5px;} .copyBtnsTips{margin: -30px 0 20px; font-size: 14px; line-height: 14px; color: #999;} .copyBtn{display: flex; justify-content: center; align-items: center; padding: 10px; color: #fff; font-size: 14px; line-height: 14px; border-radius: 6px;} .copyBtn.orderNew{background: var(--ColorOrange);} .copyBtn.inStock{background: var(--ColorGolden);} .copyBtn.appliedCopy{background: #aaa;} .copyBtn.show{padding: 20px 30px; font-size: 16px; line-height: 16px; font-weight: 900;} .copyResult .PHColumn{grid-template-columns: 3fr repeat(4, 1fr) 2.5fr; padding: 5px 0;} .copyResult .PHBlock{text-align: justify;} .copyResult .PHBlock.PHB1{justify-content: center;} .copyResult .PHB5{display: grid; grid-template-columns: 1fr 1.5fr; padding: 0;} .copyResult .PHB5, .copyResult .PHB7{border:none;} .copyResult .PHB6, .copyResult .PHB7{height: 100%; padding: 2px 6px;} .copyResult .PHB7 .copyBtn{width: 100%; flex-wrap: wrap; grid-column-gap: 5px; grid-row-gap: 5px;} .copyResult .PHBlock.free{color: #aaa;} .copyListArea{width: 100%;} .listBlock.copies{column-gap: 50px; grid-row-gap: 50px; width:100%;} .singleCopy a{display: flex; flex-direction: column; grid-row-gap: 10px; width:100%;} .copyPrintTime{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding:60px 10px 10px; border:1px solid #aaa; grid-row-gap: 20px; background:var(--ColorBlue2);} .copyPrintTime::before{content: ""; display: block; width: 90%; max-width: 165px; aspect-ratio:1; background:url("../images/icon_member_10_cloudPaper.svg") no-repeat center; background-size:contain; opacity: 0.3;} .copyPrintTime .time{display: flex; column-gap: 5px; align-items: center; width: 100%; min-height: 30px; color: #fff;} i.pt{width: 18px; height: 18px; background-image: url("../images/icon_printCopy.svg");} .singleCopy h3{font-size: 18px; line-height: 22px; color: #fff; margin: 0; padding: 0; width: 100%; display: block;} .singleCopy h4{font-size: 12px; line-height: 16px; color: #999; margin: 0;} .smallBN{width:100%; height: 15vw; min-height: 100px; background: no-repeat center; background-size: cover;} .smallBN.checkCopy{background-image: url("../images/checkCopyBN.jpg");} .userContent.checkCopy{padding:0; margin: 50px auto;} .userContent.checkCopy li{color: #ccc;} .formSingleLine.copiesSearch{margin:-40px 0 0;} .formSingleLine.copiesSearch select{margin: 0;} .formSingleLine.copiesSearch .formBtn.largeSize{margin: 0 auto;} /*產權調查*/ .callUpResult .PHColumn{grid-template-columns: 4fr repeat(3,1fr);} .paymentHistory .confirmBtn{background: var(--ColorOrange); border-radius: 6px; padding: 5px; width: 98%; display: flex; align-items: center; justify-content: center; color: #fff; flex-wrap: wrap; line-height: 1.2em;} .callUpResult .PHBlock.PHB0{justify-content: flex-start;} .callUpResult .PHBlock.PHB1{justify-content: center;} .callUpDTable, .callUpDL{display: flex; flex-direction: column; grid-row-gap: 3px; width: 100%;} .callUpDL .COL{width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 15px; column-gap:20px;} .callUpDL .COL.CTitle{background:var(--ColorGolden);} .callUpDL .COL.CContent{background: #fff; color: var(--ColorBlue); padding-left: 30px;} .callUpDL .COL.CContent:nth-child(odd){background: #eee;} .CUDLContent{display: flex; column-gap:10px; align-items: center;} .CUDLContent .listContent{display: flex; flex-direction: column; row-gap:5px;} .CTitle .CUDLContent .title{font-size: 20px; line-height: 30px;} .CContent .CUDLContent .title{font-size: 16px; line-height: 20px;} .CContent .CUDLContent .infos{font-size: 14px; line-height: 18px; color: #999;} .CContent.disabled .CUDLContent, .CContent.disabled .CUDLPoints{opacity: 0.5;} .CUDLPoints{font-size: 20px; line-height: 20px; display: flex; align-items: end; column-gap:3px;} .CUDLPoints::before, .CUDLPoints::after{font-size: 12px; line-height: 14px;} .CTitle .CUDLPoints::before{content: "小計 ";} .CContent.disabled .CUDLPoints::before{content: "無相關資料"; white-space: nowrap;} .CUDLPoints::after{content: "點";} .callUpPointsCount{margin: 80px 0; width: 100%; max-width: 400px; display: flex; align-items: flex-end; justify-content: space-between; font-size: 18px; line-height: 18px; padding-bottom: 10px; border-bottom: 1px solid #fff;} .callUpPointsCount .points{font-size: 32px; line-height: 32px;} .callUpPointsCount .points::after{content: "點"; font-size: 18px; line-height: 18px; margin-left: 10px;} /*我的點數*/ .myPoints{width: 100%; padding: 80px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 30px; color: #fff; background: var(--ColorBlue2) url("../images/darkBG.png"); border-radius: 22px; margin-bottom: 50px;} .myPoints .title{font-size: 16px; color: #ccc;} .myPoints .number{font-size: 48px; line-height: 48px; font-family: "Verdana"; font-weight: 900;} .myPoints .unit{font-size: 24px;} .myPoints .now{display: flex; align-items: center; justify-content: center; column-gap: 10px;} .myPoints .alert{display: flex; flex-direction: column; row-gap:10px; padding: 10px; border-radius: 12px; width:80%; max-width:420px; background: #C95153;} .myPoints .alert h3{font-size: 18px; line-height: 18px; color: #fff; padding: 0; font-weight: 400; padding-bottom: 10px; border-bottom:1px solid #fff;} .myPoints .alert .sideInfos{display: flex; align-items: center; justify-content:center; flex-direction: column; row-gap:10px; font-size: 14px; line-height: 14px; width:100%; margin-bottom: 20px; border-bottom:1px solid #fff; padding-bottom: 10px;} .myPoints .alert .sideInfos:last-child{margin-bottom: 0; border:none; padding-bottom: 0;} .myPoints .alert .sideInfos li{display: flex; align-items: center; justify-content: space-between; width: 100%;} .myPoints .alert .sideInfos li .title{font-size: 14px; line-height: 14px;} .buyPointsArea{width:100%; display: grid; grid-template-columns: repeat(3,1fr); column-gap: 30px; grid-row-gap: 30px;} .buyPointsArea li{display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: #fff; border:1px solid #ccc; padding: 30px 0; cursor: pointer;} .buyPointsArea li.on{background: #CCC; border:none; cursor: default;} .buyPointsArea .points{font-size: 28px; color: var(--ColorBlue); padding:0 20px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ColorBlue);} .buyPointsArea .price{font-size: 14px; color: #999;} .buyPointsTips{width: 100%; margin: 50px 0; font-size: 14px; color: #ccc;} .buyPointsTips li{margin: 10px 20px; list-style: decimal;} /*列印頁面*/ #PB{color: #000; font-size: 8px; line-height: 1.1em;} #PB .caseContent{max-width: none; padding: 0; width: 98%; margin: 50px auto;} #PB .systemInfos{font-size: 0.8em; line-height: 1em} #PB .caseContent .caseGroup.g1{display: block;} #PB .swiper-wrapper, #PB .caseGroup.g3{display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap:20px;} #PB .caseGroup.g3{margin-top: 80px;} #PB .caseContent .caseGroup.g3 h2{color: #000; font-size: 1.6em; line-height: 1em; padding-bottom: 15px; margin-bottom: 15px; border-bottom:2px solid #000;} #PB .infoBlock li, #PB .infoBlock .MBTags a, #PB, .infoBlock li .title{font-size: 0.9em; line-height: 1.2em; color: #ccc;} #PB .caseContent .caseGroup.g3 .infoBlock{border: none;} #PB .infoBlock ul.shortSize{grid-template-columns: repeat(2, 1fr);} #PB .infoBlock .MBTags{margin-bottom: 15px;} #PB .caseContent .caseGroup.g4{display: block; border-radius: 0; border:none;} #PB .caseTypeMenu{display: none;} #PB .caseTypeContainer{padding: 0px;} #PB .caseTypeContainer .typeTitle{background: none; color: #000; font-size: 2em; line-height: 1em; padding: 0; margin-bottom: 20px; width: 100%; text-align: center; display: flex; align-items: center; justify-content: space-around; column-gap: 10px; padding: 20px 0; white-space: nowrap;} #PB .caseTypeContainer .typeTitle::before{content: "－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－"; width: 100%; overflow: hidden;} #PB .caseTypeContainer .typeTitle::after{content: "－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－"; display: block; width: 100%; overflow: hidden;} #PB h1, #PB .caseContent .MBPrice, #PB .singleForm h2{font-size: 1.8em; line-height: 1.2em; color: #000;} #PB .caseContent .MBAdress, #PB .singleForm{font-size: 1em; line-height: 1.2em;} #PB .caseContent .MBAdress::before{display: none;} #PB .caseContent .MBPrice small{font-size: 0.5em; line-height: 1.2em; color: #000;} #PB .realTimePriceTable{border-radius: 0;} #PB .realTimePriceTable .tHead .tColumn, #PB .realTimePriceTable .tColumn{background: #fff; color: #000; column-gap: 0; grid-row-gap: 0; border-right: 1px solid #000; font-size: 0.8em; line-height: 1.2em;} #PB .realTimePriceTable .tColumn:last-child{margin-right: -1px;} #PB .realTimePriceTable .tRow, #PB .realTimePriceTable li:last-child{column-gap: 0; grid-row-gap: 0; margin: 0; width: 100%; border-bottom:1px solid #000; border-radius: 0;} #PB .realTimePriceTable li:last-child{margin-bottom: -1px;} #PB .tableStyle .TSTitle, #PB .tableStyle .TSContent, #PB .tableStyle .TSContent2{font-size: 0.8em; line-height: 1.2em;} #PB .tableStyle .TSTitle, #PB .tableStyle .TSTitle2, #PB .tableStyle .TSContent, .tableStyle .TSContent2{font-weight: 900; background: none; border:1px solid #000;} #PB .tableStyle div.TSContent, #PB .tableStyle div.TSTitle2{border:1px solid #000;} #PB .tableStyle .TSTitle, #PB .tableStyle div.TSTitle2, #PB .realTimePriceTable .tHead .tColumn{background: #eee;} #PB .tableStyle .gridGroup2, #PB .tableStyle .gridGroup3, #PB .tableStyle .gridGroup5{border:1px solid #000; column-gap: 0; grid-row-gap: 0; padding: 0;} #PB .tableStyle .group4, #PB .singleForm .group4, #PB .gridGroup2, #PB .group4{column-gap: 0; grid-row-gap: 0; padding: 0; margin: 0;} #PB .gridGroup2.strech.tableStyle{column-gap: 30px; align-items: flex-start;} #PB .QAStyle li ul, #PB .QAStyle p{font-size: 0.8em; line-height: 1.5em;} #PB .advancedBlock{border-color: #000; border-radius: 0; padding: 100px 0; height: auto;} #PB .sideGroup{display: flex; align-items: flex-end; justify-content: space-between; padding: 15px;} #PB .sideGroup.title{border-bottom:1px solid #000;} #PB .sideGroup.top{align-items: flex-start;} #PB .SA{padding: 10px; border:1px solid #000; display: flex; align-items: center;} #PB .SA h1{display: flex; column-gap: 10px; align-items: flex-end;} #PB .flexCC{display: flex; flex-direction: column; row-gap: 10px; } #PB .SAHead{width: 100px; height: 100px; border-radius: 200px; overflow: hidden;} #PB .qrcode{display: flex; column-gap: 10px;} #PB .qrcode img{width: 120px; height: auto;} #PB .qrcode .flexCC{width: 140px; padding:0 10px; font-size: 0.7em; line-height: 1.5em;} @media screen and (max-width: 1400px) { .small.searchPanel .commonContainer{display: flex; max-width: none; flex-wrap: wrap;} .small .SResult ul{justify-content: flex-start;} .news .singleBlock{width: 48%;} .caseContent .caseGroup.g1{grid-template-columns: 520px auto;} .infoBlock ul.shortSize{grid-template-columns: 1fr 1fr;} .FNBtns a .texts .CN{font-size:2vw; line-height: 1em;} .FNBtns a .texts .EN{font-size:1.6vw; line-height: 1em;} } @media screen and (max-width: 1140px) { .caseStatus li.on{border:1px solid var(--ColorBlue); border-radius: 12px;} .singleCaseBlock{border:none; border-radius:0; overflow: auto; display: grid; grid-template-columns:auto 120px auto 50%; grid-template-rows: 120px auto; grid-row-gap: 20px; margin-bottom: 100px; background: none;} .singleCaseBlock .MBIMG{grid-column: 2/3; grid-row:1/2; border-radius: 50%;} .singleCaseBlock .caseBlock{grid-column: 1/5; grid-row:2/3; border:1px solid #999; border-radius: 12px;} .caseProgress{grid-column: 4/5; grid-row:1/2; flex-direction: row-reverse; min-height:inherit;} .caseProgress p{margin: 0; padding-right: 10px;} .caseProgress p::after{content: "：";} .progressCircle{transform: scale(1.2);} .singleCaseBlock.finished, .singleCaseBlock.reviewing{background: none;} .singleCaseBlock.finished .caseProgress, .singleCaseBlock.reviewing .caseProgress{display: flex; flex-direction: row; column-gap: 20px; grid-row-gap: 10px;} .formBtn.caseComfirm{width: auto;} .fullCircle{border-color: #eee;} .singleCaseBlock.reviewing .caseProgress{border:1px solid #999; border-radius: 12px;} .reviewing .caseProgress p::after{display: none;} .published.singleCaseBlock .caseProgress{display: flex; flex-direction: column; grid-row-gap: 10px;} .published.singleCaseBlock .caseProgress .formBtn{width: 90%;} } @media screen and (max-width: 1024px) { :root{ --title-size:32px; --title-LH:38px; --content-size:16px; --content-LH:20px; } #navigation .ML1{margin-right: 40px;} .singleBlock{width: 48%; max-width: 300px;} .listBlock{grid-template-columns: repeat(3, 1fr);} .caseContent .caseGroup.g1{grid-template-columns: 50% auto;} .infoBlock ul.shortSize{display: block;} .infoBlock ul.shortSize li{margin-bottom: 10px;} .userInfos{flex-direction: column;} .UHead{max-width: 150px; max-height: 150px; margin-bottom: 10px;} .userBody .listBlock{grid-template-columns: repeat(2, 1fr);} .businessHead .SAHead{width: 20vw; height: 20vw;} .singleBig{width:12vw; height:12vw; border-radius: 20vw; font-size: 1.5vw; line-height: 2vw;} .singleBig .count{font-size: 3vw; line-height: 3vw;} .businessInfos{flex-direction: column;} .businessInfos .SAGroup .infos.phone{font-size: 24px; line-height: 28px;} .businessInfos .SAGroup{width:100%;} .businessInfos .SAName h1 small::after{display: none;} .singleForm{align-items: center;} .singleForm h2{border:none; background: #000; color: #fff; padding: 10px; text-align: center; margin-left: -20px; margin-right: -20px; width: calc(100% + 40px);} .singleForm.basicSetting .group{flex-direction: column;} .singleForm .userHead{margin-bottom:50px; width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center;} .formSingleLine, .formSingleLine2{flex-wrap: wrap; padding: 0;} .formSingleLine .title, .formSingleLine2 .title2{width:100%; margin-bottom: 10px; padding-bottom:10px; border:none; font-size: 24px; line-height: 24px;} .formSingleLine .title.imp::before{margin: 0;} .singleForm input[type="text"], .singleForm input[type="password"], .singleForm select{max-width: none; width:calc(100% - 20px); margin-bottom: 10px;} /*.formSingleLine .title.freeSize{width:100%;}*/ .gridColumn, .gridGroup2, .gridGroup3, .gridGroup5{width: 100%;} .formSingleLine .formSingleLine{flex-wrap: nowrap;} .formSingleLine .formSingleLine .title.freeSize{width:auto; font-size: 14px; line-height: 20px; padding: 0;} .gridGroup5{grid-template-columns: repeat(3, 1fr);} .singleForm input[type="text"].strech, .singleForm input[type="password"].strech, .singleForm select.strech{width:100%;} .imgUploadArea{grid-template-columns: repeat(2, 1fr);} #newsSlide .singleNewsSlide{grid-template-columns: 180px auto;} .textSide a, .textSide a h1{font-size: 18px; line-height: 20px;} .textSide .articleInfos{display: flex; flex-direction: column; grid-row-gap: 10px;} .articleInfos .ARTime{font-size: 12px; line-height: 14px; border:none;} .articleInfos .AROption{text-align: left; font-size: 14px; line-height: 16px;} .ARTags a{font-size:12px; line-height: 14px;} .caseContent .titlegroup{align-items: center;} .caseContent .titlegroup h1{text-align: center; margin-bottom: 30px;} .caseContent .MBAdress{padding: 20px; border-radius: 12px; background: #fff; justify-content: center; color:var(--ColorBlue);} .caseContent .MBPrice{position: static; margin: 20px 0; justify-content: center;} .chatPanel::before{display: none;} .occupations h2{display: block; text-align: left; font-size:4vw; line-height: 4vw; margin-bottom: 10px; border:none;} .occupations{display: flex; flex-direction: column; border-radius: 20px; grid-row-gap: 70px;} .occupations li{background: none;} .singleOccupation{display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); background:linear-gradient(to right, #fff 0 50%, #eee); border-radius: 20px;} .chatPanel .singleBusinessBlock.main{grid-area: 1/1/4/2; margin: 0; border-radius: 20px;} .chatPanel .singleBusinessBlock.main a{display: flex; flex-direction: row; padding: 20px; align-items: flex-start;} .chatPanel .singleBusinessBlock.main .SAHead{width:50%; margin: 0;} .chatPanel .singleBusinessBlock .SAInfos{width: 50%;} .chatPanel .singleBusinessBlock.main .SAName h1{flex-direction: row; align-items: flex-end; justify-content: flex-start; column-gap: 5px; margin-bottom: 30px;} .chatPanel .singleBusinessBlock .SAName small{background: #fff;} .formSingleLine.uploadFilm > div{padding-bottom: 30px;} .formSingleLine.uploadFilm .coverBlock{width: 100%; display: flex; flex-direction: column; align-items: center;} .formSingleLine.uploadFilm .uploadCoverBtn.formBtn{margin-bottom: 10px;} .formSingleLine.uploadFilm .coverBlock .tips{width:auto;} .singleForm .titleGroup{flex-direction: column-reverse; align-items: flex-end; padding-bottom: 0; border:none;} .singleForm .titleGroup h2{padding: 10px;} .buyPointsArea .points{font-size: 20px;} .mapArea .city{grid-template-columns: repeat(8, 1fr);} .formSingleLine.copiesSearch .title{margin-right: 0; text-align: center; font-size: 20px; line-height: 20px; padding: 0;} .caseTypeContainer .singleForm h2{color: #fff;} } @media screen and (max-width: 820px) { :root{ --title-size:24px; --title-LH:28px; } h1 small{display: inline-block;} h1 small::before{content: " / "; margin-left: 5px;} .LBContent .content{margin: 15px 15px 0;} .singleFilterBlock .layer1 > li{flex-direction: column; padding: 10px 10px 20px;} .singleFilterBlock .layer2{display: grid; grid-template-columns: 1fr 1fr 1fr;} .singleFilterBlock .selectedBtn{margin: 5px 1px; text-align: center;} .singleFilterBlock .layer1.for1{grid-template-columns: 1fr 1fr;} .singleFilterBlock ul.for1 li.selectedBtn{margin: 5px 2px;} #agentPanel .listBlock{grid-template-columns: repeat(2, 1fr);} .index #navigation{padding:15px; height: 80px; background: var(--ColorBlue); position:static;} .navLogo img{height: 80%;} #navigation{position: static;} #navigation .functionArea{width:100vw; height: 100vh; position: fixed; top:0; left: 100vw; z-index: 11; background: #fff; right:auto; display: none; overflow: scroll;} #navigation .functionArea::-webkit-scrollbar{display: none;} #navigation .loginBtn, #navigation .memberBtn{display: none;} #navigation .menu{height: auto; padding: 80px 0; width: 90%; max-width: 400px; margin: 0 auto;} #navigation .mainMenu{flex-direction: column;} #navigation .ML1{margin: 0 0 50px; text-align: left; display: block; height: auto; width: 100%; padding-bottom: 20px; border-bottom: 2px dashed var(--ColorBlue);} #navigation .ML1 a{display: block; width:100%;} #navigation .ML1 > a::before, #navigation .ML1 > span::before{content: "> ";} #navigation .ML1 small{display: inline-block; margin-left: 10px;} #navigation .subMenu{display: block; position: static; box-shadow: none; background: none; width: 100%; margin: 0; padding: 10px 0; padding-left: 30px;} #navigation .subMenu li{border-bottom-color: #777; font-size: 14px; padding: 20px 0;} #navigation .subMenu li:last-child{border: none;} #navigation .subMenu li a{color: #777;} #navBtn{display: none; width: 60px; height: 60px; background: #fff; position: absolute; top:15px; right: 10px; z-index: 4; transition:all 0.3s; cursor: pointer;} #navBtn .navBar{position: absolute; width:40px; height: 4px; background:var(--ColorBlue); transition:all 0.3s; transform-origin: center;} .navBar.b1{top:14px; left: 10px;} .navBar.b2{top:28px; left: 10px;} .navBar.b3{top:42px; left: 10px;} #navBtn.on{border-radius: 30px; box-shadow: 0 0 10px #0006;} #navBtn .navBar{padding: 0;} #navBtn.on .navBar{background: #a40000;} .on .navBar.b1{top:28px; transform: rotate(-45deg);} .on .navBar.b2{opacity: 0;} .on .navBar.b3{top:28px; transform: rotate(45deg);} #sideLink{display: none;} #sidefunction{top: auto; right: auto; left: 0; bottom: 10px; width:100%; height: auto;} #sidefunction ul{width: 95%; height: 70px; margin: 0 auto; max-width: 500px; border: none; background: linear-gradient(to bottom, #ddd, #fff); border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; color: var(--ColorBlue); font-weight:500; box-shadow: 0 0 5px #0006; position: relative;} #sidefunction li span{display:block; font-size: 12px; line-height: 12px; margin-top: 5px;} #sidefunction li.mob, #sidefunction li{display: flex; flex-direction: column; justify-content: center; align-items: center; width:100%; height: 100%; margin: 0;} #sidefunction li.search{background: linear-gradient(to bottom, #c69d2bff, #c69d2b00);} #sidefunction i{width: 24px; height: 24px;} #sidefunction i.history{background-image: url("../images/icon_history2.svg");} #sidefunction i.addedFav{background-image: url("../images/icon_favorite2.svg");} #sidefunction i.search{background-image: url("../images/icon_search.svg");} #sidefunction i.service{background-image: url("../images/icon_service2.svg");} #sidefunction i.member{background-image: url("../images/icon_member.svg");} .memberTips.mobile{display: flex;} .memberTips.laptop{display: none;} .commonContainer{width:calc(100% - 40px);} .searchPanel, .searchPanel.noshow{position:fixed; display: flex; top:auto; left: 0; bottom: -110vh; padding-bottom: 100px; border-radius: 30px 30px 0 0; background: linear-gradient(to bottom, #ddd, #fff); height: auto; max-height: 80vh; box-shadow: 0 0 10px #0009; opacity: 1; transition: all 0.5s; overflow: scroll;} .searchPanel::-webkit-scrollbar{display: none;} .searchPanel.mobOn{display: flex; bottom:0; opacity: 1; background: linear-gradient(to bottom, #ddd, #fff);} .searchPanel.mobOn .commonContainer{background: none;} .STypeSelection{background:linear-gradient(to bottom, var(--ColorBlue), #333E5099); border-radius: 12px; margin-bottom: 50px;} .STypeSelection ul{display:flex; justify-content: space-between;} .STypeSelection ul li{width:33.3%;} .STypeSelection li.on span, .STypeSelection li span{padding: 0; font-size: 16px; line-height: 24px;} .addFilterBtn{width: 100%; position: static; border:1px solid var(--ColorBlue); margin-bottom: 10px; border-radius: 12px; background: linear-gradient(to top, #ccc, #fff);} .SSeachBar input{padding: 20px 10px; border:1px solid var(--ColorBlue); box-shadow: inset 5px 5px 10px #0003;} .SSeachBar input[type=submit]{position: static; margin: 10px 0; width: 100%; border:none; box-shadow: none; background: linear-gradient(to bottom, var(--ColorOrange), #f03); font-size: 24px; padding: 15px 0;} .SResult::before{content: ":: 已篩選條件 ::"; display: block; font-size: 18px; line-height: 28px; color:var(--ColorBlue); margin: 10px auto; border-bottom: 2px solid var(--ColorBlue); text-align: center;} .SResult li{border: 1px solid #999;} .LBContent.loginBlock .singleLoginBlock{margin: 0;} #indexMainSlides{height: 60vh; min-height: inherit;} .indexSingleBlock{display: block; padding-top: 80px;} .indexSingleBlock.news{padding: 80px 0 0; width:calc(100% - 40px); margin: 0 auto;} .titlegroup, .news .titlegroup{width: 100%; margin-right: 0;} .titlegroup .btnCheck{display: none;} .titlegroup .infos{display: flex; margin-top: 10px;} .titlegroup .infos span::before{display: inline-block;} .titlegroup .infos span{margin-right: 20px;} .menuBlocksArea{display:flex; align-items:stretch; justify-content: flex-start; flex-wrap: nowrap; width:calc(100% + 40px); margin:0 -20px; overflow: scroll; padding: 0 20px;} .singleBlock, .news .singleBlock{margin:20px 0; margin-right: 20px; width:250px; max-width: none;} .singleBlock::-webkit-scrollbar{display: none;} .singleBlock.lastBtn{display: block;} .singleBlock.lastBtn a{display: flex; justify-content: center; align-items: center; flex-direction: column; background: var(--ColorOrange); width:250px; height: 100%; color: #fff;} .singleBlock.lastBtn a span{font-size: 18px; display: block; margin-bottom: 10px;} .singleBlock:last-child{margin-right: 0;} .singleBlock img{width: 250px;} .titlegroup .tags{display: flex; flex-wrap: wrap; width:100%; margin: 10px 0;} .titlegroup .tags li{display: flex; justify-content: center; align-items: center; padding: 10px; background: var(--ColorOrange); border-radius: 5px; margin-bottom: 5px;} .titlegroup .tags li a{color: #fff; display: block;} .ourService{display: block;} .singleServiceBlock{width:calc(100% - 40px); margin: 20px auto; padding-bottom: 70px; border-radius: 12px; overflow: hidden;} .mapArea .city{grid-template-columns: repeat(6, 1fr);} .mapArea .city li{display: block; width: auto; padding: 10px 0;} .mapArea .city li a{display: block; text-align: center;} footer .infosArea{padding-bottom: 100px;} footer .p1{flex-direction: column;} footer .footerLogo{width: 100%; height: 80px; margin-bottom: 30px; background-position: center;} footer .socialMedia i{width: 42px; height: 42px;} footer .socialMedia li{margin: 0 10px;} footer .p2{flex-direction: column;} footer .companyInfos{display: block; margin: 0 auto 50px; text-align: center;} footer .copyright{text-align: center; align-items:center;} footer .copyright li{margin-bottom: 10px;} .innerPage #navigation{border-bottom:5px solid var(--ColorBlue);} .innerPage .pageTopBN{display: none;} .breadcrumb{margin: 0;} .breadcrumb::before{display: none;} .BCBar{margin: 30px auto;} .breadcrumb .sortBtn{top:30px;} .caseListArea{margin: 50px auto;} .listBlock{grid-template-columns: repeat(2, 1fr);} .listBlock .singleBlock{margin: 0; border:1px solid #999; box-shadow: none;} .listBlock .singleBlock img{width: 100%;} .listBlock .singleBlock p.btnAddFavorite{margin: 0;} .listBlock.list .singleBlock .MBAdress, .listBlock.list .singleBlock .MBTags a, .listBlock.list .singleBlock .MBArea{font-size:3vw; line-height: 3vw;} .listBlock .singleBlock .MBPrice{font-size: 28px; line-height:32px;} .listBlock.list .singleBlock{display: grid; grid-template-columns: 50% 50%; grid-template-rows: 3fr 1fr; } .listBlock.list .singleBlock a{grid-row:1 / 2; grid-column: 1 / 2; height: 100%; background: #eee;} .listBlock.list .singleBlock .group1{grid-row:1 / 2; grid-column: 2/3; height: 100%; background: #eee;} .listBlock.list .singleBlock .MBPrice{grid-row:2/3; grid-column: 1/3; border-top:3px solid var(--ColorBlue); margin: 0; justify-content: center; height: 100%;} .pageFunctions .commonContainer{width: 100%; justify-content: center;} .pageFunctions .btnP.prints{display: none;} .pageContent.stable{padding-top: 0;} .salePanel{display: none;} .pageFunctions{top:0px;} .caseContent{margin: 50px auto;} .systemInfos{justify-content: center;} .caseContent .caseGroup.g1{display: block;} .caseContent .caseGroup.g3{display: flex; justify-content: space-between; align-items: stretch;} .caseContent .caseGroup.g3 .infoBlock, .caseContent .caseGroup.g3 .infoBlock:last-child{width: 49%; padding: 15px; border:1px solid #fff; margin: 0; border-radius: 12px; position: relative; margin-top: 30px;} .caseContent .caseGroup.g3 h2{display: block; width:100%; position: absolute; top:-30px; left: 0; text-align: center;} .infoBlock ul.shortSize{display: grid; } .caseTypeMenu ul{top:55px;} .infoBlock ul.shortSize li{margin: 10px 0; display: flex; flex-direction: column; align-items: center;} .infoBlock ul.shortSize li .title{width:100%; padding-bottom: 5px; border-bottom:1px solid #999; margin-bottom: 5px; text-align: center;} .loginContainer.commonContainer{margin: 0; width: 100%; max-width: none; display: flex; padding: 50px 0; align-items: center; justify-content: center; border-radius: 0; position: relative; box-shadow: none;} .loginBG{position: absolute; z-index: -1; width:100%; height: 100%; top:0; left: 0; border-radius: 0; opacity: 0.5;} .loginBlock{width: 90%; max-width: 450px; background: #fff; border-radius: 20px; box-shadow: 0 0 10px #0006;} .loginBlock .singleLoginBlock{min-height: 300px;} .memberTypeContent{background: url("../images/memberTypeBG_mobile-02.jpg") no-repeat bottom center; background-size:contain; min-height: inherit;} .memberTypeContent .content{width: 60%;} .typeSelection li a{font-size: 24px; line-height: 28px;} .typeSelection li a::before{width: 10vw; height: 10vw;} .userHead{margin:30px 0;} .userHead .commonContainer{display: flex; flex-direction: column-reverse; align-items: center;} .memberCardBlock{margin-bottom: 50px;} .userInfos{margin-bottom: -150px;} .UName{color: #fff;} .UHead{max-width: 200px; max-height: 200px;} .memberCardBlock .tips{display: block; text-align: center; width:100%; color: #fff; background: none; border:none;} .userBody .commonContainer{display: block; padding:160px 0 100px;} .userContent{display: none;} .userMenu{padding: 0; border:none;} .userMenu ul{display: grid; grid-template-columns: repeat(3,1fr); column-gap: 20px; grid-row-gap: 20px;} .userMenu li, .userMenu li.imp{display: block; border-radius: 12px; background:linear-gradient(to bottom, #999, #666);} .userMenu li.imp{background:linear-gradient(to bottom, #fc0, var(--ColorOrange));} .userMenu li a{width:100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 20px; line-height: 20px; padding: 3vw 0; position: relative;} .userMenu li a .counts, .userMenu li a.numbers.show .counts{display: block; width:100%; font-size: 5vw; line-height: 5vw; font-weight: 900; text-align: center; margin-bottom: 20px; color: #fff;} .userMenu li a.numbers.show .counts{color: var(--ColorBlue); position: static; background: none; display: block; width: 100%; height: auto; border-radius: 0; color:#fff;} .userMenu li a.numbers i{width:20px; height: 20px; margin-bottom: 0;} .userMenu li a i{width:100%; height: 6vw; margin-bottom: 20px;} .userMenu li a.upgrade::after{width: 30px; height: 30px; position: absolute; top:-15px; right: -15px; background-image: url("../images/icon_upgrade2.svg");} .userInnerPage .userMenu{display: none;} .userInnerPage .userContent, .userContent.commonContainer{display: block; padding: 0;} .userBody .caseListArea.commonContainer{padding: 0;} .caseListArea .titlegroup h1 i{width:30px; height: 30px; margin-right: 10px;} .userHead.userInnerPage{display: none;} .userFunctionBlock{display: flex; justify-content: space-between; align-items: center; padding: 20px 0; background: #000; position: sticky; top:0; z-index: 4; margin: 0; border-bottom:1px solid #ccc;} .userFunctionBlock a{font-size: 18px; line-height: 18px; display: flex; align-items: center; font-weight: 500; color: #fff;} .userFunctionBlock a.top::after, .userFunctionBlock a.back::before{content: ""; display: block; width:18px; height: 20px; background: url("../images/icon_arrow.svg") no-repeat center; background-size: contain; margin:0 10px;} .userFunctionBlock a.top::after{transform: rotate(90deg);} .userBody.userInnerPage .commonContainer{padding-top: 30px;} .businessHead{margin: 60px -20px 0; background: none; position: relative; flex-direction: column; align-items: center; padding: 0;} .businessHead::before{content: ""; width: 100%; height: 50%; position: absolute; top:0 ; left: 0; display: block; background: url("../images/lightBG.png") #eee; z-index: -1;} .btnGroup{right: 20px;} .businessHead .SAHead{width:50vw; height: 50vw; max-width: 320px;; max-height: 320px; border-radius: 320px; margin: 50px 0 20px; } .singleBig{width:27vw; height: auto; margin: 10px 1.3vw; font-size: 16px; line-height: 36px; background: none; flex-direction: column;} .singleBig .count{font-size: 6vw; line-height: 6vw;} .businessInfos .SAGroup .infos.phone{padding-bottom: 30px; margin-bottom: 10px; border-bottom:1px solid var(--ColorBlue); width:100%; justify-content: center;} .businessInfos .SAGroup .infos{display: flex; align-items: top;} .businessInfos .SAGroup .infos .title{white-space: nowrap;} .businessInfos .SAName{width: 100%; text-align: center; justify-content: center;} .PTTitle h2{font-size: 20px; line-height: 24px; font-weight: 700;} .PTTitle h2 small{font-size: 14px; line-height: 18px;} .PTTitle .priceBlock{font-size: 18px;} .PTTitle .priceBlock small, .PTTitle .priceBlock .tips{font-size: 12px;} .singleForm input[type="text"], .singleForm input[type="password"], .singleForm select{width:100%;} .singleForm .saveFixed{margin-right: 0;} .formSingleLine .title.box{margin: 0; margin-right: 10px;} .formSingleLine.block .group2{margin: 0 0 20px;} .formSingleLine.block .group2.noMargin{margin: 0;} .imgUploadArea{grid-template-columns: repeat(3, 1fr);} .articleHead{padding-top: 20px;} .articleHead::before{height: 40%;} #newsSlide .singleNewsSlide{display: flex; flex-direction: column-reverse;} .singleNewsSlide .textSide{padding: 30px 20px 10px; background: #eee;} .textSide .articleInfos{display: flex; flex-wrap: wrap; flex-direction: row; margin-top: 20px;} .articleInfos .ARTime{width:auto; margin-right:20px;} .articleInfos .AROption{width: auto; border: none; display: block;} .articleInfos .ARTags{width:100%; margin: 0 0 30px; padding: 10px 0; border-top:1px solid var(--ColorBlue);} .textSide a, .textSide a h1{font-size: 24px; line-height: 28px;} .articleInfos .ARTags a{font-size: 12px; line-height: 14px;} .articleHead .main-pagination{text-align: center;} .articleList .userBody .commonContainer{display: grid; grid-template-columns: 100%; grid-template-rows: auto auto; grid-template-areas:"newsList" "newsMenu";} .articleList .userContent{display: block; grid-area: newsList; padding: 0 0 50px;} .articleList .userMenu{grid-area: newsMenu;} .singleMenuBlock li{display: block; background:none; border:none; padding: 0; margin: 0;} .singleMenuBlock a{padding: 0; margin: 0; font-size: 16px; line-height: 16px;} .articleList .userMenu::before{content: "文章類別"; display: block; font-size: 20px; line-height: 20px; font-weight: 500; padding-bottom: 10px; margin-bottom: 30px; border-bottom:1px solid var(--ColorBlue);} .singleMenuBlock.hotArticles ul{padding-left: 30px;} .singleMenuBlock.hotArticles li a{justify-content: flex-start; font-size: 18px; line-height: 24px;} .articleHead.articleTitle{padding-top:0;} .articleHead.articleTitle::before{display: none;} .articleHead.articleTitle .commonContainer{width: 100%;} .articleTitle .singleNewsSlide .textSide{background: #fff;} .articleFunctions{justify-content: flex-start; column-gap: 10px;} } @media screen and (max-width: 700px) { .priceTable{display: block;} .pTitleRow{display: none;} .pPlanRow{margin-bottom: 50px;} .pPlanRow, .pPlanRow.level3{border-radius: 20px;} .PTTitle{display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: left; height: auto; padding: 20px;} .PTTitle h2{font-size:8vw; line-height: 9vw; width:48%;} .PTTitle h2 small{font-size: 18px; line-height: 24px;} .level1 .PTTitle .priceBlock, .PTTitle .priceBlock{width:48%; padding: 0; margin: 0; text-align: right; font-size: 5vw; line-height: 6vw;} .pricePlanBtn{text-align: center; width: 100%;} .rowContent{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 30px 0;} .rowContent li:nth-child(odd){background: none;} .rowContent li{width:49%; height: auto; padding: 20px; align-items: flex-start; justify-content: flex-end; flex-direction: row-reverse;} .rowContent li.X{display: none;} .rowContent li .text{display: block;} .rowContent li .include{width:14px; height: 14px; margin-right: 10px;} .SBBody{display: block;} .SBBody::before{display: none;} .caseContent .MBAdress::before{display: none;} .caseContent .MBAdress{flex-direction: column; grid-row-gap: 20px; font-size: 18px; line-height: 18px; width:100%; padding: 30px; color:var(--ColorBlue);} .singleOccupation{grid-template-columns: 1fr 1fr;} .chatPanel .singleBusinessBlock.main a{flex-direction: column; align-items: center;} .chatPanel .singleBusinessBlock.main .SAHead{width:100%;} .chatPanel .singleBusinessBlock .SAInfos{width:100%;} .chatPanel .singleBusinessBlock{display: flex; align-items: center; justify-content: center;} .chatPanel .singleBusinessBlock.main .SAGroup .infos.phone, .chatPanel .singleBusinessBlock.main .SAGroup .infos.company{display: none;} .chatPanel .singleBusinessBlock.main .SAGroup .infos{display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 12px; overflow: hidden;} .chatPanel .singleBusinessBlock.main .SAGroup .infos .title{width:auto;} .memberOrderInfos li{font-size: 14px; line-height: 18px;} .paymentHistory{font-size: 12px; line-height: 18px;} .CCContent{padding: 30px;} .CCContent .titleGroup{flex-direction:column; grid-row-gap: 50px;} .CCContent .qrCode{align-items: center; width: 100%;} .CCDataList{column-gap: 6%;} .CCDataList li{flex-direction: column; min-width: 47%;} .CCDataList li .title{width: 100%; padding: 3px;} .copyBtnsTips.gridGroup3{grid-template-columns: 1fr; grid-row-gap: 10px;} .copyBtn.show{padding: 5px; width:30%;} #pageMainContainer .singleForm .break{grid-template-columns: 1fr;} .smallBN{min-height: 200px;} #agentPanel .content{padding: 80px 15px 0;} #agentPanel .businessHead{margin: 0 -15px;} #agentPanel .businessInfos .SAGroup .introduction{padding: 40px 15px;} #agentPanel .businessInfos .SAGroup .introduction::before{left: 15px;} .singleForm .group4.break{flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap:10px; } .formSingleLine.copiesSearch .group4{flex-wrap: wrap; justify-content: space-between; column-gap: 0; row-gap:5px;} .formSingleLine.copiesSearch .group4 select{width:32%;} .formSingleLine.copiesSearch .group4 .formBtn{width: 100%;} .footerNav2{padding: 50px 0 20px;} .footerNav2 h1{font-size: 20px; line-height: 30px;} .FNBtns{flex-wrap: wrap; grid-row-gap: 10px;} .FNBtns li{width: 49%;} .FNBtns a .texts .CN{font-size:4vw; line-height: 1em;} .FNBtns a .texts .EN{font-size:3.6vw; line-height: 1em;} } @media screen and (max-width: 540px) { .searchPanel.mobOn .commonContainer{padding:0;} .laptopV{display: none;} .mobileV{display: block;} .picBlock.type2 a{flex-direction: column;} .picBlock.type2 a img, .picBlock.type2 .textContent{width:100%;} .suppliesList li{width:50%;} .chatPanel .commonContainer{flex-direction: column;} .chatPanel h1{width:100%;} .chatPanel .chatInputBlock{display: none;} .chatPanel a.chatBtn{display: block; padding: 15px 0; font-size: 24px; line-height: 32px; text-align: center; margin: 50px 0; background: #fff; border: 5px solid #88BD91; color: #88BD91; border-radius: 12px;} .titlegroup .tags li{padding: 5px;} .titlegroup .tags li a{font-size: 12px; line-height: 14px;} .singleServiceBlock{padding-bottom: 0;} .footerNav{display: grid; grid-template-columns: 1fr 1fr; padding-top:0; column-gap:5px; row-gap:5px;} .footerNav li{width:100%;} .footerNav li a{display:flex; align-items:center; justify-content:center; padding:5px; border:1px solid #fff3; border-radius:6px; width:100%;} .footerNav li:first-child{grid-column:1/span 2; font-size:24px; line-height:24px; padding-bottom:10px;} .mapArea .city{grid-template-columns: repeat(5, 1fr);} .mapArea .city li, .mapArea .city li:nth-child(n){width: auto; padding: 10px 0;} .mapArea .city li a{display: block; text-align: center; font-size: 12px; line-height: 16px;} .caseListArea .titlegroup h1{margin: 0;} .listStyle{display: none;} .BCBar{margin: 20px auto 0;} .breadcrumb .sortBtn{width: calc(100% + 40px); position: static; margin: 0 -20px 0; background: none;} .breadcrumb .sortBtn.on{box-shadow: 0 10px 8px #0003;} .breadcrumb .sortBtn .title{height: 70px;} .breadcrumb .sortBtn .title i.sort{width:30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border:1px solid var(--ColorBlue); border-radius: 30px; margin-right: 10px;} .breadcrumb .sortBtn .title i.sort::before{content: ""; display: block; width: 16px; height: 16px; background: url("../images/icon_sort.svg") no-repeat center; background-size: contain;} .breadcrumb .sortBtn .title span{font-size: 16px; line-height: 16px;} .breadcrumb .sortBtn .sortList{padding:20px; background: #fff; font-size: 16px; line-height: 16px;} .listBlock.list, .listBlock{display: block;} .listBlock.list .singleBlock, .listBlock .singleBlock{display: block; margin:0 0 30px; border:1px solid var(--ColorBlue); background: #fff; width:100%;} .listBlock .singleBlock:hover, .listBlock.list .singleBlock:hover{margin-bottom: 30px;} .listBlock.list .singleBlock a, .listBlock .singleBlock a{display: block; width: 100%; height: auto; background: none; max-width: none;} .listBlock .singleBlock img, .listBlock.list .singleBlock img{width: 100%; max-width: none; height: auto; max-height: none;} .listBlock.list .singleBlock .group1, .listBlock .singleBlock .group1{display: block; margin:0; padding: 5px 5px 10px; background: none;} .listBlock.list .singleBlock .MBAdress, .listBlock .singleBlock .MBAdress{font-size: 14px; line-height: 18px; display: block;} .listBlock.list .singleBlock .MBTags, .listBlock .singleBlock .MBTags{display: flex; align-items: center; margin: 15px 5px 5px;} .listBlock.list .singleBlock .MBTags a, .listBlock .singleBlock .MBTags a{font-size: 16px; line-height: 16px; display: block; width: auto; margin: 5px;} .listBlock.list .singleBlock .MBArea, .listBlock .singleBlock .MBArea{display: block; font-size: 16px; line-height: 18px; font-weight: 300;} .listBlock.list .singleBlock .MBPrice, .listBlock .singleBlock .MBPrice{display: flex; justify-content: flex-start; align-items: center; margin: 0px 10px; padding: 10px 0; border-top:1px solid var(--ColorBlue); font-size: 32px; line-height: 48px;} .pageFunctions{padding: 0;} .pageFunctions .commonContainer{display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ColorBlue); padding: 10px 0;} .pageFunctions .btnP{margin: 0; padding: 0; justify-content: center; border-right: 1px solid #fff; border-radius: 0; font-size: 13px;} .pageFunctions .btnP::before{width: 16px; height: 16px;} .pageFunctions .btnP:last-child{border:none;} .MBAdress ul{margin: 0; width: 100%; justify-content: space-between; background: none; column-gap: 10px; padding: 0; margin: 0;} .MBAdress ul li{display: block; width: 100%;} .MBAdress li a{width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; grid-row-gap: 5px; aspect-ratio:1; background: var(--ColorBlue); border-radius: 12px; text-decoration: none;} .MBAdress li a::before{width: 50%; height: auto; aspect-ratio:1; margin: 0;} .caseContent .caseGroup.g3{flex-direction: column;} .caseContent .caseGroup.g3 .infoBlock, .caseContent .caseGroup.g3 .infoBlock:last-child{width: 100%; margin-bottom: 30px;} .caseContent .caseGroup.g3 .infoBlock:last-child{margin-bottom: 0;} .caseContent .caseGroup.g4{display: block; margin: 0 -20px; border:0; border-radius: 0;} .caseTypeMenu{border-radius: 0; position: sticky; top:48px; padding: 0 3px; z-index: 5;} .caseTypeMenu ul{position: static; display: flex; align-items: center; flex-wrap: nowrap; column-gap: 15px; padding:10px 15px; overflow-x: scroll;} .caseTypeMenu ul::-webkit-scrollbar{display: none;} .caseTypeMenu li{display: flex; justify-content: center; align-items: center; width:100%; margin: 0; padding:0 20px; font-size: 14px; line-height: 18px; min-height: 32px; border:1px solid #fff; border-radius: 12px; white-space: nowrap;} .caseTypeMenu li.on{border-radius: 12px;} .caseTypeContainer{padding: 0; border-radius: 0;} .caseTypeContainer > div{padding-bottom:1px;} .singleLoginBlock .checkBlock{padding-left: 0;} .memberTypeContent .content{width:100%;} .typeSelection{flex-direction: column;} .typeSelection li{width: 100%; margin: 20px 0;} .typeSelection li a{flex-direction: row; padding: 20px; align-items: center;} .typeSelection li a::before{width:80px; height: 80px; margin: 0; margin-right: 10px;} .MIFContainer{margin: 50px auto;} .MIFContainer .singleLoginBlock{padding: 30px;} .memberCardBlock{width:100%;} .memberCard{width:100%; height: auto; flex-direction: column; background: #f7efda no-repeat top center; background-size:100% auto;} .userPoints{width:100%; flex-direction: row; margin: 20px 0;} .userPoints li{flex-direction: row;} .userPoints li i{width: 32px; height: 32px;} .memberCard .MCCardInfos{height: 40vw; justify-content: center; align-items: center;} .memberCard .MCLevel{display: flex; justify-content: center; align-items: center; width:100%;} .userPoints .title{font-size: 20px; line-height: 20px; width:auto; border:none;} .userPoints .title::after{content: "：";} .UName::before{font-size: 28px; line-height: 28px; display:inline; margin-bottom: 0;} .UHead{max-width: 300px; max-height: 300px; width:40vw; height: 40vw;} .memberCard.level1{background-image: url("../images/memberCard_level1_monile.jpg")} .memberCard.level2{background-image: url("../images/memberCard_level2_monile.jpg")} .memberCard.level3{background-image: url("../images/memberCard_level3_monile.jpg")} .userInfos{margin-bottom: -120px;} .userMenu ul{grid-template-columns: 1fr 1fr;} .userMenu li a i{height: 15vw;} .userMenu li a .counts, .userMenu li a.numbers.show .counts{font-size: 12vw; line-height: 12vw;} .singleBusinessBlock{box-shadow: none; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px dashed #999;} .singleBusinessBlock a{width:100%; flex-direction: row; justify-content: space-between;} .singleBusinessBlock .SAHead{width: 48%; height: auto; max-width:200px; border-radius: 200px;} .singleBusinessBlock .SAInfos{width: 48%; align-items: flex-start;} .btnGroup{width:calc(100% - 40px); justify-content: space-between;} .btnGroup li{width: 48%; margin: 0;} .userFunctionBlock a{font-size: 14px; line-height: 14px; margin:0 10px; color:#fff;} .userFunctionBlock a.top::after, .userFunctionBlock a.back::before{width: 14px; height: 16px; margin: 0 5px;} .rowContent{flex-direction: column; align-items:center; background: #fff;} .rowContent li{width:auto;} .formSingleLine .text.bolder{width: 100%; margin-bottom: 10px;} .formSingleLine .formBtn.getPhoneCode{margin-left: 0;} .gridGroup2{grid-template-columns: repeat(1, 1fr);} .gridGroup2.unbreak{grid-template-columns: repeat(2, 1fr);} .gridGroup3, .gridGroup5{grid-template-columns: repeat(2, 1fr);} .uploadCredit{padding: 0 20px;} .uploadCredit .text{flex-direction: column; font-size: 16px; line-height: 20px; font-weight: 700;} .uploadCredit .text::before{margin: 0 0 20px; width: 60px; height: 60px; font-size: 60px; line-height: 20px; border-radius: 60px; border-width:5px; font-weight: 400;} .userContent .functionArea{flex-direction: column;} .searchCaseArea{height: 32px;} .searchCaseArea input[type="text"]{width:100%;} .caseStatus .number{font-size: 42px; line-height: 50px;} .caseMenu ul{grid-template-columns: repeat(3, 1fr); grid-row-gap: 5px;} .caseProgress p{display: none;} .formNumberList li{margin-left: 15px;} .formNumberList.strech li{ width:calc(100% - 15px);} .imgUploadArea{grid-template-columns: repeat(2,1fr);} .imgUploadArea .deleteBtn{width:24px; height: 24px;} .articleHead{padding-top: 0;} .articleHead::before{display: none;} .articleHead .commonContainer{width: 100%;} .articleHead .main-pagination{position: static; margin: 10px 0;} .articleList .userContent .functionArea{flex-direction: column-reverse;} .articleList .userContent .functionArea h1{margin-top: 50px;} .articleList .userBody .pageSelection{margin: 0 0 50px;} .articleList .userBody .commonContainer{padding-top: 100px;} .articleList .userBody .caseListArea.commonContainer{padding: 0;} .articleHead.articleTitle{margin-bottom: 100px;} .professionalFields{flex-wrap: wrap; grid-row-gap: 15px;} .professionalFields li{width: 22%;} .formSingleLine2 .listBlock{width:100%;} .consultationType{width:100%;} .consultationType li{font-size: 20px; line-height: 20px;} .advancedBlock{width:95%; margin: 0 auto 30px;} .occupations h2{font-size: 24px; line-height: 24px;} .singleOccupation{grid-template: auto auto / 1fr 1fr; background: none;} .chatPanel .singleBusinessBlock.main{grid-area: 1/1/2/3;} .chatPanel .singleBusinessBlock.main a{display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 15px; padding: 10px;} .chatPanel .singleBusinessBlock{border:none; padding: 10px 0; margin: 0;} .chatPanel .singleBusinessBlock .SAHead{width:40%;} .chatPanel .singleBusinessBlock .SAInfos{width: auto;} .chatPanel .singleBusinessBlock a{justify-content: center;} .chatPanel .singleBusinessBlock:nth-child(4){display: none;} .chatPanel::after{width:90%; left: 5%;} .commonTextStyle{padding: 30px 15px; text-align: center;} .commonTextStyle p, .commonTextStyle li{text-align: justify;} .commonTextStyle h1{text-align: center;} .commonTextStyle h3{text-align: justify;} .commonTextStyle ul.titleList{padding:20px; margin-left: -20px; border-radius: 12px; background: #eee;} .commonTextStyle ul.titleList li{margin-bottom: 20px;} .caseListArea .titlegroup.breakLine{flex-wrap: wrap;} .caseListArea .titlegroup.breakLine .functionArea{width:100%;} .caseListArea .titlegroup.breakLine .functionArea .clearAlertBtn{width:100%; justify-content: center; margin-top: 10px;} .caseBlock{overflow: hidden;} .singleCaseBlock .caseBlock{display: flex; flex-direction: column;} .singleCaseBlock .caseBlock > div{width: 100%; height: auto; max-height: none; max-width: none; margin: 0; padding: 10px;} .singleCaseBlock .caseInfos{border-bottom:1px solid #999;} .singleCaseBlock .MBPrice{flex-direction: row; column-gap: 10px; background: #eee; border-bottom: 1px solid #999;} .singleCaseBlock.innerPage{margin-bottom: 0; display: block;} .singleCaseBlock.innerPage .MBCollector, .singleCaseBlock.innerPage .caseBlock .MBArea, .singleCaseBlock.innerPage .caseBlock .MBTags, .singleCaseBlock.innerPage .MBIMG, .singleCaseBlock.innerPage .caseProgress{display: none;} .singleCaseBlock.finished .MBIMG, .singleCaseBlock.reviewing .MBIMG{display: none;} .singleCaseBlock.finished .caseProgress, .singleCaseBlock.reviewing .caseProgress{grid-column: 1/5;} .formBtn.caseComfirm{width:50%; height: 60px;} .singleCaseBlock.reviewing .caseProgress{border:none;} .reviewing .caseProgress p{display: block;} .singleCaseBlock{background: #eee; border-radius: 12px; padding-top: 20px; border:1px solid #999; overflow: hidden;} .singleCaseBlock .caseBlock{border:none; border-top:1px solid #999; border-radius: 0;} .fullCircle{border-color:#fff;} .singleForm .titleGroup .functionArea{flex-direction: row;} .messageType li{font-size: 18px; line-height: 18px;} .messageType li .counts{font-size: 16px; line-height: 16px; width:28px; height: 28px;} .mailBox{margin: 40px -20px; border:none; padding:30px 0 0;} .mailBox::before{content: "信件篩選"; position: static; padding: 5px 20px; width:100%; height: auto; font-size:24px; line-height: 24px; margin-bottom: 5px;} .MBXTitle .MBXBlock.MBX3, .MBXTitle .MBXBlock.MBX5{display: none;} .MBXTitle.MBXColumn{grid-template: 1fr 1fr/1fr 1fr; height: auto; column-gap: 10px; grid-row-gap: 10px; width: calc(100% - 40px); margin: 0 auto 30px; border-radius: 0;} .MBXTitle.MBXColumn .MBX4{grid-area: 2/1/3/3;} .MBXTitle.MBXColumn .MBXBlock{background: none;} .MBXTitle .MBXBlock input, .MBXTitle .MBXBlock select{appearance:auto; padding:10px; border:1px solid #999; background: #fff; border-radius: 6px; color: #999; text-align: left;} .MBXContent.unread .MBXBlock{background: none;} .MBXContent.unread{background: #eee;} .MBXColumn.MBXContent{grid-template: 1fr 1fr 1fr / 80px 1fr 1fr; grid-gap: 0; border-bottom:2px solid #999;} .MBXColumn:nth-child(2){border-top:2px solid #999;} .MBXContent .MBXBlock{border:none;} .MBXContent .MBXBlock.MBX1{grid-area: 1/1/4/2;} .MBXContent .MBXBlock.MBX2{grid-area: 2/2/3/4; justify-content: flex-start; padding:2px 5px;} .MBXContent .MBXBlock.MBX2::before{content: "<< 問題類型：";} .MBXContent .MBXBlock.MBX2::after{content: " >>";} .MBXContent .MBXBlock.MBX3{grid-area: 3/2/4/4; justify-content: flex-start;} .MBXContent .MBXBlock.MBX4{grid-area: 1/2/2/3; justify-content: flex-start; border-bottom:1px dashed #999; font-weight: 900;} .MBXContent .MBXBlock.MBX4::before{content: "發問者：";} .MBXContent .MBXBlock.MBX5{grid-area: 1/3/2/4; justify-content: flex-end; border-bottom:1px dashed #999; font-size: 10px;} .singleForm .memberCard.head{display: flex; flex-direction: column; background: none; box-shadow: none; grid-row-gap: 30px; margin: 0;} .memberCard.head .MCCardInfos{width: 100%; border-radius: 12px; box-shadow: 0 0 10px #0003; overflow: hidden; background: no-repeat left; background-size:cover; margin: 0;} .memberCard.head.level1 .MCCardInfos{background-image:url("../images/member-card-innerPage1.jpg");} .memberCard.head.level2 .MCCardInfos{background-image:url("../images/member-card-innerPage2.jpg");} .memberCard.head.level3 .MCCardInfos{background-image:url("../images/member-card-innerPage3.jpg");} .memberOrderInfos{display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; width:100%; color: var(--ColorBlue); column-gap: 20px; grid-row-gap: 20px; padding: 0; border:none;} .memberOrderInfos li{flex-direction: column; grid-row-gap: 5px;} .memberOrderInfos li span{width:100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 5px 0; font-weight: 700; color: #fff;} .memberOrderInfos li span.tips{color: var(--ColorGolden);} .memberOrderInfos li .title{background: var(--ColorBlue2); color: #fff; font-weight: 400; opacity: 1;} .memberOrderInfos li.center{grid-area: 1/1/2/3;} .memberOrderInfos li.center .memberPrice{color: var(--ColorOrange);} .CCContent{padding: 30px 20px;} .CCContent .titleGroup h1, .CCContent h2, .signUpDate, .CCPartTitle{font-size: 20px; line-height: 24px;} .CCContent .printTime{font-size: 14px; line-height: 16px;} .signUpDate{width: 100%;} .CCDataList{width:100%;} .CCDataList li{min-width: 100%;} .copyResult .paymentHistory{grid-row-gap: 0;} .copyResult .PHColumn.title{display: none;} .copyResult .PHColumn.content{border:1px solid var(--ColorBlue); grid-template-columns: 27% 28% 45%; grid-template-rows: repeat(3, 1fr); column-gap: 0; padding: 0;} .copyResult .PHBlock{flex-direction: column; justify-content: flex-start; border-color: #ccc; padding: 2px 4px;} .copyResult .PHBlock.PHB0{grid-area: 1/1/2/3; border-bottom:1px solid #ccc;} .copyResult .PHBlock.PHB1{grid-area: 2/1/3/2; border-bottom:1px solid #ccc; justify-content: flex-start;} .copyResult .PHBlock.PHB2{grid-area: 3/1/4/2;} .copyResult .PHBlock.PHB3{grid-area: 2/2/3/3; border-bottom:1px solid #ccc;} .copyResult .PHBlock.PHB4{grid-area: 3/2/4/3;} .copyResult .PHBlock.PHB5{grid-area: 1/3/4/4;} .copyResult .PHBlock.PHB6, .copyResult .PHBlock.PHB7{justify-content: center;} .copyResult .PHBlock::before{font-size: 12px; line-height: 16px; color: #fff; display: block; width: calc(100% + 8px); background: #aaa; text-align: center; margin: -2px -4px 2px;} .copyResult .PHBlock.PHB0::before{content:"名稱";} .copyResult .PHBlock.PHB1::before{content:"用途";} .copyResult .PHBlock.PHB2::before{content:"面積";} .copyResult .PHBlock.PHB3::before{content:"所有權";} .copyResult .PHBlock.PHB4::before{content:"他項權利部";} .listBlock.copies{display: grid; grid-template-columns: 1fr;} .caseTypeContainer .typeTitle{margin: 20px -10px; padding: 10px 30px; width: calc(100% + 10px); border-radius: 0;} .caseTypeContainer .singleForm{padding: 0; width:95%; margin: 0 auto;} .caseTypeContainer .singleForm h2{color: var(--ColorBlue); font-size: 24px; line-height: 26px; text-align: left; padding: 5px 0; border-bottom:1px solid #999; margin: 20px 0 50px; background: none; width: 100%;} .tableStyle div.TSContent{margin-top: -15px; border-color: #eee;} .tableStyle .gridGroup2{grid-row-gap: 15px;} .myPoints{padding: 50px 0;} .buyPointsArea{grid-template-columns: repeat(2, 1fr); column-gap: 10px; grid-row-gap: 10px;} .buyPointsArea li{padding: 10px 0;} .formSingleLine.between{flex-direction: column; align-items: center;} .listBlock.copies{grid-row-gap: 15px;} .singleCopy a{padding: 10px; border: 1px solid #ccc; border-radius: 12px; position: relative; min-height: 30vw;} .copyPrintTime{flex-direction: row; padding: 0; border: none; padding: 0; margin-left: calc(30vw + 5px); width: auto;} .copyPrintTime::before{width: 30vw; height: 30vw; position: absolute; top:calc(50% - 15vw); left: 0;} .singleCopy a h3, .singleCopy a h4{margin-left: calc(30vw + 5px); width: auto;} /*物件調查*/ .paymentHistory.callUpResult{margin-top: -50px;} .copyResult .callUpResult .PHColumn.content{grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto;} .copyResult .callUpResult .PHBlock{padding-bottom: 10px; position: relative;} .copyResult .callUpResult .PHBlock.PHB0{grid-area: 1/1/2/3;} .copyResult .callUpResult .PHBlock.PHB1{grid-area: 2/1/3/2;} .copyResult .callUpResult .PHBlock.PHB2{grid-area: 2/2/3/3;} .copyResult .callUpResult .PHBlock.PHB3{grid-area: 1/3/3/4; display: flex; align-items: center; justify-content: center; padding: 5px;} .copyResult .callUpResult .PHBlock::before{padding: 5px 2px; margin-bottom: 10px;} .copyResult .callUpResult .PHBlock.PHB0::before{content: "縣市鄉鎮市區";} .copyResult .callUpResult .PHBlock.PHB1::before{content: "路段號";} .copyResult .callUpResult .PHBlock.PHB2::before{content: "建地號";} .copyResult .callUpResult .PHBlock.PHB3::before{display: none;} .paymentHistory .confirmBtn{height: 80%;} .copyResult2 h2{font-size: 16px; line-height: 26px; text-align: left; margin-bottom: -30px;} /*.callUpDTable, .callUpDL{margin: 0 -5px; width: calc(100% + 10px);}*/ .callUpDL .COL{padding: 15px 5px;} .callUpDL .COL.CContent{padding-left: 8px;} .callUpPointsCount{margin: 30px 0;} /*補充ＣＳＳ*/ .chatPanel .singleBusinessBlock .SAName:first-child h1{color: var(--ColorBlue);} .chatPanel .singleBusinessBlock .SAName h1{color: #fff;} } @media screen and (orientation: landscape) and (max-device-width:1000px) { #sidefunction, #sideLink, #pageMainContainer{display: none;} body{background: url("../images/mobile_landscape.jpg")no-repeat center; background-size: cover;} } @page { size:A4; } /*無線上功能的ＣＳＳ*/ .statusLight, .on .statusLight{display: none;} .phoneBtn.btnP, .on .phoneBtn.btnP{display: block;}