first commit

layout/style-scss/sliding-doors.scss

@@ -0,0 +1,100 @@
+@import "_mixins";
+@import "_variables";
+
+.box-02 {
+	padding-top: 120px;
+	padding-bottom: 170px;
+
+	@include respond-below(md) {
+		padding-top: 100px;
+		padding-bottom: 100px;
+	}
+
+	.row {
+		&.row_1 {
+			.col-text {
+				text-align: right;
+
+				.col-data {
+					margin-left: auto;
+					margin-right: 80px;
+				}
+			}
+
+			@include respond-below(md) {
+				margin-bottom: 60px;
+
+				.col-text {
+					order: 1;
+
+					.col-data {
+						margin-right: auto;
+						margin-left: auto;
+					}
+				}
+			}
+		}
+
+		&.row_2 {
+			.col-text {
+				text-align: left;
+
+				.col-data {
+					margin-left: 60px;
+				}
+
+				.action-btn {
+					left: 75px;
+					bottom: 0;
+				}
+			}
+			@include respond-below(md) {
+				.col-text {
+					.col-data {
+						margin-right: auto;
+						margin-left: auto;
+					}
+				}
+			}
+		}
+
+		.col-img {
+			text-align: center;
+		}
+		.col-text {
+			display: flex;
+			align-items: center;
+
+			p {
+				color: $cTxtBlack;
+				font-size: 14px;
+				font-weight: 300;
+				margin-bottom: 0;
+				line-height: 2;
+			}
+
+			.col-data {
+				padding-top: 40px;
+				max-width: 420px;
+				border-top: 2px solid black;
+				margin-top: 60px;
+				overflow: hidden;
+				transition: height 250ms ease-in-out;
+			}
+
+			@include respond-below(md) {
+				p {
+					text-align: center;
+				}
+				.col-data {
+					max-width: 606px;
+					margin-top: 40px;
+				}
+			}
+		}
+	}
+}
+
+.box-03 {
+	margin-bottom: 150px;
+}