/*** # index CSS ***/
span.point-blue {
	color: var(--point-blue);
}
.section-title {
	font-size: 52px;
	line-height: 154%;
	font-weight: 700;
	text-align: center;
	word-break: keep-all;
}
.section-title.left {
	text-align: left;
}

@-webkit-keyframes zoom-a {
	0% { background-size: cover; }
	100% { transform: scale(1.00,1.00); }
}
@-moz-keyframes zoom-a {
	0% { background-size: cover; }
	100% { transform: scale(1.00,1.00); }
}
@-o-keyframes zoom-a {
	0% { background-size: cover; }
	100% { transform: scale(1.00,1.00); }
}
@keyframes zoom-a {
	0% { background-size: cover; }
	100% { transform: scale(1.00,1.00); }
}
.zoom {
	-webkit-animation:zoom-a 1s linear alternate; /* Safari 4+ */
	-moz-animation:zoom-a 1s linear alternate; /* Fx 5+ */
	-o-animation:zoom-a 1s linear alternate; /* Opera 12+ */
	animation:zoom-a 1s linear alternate; /* IE 10+, Fx 29+ */
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}


/**# SECTION1 **/
#Section1{
	width: 100%;
	min-height: 840px;
	aspect-ratio: 1 / 0.525;
	overflow: hidden;
	position: relative;
}
#Section1 .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/section1Bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transform: scale(1.10, 1.10);
	z-index:1;
}
.section1-in {
	position: absolute;
	box-sizing: border-box;
	max-width: 1520px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	z-index: 2;
}
.section1-content {
	width: 35%;
	text-align: right;
}
.section1-in .logo-wrap {
	margin-bottom: 34px;
}
.section1-logo-img {
	width: 200px;
}
.section1-in .title-wrap {
	font-weight: 700;
	font-size: 70px;
	line-height: 135%;
}
.section1-in .btn-wrap {
	margin-top: 43px;
}
.section1-in .btn-wrap a {
	display: table;
	margin-left: auto;
}
.section1-btn {
	background-color: var(--point-blue);
	color: var(--white);
	display: flex;
	align-items: center;
	padding: 9px 19px;
	outline: none;
	border-radius: 10px;
	border: none;
	line-height: 190%;
	letter-spacing: -1px;
	font-weight: 600;
	font-size: 17px;
}
.section1-btn-icon {
	margin-right: 9px;
	width: 20px;
}

/**# SECTION2 **/
#Section2 {
	padding-top: 144px;
	padding-bottom: 202px;
}
.section2-content {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	margin-top: 129px;
	word-break: keep-all;
}
.section2-content .line {
	width: 100%;
	display: flex;
	align-items: flex-end;
}
.section2-content .line.left.in {
	padding-left: 10%;
}
.section2-content .line.right {
	flex-direction: row-reverse;
	margin: 70px 0;
}
.section2-profile-img {
	width: 136px;
	display: table;
	margin: 0;
}
.section2-chat-wrap {
	margin : 0 27px;
}
.section2-chat-box {
	color: var(--white);
	background-color: var(--point-blue);
	padding: 26px 32px;
	border-radius: 32px;
	font-size: 25px;
}
.section2-content .line.right .section2-chat-box {
	text-align: right;
}
.section2-chat-box .title {
	font-weight: 800;
	line-height: 135%;
	margin-bottom: 9px;
}
.section2-chat-box .chat-content {
	font-weight: 500;
	line-height: 140%;
}

/**# SECTION3 **/
#Section3 {
	background-color: #F1F5F9;
	padding: 175px 0;
}
.section3-content {
	width: 100%;
	margin: 0 auto;
	margin-top: 50px;
	word-break: keep-all;
	display: flex;
}
.section3-content > .item {
	flex: 1;
	margin-right: 65px;
	position: relative;
}
.section3-content > .item:last-child {
	margin-right: 0;
}
.section3-content > .item .img-wrap {
	text-align: center;
	position: relative;
	z-index: 2;
}
.section3-img {
	width: 85%;
}
.section3-content > .item .text-wrap {
	text-align: center;
	position: relative;
	padding: 40px 20px;
	padding-top: 0;
	box-sizing: border-box;
	border-radius: 20px;
	font-weight: 600;
	font-size: 30px;
	line-height: 133%;
	margin-top: 25px;
}
.section3-content > .item .text-wrap .text-wrap-in {
	position: relative;
	z-index: 2;
}
.section3-content > .item:after {
	content: "";
	position: absolute;
	background-color: var(--white);
	width: 100%;
	bottom: 0;
	left: 0;
	height: 63%;
	border-radius: 20px;
	z-index: 1;
}

/** # SECTION4 **/
@keyframes section4-revealCircle1 {
    0% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 50%);
    }
    5% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 25%);
    }
    10% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%);
    }
    15% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 25% 0%);
    }
    20% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 50% 0%);
    }
    25% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 75% 0%);
    }
    30% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%);
    }
    35% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 25%);
    }
    40% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 50%);
    }
    45% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 75%);
    }
    50% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%);
    }
    55% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 75% 100%);
    }
    60% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 50% 100%);
    }
    65% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 25% 100%);
    }
    70% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    75% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 75%);
    }
    80% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%);
    }
    85% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%);
    }
    90% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
    }
    95% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 25% 50%);
    }
    100% {
        clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 50%);
    }
}
@keyframes section4-revealCircle2 {
    0% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 50%);
    }
    5% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 25%);
    }
    10% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%);
    }
    15% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 75% 0%);
    }
    20% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 50% 0%);
    }
    25% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 25% 0%);
    }
    30% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%);
    }
    35% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 25%);
    }
    40% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 50%);
    }
    45% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 75%);
    }
    50% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%);
    }
    55% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 25% 100%);
    }
    60% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 50% 100%);
    }
    65% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 75% 100%);
    }
    70% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%);
    }
    75% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 75%);
    }
    80% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%);
    }
    85% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 25%);
    }
    90% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }
    95% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%, 75% 50%);
    }
    100% {
        clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%, 50% 50%);
    }
}

