/*
2025-9월 이벤트 :: 선착순 10억 오피스 지원금
최초 작성자 : jh.roh
*/

@charset "utf-8";

:root {
	--color-primary : #FFBE46;
	--color-black : #000;

	--radius-btn : 8px;
	--radius-branch : 12px;
	--radius-card : 20px;

	--font-p1 : 20px;
	--font-p2 : 18px;
	--font-p3 : 16px;
	--font-h2 : 40px;
	--font-h3 : 36px;
	--font-h5 : 24px;

	--between-gap : 24px;

	/* esing : --carousel-timing-function */
}

/* 사용 폰트 --------------------------------
16 - 400 / 500 / 600
18 - 400 / 500 / 600
20 - 400 / 600 / 700
24 - 500 / 700
28 - 800
36 - 700
40 - 700 
*/

/* 초기화 START -------------------------------- */

h1, h2, h3, h4, h5, h6 {
	line-height : 140%;
}
p, a, span, strong, em, li {
	line-height: 170%;
}
ul, li {
	list-style: none;
	padding: 0;
	margin: 0;
}
button {
	border:none;
}
strong {
	font-weight: 700;
}

/* 초기화 END -------------------------------- */

/* 공통 START -------------------------------- */
.show_tbl {
	display: none;
}
.bg_black {
	background :var(--color-black);
}
.bg_black h2 {
	color:#fff;
}
.c_primary {
	color:var(--color-primary); 
}

/* 섹션 */
section[class*=_wrapper] {
	padding : 180px 0;
	text-align: center;
}
section[class*=_wrapper] h2 {
	margin-bottom: 60px;
	font-size: var(--font-h2);
	font-weight: 700;
}
section[class*=_wrapper] h2:has(+p) {
	margin-bottom: 16px;
}
section[class*=_wrapper] > p {
	font-weight: 500;
}

/* 인터랙션 */
.ani_key.fade_up {
	transform:translateY(50px);
	transition: opacity 0.5s, transform 0.5s;
	transition-timing-function: var(--carousel-timing-function);
	opacity: 0;
}
.ani_key.fade_up.__ani {
	transform:translateY(0);
	opacity: 1;
}

