horizList.less 2.15 KB
@charset "UTF-8";

.horiz-list-box {
	background-color: transparent;
	width: 100%;
	height: auto;
	.title-box + .box {
		margin-top: 30px;
	}
	> .box {
		width: 750px;
		.h-box {
			width: 100%;
			height: auto;
			overflow: hidden;
			.scroll-box {
				width: 100%;
				height: auto;
				overflow-x: auto;
				overflow-y: hidden;
				-webkit-overflow-scrolling: touch;
				padding-bottom: 22px;
				> .box {
					display: flex;
					//justify-content: space-around;
					align-items: center;
					.item-box {
                        // display: inline-flex;
                        display: inline-block;

					}
				}
			}
		}
		&.com-1 {
			&.pid-2, &.pid-4 {
				.h-box {
					height: 320px;
					.scroll-box {
						> .box {
							display: block;
							white-space: nowrap;
							width: 100%;
							.item-box {
								padding-right: 40px;
								&:first-child {
									padding-left: 40px;
								}
							}
						}
					}
				}
			}
		}
		&.com-2 {
			.h-box {
				height: 354px;
				.scroll-box {
					padding-bottom: 32px;
					> .box {
						display: block;
						white-space: nowrap;
						width: 100%;
						.item-box {
							padding-right: 30px;
							&:first-child {
								padding-left: 30px;
							}
						}
					}
				}
			}
			&.pid-2 {
				.h-box {
					height: 302px;
					.scroll-box {
						padding-bottom: 20px;
						> .box {
							display: block;
							.item-box {
								padding-right: 30px;
								&:first-child {
									padding-left: 30px;
								}
							}
						}
					}
				}
			}
		}
		&.com-3 {
			.h-box {
				height: 292px;
				.scroll-box {
					padding-bottom: 26px;
					> .box {
						display: block;
						white-space: nowrap;
						width: 100%;
						.item-box {
							padding-right: 30px;
							&:first-child {
								padding-left: 30px;
							}
						}
					}
				}
			}
		}
		&.com-tab {
			.h-box {
				height: 102px;
				.scroll-box {
					padding-bottom: 45px;
				}
			}
			&.pid-true {
				.h-box {
					.scroll-box {
						> .box {
							.item-box {
								&:last-child {
									.title-sub-title-com {
										/deep/ .line {
											display: none;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}