:root {
	--section4-icon-width: 313px;
	--section4-line-block-width: 133px;
	--section4-blank-width: 65px;
	--section4-blank-height: 105px;
	--section4-line-blank-width: 122px;
	--section4-diagonal: calc( (var(--section4-blank-width) * var(--section4-blank-width) + var(--section4-blank-height) * var(--section4-blank-height)) * 1px );
}
#Section4 {
	padding: 150px 0;
}
.section4-content {
	min-height: calc((var(--section4-icon-width) * 4) + (var(--section4-line-blank-width) * 3) - 100px);
	width: 100%;
	max-width: 565px;
	margin: 0 auto;
	margin-top: 50px;
}
.section4-content .line {
	position: relative;
	width: 100%;
	display: flex;
	align-item: center;
	margin-top: -35px;
}
.section4-content .line:first-child {
	margin-top: 0;
}
.section4-content .line.end {
	flex-direction: row-reverse;
}
.section4-content .line .icon-wrap {
	border-radius: 100%;
	width: var(--section4-icon-width);
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	border: 1px dashed var(--point-purple);
	padding: 20px;
	clip-path: polygon(50% 50%, 50% 0%, 50% 0%); 
	position: relative;
	z-index: 2;
	background-color: var(--white);
}
.section4-content .line.end .icon-wrap.on {
	animation: section4-revealCircle1 0.3s linear forwards;
}
.section4-content .line.start .icon-wrap.on {
	animation: section4-revealCircle2 0.3s linear forwards;
}
.section4-content .line .icon-wrap .gradient-circle {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(to bottom, #AEB8FE, var(--point-purple));
	border-radius: 100%;
	padding: 25px;
	box-sizing: border-box;
	box-shadow: 5px 5px 7px #00000040;
}

.section4-content .line .icon-wrap .white-circle {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--white);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
}
.section4-item-img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 115%;
}
.section4-item-img.img1 {
	left: 54%;
	top: 46%;
}
.section4-content .line .line-block {
	display: flex;
	align-items: center;
	width: 0;
	opacity: 0;
	position: relative;
	transition: 0.3s;
}
.section4-content .line .line-block.on {
	opacity: 1;
}
.section4-content .line .line-block.width {
	width: var(--section4-line-block-width);
}
.section4-content .line .line-block:after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 27px;
	aspect-ratio: 1 / 1;
	background-color: var(--point-purple);
	border-radius: 100%;
}
.section4-content .line.start .line-block:after {
	right: 0;
}
.section4-content .line .line-block .line-block-dash {
	width: 100%;
	border-top: 1px dashed var(--point-purple);
	height: 1px;
	position: relative;
}

.section4-content .line .text-wrap {
	position: absolute;
	/* top: 50%;
	transform: translateY(-50%); */
	top: 43%;
	width: 100%;
	font-size: 30px;
	line-height: 160%;
	letter-spacing: -2px;
	opacity: 0;
	transition: 0.2s;
	font-weight: 500;
}
.section4-content .line .text-wrap.on {
	opacity: 1;
}
.section4-content .line.end .text-wrap {
	margin-right: calc(var(--section4-line-block-width) + var(--section4-icon-width) + 20px);
	text-align: right;
}
.section4-content .line.start .text-wrap {
	margin-left: calc(var(--section4-line-block-width) + var(--section4-icon-width) + 20px);
	text-align: left;
}
.section4-content .line .text-wrap .title {
	color: var(--point-blue);
	font-weight: 700;
	font-size: 40px;
	margin-bottom: 30px;
	line-height: 100%;
}
.section4-content .liner-dash {
	position: relative;
	z-index: 1;
	height: 0;
	width: 1px;
	display: table;
	margin: 0 auto;
	margin-top: -35px;
	transition: 0.2s;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px dashed var(--point-purple);
	opacity: 0;
}
.section4-content .liner-dash.to-right {
	transform: rotate(32deg);
}
.section4-content .liner-dash.to-left {
	transform: rotate(-32deg);
}
.section4-content .liner-dash.on {
	opacity: 1;
	height: var(--section4-line-blank-width);
}

/** # SECTION5 **/
:root {
	--balloon-width: 25px;
	--balloon-height: 40px;
}
#Section5 {
	padding-top: 139px;
	padding-bottom: 90px;
	background-color: #F1F5F9;
	position: relative;
	overflow: hidden;
}
#Section5:after {
	content: "";
	border-top: var(--balloon-height) solid #F1F5F9;
	border-left: var(--balloon-width) solid transparent;
	border-right: var(--balloon-width) solid transparent;
	border-bottom: 0px solid transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%);
}
.section5-map-wrap {
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.section5-map-img {
	width :100%;
}
.section5-map-icon {
	width: 100%;
}
.section5-button {
	position: absolute;
	cursor: pointer;
	z-index: 2;
	width: 4.32%;
}
.section5-button .section5-map-icon.off{
	display: table;
}
.section5-button .section5-map-icon.on{
	display: none;
}
.section5-button.on .section5-map-icon.off{
	display: none;
}
.section5-button.on .section5-map-icon.on{
	display: table;
}
.section5-button.livingroom {
	top: 46%;
	left: 62%;
}
.section5-button.bathroom {
	top: 28%;
	left: 36%;
}
.section5-button.bedroom {
	top: 25%;
	left: 17%;
}
.section5-button.kitchen {
	top: 60%;
	left: 31%;
}
.section5-button.veranda {
	top: 70%;
	left: 82%;
}
.section5-button.room {
	top: 30%;
	left: 51%;
}
.section5-button.porch {
	top: 59%;
	left: 49%;
}
.section5-slider-out {
	padding: 10px;
	width: 100vw;
	overflow-x: hidden;
}
.section5-slider-wrap .swiper-slide {
	width: 844px;
	box-sizing: border-box;
	padding: 35px 40px;
	background-color: var(--white);
	border-radius: 20px;
	box-shadow: 0px 0px 10px 0 #B0C2D3;
}
.section5-slider-wrap .swiper-slide .title {
	text-align: center;
	font-weight: 700;
	font-size: 40px;
	line-height: 150%;
	margin-bottom :15px;
}
.section5-slide-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 13px;
	margin-bottom: 27px;
}
.section5-slide-box .item {
	width: calc(50% - 6.5px);
}
.section5-slide-in-img {
	width: 100%;
	display: table;
	margin: 0;
}
.section5-slide-about {
	text-align: center;
	font-weight: 500;
	font-size: 23px;
	line-height: 140%;
	min-height: 65px;
	word-break: keep-all;
}
#Section5Slider {
	max-width: 844px;
	width: 100%;
	box-sizing:border-box;
}
#Section5Slider .swiper-wrapper {
	align-items: stretch;
}
.section5-about {
	font-size: 30px;
	line-height: 130%;
	letter-spacing: -1px;
	color: #828282;
	width: 90%;
	display: table;
	margin: 0 auto;
	margin-top: 65px;
}