/* 버튼 */
.btn_wrapper {
	margin-top: 60px;
}
.btn_cta {
	height:56px;
	width:326px;
	padding:0 32px;
	color:var(--color-black);
	font-size: var(--font-p2);
	text-indent: 8px;
	font-weight: 600;
	box-sizing: border-box;
	border-radius: var(--radius-btn);
	background:#fff;
	display:inline-flex;
	justify-content: center;
	align-items: center;
	transition: 0.15s;
}
.btn_cta:hover {
	background:var(--color-primary);
}
.btn_cta::after {
	width:24px; 
	height:24px;
	background: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_100_569' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='17' height='16'%3E%3Crect x='0.5' width='16' height='16' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_100_569)'%3E%3Cpath d='M10.1497 7.99947L5.24975 3.09947C5.08308 2.9328 5.00253 2.73558 5.00808 2.5078C5.01364 2.28003 5.09975 2.0828 5.26641 1.91614C5.43308 1.74947 5.6303 1.66614 5.85808 1.66614C6.08586 1.66614 6.28308 1.74947 6.44975 1.91614L11.5664 7.04947C11.6997 7.18281 11.7997 7.33281 11.8664 7.49947C11.9331 7.66614 11.9664 7.83281 11.9664 7.99947C11.9664 8.16614 11.9331 8.33281 11.8664 8.49947C11.7997 8.66614 11.6997 8.81614 11.5664 8.94947L6.43308 14.0828C6.26641 14.2495 6.07197 14.33 5.84975 14.3245C5.62753 14.3189 5.43308 14.2328 5.26641 14.0661C5.09975 13.8995 5.01641 13.7022 5.01641 13.4745C5.01641 13.2467 5.09975 13.0495 5.26641 12.8828L10.1497 7.99947Z' fill='black'/%3E%3C/g%3E%3C/svg%3E") 50% 50% no-repeat;
	display: inline-block;
	content:"";
}
.btn_cta.__primary {
	color:var(--color-black);
	background:var(--color-primary);
}
.btn_cta.__primary:hover {
	color: #fff;
	background :var(--color-black);
}
section:not(.bg_black) .btn_cta.__primary:hover::after {
	background: url("data:image/svg+xml;utf8,<svg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'><mask id='mask0_252_110' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='25' height='24'><rect x='0.5' width='24' height='24' fill='%23D9D9D9'/></mask><g mask='url(%23mask0_252_110)'><mask id='mask1_252_110' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='17' height='16'><rect x='4.5' y='4' width='16' height='16' fill='%23D9D9D9'/></mask><g mask='url(%23mask1_252_110)'><path d='M14.1502 11.9995L9.25024 7.09947C9.08357 6.9328 9.00301 6.73558 9.00857 6.5078C9.01413 6.28003 9.10024 6.0828 9.2669 5.91614C9.43357 5.74947 9.63079 5.66614 9.85857 5.66614C10.0863 5.66614 10.2836 5.74947 10.4502 5.91614L15.5669 11.0495C15.7002 11.1828 15.8002 11.3328 15.8669 11.4995C15.9336 11.6661 15.9669 11.8328 15.9669 11.9995C15.9669 12.1661 15.9336 12.3328 15.8669 12.4995C15.8002 12.6661 15.7002 12.8161 15.5669 12.9495L10.4336 18.0828C10.2669 18.2495 10.0725 18.33 9.85024 18.3245C9.62801 18.3189 9.43357 18.2328 9.2669 18.0661C9.10024 17.8995 9.0169 17.7022 9.0169 17.4745C9.0169 17.2467 9.10024 17.0495 9.2669 16.8828L14.1502 11.9995Z' fill='white'/></g></g></svg>") 50% 50% no-repeat;
}

.bg_black .btn_cta.__primary:hover {
	color:var(--color-black);
	background:#fff;
}

/* 공통 END -------------------------------- */


