@import "animate.css";
:root {
	--bridge_height: 540px;
	--bridge_bottom: 56px;
	--bridge_border: rgba(28, 108, 227, 0.50);
}
.chat__container {
	position: relative;
}

.bridge__container {
	display: none;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	position: absolute;
	left: 0;
	right: 0;
	top: 36px;
	bottom: 0;

	z-index: var(--z-bridge);
}

.bridge__container.show {
	display: flex;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.80);
	backdrop-filter: blur(2.5px);
	overflow: hidden;
	transition: background-color 0.5s ease-in-out;

	animation: fadeIn;
	animation-duration: 0.3s;
}
.scroll-box {
	position: relative;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	/*border-bottom-left-radius: 16px;*/
	/*border-bottom-right-radius: 16px;*/
	background: #F5F6FA;
}

.scroll-box.scroll-wrap:before {
	content: '';
	display: block;
	height: 100px;
	position: fixed;
	left: 3px;
	right: 5px;
	top: calc(100vh - 500px);
	z-index: 1;
	background: linear-gradient(180deg, rgba(245, 246, 250, 0.00) 0%, #F5F6FA 95%);
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	user-select: none;
	pointer-events: none;
}

.scroll-box.hide {
	animation: slideOutUp;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
}
.btn__bridge_close {
	display: none;

	position: absolute;
	top: auto;
	left: auto;
	right: 6px;
	width: 56px;
	height: 28px;
	background: url("../image/main/btn_toggle_bridge@2x.png") 0 0 no-repeat;
	background-size: contain;
}
.btn__bridge_close.show {
	display: block;
}
.btn__bridge_close.hide {
	bottom: 999px;
	animation: fadeOut;
	/*animation: slideOutUp;*/
	/*animation-duration: 0.4s;*/
	/*animation-fill-mode: forwards;*/
}

.btn__bridge_open {
	position: absolute;
	top: var(--banner-height);
	left: auto;
	right: 6px;
	width: 56px;
	height: 28px;
	z-index: 999;
	background: url("../image/main/btn_toggle_bridge_active@2x.png") 0 0 no-repeat;
	background-size: contain;
}
.btn__bridge_open.show {
	top: var(--banner-height);
}
.btn__bridge_open.hide {
	animation: fadeOut;
	animation-duration: 0.1s;
	animation-fill-mode: forwards;
}
/*.btn__goSearch {*/
/*	display: none;*/
/*	position: absolute;*/
/*	top: auto;*/
/*	left: auto;*/
/*	right: 0;*/
/*	width: 185px;*/
/*	justify-content: center;*/
/*	align-items: center;*/
/*	gap: 6px;*/
/*	height: 52px;*/
/*	margin: 0 auto;*/
/*	padding: 8px 0;*/
/*	*/
/*	font-size: 16px;*/
/*	font-style: normal;*/
/*	font-weight: 500;*/
/*	line-height: 24px; !* 150% *!*/
/*	letter-spacing: -0.35px;*/
/*	border-radius: 50px;*/
/*	background: #fff;*/
/*	transition: background-color 0.3s;*/
/*}*/
/*.btn__goSearch > i {*/
/*	font-size: 18px;*/
/*}*/

.bridge__wrap {
	position: relative;
	width: 100%;
	padding: 32px 28px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 40px;

	background: #F5F6FA;
}
.bridge__wrap.hide {
	animation: fadeOutUp;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}
.bridge__wrap.show {
	display: flex;
	animation: slideInDown;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
}
.bridge-box{
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: var(--bridge_bottom);
}

/*.btn__goSearch.show {*/
/*	display: inline-flex;*/
/*	bottom: -12px;*/
/*	z-index: 999;*/
/*	animation: fadeInDown;*/
/*	animation-duration: 0.6s;*/
/*	animation-fill-mode: backwards;*/
/*	animation-delay: 0.2s;*/
/*}*/
/*.btn__goSearch.hide {*/
/*	top: -100px;*/
/*	animation: fadeOutUp;*/
/*	animation-duration: 0.6s;*/
/*	animation-fill-mode: forwards;*/
/*}*/
/*.btn__goSearch:hover,*/
/*.btn__goSearch:active {*/
/*	background-color: #EEF1F6;*/
/*}*/
.bridge__wrap .bridge {
	width: 100%;
	height: auto;
}

.bridge ._title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 28px; /* 155.556% */
	letter-spacing: -0.4px;
}