/** # SECTION6 **/
#Section6 {
	padding-top: 90px;
	padding-bottom: 75px;
	position: relative;
}
#Section6:after {
	content: "";
	border-top: var(--balloon-height) solid var(--white);
	border-left: var(--balloon-width) solid transparent;
	border-right: var(--balloon-width) solid transparent;
	border-bottom: 0px solid transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%);
}
.section6-content {
	margin-top: 62px;
	display: flex;
	flex-wrap: wrap;
	gap: 53px;
}
.section6-content > .item {
	/* margin-right: 53px; */
	flex: 0.333;
	border-radius: 27px;
	background-color: #DDE8FF;
	box-sizing: border-box;
	padding: 35px 9px;
	letter-spacing: -1px;
	text-align: center;
	transition: 0.4s;
	cursor: pointer;
}
.section6-content > .item:hover {
	background-color: var(--point-blue);
}
.section6-content > .item:nth-of-type(3n) {
	margin-right: 0;
}
.section6-content > .item .img-wrap {
	max-width: 188px;
	width: 80%;
	aspect-ratio: 1 / 0.831755;
	display: table;
	margin: 0 auto;
	background-position: center center;
	background-size: 100%;
	background-repeat: no-repeat;
	transition: 0.3s;
}
.section6-item-img {
	max-width: 188px;
	width: 80%;
}
.section6-content-wrap {
	width: 100%;
	margin: 0 auto;
	max-width: 1100px;
}
#Section6 .section6-content > .item.item1 .img-wrap{
	background-image: url('../images/section6_item_img1.png');
}
#Section6 .section6-content > .item.item2 .img-wrap{
	background-image: url('../images/section6_item_img2.png');
}
#Section6 .section6-content > .item.item3 .img-wrap{
	background-image: url('../images/section6_item_img3.png');
}
#Section6 .section6-content > .item.item1:hover .img-wrap{
	background-image: url('../images/section6_item_img1_on.png');
}
#Section6 .section6-content > .item.item2:hover .img-wrap{
	background-image: url('../images/section6_item_img2_on.png');
}
#Section6 .section6-content > .item.item3:hover .img-wrap{
	background-image: url('../images/section6_item_img3_on.png');
}
.section6-content > .item .title-wrap {
	text-align: center;
	margin-top: 28px;
	word-break: keep-all;
}
.section6-content > .item .title-wrap .title {
	color: #333;
	font-weight: 600;
	line-height: 130%;
	font-size: 27px;
	transition: 0.3s;
}
.section6-content > .item .title-wrap .sub {
	color: var(--gray-color);
	margin-top: 6px;
	font-size: 25px;
	line-height: 120%;
	transition: 0.3s;
}
.section6-content > .item:hover .title-wrap .title, .section6-content > .item:hover .title-wrap .sub {
	color: var(--white);
}
.section6-about-wrap {
	line-height: 140%;
	font-weight: 400;
	font-size: 25px;
	letter-spacing: -1px;
	margin-top: 38px;
	color: var(--gray-color);
}
.section6-blank-mo {
	display: none;
}

/** # SECTION7 **/
#Section7 {
	padding-top: 80px;
	padding-bottom: 117px;
	background-color: #DDE8FF;
}
#Section7 .section6-content {
	flex-wrap: wrap;
}
#Section7 .section6-content > .item {
	background-color: var(--white);
	flex: auto;
	width: 30%;
}
#Section7 .section6-content > .item:hover {
	background-color: var(--point-blue);
}
#Section7 .section6-content > .item.item1 .img-wrap{
	background-image: url('../images/section7_item_img1.png');
}
#Section7 .section6-content > .item.item2 .img-wrap{
	background-image: url('../images/section7_item_img2.png');
}
#Section7 .section6-content > .item.item3 .img-wrap{
	background-image: url('../images/section7_item_img3.png');
}
#Section7 .section6-content > .item.item4 .img-wrap{
	background-image: url('../images/section7_item_img4.png');
}
#Section7 .section6-content > .item.item5 .img-wrap{
	background-image: url('../images/section7_item_img5.png');
}
#Section7 .section6-content > .item.item6 .img-wrap{
	background-image: url('../images/section7_item_img6_1.png');
}
#Section7 .section6-content > .item.item1:hover .img-wrap{
	background-image: url('../images/section7_item_img1_on.png');
}
#Section7 .section6-content > .item.item2:hover .img-wrap{
	background-image: url('../images/section7_item_img2_on.png');
}
#Section7 .section6-content > .item.item3:hover .img-wrap{
	background-image: url('../images/section7_item_img3_on.png');
}
#Section7 .section6-content > .item.item4:hover .img-wrap{
	background-image: url('../images/section7_item_img4_on.png');
}
#Section7 .section6-content > .item.item5:hover .img-wrap{
	background-image: url('../images/section7_item_img5_on.png');
}
#Section7 .section6-content > .item.item6:hover .img-wrap{
	background-image: url('../images/section7_item_img6_1_on.png');
}

/** # SECTION 8 **/
#Section8 {
	padding: 123px 0;
}
.section8-content-in {
	margin-bottom: 104px;
}
.section8-content > .section8-content-in:last-child {
	margin-bottom: 0;
}
.section8-content {
	margin-top: 70px;
}
.section8-content-in .title-wrap {
	margin-bottom: 20px;
}
.section8-content-in .title-wrap .tag {
	border-radius: 50px;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -1.5px;
	padding: 20px 40px;
	display: table;
	margin-bottom: 15px;
}
.section8-content-in .title-wrap .tag.blue {
	color: var(--white);
	background-color: var(--point-blue);
}
.section8-content-in .title-wrap .tag.sky {
	background-color: #D3E2FF;
}
.section8-content-in .title-wrap .tag-about {
	font-weight: 400;
	font-size: 25px;
	letter-spacing: -1.5px;
}
.section8-note-wrap .line {
	padding: 40px 0;
	font-size: 31px;
	font-weight: 500;
	letter-spacing: -1.5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #666;
}
.section8-note-wrap .line > .left {
	text-align: left;
}
.section8-note-wrap .line > .right {
	text-align: right;
}
.section8-note-wrap .line.tag-box {
	padding: 20px 0;
}
.section8-note-wrap .line.tag-box > .right {
	margin-left: 10%;
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.section8-note-wrap .line.tag-box > .right .tag {
	border-radius: 16px;
	height: 58px;
	background-color: var(--point-blue);
	color: var(--white);
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 40px;
	letter-spacing: -0.8px;
	max-width: 1100px;
}

/** # SECTION 9 **/
#Section9 {
	padding-top: 186px;
	padding-bottom: 168px;
	background-color: #F1F5F9;
}
.section9-content {
	margin-top: 65px;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.section9-content .left {
	letter-spacing: -2px;
	font-size: 35px;
	line-height: 150%;
	font-weight: 600;
	width: 35%
}
.section9-content .right {
	border-radius: 44px;
	background-color: #D3E2FF;
	box-sizing: border-box;
	padding: 30px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 600px;
}
.section9-map-img {
	display: table;
	margin: 0 auto;
	width: 100%;
}
.section9-content .left .line {
	display: flex;
	width: 100%;
	margin-bottom: 35px;
}
.section9-content .left .line:last-child {
	margin-bottom: 0;
}
.section9-content .left .line > .item {
	flex: 1;
}
.section9-content .left .line > .item .map-title {
	color: var(--point-blue);
}

/** # SECTION 10 **/
#Section10 {
	padding: 140px 0;
}
.section10-content {
	max-width: 950px;
	margin: 0 auto;
	margin-top: 55px;
}
.section10-content .box {
	width: 100%;
	background-color: #3B57E8;
	padding: 35px 60px;
	box-sizing: border-box;
	color: var(--white);
	display: flex;
	justify-content: space-between;
	border-radius: 45px;
	align-items: flex-end;
	margin-bottom: 25px;
}
.section10-content .box .left {
	align-self: self-start;
}
.section10-content .box:last-child {
	margin-bottom: 0;
}
.section10-content .box .left-box {
	display: flex;
}
.section10-content .box .left-box .step {
	font-weight: 600;
	letter-spacing: -2px;
	font-size: 30px;
	white-space: nowrap;
}
.section10-step-img {
	width: 250px;
	margin-bottom: -20px;
	margin-left: -10px;
}
.section10-content .box .right {
	text-align: right; 
}
.section10-content .box .right .title {
	font-weight: 600;
	font-size: 40px;
	letter-spacing: -2px;
	margin-bottom: 10px;
	line-height: 110%;
}
.section10-content .box .right .text {
	font-size: 26px;
	line-height: 150%;
	letter-spacing: -2px;
}