/* section 1 - visual */
.visual_title {
	position: relative;
	height:720px; 
	text-align: center;
	background:var(--color-black);
	overflow : hidden;
}
.visual_title .bg {
	position:absolute;
	top: 0; right: 0; bottom: 0; left: 0; 	
	max-width: initial;
	height: 100%;
	display: flex;
	justify-content: center;
	object-fit: cover;
}
.visual_title .bg::before {
	position:absolute;
	top: 0; right: 0; left: 0; 
	width:100%;
	height:440px;
	background:url(images/visual_gradient.svg) repeat-x center top / auto 100%;
	content:"";
}
.visual_title .bg::after {
	position: absolute;
	top: 0; right: 0;	bottom: 0; left: 0;
	width : 100%;
	height: 100%; 
	background: url(images/visual_dotted.png) repeat center / 4px;
	z-index: 0;
	display: block;
	mix-blend-mode: multiply;
	opacity: 0.4;
	content: "";
}
.visual_title .bg video {
	margin: 0 auto;
	height: 100%;
	object-fit: cover;
	max-width: initial;
}
.visual_title .inner {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	padding : 54px 0 0 ;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.visual_title .btn_cta {
	width: 302px;
}
.visual_title .inner h4 {
	margin-bottom: 49px;
	font-size: var(--font-p1);
	color:var(--color-primary);
	font-weight: 700;
	animation : 1s blink step-start infinite;
}
@keyframes blink {
	50% {color:#fff;}
}
.visual_title .inner h3 {
	position: absolute;
	top : 295px; left:50%;
	transform: translateX(-50%);
	font-size: 28px;
	font-weight: 700;
	color:var(--color-primary);
}
.visual_title .inner h3:first-of-type {
	margin-left: -434px;
}
.visual_title .inner h3:last-of-type {
	margin-left: 427px;
}
.visual_title .inner h3:first-of-type::after,
.visual_title .inner h3:last-of-type::after {
	position:absolute;
	top: 50%; left : calc(100% + 30px);
	width: 120px;
	height: 1px;
	background:rgba(255,255,255,0.5);
	content: "";
}
.visual_title .inner h3:last-of-type::after  {
	right: calc(100% + 30px);
	left : auto;
}
.visual_title .inner h2 {
	margin-bottom: 41px;
	color :#fff;
	font-size: var(--font-h3);
	font-weight: 400;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap : 13px;
}
.visual_title .inner h2 img {
	width : 450px;
}
.visual_title .inner ul {
	display: flex;
	gap : 16px;
	margin-bottom: 38px;
}

.visual_title .inner ul li span {
	font-size: var(--font-p1);
	color:#fff;
}
.visual_title .inner ul li span:first-child {
	font-weight: 700;
}
.visual_title .inner ul li span:first-child::after {
	margin:0 4px;
	color: rgba(255,255,255,0.4);
	display: inline-block;
	content: "|";
}
.visual_info {
  padding-bottom: 180px;
	text-align: center;
}
.visual_text {
	padding :181px 0 188px; 
	text-align: center;
  color :#fff;
}
.visual_text.ani_key p {
	font-size: var(--font-p2);
	opacity: 0;
	transform:translateY(30px);
	transition: transform 0.5s, opacity 0.5s;
}
.visual_text.ani_key.__ani p {
	transform:translateY(0);
	opacity: 1;
}
.visual_text.ani_key.__ani p:nth-child(2) {
	transition-delay : 0.1s;
}
.visual_text.ani_key.__ani p:nth-child(3) {
	transition-delay : 0.2s;
}
.visual_text p:not(:last-child) {
	margin-bottom: 31px;
}
.visual_content {
  position: relative;
}
.visual_conten_title h2 img {
	width : 333px; 
}
.visual_content.ani_key .visual_conten_title {
  opacity: 0; 
	transform: translateY(0) scale(.6);
}
.visual_content.ani_key.__ani .visual_conten_title{
  animation: fadeIn 1.25s ease-in-out forwards;
}

.visual_content h5 {
	font-size: var(--font-h5);
	color: var(--color-primary);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap : 8px;
	animation : 1s blink step-start infinite;
	margin-bottom: 60px;
}
.visual_content h5::before,
.visual_content h5::after {
	width: 26px;
	height: 26px;
	background: url("data:image/svg+xml,%3Csvg%20width%3D%2727%27%20height%3D%2726%27%20viewBox%3D%270%200%2027%2026%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Crect%20x%3D%271%27%20y%3D%270.5%27%20width%3D%2725%27%20height%3D%2725%27%20rx%3D%2712.5%27%20stroke%3D%27%23FFBE46%27/%3E%3Cpath%20d%3D%27M14.88%206L14.64%2015.6913H12.3538L12.1138%206H14.88ZM12.0002%2018.3994C11.9875%2017.5215%2012.6759%2016.8056%2013.5032%2016.8056C14.299%2016.8056%2014.9937%2017.5215%2015%2018.3994C14.9937%2019.2841%2014.299%2020%2013.5032%2020C12.6759%2020%2011.9875%2019.2841%2012.0002%2018.3994Z%27%20fill%3D%27%23FFBE46%27/%3E%3C/svg%3E") no-repeat center / cover; 
	display: inline-block;
	content:"";
}
@keyframes fadeIn {
	0% { opacity: 0; transform: translateY(0) scale(.6);}
	20% { opacity: 0; transform: translateY(0) scale(.6);}
	100% { opacity: 1; transform: translateY(0) scale(1);}
}
.visual_content [class*=ct_] {
	position:absolute;
  top: 50%; left: 50%;
  transform:translate(-50%, -50%); 
  opacity: 0;
}
.ct_1 {
  width : 120px;
  margin: -120px 0 0 -327px;
}
.ct_2 {
  width : 45px; 
  margin : -20px 0 0 -349px;
}
.ct_3 {
  width : 204px; 
  margin : 186px 0 0 -308px;
}
.ct_4 {
  width : 112px;   
  margin : -202px 0 0 300px;
}
.ct_5 {
  width : 40px; 
  margin : -35px 0 0 389px;
}
.ct_6 {
  width : 194px;  
  margin : 164px 0 0 335px;
}
.ct_7 {
	display: none;
}

.visual_content.__ani [class*=ct_] {
  animation: bounce400 1.5s ease-in-out forwards, bounceUpDown 2s ease-in-out infinite 1.5s;
}
.visual_content.__ani [class*=ct_]:nth-of-type(even) {
  animation: bounce400 1.5s ease-in-out forwards 0.3s, bounceUpDown 2s ease-in-out infinite 1.8s;
}
@keyframes bounce400 {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + -400px));
  }
  40% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 30px));
  }
  60% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + -15px));
  }
  80% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 5px));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes bounce500 {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + -500px));
  }
  40% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 30px));
  }
  60% {
    transform: translate(-50%, calc(-50% + -15px));
    opacity: 1;
  }
  80% {
    transform: translate(-50%, calc(-50% + 5px));
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes bounceUpDown {
	0% {transform: translate(-50%, -50%); }
	30% {transform: translate(-50%, calc(-50% + 5px));}
	100% {transform: translate(-50%, -50%);}
}

/* 지점 리스트 */
.branch_wrapper h2 {
	margin-bottom: 16px;
}
.branch_wrapper > p {
  font-size: var(--font-p2);
  color: #444; 
}

.branch_wrapper .paging{
  position: relative;
  height: 2px;
	width: calc(100% - 40px);
	max-width : 452px;
  margin: 0 auto 12px;
  background: rgba(0,0,0,0.2);
  overflow: hidden;
	border-radius: 30px;
	display: none;
}
.branch_wrapper .paging .bar{
  position: absolute;
  top: 0; bottom: 0; left: 0; 
  width: 0%;
  background: var(--color-black);
  transition: width .06s linear; 
	border-radius: 30px;
}
.branch_wrapper > span {
	margin: 0 auto;
	font-size: var(--font-p3);
	color :#aaa;
	display: block;
}
.branch_list {
	margin: 60px 0 24px;
	align-items: center;
	display: flex;
	flex-direction: column;
	gap:var(--between-gap);
}
.branch_list ul {
	display: flex;
	width : 100%;
	gap:var(--between-gap);
	justify-content: center;
}
.branch_item {
	width: 302px;
	overflow:hidden;
	display: flex;
	position: relative;
}
.branch_item.soldout::before {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	padding-bottom : 65px;
	background :rgba(0,0,0,0.8);
	border-radius: var(--radius-branch);
	font-size: var(--font-h3);
	font-weight: 700;
	color:var(--color-primary);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	content: "Sold Out";
}
.branch_item:not(.soldout) {
	cursor: pointer;
}
.branch_item a {
	width : 100%; 
	border-radius: var(--radius-branch);
	overflow:hidden;
	display: inline-block;
}
.branch_item .thumb {
	position: relative;
	width : 302px;
	height: 252px;
	display: flex;
	gap:4px;
	overflow:hidden;
}
.branch_item .thumb span {
	height: 27px; 
	padding : 0 8px;
	margin-top:20px;
	font-size: var(--font-p3);
	color: var(--color-black);
	font-weight: 600;
	background:#fff;
	border: 1px solid var(--color-black);
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
}
.branch_item .thumb span.branch_name {
	margin-right : 4px;
	margin-left: 20px;
	color: #fff;
	background:var(--color-black);
}

.branch_item .thumb img {
	position:absolute;
	top: 50%;	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.branch_item .info {
	padding:20px 24px 20px 20px;
	text-align: left;
	background:var(--color-black);
	display:flex;
	flex-direction: column;
	justify-content: center;
}
.branch_item .info.__hover {
	position: absolute;
	right: -1px; bottom: -1px; left: -1px;
	padding-top: 22px;
	background:var(--color-primary);
	border-radius: 0 0 var(--radius-branch) var(--radius-branch);
	clip-path: inset(0 100% 0 0);
	transition: 0.35s;
}
.branch_item.soldout .info.__hover {
	display: none;
}
@media (hover : hover) {
	.branch_item:hover .info.__hover {
		clip-path: inset(0 0 0 0);
	}
}
.branch_item .info span {
	color:#fff;
	font-size: var(--font-p3);
	font-weight: 600;
}
.branch_item .info h4 {
	color:var(--color-primary);
	font-size: var(--font-h3);
	font-weight: 700;
	background: url("data:image/svg+xml,%3Csvg width='16' height='50' viewBox='0 0 16 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.7168 15.0005C2.98535 15.0005 3.20513 15.0854 3.39941 15.2632L12.2227 23.3735L12.2236 23.3745C12.4063 23.542 12.5365 23.7226 12.6211 23.9165C12.7109 24.1223 12.7509 24.3181 12.751 24.5063C12.7509 24.6945 12.7108 24.8905 12.6211 25.0962C12.5364 25.2901 12.4064 25.4717 12.2236 25.6392L3.37109 33.7495C3.1772 33.927 2.96635 34.0052 2.71484 33.9995C2.45499 33.9936 2.23491 33.9051 2.03516 33.7222C1.84163 33.5448 1.7666 33.3628 1.7666 33.1558C1.76681 32.949 1.8419 32.7684 2.03516 32.5913L10.8584 24.5063L10.4561 24.1372L2.00586 16.396C1.81571 16.2216 1.7467 16.045 1.75195 15.8433C1.75768 15.6311 1.83882 15.4441 2.03516 15.2642C2.2294 15.0863 2.44832 15.0006 2.7168 15.0005Z' fill='white'/%3E%3C/svg%3E") no-repeat 100% 50%;
}

.branch_item .info.__hover span,
.branch_item .info.__hover h4{
	color :var(--color-black);
}
.branch_item .info.__hover h4 {
	background: url("data:image/svg+xml;utf8,<svg width='16' height='50' viewBox='0 0 16 50' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M2.71729 15.0005C2.98563 15.0006 3.20475 15.0855 3.39893 15.2632L12.2222 23.3735L12.2241 23.3745C12.4066 23.5419 12.536 23.7227 12.6206 23.9165C12.7104 24.1224 12.7514 24.3181 12.7515 24.5063C12.7514 24.6945 12.7103 24.8905 12.6206 25.0962C12.5359 25.29 12.4068 25.4718 12.2241 25.6392L3.37158 33.7495C3.17756 33.9273 2.96607 34.0052 2.71436 33.9995C2.45448 33.9935 2.23443 33.9052 2.03467 33.7222C1.84117 33.5448 1.76611 33.3628 1.76611 33.1558C1.76632 32.9491 1.84152 32.7684 2.03467 32.5913L10.8579 24.5063L10.4565 24.1372L2.00537 16.396C1.81523 16.2216 1.74621 16.045 1.75146 15.8433C1.75719 15.6311 1.83833 15.4441 2.03467 15.2642C2.22902 15.0861 2.44861 15.0005 2.71729 15.0005Z' fill='black'/></svg>") no-repeat right center;
}

/* 혜택 */
.benefit_wrapper > p {
	color: #aaa;
	font-size: var(--font-p2);
}
.benefit_wrapper ul {
	max-width : 1200px;
	margin: 60px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap : var(--between-gap);
}

.benefit_wrapper li {
	width : 352px;
	height : 360px;
	padding:30px 32px;
	text-align: left;
	background:#fff;
	border-radius: var(--radius-card);
	background-size : auto 188px;
	background-position : bottom;
	background-repeat: no-repeat;
	box-sizing: border-box;
	opacity: 0;
	transform:translateY(70px);
	transition: opacity 0.35s, transform 0.35s;
}
.benefit_wrapper li:first-child {
	background-image:url(images/benefit_1.png);
	transition-delay : 0.15s;
}
.benefit_wrapper li:nth-child(2) {
	background-image:url(images/benefit_2.png);
	transition-delay : 0.3s;
}
.benefit_wrapper li:nth-child(3) {
	background-image:url(images/benefit_3.png);
	transition-delay : 0.45s;
}
.benefit_wrapper li:nth-child(4) {
	background-image:url(images/benefit_4.png);
	transition-delay : 0.6s;
}
.benefit_wrapper li:nth-child(5) {
	background-image:url(images/benefit_5.png);
	transition-delay : 0.75s;
}
.benefit_wrapper li h4 {
	margin-bottom: 12px;
	font-size: var(--font-h5);
}
.benefit_wrapper li p {
	color :#222;
	font-size: var(--font-p3);	
}

.benefit_wrapper ul.fade_up.__ani li {
	opacity: 1;
	transform:translateY(0);
}

/* 인프라 */
.infra_wrapper {
	position: relative;
	background : #222;
}
.infra_wrapper h2 {
	color :var(--color-primary);
}
.infra_wrapper > p {
	margin-bottom: 16px;
	font-size: var(--font-h5);
	color: #fff;
	line-height: 1.32;
}
.infra_wrapper .swiper {
	width : 1104px;
	margin: 0 auto;
}
.infra_wrapper .swiper-slide {
	background :#222;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.infra_wrapper .infra_slide_thumb {
	position: relative;
	height : 400px;
	border-radius: var(--radius-branch);
	overflow: hidden;
}
.infra_wrapper .infra_slide_thumb img {
	transform: scale(1.3);
	transition: 4.5s 0.5s;
}
.infra_wrapper .swiper-slide.swiper-slide-active .infra_slide_thumb img {
	transform: scale(1);
}
.infra_wrapper .swiper-slide .caption {
	position: absolute;
	right :0; bottom: 0; left: 0; 
	height : 50px;
	font-size: var(--font-p2);
	font-weight: 600;
	color: #fff;
	background: rgba(0,0,0,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
}
.infra_wrapper .swiper-slide .infra_info {
	margin-top: 52px;
	font-size: var(--font-p2);
	color: #d9d9d9;
}
.infra_wrapper .swiper-slide .infra_info,
.infra_wrapper .swiper-slide .caption {
	transform:translateY(100px);
	opacity: 0;
	transition: transform 0.8s 0.8s, opaticy 0.8s 0.8s;
}
.infra_wrapper .swiper-slide .infra_info  {
	transition-delay : 1.05s;
}
.infra_wrapper .swiper-slide.swiper-slide-active .infra_info,
.infra_wrapper .swiper-slide.swiper-slide-active .caption {
	transform:translateY(0);
	opacity: 1;
}

.infra_ctrl.paging {
	position: absolute;
	bottom: 85px;
	height: 8px;
	z-index: 2;
	display: flex;
	justify-content: center;
}
.infra_ctrl.paging .swiper-pagination-bullet{
	background: #fff;
}
.infra_ctrl:has(button) {
	position: absolute;
	top : 498px; left: 50%;
  width: 1104px;
  transform: translateX(-50%);
	z-index: 2;
}
.infra_ctrl .button_next,
.infra_ctrl .button_prev {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width : 80px;
	height : 80px;
	background: url("data:image/svg+xml;utf8,<svg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M46.6665 26.6666L33.3332 40L46.6665 53.3333' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	opacity: 0.2;
	transition: opacity 0.3s;
}
.infra_ctrl .button_next:hover,
.infra_ctrl .button_prev:hover {
	opacity: 1;
}
.infra_ctrl .button_next {
	margin-left: 616px;
	transform: translateX(-50%) scaleX(-1);
}
.infra_ctrl .button_prev {
	margin-left: -616px;
}


@media screen and (max-width : 1330px) {
	:root {
		--between-gap : 12px;
	}	
	.visual_title .bg {
		width :100%; 
		overflow: hidden;
	}
	/* .branch_list ul {
		width : 100%; 
	} */
	.branch_item {
		width: calc(25% - 24px);
	}
	.branch_item .thumb {
		width: 100%; 
		height : 0;
		padding : 0;
		padding-bottom: 83.44%;
	}

	.infra_wrapper .swiper{
		width : 900px;
	}
	.infra_wrapper .infra_slide_thumb {
		height : 325px;
		border-radius: var(--radius-card);
	}
	.infra_ctrl:has(button) {
		top : 462px;
		width : 900px;
	}
	.infra_ctrl .button_next {
		margin :0;
		transform:scaleX(-1);
		left: 100%;
	}
	.infra_ctrl .button_prev {
		right: 100%; 
		left: auto;
		margin :0;
		transform: none;
	}
	
	

} /* max-width 1330 END */

@media screen and (max-width : 1110px) {
	.visual_title .inner h3,
	.infra_ctrl:has(button) {
		display: none;
	}

	.visual_title .inner h2 {
		width : 60%;
		min-width : 320px;
		max-width: 500px;
	}
} /* max-width 1330 END */

@media screen and (max-width : 961px) {
	:root {
		--font-h2 : 28px;
		--font-h3 : 24px;
		--font-h5 : 22px;
		--font-p1 : 18px;
		--font-p2 : 16px;
		--font-p3 : 14px;
		--radius-branch : 10px;
		--radius-card : 16px;
	}	
	.show_tbl {
		display: block;
	}
	section[class*=_wrapper] h2:has(+p) {
		margin-bottom: 8px;
	}
	.btn_wrapper {
		margin-top: 40px;
	}
	.btn_cta {
		width : auto;
		text-indent: 4px;
	}

	/* 비주얼 */
	.visual_title .bg::before {
		height : 720px;
		background-image : url(images/visual_gradient_m.png);
	}
	.visual_title .bg video {
		height : calc(100% - 100px);
		margin-top: 100px;
	}

	.visual_title .btn_cta {
		width : 276px;
	}
	.visual_text {
		padding : 110px 0 160px;
	}
	.visual_text p {
		font-weight: 500;
	}
	.visual_text p:not(:last-child) {
		margin-bottom: 26px;
	}
	.visual_info {
		padding-bottom: 220px;
	}
	.visual_content h5::before, 
	.visual_content h5::after {
		width : 22px;
		height: 22px;
	}
	.visual_conten_title {
		position: relative;
		z-index :2;	
	}
	.visual_conten_title h2 {
		width : 298px;
		margin : 0 auto;
	}

	.visual_content .ct_1 {
		display: none;
	}
	.visual_content .ct_2 {
    width: 40px;
		margin: 40px 0 0 -176px;
	}
	.visual_content .ct_3 {
		width : 142px;
		margin: 276px 0 0 -117px;
    z-index: 0;
	}
	.visual_content .ct_4 {
		width : 72px;
		margin : -181px 0 0 -168px;
	}
	.visual_content .ct_5 {
		width: 36px;
    margin: -118px 0 0 184px;
	}
	.visual_content .ct_6 {
		width : 146px;
		margin : 273px 0 0 132px;
		z-index:3;
	}
	.visual_content .ct_7 {
		width : 52px;
		margin : 155px 0 0 176px; 
		display: block;
	}

	section[class*=_wrapper] {
		padding : 130px 0;
	}
	/* 지점 */
	.branch_wrapper {
		position:relative;
	}

	.branch_list ul {
		flex-wrap:wrap;
		width : 452px;
	}
	.branch_item { 
		width : 220px;
	}

	.branch_item .thumb span {
		height:24px;
		padding: 0 4px;
		margin-top : 16px;
	}
	.branch_item .thumb span.branch_name {
		margin-left: 16px;
	}
	
	/* 혜택 */
	.benefit_wrapper ul {
		flex-direction: column;
		align-items: center;
	}
	.benefit_wrapper li {
		max-width : 335px;
		width : 100%;
		height : 246px;
		padding : 24px;
		margin : 0 20px;
		background-position: right center;
		background-size: 171px;
	}
	.benefit_wrapper li:nth-child(1) {
		background-image : url(images/benefit_1_m.png);
	}
	.benefit_wrapper li:nth-child(2) {
		background-image : url(images/benefit_2_m.png);
	}
	.benefit_wrapper li:nth-child(3) {
		background-image : url(images/benefit_3_m.png);
	}
	.benefit_wrapper li:nth-child(4) {
		background-image : url(images/benefit_4_m.png);
	}
	.benefit_wrapper li:nth-child(5) {
		background-image : url(images/benefit_5_m.png);
	}

	/* 인프라 */
	.infra_wrapper .swiper {
		max-width : 480px;
		width : 100%;
	}
	.infra_wrapper .infra_slide_thumb {
		height: 460px;
	}
	.infra_ctrl.paging {
		bottom : 80px;
	}
	.infra_ctrl:has(button) {
		top: 43%;
		width : 500px;
	}

	section.infra_wrapper h2 {
		font-size: 34px;
		margin-bottom: 40px;
	}
	.infra_wrapper > p {
		margin-bottom: 4px;
	}

	.branch_wrapper,
	.visual_info {
		overflow: hidden;
	}

} /* max-width 961px END */

@media screen and (max-width : 500px) {
	/* 비주얼 */
	.visual_title {
		height: calc(100svh - 120px);
		max-height : 600px;
	}
	.visual_title .bg::before {
		opacity: 0.6;
	}
	.visual_title .inner {
		padding-top: 36px;
	}
	.visual_title .inner h4 {
		margin-bottom: 38px;
	}
	.visual_title .inner h2 {
		margin-bottom: 30px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.visual_title .inner ul {
		margin-bottom: 30px;
	}

	/* 인프라 */
	.infra_wrapper .swiper  {
		width : 335px;
	}
	.infra_wrapper .infra_slide_thumb {
		height : 324px;
	}
	.infra_wrapper .swiper-slide .infra_info  {
		margin-top: 48px;
		min-height: 85px;
	}
	.infra_wrapper .swiper-slide .infra_info br {
		display: none;
	}
	.infra_ctrl.paging {
		bottom : 105px;
	}
	.infra_wrapper .swiper-slide .caption {
		height: 40px;
	}
}


@media screen and (max-width : 499px) {
	/* 지점 */
	.branch_list {
		flex-direction: row;
		overflow-x: scroll;
		overflow-x : scroll;
		scroll-snap-type : x mandatory; 
		margin-bottom: 12px;
	}
	.branch_list ul {
		min-width: 452px;
		flex-wrap :wrap;
		flex: 1 1 0;
		/* scroll-snap-align: start;  */
	}
	.branch_list ul:first-child {
		min-width: 472px;
		width : 472px;
		padding-left: 20px;
	}
	.branch_list ul:last-child {
		min-width: 472px;
		width : 472px;
		padding-right: 20px;
	}
	.branch_wrapper .paging {
		display: block;
	}
	.branch_list.scroll li a {
		pointer-events: none;
	}
	.branch_list::-webkit-scrollbar {
		height : 4px; display: none;
	}
	.branch_list::-webkit-scrollbar-track {
		background :rgba(0,0,0,0.2);
	}
	.branch_list::-webkit-scrollbar-thumb {
		background:var(--color-black);
	}

} /* max-width 499px END */