.bridge__swiper {
	width: auto;
}
.swiper_frame {
	position: relative;
	width: 100%;
	/*overflow: hidden;*/
}

.bridge__list {margin-top: 22px;}
.__pc .bridge__list .bridge__list-map:nth-of-type(1) {
	margin-right: 28px;
}

.bridge__swiper .swiper-button-prev:after,
.bridge__swiper .swiper-button-next:after {
	font-size: 22px;
	font-weight: bolder;
}
.bridge__swiper .swiper-button-next {
	right: -28px;
	color: #17191C;
}
.bridge__swiper .swiper-button-prev {
	left: -18px;
	color: #17191C;
}
.bridge__swiper .swiper-button-prev:hover,
.bridge__swiper .swiper-button-next:hover {
	color: #0056C7;
}
.bridge__swiper .swiper-button-prev.swiper-button-disabled,
.bridge__swiper .swiper-button-next.swiper-button-disabled {
	color: #A1A7B5;
	opacity: 1;
}
.bridge__swiper .swiper-pagination-bullet-active {
	background: #000;
}

.bridge__swiper .swiper-button-prev,
.bridge__swiper .swiper-button-next{
	z-index: 100;
}
.bridge__swiper .bridge__list-map[data-cnt="4"] {
	width: 100%;
	overflow: hidden;
}
.bridge__list-map {
	width: 100%;
	max-height: 264px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}