/** # SECTION 11 **/
#Section11 {
	padding-top: 85px;
	background-color: #F1F5F9;
	overflow: hidden;
}
.section11-content {
	position: relative;
}
.section11-mockup-img {
	width: 890px;
	position: relative;
	z-index: 1;
	display: table;
}
.section11-box {
	width: 100%;
	display: flex;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.section11-box .left {
	width: 50%;
}
.section11-box .right {
	flex: 1;
}
.section11-box .right .logo-wrap {
	margin-bottom: 33px;
}
.section11-logo {
	width: 257px;
	display: table;
	margin: 0;
}
.section11-box .right .text-wrap {
	font-size: 50px;
	font-weight: 600;
	line-height: 150%;
	white-space: nowrap;
}

/** # SECTION12 **/
#Section12 {
	background-color: var(--point-blue);
	width: 100%;
	height: 221px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--white);
	font-size: 52px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 150%;
}
#Section12 .sub-text {
	font-size: 48px;
	font-weight: 500;
}


@media screen and (min-width:1920px){
	/**# SECTION1 **/
	.section1-in {
		position: absolute;
		box-sizing: border-box;
		max-width: 1800px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		z-index: 2;
	}
	.section1-in .title-wrap {
		font-size: 100px;
	}
}

@media screen and (max-width:1600px){
	/** # SECTION6 **/
	.section6-content {
		gap: 40px;
	}
	.section6-content > .item .title-wrap .sub {
		font-size: 24px;
	}

	/** # SECTION 8 **/
	.section8-note-wrap .line.tag-box > .right .tag {
		font-size: 35px;
	}
	
	/** # SECTION 9 **/
	#Section9 {
		padding-top: 150px;
		padding-bottom: 130px;
	}
	.section9-content .left {
		font-size: 31px;
	}
	.section9-content .right {
		width: 570px;
	}

	/** # SECTION12 **/
	#Section12 {
		font-size: 45px;
		height: 200px;
	}
	#Section12 .sub-text {
		font-size: 39px;
	}
}

@media screen and (max-width:1400px){
	.section-title {
		font-size: 42px;
	}

	/**# SECTION1 **/
	.section1-in .title-wrap {
		font-size: 60px;
	}
	.section1-logo-img {
		width: 180px;
	}

	/**# SECTION2 **/
	.section2-profile-img {
		width: 130px;
	}
	.section2-chat-box {
		font-size: 22px;
	}
	.section2-content .line.right {
		margin: 50px 0;
	}

	/**# SECTION3 **/
	.section3-content > .item .text-wrap {
		font-size: 23px;
	}

	/** # SECTION4 **/
	.section4-content .line .text-wrap {
		font-size: 25px;
	}
	.section4-content .line .text-wrap .title {
		font-size: 30px;
		margin-bottom: 20px;
	}

	/** # SECTION5 **/
	#Section5Slider {
		width: 750px;
	}
	.section5-map-wrap {
		width: 110%;
		margin-left: -5%;
	}
	.section5-slider-wrap .swiper-slide .title {
		font-size: 35px;
	}
	.section5-slider-wrap .swiper-slide {
		padding: 25px 30px;
	}
	.section5-about {
		font-size: 24px;
		margin-top: 40px;
	}
	.section5-slide-about {
		font-size: 22px;
	}
	.section5-slide-box {
		margin-bottom: 20px;
	}
	

	/** # SECTION 8 **/
	.section8-note-wrap .line {
		font-size: 28px;
	}
	.section8-note-wrap .line.tag-box > .right .tag {
		font-size: 28px;
		height: 50px;
		border-radius: 14px;
	}

	/** # SECTION 10 **/
	.section10-content .box .right .title {
		font-size: 34px;
	}
	.section10-content .box .right .text {
		font-size: 25px;
	}
	.section10-step-img {
		width: 230px;
	}

	/** # SECTION 11 **/
	#Section11 .width-limit {
		max-width: 1190px
	}
	.section11-mockup-img {
		width: 750px;
	}
	.section11-logo {
		width: 200px;
	}
	.section11-box .right .text-wrap {
		font-size: 39px;
	}

	/** # SECTION12 **/
	#Section12 {
		font-size: 38px;
		height: 170px;
	}
	#Section12 .sub-text {
		font-size: 35px;
	}
}

