.main {     padding: 0px 0; background-color: #fff;} a {     color: #212121 } #collapseAll {     margin-bottom: 32px;     display: flex;     flex-direction: column } #collapseAll .collapseTitle {     margin: 0;     margin-top: 16px;     text-transform: uppercase;     justify-content: space-between;     display: Flex;     background-color: #fff;     border: 1px solid #ddd;     height: 36px;     line-height: 34px;     padding: 0 16px;     font-size: 16px;     position: relative;     height: auto } #collapseAll .collapseTitle:first-child {     margin-top: 0 } #collapseAll .collapseTitle a {     color: #f9963e;     width: 100%;     z-index: 2; 	font-weight: bold;     position: relative;     padding-right: 20px } #collapseAll .collapseTitle::after {     z-index: 1;     right: 16px;     position: absolute;     content: "\f054";     display: inline-block;     font: normal normal normal 14px/1 FontAwesome;     font-size: inherit;     text-rendering: auto;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale;     line-height: 34px } #collapseAll .collapseTitle.open::after {     content: "\f078" } #collapseAll .collapseContent {         background-color: #fff;     border: 1px solid #ddd;     border-top: 0;     padding: 16px;     font-size: 16px } .area .areaTitle {     background-color: #383838;     color: #fff;     height: 36px;     line-height: 36px;     padding: 0 16px } .area.filter {     margin-bottom: 16px } .area.filter .areaContent {     border: 1px solid #ddd } .area.filter .filterAll {     display: flex;     flex-wrap: wrap } .area.filter .filterAll .filt {     border-right: 1px solid #ddd;     display: flex;     padding: 16px;     flex-direction: column;     width: 33.3% } .area.filter .filterAll .filt .filtTitle {     margin-bottom: 16px;     font-weight: bold } .area.filter .filterAll .filt .filtContent {     padding: 0 16px } .area.filter .filterAll .filt .lowUpper {     margin-top: 8px;     display: flex;     justify-content: space-between } .area.output .areaTitle {     display: flex } .area.output .areaTitle>div {     width: 17% } .area.output .count {     padding: 16px;     background-color: #eee;     border: 1px solid #ddd;     border-top: 0 } .area.output .outputAll {     display: flex;     flex-direction: column } .area.output .outputAll .box {     flex-wrap: wrap;     background-color: #fff;     padding: 16px;     border: 1px solid #ddd;     margin: 8px 0;     display: flex } .area.output .outputAll .box .first .time {     color: #59A219 } .area.output .outputAll .box>div {     width: 16.65% } .area.output .outputAll .box .last {     display: flex;     justify-content: center;     flex-direction: column } .area.output .outputAll .box .last .buy {     color: #fff;     padding: 4px 32px;     display: table;     margin: 0 auto;     border-radius: 3px;     background-color: #f9963e;     text-align: center } .area.output .outputAll .box .last .details {     text-align: center;     font-size: 14px } .noUi-connect {     background: #007AC3 !important } .site {     overflow: hidden;     position: relative } .server {     background-color: #007AC3;     padding: 50px 0 } .server .container {     padding: 16px;     background-color: #fff;     border-radius: 3px } .server .serverTitle {     background-color: #007AC3;     height: 36px;     padding: 0 16px;     line-height: 36px;     color: #fff;     font-weight: bold } .server .serverContent {     display: flex;     flex-wrap: wrap;     padding: 16px;     border: 1px solid #ddd;     justify-content: space-between } .server .serverContent .serverFeature {     display: flex;     margin-bottom: 16px;     width: 40%;     flex-wrap: wrap } .server .serverContent .serverFeature .full {     width: 100% } .server .serverContent .serverFeature .img {     width: 36px;     margin-right: 8px;     height: fit-content } .server .serverContent .serverFeature .info {     flex: 1;     display: flex;     flex-direction: column } .server .serverContent .serverFeature .info b {     color: #007AC3;     font-size: 18px;     font-weight: bold } .server .serverContent .serverFeature .info span {     color: #848484;     font-size: 11px;     font-weight: normal } .server .serverContent .serverFeature select {     background-color: #fff;     border: 1px solid #ddd;     padding: 6px;     margin-top: 8px;     width: 100% } .product {     background-color: #007AC3;     padding: 50px 0 } .product .container {     padding: 16px;     background-color: #fff;     width: 500px;     border-radius: 3px } .product .container .productTitle {     padding: 20px 0;     color: #007AC3;     text-align: center;     font-size: 20px;     font-weight: bold } .product .container .img {     display: flex;     justify-content: center;     flex-direction: column;     padding-bottom: 16px;     border-bottom: 1px dashed #ddd } .product .container .img img {     margin: 0 auto;     max-width: 100%;     width: fit-content } .product .container .img span {     color: #ccc;     font-size: 14px;     text-align: center;     font-style: italic;     margin: 0.8em 20px 0 20px } .product .container .price {     padding: 8px 0;     display: flex;     flex-direction: column;     justify-content: center } .product .container .price b {     color: #007AC3;     font-size: 36px;     line-height: 1.0em;     padding: 0;     margin: 0.4em 0 0 0;     text-align: center } .product .container .price span {     font-size: 12px;     color: rgba(0, 0, 0, 0.5);     text-align: center;     line-height: 1.0em;     padding: 0;     margin: 0 } .product .container .buy {     display: flex;     justify-content: center;     font-weight: bold;     height: 36px;     line-height: 36px;     background-color: #007AC3;     color: #fff;     text-align: center;     border-radius: 3px } .product .container .date {     color: darkred;     text-align: center;     padding: 8px 0;     border-bottom: 1px dashed #ddd } .product .container .feature {     border-bottom: 1px dashed #ddd;     display: flex;     justify-content: center;     flex-direction: column;     padding: 8px 0 } .product .container .feature b {     text-align: center;     font-weight: bold } .product .container .feature span {     text-align: center;     font-size: 12px;     color: rgba(0, 0, 0, 0.5);     text-align: center;     line-height: 1.0em;     padding: 0;     margin: 0 } .detailsContent {     display: none;     padding: 0;     background-color: #eee;     margin: 0;     width: 100%;     margin-top: 8px;     flex-direction: column } .detailsContent.active {     display: flex } .detailsContent li {     display: flex;     border-bottom: 1px solid #ddd } .detailsContent .left {     padding: 16px;     font-size: 20px;     width: 25% } .detailsContent .right {     padding: 16px;     width: 75% } @media (max-width: 767px) {     .area.output .outputAll .box .last {         background-color: #212121;         padding: 16px     }     .area.output .outputAll .box .last .buy {         width: 100%;         margin-bottom: 4px     }     .area.output .outputAll .box>div {         padding: 8px 0     }     .area.output .outputAll .box .last .details {         color: #fff     }     .server .serverContent .serverFeature,     .product .container {         width: 100%     }     .area.filter .filterAll .filt {         width: 100%     }     .area.output .areaTitle {         display: none     }     .area.output .outputAll .box {         flex-direction: column;         justify-content: center     }     .area.output .outputAll .box>div {         width: 100%;         text-align: center     }     .detailsContent li {         flex-direction: column     }     .detailsContent .left,     .detailsContent .right {         width: 100%     } }.greeting {padding: 16px;}