.bridge__list-map > li {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* slide 카드 사이즈 */
.bridge__list-map .bubble {
	display: flex;
	width: 210px;
	/* flex: 1 1 auto; */
	flex: 0 0 auto;
	height: 128px;
	padding: 18px;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	border-radius: 10px;
	background-color: var(--grey00);
	box-sizing: border-box;
	cursor: pointer;
}
.bridge__list-map .bubble:hover {
	background-color: #EEF1F6;
}
.bridge__list-map[data-cnt="4"] .bubble {
	width: calc(25% - 6px);
}
.bridge__list-map .bubble[data-type="personal"] .tag {
	display: block;
	color: #51555D;
}
.bridge__list-map .bubble[data-type="personal"] {
	border: 1px solid var(--bridge_border);
}
.bridge__list-map .bubble[data-type=""] .tag {
	display: none;
}
.bubble._extra {
	flex: 0 0 auto;
}

.bridge__list-map[data-cnt="4"] {
	max-height: 264px;
}
.bridge__list-map[data-cnt="2"] .bubble {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: calc(50% - 4px);
	height: 44px;
	padding: 9px 18px;
}
.bubble .title {
	width: 100%;
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px; /* 146.667% */
	letter-spacing: -0.35px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre-wrap; /* 줄바꿈을 유지 */
	word-wrap: break-word; /* 단어를 줄바꿈 */
	overflow-wrap: break-word;
}
.bubble .bubble_contents {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.arrow-text {
	font-family: "fontello", sans-serif;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.arrow-text::after{
	display: inline-block;
	font-size: 12px;
	content: '\E80F';
}
.bubble_contents .arrow-text {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 18px; /* 150% */
	letter-spacing: -0.26px;
	color: #8F96A3;
}
.bubble_contents .arrow-text:hover {
	color: var(--primary06);
}
.bubble_contents .tag {
	padding: 1px 5px;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 18px; /* 150% */
	letter-spacing: -0.26px;
	border-radius: 4px;
}
.bridge__list-map[data-cnt="2"] .bubble .title {
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 22px; /* 157.143% */
	letter-spacing: -0.3px;
	max-width: calc(100% - 30px);
	display: block;
	max-height: 22px;
	white-space: nowrap;
}
.bridge__list-map[data-cnt="2"] .bubble .arrow-text::after  {
	color: #A1A7B5;
}
.pagination {
	margin: 0 auto;
	bottom: 10px;
	height: auto;
	z-index: 8;
	padding-top: 0;
	align-items: center;
	text-align: center;
}
.__mobile {
	display: none !important;
}
.__pc {
	display: block;
}

@media screen and (max-width: 1080px){
	.bridge__swiper .swiper-button-next,
	.bridge__swiper .swiper-button-prev {
		display: none;
	}
}
/* 640 ~ 768 */
@media screen and (min-width: 640px) and (max-width: 768px){
	/* mobile */
	.bridge__list-map[data-cnt="4"] .bubble{
		width: calc(33% - 6px);
	}
}

/* ~ 639 */
@media screen and (max-width: 640px) {
	.bridge__container {
		top: var(--banner-height);
	}
	.bridge__wrap {
		padding: 20px 16px;
	}
	.bridge ._title {
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: 24px; /* 150% */
		letter-spacing: -0.35px;
	}
	.bridge__list {
		margin-top: 16px;
	}
	.bridge__wrap {
		gap: 32px;
	}
	/*  ios 14 버젼에서 gap 이 적용되지 않는 이슈  */
	.ios-old .bridge__list-map {
    gap: 0;
  }
  .ios-old .bridge__list-map > li {
    margin-right: 6px;
    margin-bottom: 6px;
  }
	.ios-old .bridge__list-map > li:nth-child(even) {
		margin-right: 0;
  	}

	.bridge__list-map[data-cnt="2"] {
		/* 2줄 노출 */
		max-height: 94px;
		overflow: hidden;
	}
	.bridge__list-map[data-cnt="4"] .bubble{
		width: calc(50% - 6px);
	}
	.bridge__list-map[data-cnt="2"] .bubble {
		width: 100%;
	}
	.bridge__list-map[data-cnt="4"] .bubble:hover,
	.bridge__list-map[data-cnt="4"] .bubble:active {
		background-color: var(--grey00);
	}

	.bridge_step {
		display: none;
	}
	.btn__goSearch {
		width: 160px;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 22px; /* 157.143% */
		letter-spacing: -0.3px;
		
		/*border: 1px solid #17191C;*/
		background:  #FFF;
		box-shadow: 0 4px 10px 0 rgba(61, 64, 72, 0.40);
	}
	.bridge__swiper .swiper-button-prev,
	.bridge__swiper .swiper-button-next {
		display: none !important;
	}
}


/* 639 ~ 361 */
@media screen and (max-width: 375px) {
	.__mobile {
		display: block !important;
	}
	.__pc {
		display: none !important;
	}
	.bridge__wrap {
		min-width: var(--minWidth);
	}
	.ios-old .bridge__list-map > li:nth-child(even) {
    margin-right: 6px;
  }
	.bridge__swiper .bridge__list-map[data-cnt="4"] {
		flex-wrap: nowrap;
		overflow: visible;
	}
	.bridge__swiper .bridge__list-map[data-cnt="4"] li:last-child {
		margin-right: 15vw;
	}
	.bridge__list-map {
		gap: 6px;
	}
	.bridge__list-map .bubble{
		padding: 14px;
	}
	.bridge__swiper .swiper-wrap {
		flex-wrap: nowrap;
		max-height: 148px;
		box-sizing: border-box;
	}
	.btn__goSearch {
		width: 160px;
	}
}

/* height ~ 926  */
@media screen and (max-height: 980px){
	.scroll-box {
		position: relative;
		max-height: calc(100vh - 410px);
	}
	.scroll-box.scroll-wrap:before {
		display: none;
	}
}

@media screen and (max-height: 829px){
	.scroll-box {
		position: relative;
		max-height: calc(100vh - 450px);
	}
	.scroll-box.scroll-wrap:before {
		display: none;
	}
}

/* height ~ 폴드 대응  */
@media screen and (max-height: 697px) {
	.bridge__list-map[data-cnt="2"] {
		/* 1줄 노출 */
		max-height: 45px;
		overflow: hidden;
	}
}

@media screen and (max-width: 640px) and (min-height: 926px){
	
	.btn__goSearch.show {
		height: 48px;
	}
}