@media screen and (max-width:1200px){
	.section-title {
		font-size: 38px;
	}
	/**# SECTION1 **/
	#Section1 {
		min-height: 700px;
	}
	.section1-logo-img {
		width: 160px;
	}
	.section1-in .title-wrap {
		font-size: 57px;
	}
	.section1-content {
		width: 38%;
	}

	/**# SECTION2 **/
	#Section2 {
		padding-top: 120px;
		padding-bottom: 160px;
	}
	.section2-content {
		margin-top: 90px;
	}
	.section2-profile-img {
		width: 100px;
	}
	.section2-chat-box {
		font-size: 19px;
	}

	/**# SECTION3 **/
	#Section3 {
		padding: 150px 0;
	}
	.section3-content > .item .text-wrap {
		font-size: 20px;
	}
	.section3-content > .item {
		margin-right: 40px;
	}
	.section3-content > .item:after {
		height: 66%;
	}

	/** # SECTION4 **/
	:root {
		--section4-icon-width: 280px;
		--section4-line-block-width: 120px;
	}
	#Section4 {
		padding: 120px 0;
	}
	.section4-content {
		min-height: calc((var(--section4-icon-width) * 4) + (var(--section4-line-blank-width) * 3) - 200px);
	}
	.section4-content .liner-dash.to-right{
		transform: rotate(37deg);
	}
	.section4-content .liner-dash.to-left {
		transform: rotate(-37deg);
	}
	.section4-content .line .text-wrap .title   {
		font-size: 25px;
		margin-bottom: 15px;
	}
	.section4-content .line .text-wrap {
		font-size: 20px;
	}
	.section4-content .line {
		margin-top: -63px;
	}
	.section4-content .liner-dash {
		margin-top: -63px;
	}
	.section4-content .line .line-block:after {
		width: 23px;
		height: 23px;
	}

	/** # SECTION5 **/
	#Section5 {
		padding-top: 100px;
		padding-bottom: 70px;
	}
	#Section5Slider {
		max-width: 700px;
	}
	.section5-slider-wrap .swiper-slide .title {
		font-size: 30px;
		border-radius: 15px;
	}
	.section5-slide-about {
		font-size: 20px;
		min-height: 57px;
	}
	.section5-about {
		font-size: 20px;
	}
	

	/** # SECTION6 **/
	.section6-content > .item .img-wrap {
		width: 70%;
	}
	.section6-content > .item .title-wrap .title {
		font-size: 27px;
	}
	.section6-content > .item .title-wrap .sub {
		font-size: 20px;
	}
	.section6-about-wrap {
		font-size:20px;
	}
	
	/** # SECTION 8 **/
	.section8-content {
		margin-top: 50px;
	}
	.section8-content-in .title-wrap .tag {
		font-size: 25px;
	}
	.section8-note-wrap .line {
		padding: 30px 0;
	}

	/** # SECTION 9 **/
	.section9-content .left {
		font-size: 27px;
	}
	.section9-content .right {
		width: 520px;
	}

	/** # SECTION 10 **/
	.section10-content .box .left-box .step {
		font-size: 26px;
	}
	
	/** # SECTION 11 **/
	#Section11 .width-limit {
		padding: 0 20px;
	}
	.section11-box .right .logo-wrap {
		margin-bottom: 25px;
	}
	.section11-mockup-img {
		width: 650px;
	}
	.section11-logo {
		width: 180px;
	}
	.section11-box .right .text-wrap {
		font-size: 35px;
	}

	/** # SECTION12 **/
	#Section12 {
		font-size: 32px;
		height: 140px;
	}
	#Section12 .sub-text {
		font-size: 28px;
	}
}

@media screen and (max-width:970px){
	.section-title {
		font-size: 32px;
	}
	/**# SECTION1 **/
	#Section1 {
		min-height: 530px;
	}
	.section1-in .logo-wrap {
		margin-bottom: 20px;
	}
	.section1-logo-img {
		width: 130px;
	}
	.section1-in .title-wrap {
		font-size: 46px;
	}
	.section1-btn {
		font-size: 14px;
	}
	.section1-in .btn-wrap {
		margin-top: 35px;
	}

	/**# SECTION2 **/
	.section2-content {
		margin-top: 70px;
	}
	.section2-profile-img {
		width: 90px;
	}
	.section2-chat-box {
		font-size: 17px;
	}
	.section2-content .line.left.in {
		padding-left: 5%;
	}
	.section2-content .line.right {
		margin: 40px 0;
	}

	/**# SECTION3 **/
	#Section3 {
		padding: 100px 0;
	}
	.section3-content > .item .text-wrap {
		font-size: 18px;
		padding: 25px 10px;
		padding-top: 0;
		margin-top: 15px;
	}
	.section3-content > .item {
		margin-right: 20px;
	}
	.section3-content > .item:after {
		height: 66%;
	}

	
	/** # SECTION5 **/
	.section5-map-wrap {
		width: 130%;
		margin-top: -10px;
		margin-left: -15%;
	}
	.section5-slider-out {
		margin-top: -30px;
	}
	#Section5Slider {
		width: 570px;
	}
	.section5-slider-wrap .swiper-slide {
		padding: 20px 30px;
	}
	.section5-slider-wrap .swiper-slide .title {
		font-size: 25px;
	}
	.section5-slide-about {
		margin-top: 30px;
		font-size: 17px;
		min-height: 48px;
	}

	/** # SECTION6 **/
	.section6-content {
		margin-top: 45px;
		gap: 20px;
	}
	.section6-content > .item .img-wrap {
		width: 50%;
	}
	.section6-content > .item .title-wrap .title {
		font-size: 25px;
	}
	.section6-content > .item .title-wrap .sub {
		font-size: 18px;
	}
	.section6-about-wrap {
		font-size:18px;
		margin-top: 27px;
	}
	.section6-content > .item {
		/* margin-right: 20px; */
		padding: 27px 10px;
		border-radius: 20px;
	}

	/** # SECTION 8 **/
	.section8-content-in {
		margin-bottom: 70px;
	}
	.section8-content-in .title-wrap .tag {
		padding: 15px 30px;
		font-size: 20px;
	}
	.section8-content {
		margin-top: 50px;
	}
	.section8-content-in .title-wrap .tag {
		font-size: 25px;
	}
	.section8-note-wrap .line {
		padding: 30px 0;
		font-size: 24px;
	}
	.section8-note-wrap .line.tag-box > .right .tag {
		font-size: 25px;
		height: 47px;
	}

	/** # SECTION 9 **/
	.section9-content .left {
		font-size: 22px;
	}
	.section9-content .right {
		width: 420px;
	}

	/** # SECTION 10 **/
	.section10-content .box .left-box .step {
		font-size: 22px;
	}
	.section10-step-img {
		width: 188px;
	}
	.section10-content .box .right .title {
		font-size: 28px;
	}
	.section10-content .box .right .text {
		font-size: 20px;
	}

	/** # SECTION 11 **/
	.section11-box .right .logo-wrap {
		margin-bottom: 20px;
	}
	.section11-mockup-img {
		width: 65%;
	}
	.section11-logo {
		width: 120px;
	}
	.section11-box .right .text-wrap {
		font-size: 28px;
	}

	/** # SECTION12 **/
	#Section12 {
		font-size: 28px;
		height: 110px;
		line-height: 130%;
	}
	#Section12 .sub-text {
		font-size: 24px;
	}
}

/* MOBILE */
@media screen and (max-width:768px){
	.section-title {
		font-size: 28px;
	}
	:root {
		--balloon-width: 20px;
		--balloon-height: 35px;
	}
	/**# SECTION1 **/
	#Section1 {
		aspect-ratio: 1 / 1.6;
		min-height: auto;
	}
	#Section1 .bg {
		background-image: url('../images/section1Bg_mo.png');
	}
	.section1-content {
		width: 90%;
		margin: 0 auto;
		text-align: left;
	}
	.section1-in .btn-wrap a {
		margin-left: 0;
		margin-right: auto;
	}
	.section1-logo-img {
		width: 110px;
	}
	.section1-in .title-wrap {
		line-height: 150%;
	}
	.section1-btn {
		font-size: 20px;
	}
	.section1-in .logo-wrap {
		margin-bottom: 26px;
	}
	.section1-in .btn-wrap {
		margin-top: 59px;
	}

	/**# SECTION2 **/
	.section2-profile-img {
		width: 70px;
	}
	.section2-chat-wrap {
		margin: 0 15px;
	}
	.section2-chat-box {
		padding: 18px 25px;
		border-radius: 17px;
	}
	.section2-content .line.left.in {
		padding-left: 0;
	}
	.section2-content .line.right {
		margin: 44px 0;
	}

	/**# SECTION3 **/
	#Section3 {
		padding: 75px 0;
	}
	#Section3 .width-limit {
		padding: 0 50px;
		max-width: 400px;
		margin: 0 auto;
	}
	.section3-content {
		max-width: 500px;
		margin: 0 auto;
		margin-top: 30px;
		flex-wrap: wrap;
	}
	.section3-content > .item .text-wrap {
		font-size: 17px;
		padding: 30px 20px;
		padding-top: 0;
		margin-top: 0;
	}
	.section3-content > .item {
		flex: auto;
		margin: 0;
		width: 100%;
	}
	.section3-img {
		width: 50%;
		max-width: 250px;
	}

	/**# SECTION4 **/
	#Section4 {
		padding: 70px 0;
	}
	:root {
		--section4-icon-width: 200px;
		--section4-line-block-width: 60px;
		--section4-line-blank-width: 100px;
	}
	.section4-content {
		max-width: 400px;
		min-height: 830px;
	}
	.section4-content .line .icon-wrap {
		padding: 10px;
	}
	.section4-content .line .text-wrap .title {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.section4-content .line .text-wrap {
		font-size: 15px;
	}
/*
	.section4-content .liner-dash.on {
		height: 100px;
	}
*/
	.section4-content .line .icon-wrap .gradient-circle {
		padding: 17px;
	}
	.section4-content .liner-dash {
		margin-top: -33px;
	}

	/** # SECTION5 **/
	#Section5 {
		padding: 70px 0;
	}
	.section5-map-wrap {
		width: 110%;
		margin-top: -5px;
		margin-left: -5%;
	}
	.section5-slider-out {
		margin-top: -10px;
	}
	#Section5Slider {
		width: 450px;
	}
	.section5-slider-wrap .swiper-slide {
		padding: 17px 25px;
		border-radius: 8px;
	}
	.section5-slider-wrap .swiper-slide .title {
		font-size: 22px;
	}
	.section5-slide-about {
		margin-top: 10px;
		font-size: 15px;
	}
	.section5-slide-box {
		margin-bottom: 0;
		gap: 10px;
	}
	.section5-slide-box .item {
		width: calc(50% - 5px);
	}

	/** # SECTION6 **/
	#Section6 {
		padding-top: 70px;
		padding-bottom: 50px;
	}
	.section6-blank-mo {
		display: block;
		width: 100%;
		height: 0;
	}
	#Section6 .section6-content {
		display: flex;
		flex-wrap:wrap;
		justify-content: center;
	}
	.section6-content-wrap {
		max-width: 500px;
	}
	.section6-content > .item {
		flex: 0.5;
	}
	#Section6 .section6-content > .item:nth-child(1) {
		margin-right: 0;
		flex: 0.46;
	}
	.section6-content > .item .img-wrap {
		width: 70%;
	}

	/** # SECTION7 **/
	#Section7 {
		padding-top: 70px;
		padding-bottom: 50px;
	}
	#Section7 .section6-content > .item {
		width: calc(50% - 15px);
	}

	/** # SECTION 8 **/
	#Section8 {
		padding: 70px 0;
	}
	.section8-content-in .title-wrap .tag {
		font-size: 20px;
		padding: 10px 28px;
	}
	.section8-note-wrap .line {
		font-size: 20px;
	}
	.section8-content-in .title-wrap .tag-about {
		font-size: 22px;
	}
	.section8-note-wrap .line.tag-box > .right .tag {
		font-size: 19px;
		height: 40px;
	}

	/** # SECTION 9 **/
	#Section9 {
		padding: 70px 0;
	}
	.section9-content {
		flex-direction: column-reverse;
		margin: 0 auto;
		margin-top: 48px;
		max-width: 500px;
	}
	.section9-content .right {
		width: 100%;
		margin-bottom: 43px;
		border-radius: 20px;
	}
	.section9-content .left {
		width: 100%;
		text-align: center;
		font-size: 20px;
	}
	.section9-content .left .line {
		margin-bottom: 30px;
	}

	/** # SECTION 10 **/
	#Section10 {
		padding: 70px 0;
	}
	.section10-content {
		max-width: 540px;
	}
	.section10-content .box .left-box .step {
		font-size: 16px;
	}
	.section10-step-img {
		width: 150px;
	}
	.section10-content .box {
		border-radius: 20px;
		padding: 20px 30px;
		margin-bottom: 20px;
	}
	.section10-content .box .right .title {
		font-size: 23px;
	}
	.section10-content .box .right .text {
		font-size: 15px;
	}
	
	/** # SECTION 11 **/
	#Section11 {
		padding-top: 38px;
	}
	#Section11 .width-limit {
		padding-left: 0;
		padding-right: 10px;
	}
	.section11-box {
		top: 38%;
	}
	.section11-mockup-img {
		width: 80%;
		margin-left: -20px;
	}
	.section11-logo {
		width: 110px;
	}
	.section11-box .right .text-wrap {
		font-size: 25px;
	}
	.section11-box .left {
		width: 55%;
	}

	/** # SECTION12 **/
	#Section12 {
		font-size: 26px;
		height: 100px;
	}
	#Section12 .sub-text {
		font-size: 22px;
	}
}

@media screen and (max-width:540px){
	/**# SECTION2 **/
	.section2-profile-img {
		width: 60px;
	}

	/**# SECTION3 **/
	.section3-img {
		max-width: 180px;
	}

	/**# SECTION4 **/
	:root {
		--section4-icon-width: 170px;
		--section4-line-block-width: 50px;
		--section4-line-blank-width: 110px;
	}
	.section4-content {
		max-width: 350px;
		min-height: 720px;
	}
	.section4-content .line .icon-wrap {
		padding: 10px;
	}
	.section4-content .line .text-wrap .title {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.section4-content .line .text-wrap {
		font-size: 15px;
	}
/*
	.section4-content .liner-dash.on {
		height: 110px;
	}
*/
	.section4-content .line .icon-wrap .gradient-circle {
		padding: 17px;
	}
	.section4-content .liner-dash {
		margin-top: -33px;
	}
	.section4-content .line {
		margin-top: -51px;
	}
	.section4-content .liner-dash {
		margin-top: -46px;
	}
	.section4-content .line .line-block:after {
		width: 18px;
		height: 18px;
	}

	/** # SECTION5 **/
	#Section5Slider {
		width: 350px;
	}
	.section5-slider-wrap .swiper-slide .title {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.section5-slide-about {
		font-size: 13px;
		min-height: 37px;
	}
	.section5-slider-wrap .swiper-slide {
		padding: 10px 25px;
	}
	.section5-about {
		font-size: 17px;
		margin-top: 20px;
	}

	/** # SECTION6 **/
	.section6-blank-mo {
		gap: 15px;
	}
	.section6-content > .item .img-wrap {
		width: 70%;
	}
	.section6-content > .item .title-wrap .title {
		font-size: 22px;
	}
	.section6-content > .item .title-wrap .sub {
		font-size: 16px;
	}
	.section6-about-wrap {
		font-size: 17px;
		display: table;
		margin: 0 auto;
		margin-top: 35px;
	}
	.section6-content > .item {
		border-radius: 15px;
		padding: 20px 10px;
	}
	#Section6 .section6-content > .item {
		margin: -10px 0;
	}
	.section6-content > .item .title-wrap {
		margin-top: 20px;
	}

	/** # SECTION 8 **/
	.section8-content-in .title-wrap {
		margin-bottom: 0;
	}
	.section8-content {
		margin-top: 40px;
	}
	.section8-content-in .title-wrap .tag {
		font-size: 17px;
		padding: 5px 20px;
	}
	.section8-note-wrap .line {
		font-size: 18px;
	}
	.section8-content-in .title-wrap .tag-about {
		font-size: 18px;
	}

	/** # SECTION 9 **/
	.section9-content .left {
		font-size: 16px;
		width: 90%;
		margin: 0 auto;
	}

	/** # SECTION 10 **/
	.section10-content {
		margin-top: 40px;
	}
	.section10-step-img {
		width: 120px;
	}
	.section10-content .box .right .title {
		font-size: 20px;
	}
	.section10-content .box .right .text {
		font-size: 14px;
	}

	/** # SECTION 11 **/
	.section11-box .right .logo-wrap {
		margin-bottom: 10px;
	}
	.section11-box .left {
		width: 60%;
	}
	.section11-mockup-img {
		width: 85%;
	}
	.section11-logo {
		width: 90px;
	}
	.section11-box .right .text-wrap {
		font-size: 20px;
	}

	/** # SECTION12 **/
	#Section12 {
		font-size: 23px;
		height: 90px;
	}
	#Section12 .sub-text {
		font-size: 20px;
	}
}


@media screen and (max-width:480px) {
	.section-title {
		font-size: 25px;
	}
	/**# SECTION1 **/
	.section1-content {
		width: 95%;
	}
	.section1-logo-img {
		width: 100px;
	}
	.section1-in .title-wrap {
		font-size: 40px;
	}
	.section1-btn {
		font-size: 17px;
	}

	/**# SECTION2 **/
	#Section2 {
		padding-top: 60px;
		padding-bottom: 83px;
	}
	#Section2 .section-title {
		font-size: 20px;
	}
	.section2-profile-img {
		width: 52px;
	}
	.section2-chat-wrap {
		margin: 0 14px;
	}
	.section2-chat-box {
		padding: 15px 19px;
		font-size: 12px;
	}
	.section2-content {
		margin-top: 42px;
	}

	/**# SECTION4 **/
	:root {
		--section4-icon-width: 120px;
		--section4-line-block-width: 30px;
	}
	.section4-content {
		max-width: 230px;
		min-height: 550px;
	}
	.section4-content .line.end .text-wrap {
		margin-right: calc(var(--section4-line-block-width) + var(--section4-icon-width) + 5px);
	}
	.section4-content .line.start .text-wrap {
		margin-left: calc(var(--section4-line-block-width) + var(--section4-icon-width) + 5px);
	}
	.section4-content .line .icon-wrap .gradient-circle {
		padding: 12px;	
	}
	.section4-content .line .icon-wrap {
		padding: 6px;
	}
	.section4-content .line .line-block:after {
		width: 10px;
		height: 10px;
	}
	.section4-content .line .text-wrap .title {
		font-size: 15px;
	}
	.section4-content .line .text-wrap {
		font-size: 12px;
		line-height: 140%;
		letter-spacing: -1px;
	}


	/** # SECTION5 **/
	#Section5Slider {
		width: 320px;
	}
	.section5-slider-wrap .swiper-slide {
		padding: 10px 14px;
	}
	.section5-slider-wrap .swiper-slide .title {
		font-size: 15px;
		margin-bottom: 7px;
	}
	.section5-slide-box {
		gap: 3px;
	}
	.section5-slide-box .item {
		width: calc(50% - 1.5px);
	}
	.section5-slide-about {
		font-size: 0.5rem;
		min-height: 31px;
	}
	.section5-about {
		font-size: 13px;
		margin-top: 17px;
	}
	.section5-button {
		width: 5%;
	}

	/** # SECTION6 **/
	.section6-content > .item .img-wrap {
		width: 70%;
	}
	.section6-content > .item .title-wrap .title {
		font-size: 17px;
	}
	.section6-content > .item .title-wrap .sub {
		font-size: 14px;
	}
	.section6-about-wrap {
		font-size: 12px;
	}
	#Section6 .section6-content > .item {
		margin: -5px 0;
	}

	/** # SECTION 8 **/
	.section8-content {
		margin-top: 30px;
	}
	.section8-content-in .title-wrap .tag {
		font-size: 15px;
		margin-bottom: 10px;
	}
	.section8-note-wrap .line {
		font-size: 17px;
		padding: 20px 0;
	}
	.section8-content-in .title-wrap .tag-about {
		font-size: 16px;
	}
	.section8-note-wrap .line.tag-box {
		padding: 15px 0;
	}
	.section8-note-wrap .line.tag-box > .right {
		margin-left: 5%;
	}
	.section8-note-wrap .line.tag-box > .right .tag {
		font-size: 17px;
		height: 35px;
		border-radius: 12px;
	}

	/** # SECTION 10 **/
	.section10-content .box .left-box .step {
		font-size: 14px;
	}
	.section10-step-img {
		width: 110px;
		margin-bottom: -5px;
		margin-left: -10px;
	}
	.section10-content .box {
		padding: 13px;
	}
	.section10-content .box .right .title {
		font-size: 17px;
	}
	.section10-content .box .right .text {
		font-size: 12px;
		letter-spacing: -1.2px;
	}

	/** # SECTION 11 **/
	.section11-box .right .logo-wrap {
		margin-bottom: 7px;
	}
	.section11-mockup-img {
		width: 100%;
	}
	.section11-logo {
		width: 70px;
	}
	.section11-box .right .text-wrap {
		font-size: 15px;
		line-height: 140%;
	}
	.section11-box {
		top: 40%;
	}
	.section11-box .left {
		width: 65%;
	}
	
	/** # SECTION12 **/
	#Section12 {
		font-size: 18px;
		height: 80px;
	}
	#Section12 .sub-text {
		font-size: 16px;
	}
}

@media screen and (max-width:360px) {
	/**# SECTION1 **/
	.section1-logo-img {
		width: 90px;
	}
	.section1-in .title-wrap {
		font-size: 35px;
	}
	.section1-btn {
		font-size: 15px;
	}
	.section1-in .logo-wrap {
		margin-bottom: 20px;
	}
	.section1-in .btn-wrap {
		margin-top: 50px;
	}

	/**# SECTION2 **/
	.section2-profile-img {
		width: 40px;
	}
	.section2-chat-wrap {
		margin: 0 10px;
	}
	.section2-chat-box {
		padding: 13px 15px;
		font-size: 11px;
	}
	.section2-content .line.right {
		margin: 30px 0;
	}

	/**# SECTION3 **/
	.section3-content > .item .text-wrap {
		font-size: 16px;
		padding: 20px 15px;
		padding-top: 0;
	}
	#Section3 .width-limit {
		padding: 0 30px;
	}

	/**# SECTION4 **/
	:root {
		--section4-icon-width: 100px;
		--section4-line-block-width: 25px;
	}
	.section4-content {
		max-width: 220px;
		min-height: 526px;
		margin-top: 30px;
	}
	.section4-content .liner-dash {
		margin-top: -28px;
	}
	.section4-content .line {
		margin-top: -40px;
	}
	.section4-content .liner-dash.to-right {
		transform: rotate(30deg);
	}
	.section4-content .liner-dash.to-left {
		transform: rotate(-30deg);
	}


	/** # SECTION5 **/
	#Section5Slider {
		width: 250px;
	}
	.section5-map-wrap {
		margin-left: -15%;
		width: 130%;
	}
	.section5-slider-wrap .swiper-slide {
		padding: 7px 9px;
	}
	.section5-slider-wrap .swiper-slide .title {
		font-size: 13px;
		margin-bottom: 5px;
	}
	.section5-slide-about {
		font-size: 0.48rem;
		min-height: 29px;
	}

	/** # SECTION6 **/
	.section6-content {
		margin-top: 35px;
		gap: 10px;
	}
	.section6-blank-mo {
		height: 0
	}
	.section6-about-wrap {
		font-size: 11px;
	}
/*
	.section6-content > .item {
		margin-right: 10px;
	}
*/

	/** # SECTION8 **/
	.section8-content-in .title-wrap .tag-about {
		font-size: 14px;
	}
	.section8-note-wrap .line.tag-box > .right .tag {
		font-size: 15px;
		height: 32px;
		border-radius: 10px;
	}

	/** # SECTION 9 **/
	.section9-content .left {
		font-size: 14px;
	}
	.section9-content .left .line {
		margin-bottom: 20px;
	}
	.section9-content {
		margin-top: 35px;
	}
	.section9-content .right {
		margin-bottom: 37px;
	}

	/** # SECTION 10 **/
	.section10-content .box .left-box .step {
		font-size: 12px;
	}
	.section10-step-img {
		width: 100px;
		margin-bottom: -5px;
		margin-left: -5px;
	}
	.section10-content .box {
		padding: 10px;
	}
	.section10-content .box .right .title {
		font-size: 15px;
	}
	.section10-content .box .right .text {
		font-size: 10px;
		word-break: keep-all;
	}
	
	/** # SECTION 11 **/
	.section11-mockup-img {
		margin-left: -30px;
	}
	.section11-logo {
		width: 60px;
	}
	.section11-box .right .text-wrap {
		font-size: 13px;
	}
	.section11-box {
		top: 40%;
	}
	.section11-box .left {
		width: 65%;
	}

	/** # SECTION12 **/
	#Section12 {
		font-size: 16px;
		height: 65px;
	}
	#Section12 .sub-text {
		font-size: 14px;
	}
}


@media screen and (max-width:320px) {
	.section-title {
		font-size: 20px;
	}
	/**# SECTION1 **/
	.section1-logo-img {
		width: 80px;
	}
	.section1-in .title-wrap {
		font-size: 32px;
	}
	.section1-btn {
		font-size: 14px;
	}
	.section1-in .logo-wrap {
		margin-bottom: 15px;
	}
	.section1-in .btn-wrap {
		margin-top: 40px;
	}

	/**# SECTION2 **/
	#Section2 {
		padding-top: 50px;
		padding-bottom: 70px;
	}
	#Section2 .section-title {
		font-size: 18px;
	}
	.section2-chat-wrap {
		margin: 0 4px;
	}
	.section2-profile-img {
		width: 35px;
	}
	.section2-chat-box {
		padding: 10px;
		border-radius: 10px;
	}
	.section2-content .line.right {
		margin: 20px 0;
	}

	/**# SECTION3 **/
	.section3-content > .item .text-wrap {
		font-size: 14px;
	}

	/**# SECTION4 **/
	:root {
		--section4-icon-width: 90px;
		--section4-line-block-width: 20px;
		--section4-line-blank-width: 70px;
	}
	.section4-content .liner-dash {
		margin-top: -28px;
	}
	.section4-content .line {
		margin-top: -40px;
	}
	.section4-content .liner-dash.to-right {
		transform: rotate(30deg);
	}
	.section4-content .liner-dash.to-left {
		transform: rotate(-30deg);
	}
	.section4-content .line .text-wrap .title {
		margin-bottom: 5px;
		font-size: 12px;
	}
	.section4-content .line .text-wrap {
		font-size: 10px;
	}
/*
	.section4-content .liner-dash.on {
		height: 70px;
	}
*/
	.section4-content {
		max-width: 180px;
		min-height: 470px;
	}
	.section4-content .liner-dash {
		margin-top: -20px;
	}
	.section4-content .line {
		margin-top: -20px;
	}

	/** # SECTION5 **/
	.section5-about {
		font-size: 12px;
	}

	

	/** # SECTION6 **/
	.section6-content > .item .title-wrap .sub {
		font-size: 12px;
	}
	.section6-about-wrap {
		margin-top: 25px;
	}

	/** # SECTION 8 **/
	.section8-note-wrap .line {
		padding: 15px 0;
	}
	.section8-content-in .title-wrap .tag-about {
		font-size: 12px;
	}
	.section8-note-wrap .line {
		font-size: 15px;
	}
	.section8-note-wrap .line.tag-box {
		padding: 10px 0;
	}
	.section8-note-wrap .line.tag-box > .right .tag {
		font-size: 14px;
		height: auto;
		min-height: 30px;
		word-break: keep-all;
		line-height: 140%;
		border-radius: 8px;
	}

	/** # SECTION 10 **/
	.section10-content .box .left-box .step {
		font-size: 11px;
	}
	.section10-step-img {
		width: 80px;
	}
	.section10-content .box {
		border-radius: 15px;
		margin-bottom: 10px;
	}

	/** # SECTION12 **/
	#Section12 {
		font-size: 14px;
		height: 60px;
	}
	#Section12 .sub-text {
		font-size: 12px;
	}
}

@media screen and (max-width:280px) {
	.section10-content .box .right .text {
		font-size: 10px;
	}
}