@charset "UTF-8"; 

/*--------------------- 메인 공통 ---------------------*/
html, body{overflow-x:hidden;}
section:not(.main-story) { margin:0 0 14rem; background:#fff;}
.sec-title {position:relative; font-family: var(--font-point);  font-size: 4.6rem; font-weight: 600; z-index:0;}
.sec-title span { color: var(--logo-color);  font-size: 4.6rem;  font-weight: 600;  font-family: var(--font-point);}
.sec-title:after{content:''; display:block; font-size:10rem; font-family:var(--font-desc); color:#FFF6F6;  position: absolute;  top: -5.5rem;  left: 12rem;  z-index:-1;}
.m-container{margin-top:12rem;}

@media screen and (max-width:1480px) {
	.sec-title:after{font-size:8rem;}
}

@media screen and (max-width:1200px) {
	.sec-title {font-size:4.2rem;}
	.sec-title span {font-size:4.2rem;}
	.sec-title:after {font-size:8.4rem; top:-4.6rem; left:9rem;}
	.m-container{margin-top:9rem;}
}

@media screen and (max-width:786px) {
	section:not(.main-story){ margin:0 0 10rem;}
	.sec-title {font-size:3.8rem; line-height:1.25;}
	.sec-title span {font-size:3.8rem;}
	.sec-title:after {font-size:6.8rem; top:-3.8rem; left:6rem;max-width:calc(100vw - 4rem); overflow:hidden; white-space:nowrap;}
}

@media screen and (max-width:480px) {
	.sec-title {font-size:3.2rem;}
	.sec-title span {font-size:3.2rem;}
	.sec-title:after {font-size:4.2rem; top:-2.8rem; left:3.8rem;}
}

/*--------------------- 홍티 비주얼 ---------------------*/
.main_visual {position:relative; background:#fff;}
.main_visual .inwrap {position:relative;}

.hero-swiper {position:relative; overflow:hidden; width:100%;}
.hero-swiper .swiper-wrapper {height:auto;}
.hero-swiper .swiper-slide {height:auto;}

.main_visual_item {position:relative; display:block; overflow:hidden; width:100%; height:clamp(58rem, 41vw, 71.5rem);}
.main_visual_img {position:absolute; inset:0;} 
.main_visual_img img {display:block; width:100%; height:100%; object-fit:cover; object-position: top;} 
/* .main_visual_img {position:relative;}
.main_visual_img img{display: block;  width: 100%;  height: 100%;  object-fit: cover;  position: absolute;  left: 0;  top: 0;}
.main_visual_img:after{content: "";  display: block;  padding-bottom: 41%;}
 */
.main_visual_info {position:absolute; top:0; right:2rem; z-index:5; display:flex; flex-direction:column; justify-content:center; width:clamp(32rem, 25vw, 40rem); height:calc(100% - 4.8rem); background:rgba(0,0,0,.8); backdrop-filter:blur(2px);}
.main_visual_info_box {display:flex; flex-direction:column; justify-content:center; height:100%; padding:clamp(3rem, 3vw, 4.5rem) clamp(3rem, 4vw, 7rem); border-bottom:1px solid rgba(255,255,255,.18);    transition: background .25s ease;}
.main_visual_info_box:last-child {border-bottom:0;}
.main_visual_info_box.exhibition {flex:1 1 50rem;}
.main_visual_info_box.etc {flex:1 1 0;}
.main_visual_info_box:hover{background:var(--logo-color);}

.main_visual_label {margin:0 0 clamp(1.2rem, 1.2vw, 2rem); color:#F59C20; font-family:serif; font-style:italic; font-size:clamp(1.4rem, 1.1vw, 1.8rem); font-weight:100;}
.main_visual_subject {color:#fff; font-family:var(--font-point); font-size:clamp(2.4rem, 2.1vw, 3.5rem); font-weight:700; line-height:1.35; word-break:keep-all;}
.main_visual_date {margin:clamp(1.2rem, 1.3vw, 2rem) 0 clamp(1.5rem, 1.5vw, 2.4rem); color:rgba(255,255,255,.8); font-size:clamp(1.4rem, 1vw, 1.6rem);}
.main_visual_more {display:inline-flex; align-items:center; gap:.8rem; color:rgba(255,255,255,.65); font-size:clamp(1.3rem, .9vw, 1.4rem); transition:color .25s ease;}
.main_visual_more::after {content:""; display:block; width:1.6rem; height:1rem; background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5H14M10 1L14 5L10 9' stroke='rgba(255,255,255,0.65)' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); transition:transform .25s ease, background-image .25s ease;}

.main_visual_info_box.etc .main_visual_subject {font-size:clamp(1.7rem, 1.8vw, 2.2rem); font-weight:500;}
.main_visual_info_box:hover .main_visual_more, .main_visual_info_box:focus-visible .main_visual_more {color:#fff;}
.main_visual_info_box:hover .main_visual_more::after, .main_visual_info_box:focus-visible .main_visual_more::after {transform:translateX(.4rem); background-image:url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5H14M10 1L14 5L10 9' stroke='%23fff' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");}

.main_visual_ctrl {display:flex; align-items:center; gap:1.4rem; margin-top:2.2rem; height:2.6rem;}
.main_visual_pagination {position:static !important; display:flex; align-items:center; gap:1.2rem; width:auto !important;}
.main_visual_pagination .swiper-pagination-bullet {position:relative; width:.8rem; height:.8rem; margin:0 !important; border-radius:50%; background:#000; opacity:1; overflow:hidden;}
.main_visual_pagination .swiper-pagination-bullet-active {width:5rem; height:.2rem; border-radius:0; background:#aaa;}
.main_visual_pagination .swiper-pagination-bullet-active:before {content:""; position:absolute; left:0; top:0; bottom:0; width:100%; background:#000; transform-origin:left; animation:heroProgress 4.5s linear forwards;}
.main_visual_ctrl.is_paused .swiper-pagination-bullet-active:before {animation-play-state:paused;}

@keyframes heroProgress {
	from {transform:scaleX(0);}
	to {transform:scaleX(1);}
}

.main_visual_toggle {position:relative; display:inline-flex; align-items:center; justify-content:center; width:1.8rem; height:1.8rem; padding:0; border:0; background:transparent; cursor:pointer;}
.main_visual_toggle:before, .main_visual_toggle:after {content:""; display:block; width:.3rem; height:1rem; margin:0 .12rem; background:#000;}
.main_visual_toggle.is_paused:before {width:0; height:0; margin:0; border-top:.55rem solid transparent; border-bottom:.55rem solid transparent; border-left:.8rem solid #000; background:transparent;}
.main_visual_toggle.is_paused:after {display:none;}

	@media (max-width:1400px) {
		.main_visual_item {height:clamp(54rem, 46vw, 64rem);}
		.main_visual_info {width:clamp(30rem, 30vw, 34rem);}
		.main_visual_info_box {padding:3.5rem 4rem;}
		.main_visual_subject {font-size:clamp(2.3rem, 2.8vw, 3.1rem);}
	}

	@media (max-width:1200px) {
		.main_visual_item {height:clamp(40rem, 58vw, 56rem);}
		.main_visual_info {display:none;}		
		.main_visual_ctrl{    justify-content: center;}
	}

	@media (max-width:768px) {
		.main_visual_item {height:auto; min-height:0;}
		.main_visual_img {position:relative; inset:auto;}
		.main_visual_img img {width:100%; height:auto; object-fit:contain;}
	}


/*--------------------- 홍티 지금 ---------------------*/
.main_now {background:#fff;}
.main_now_title:after {content:"Hongti Now";}

.main_now_head {margin-bottom:5rem;}
.main_now_wrap {display:flex; align-items:flex-start; gap:clamp(4rem, 6vw, 13rem); width:100%;}

.main_now_calendar_area {flex:.96 1 0; min-width:46rem;}
.main_now_calendar {position: relative;  border-top: 2px solid #000;  border-bottom: 1px solid #000;  padding: 2rem 0;}

.main_now_cal_nav {display:grid; grid-template-columns:4rem 1fr 4rem; align-items:center; margin-bottom:3rem;}
.main_now_cal_month {display: block;  text-align: center;  font-size: 2.2rem;  font-weight: 500;}
.main_now_cal_btn {display:flex; align-items:center; justify-content:center; width:4rem; height:3rem; border:0; background:transparent; color:#111; font-size:0; font-family:inherit; cursor:pointer;}
.main_now_cal_btn::before {content:""; width:1.4rem; height:1rem; background-repeat:no-repeat; background-position:center; background-size:contain;}
.main_now_cal_btn.prev::before { background-image:url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 5H2M6 1L2 5L6 9' stroke='%23111' stroke-width='1.7' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");}
.main_now_cal_btn.next::before { background-image:url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5H12M8 1L12 5L8 9' stroke='%23111' stroke-width='1.7' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");}

.main_now_cal_table {width:100%; border-collapse:collapse; table-layout:fixed;}
.main_now_cal_table th {height:5.5rem; padding-bottom:1rem; border-bottom:1px solid #ddd; }
.main_now_cal_table th:first-child {color:var(--logo-color);}
.main_now_cal_table td {position:relative; height:9rem; vertical-align:top; }

.main_now_day_btn { position: relative;  z-index: 2;  display: block;  width: 100%;  height: 100%;  cursor: pointer;}
.main_now_day_btn:disabled {color:#ccc; cursor:default;}
.main_now_day_btn.is_today .main_now_day_num {color:var(--logo-color); font-weight:800;}
.main_now_day_btn.is_selected .main_now_day_num {display: inline-flex; align-items: center;  justify-content: center; min-width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(172, 26, 31, .12); color: var(--logo-color); font-weight: 600;}
.main_now_day_num{font-size:1.5rem;}

.main_now_day_events {position: absolute; left: 0;  right: 0; bottom: 1.2rem;  z-index: 3;  display: flex;  align-items: center;  justify-content: center;  gap: 0.8rem;}
.main_now_day_dot {flex:0 0 auto; display:block; width:.7rem; height:.7rem;aspect-ratio:1 / 1;}

.main_now_event_bar {position: absolute;  left: 0;  right: 0;  bottom: 0;  z-index: 1;  height: .4rem;}

.main_now_day_dot.is_exhibition,
.main_now_legend_dot.is_exhibition,
.main_now_event_bar.is_exhibition {background:var(--color-orange);}

.main_now_day_dot.is_program,
.main_now_legend_dot.is_program,
.main_now_event_bar.is_program {background:var(--color-green);}

.main_now_day_dot.is_event,
.main_now_legend_dot.is_event,
.main_now_event_bar.is_event {background:var(--color-blue);}

.main_now_day_dot.is_etc,
.main_now_legend_dot.is_etc,
.main_now_event_bar.is_etc {background:var(--color-bronze);}

.main_now_legend {display:flex; align-items:center; gap:2.5rem; margin:2.2rem 0 0; padding:0; list-style:none; color:#333; font-size:1.1rem;}
.main_now_legend li {display:flex; align-items:center; gap:1rem;}
.main_now_legend_dot {display:inline-block; width:.7rem; height:.7rem;aspect-ratio:1 / 1;}

.main_now_swiper_area {flex:1.24 1 0; min-width:0; position:relative;    margin-top: 3rem; }
.main_now_swiper {overflow:hidden; width:100%;}
.main_now_swiper .swiper-slide {height:auto;}

.main_now_card {position:relative; display:block; overflow:hidden;  height:clamp(42rem, 32vw, 56rem); background:#ddd; color:#fff; }
.main_now_card:after {content:""; position:absolute; left:0; right:0; bottom:0; z-index:2; height:100%; background:linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); opacity:0; transition:opacity .35s ease;   backdrop-filter: blur(2px);}

.main_now_card img {display:block; width:100%; height:100%; object-fit:cover; object-position: top; opacity:1; transition:transform .55s ease, opacity .55s ease;}

.main_now_card_txt {position:absolute; left:4rem; right:4rem; bottom:5rem; z-index:3; display:block; opacity:0; transform:translateY(2rem); visibility:hidden; transition:opacity .35s ease, transform .35s ease, visibility .35s ease;}

.main_now_card:hover:after,
.main_now_card:focus-visible:after {opacity:1;}

.main_now_card:hover img,
.main_now_card:focus-visible img {transform:scale(1.05); opacity:.78;}

.main_now_card:hover .main_now_card_txt,
.main_now_card:focus-visible .main_now_card_txt {opacity:1; transform:translateY(0); visibility:visible;}

.main_now_badge {display: inline-flex;  align-items: center;  justify-content: center;  min-width: 7.8rem;  margin-bottom: 2rem;  padding: 0.5rem 1rem;  border: 1px solid currentColor;  border-radius: 2rem;  font-size: 1.5rem;  line-height: 1;  font-weight: 500;}
.main_now_badge.is_exhibition {color:var(--color-orange); background:rgba(245, 130, 32, 0.15);}
.main_now_badge.is_program {color:var(--color-green); background:rgba(85, 199, 136, 0.15);}
.main_now_badge.is_event {color:var(--color-blue); background:rgba(97, 133, 253, 0.15);}
.main_now_badge.is_etc {color:var(--color-bronze); background:rgba(168, 160, 72, 0.15);}

.main_now_card_date {display: block; margin-bottom: 2rem;  color: rgba(255, 255, 255, .6); }
.main_now_card_title {display: block;  min-height: 6.8rem; color: #fff;  font-size: 2.4rem; font-weight: 500;}

.main_now_swiper { position:relative;}
.main_now_swiper_ctrl { position: absolute; right: 0;  bottom: -4rem;  z-index: 5;  display: flex;  align-items: center;  justify-content: flex-end;  gap: 1.5rem;}
.main_now_pagination { position:static !important;  display:flex;  align-items:center;  justify-content:flex-end;  gap:.9rem;  width:auto !important;  transform:none !important;}
.main_now_pagination .swiper-pagination-bullet { width:1rem;  height:1rem;  margin:0 !important;  background:#111;  opacity:.25;}
.main_now_pagination .swiper-pagination-bullet-active { opacity:1;}
.main_now_toggle {position:relative;  display:flex;  align-items:center;  justify-content:center;  width:2.4rem;  height:2.4rem;  padding:0;  border:0;  background:transparent;  cursor:pointer;}
.main_now_toggle:before {content:""; display:block;   width: 2px;  height: 1.3rem;  background: #000;  box-shadow: .6rem 0 0 #000;  transform: translateX(-.3rem);}
.main_now_toggle.is_play:before { width: 0; height: 0;  margin-left: 0;  border-top: .65rem solid transparent;  border-bottom: .65rem solid transparent;  border-left: 1rem solid #000;  background: none;  box-shadow: none;  transform: translateX(.05rem);}

	@media screen and (max-width:1200px) {
		.main_now_wrap {display:block;}
		.main_now_calendar_area {min-width:40rem;}
		.main_now_swiper_area {margin-top:6rem;}
		.main_now_card {height:auto; background:#fff; }
		.main_now_card:after {display:none;}
		.main_now_card img {opacity:1; object-fit:cover;}
		.main_now_card_txt {position:static; padding:2rem 0 0; opacity:1; visibility:visible; transform:none;}
		.main_now_badge {margin-bottom:1.3rem;}
		.main_now_card_date {margin-bottom:1rem; color:#777;}
		.main_now_card_title {min-height:auto;  font-size:2.2rem; color:#000;}
	}

	@media screen and (max-width:786px) {
		.main_now_head {margin-bottom:3.5rem;}		
		.main_now_calendar_area {width:100%; min-width:0;}
		.main_now_calendar {padding:1.8rem 0;}
		.main_now_cal_nav {grid-template-columns:3.8rem 1fr 3.8rem; margin-bottom:2rem;}
		.main_now_cal_month {font-size:2.1rem;}
		.main_now_cal_btn {width:3.8rem; height:3rem;}		
		.main_now_cal_table th {height:4.8rem;}
		.main_now_cal_table td {height:6rem;}
		.main_now_event_bar{bottom: -0.5rem;}
		.main_now_day_btn.is_selected .main_now_day_num {min-width:3.2rem; height:3.2rem;}
		.main_now_day_events {bottom:0.3rem; gap:.5rem;}
		.main_now_legend {flex-wrap:wrap; gap:1.2rem 2rem; margin-top:1.8rem;}
		.main_now_swiper_area {width:100%; margin-top:3.5rem;}		
		.main_now_swiper_ctrl {position:relative; right:auto; bottom:auto; margin-top:2rem; justify-content:center;}
	}

	@media screen and (max-width:480px) {
		.main_now_head {margin-bottom:3rem;}
		.main_now_calendar {padding:1.5rem 0;}
		.main_now_cal_nav {grid-template-columns:3.4rem 1fr 3.4rem; margin-bottom:1.6rem;}
		.main_now_cal_month {font-size:2rem;}
		.main_now_cal_btn {width:3.4rem; height:2.8rem;}
		.main_now_cal_table th {height:3.8rem;}
		.main_now_cal_table td {height:5.8rem;}
		.main_now_day_btn.is_selected .main_now_day_num {min-width:3rem; height:3rem;}
		.main_now_day_events {bottom:.7rem; gap:.4rem;}
		.main_now_day_dot,
		.main_now_legend_dot {width:.6rem; height:.6rem;}
		.main_now_event_bar {height:.3rem;}
		.main_now_legend {gap:1rem 1.5rem;}
		.main_now_swiper_area {margin-top:3rem;}
		.main_now_card img {}
		.main_now_card_txt {padding:1.6rem 0 0;}
		.main_now_badge {min-width:6.8rem; margin-bottom:1.1rem; padding:.45rem 1rem; font-size:1.4rem;}
		.main_now_card_date {margin-bottom:.8rem; font-size:1.5rem;}
		.main_now_card_title {font-size:2rem; line-height:1.4;}
		.main_now_swiper_ctrl {margin-top:1.6rem;}
		.main_now_pagination .swiper-pagination-bullet {width:.8rem; height:.8rem;}
	}

/*--------------------- 홍티 소식 ---------------------*/
.main_notice {background:#fff;}
.main_notice_title { width: 90rem;}
.main_notice_title:after {content:"Hongti Notice";}

.main_notice_head {display:flex; align-items:flex-start; justify-content:space-between; gap:3rem; margin-bottom:5rem;}
.main_notice_more {display:inline-flex; align-items:center; gap:.8rem; margin-top:1.2rem; color:#111; font-size:1.2rem;  font-weight:500; text-decoration:none;}
.main_notice_more:after {content:""; width:1.5rem; height:1rem; background:url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5H13.5M9.5 1L14 5L9.5 9' stroke='%23111' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") no-repeat center / contain; transition:transform .2s ease;}
.main_notice_more:hover:after,
.main_notice_more:focus-visible:after {transform:translateX(.4rem);}

.main_notice_box { display: flex;  align-items: center; gap:2rem; width: 100%;  min-height: 15.5rem;  padding: 0 3rem;  border: 1px solid #000;}
.main_notice_label {flex:0 0 2.4rem; display:flex; align-items:center; justify-content:center;}
.main_notice_label span {width:2.4rem; height:2.4rem; background:url(../img/default/icon_notice.svg) no-repeat center center / 2.4rem; }

.main_notice_swiper {flex:1; min-width:0; height:7.6rem; overflow:hidden;}
.main_notice_swiper .swiper-wrapper {height:100%;}
.main_notice_swiper .swiper-slide {height:7.6rem; display:flex; align-items:center;}

.main_notice_item {display:flex; align-items:center; justify-content:space-between; gap:3rem; width:100%; transition:color .3s ease;}
.main_notice_item strong {    display: block;  overflow: hidden;  font-size: 2.2rem;  font-weight: 500;  white-space: nowrap;  text-overflow: ellipsis;}
.main_notice_item time {flex:0 0 auto;}
.main_notice_item:hover strong{color:var(--logo-color);}

.main_notice_control {flex:0 0 2rem; display:flex; flex-direction:column; align-items:center; gap:1rem; margin-left:2.8rem;}
.main_notice_control button {display:flex; align-items:center; justify-content:center; width:1.6rem; height:1.2rem; padding:0; border:0; background:transparent; cursor:pointer;}
.main_notice_control button:before {content:""; display:block; width: 1rem;  height: 1rem;  border-top: 2px solid #000;  border-left: 2px solid #000;}
.main_notice_prev:before {transform:rotate(45deg);}
.main_notice_next:before {transform:rotate(225deg);}
.main_notice_control button:focus-visible {outline:2px solid var(--logo-color); outline-offset:.4rem;}

	@media screen and (max-width:1200px) {
		.main_notice_title {width:70rem;}
		.main_notice_head {margin-bottom:4rem;}
		.main_notice_box {min-height:13.5rem; padding:0 2.5rem;}
		.main_notice_control {margin-left:1.8rem;}
	}

	@media screen and (max-width:786px) {
		.main_notice_title {width:auto;}
		.main_notice_head {display:block; margin-bottom:3.5rem;}
		.main_notice_more {margin-top:2rem;}
		.main_notice_box {align-items:center; min-height:12rem; padding:2rem;}
		.main_notice_label {flex:0 0 2.4rem;}
		.main_notice_swiper {height:7rem;}
		.main_notice_swiper .swiper-slide {height:7rem;}
		.main_notice_item {display:block;}
		.main_notice_item strong {font-size:2rem; white-space:nowrap;}
		.main_notice_item time {display:block; margin-top:.8rem; color:#777;}
		.main_notice_control {margin-left:1rem;}
	}

	@media screen and (max-width:480px) {
		.main_notice_head {margin-bottom:3rem;}
		.main_notice_more {margin-top:1.5rem;}
		.main_notice_label {flex:0 0 2rem;}
		.main_notice_label span {width:2rem; height:2rem; background-size:2rem;}
		.main_notice_swiper {height:6.6rem;}
		.main_notice_swiper .swiper-slide {height:6.6rem;}
		.main_notice_item strong {font-size:1.8rem;}
		.main_notice_item time {margin-top:.6rem;}
		.main_notice_control {gap:.8rem; margin-left:.4rem;}
		.main_notice_control button {width:1.4rem; height:1.1rem;}
		.main_notice_control button:before {width:.8rem; height:.8rem;}
	}



/*--------------------- 홍티 기록---------------------*/
.main-record {background:#fff;}
.main-record_title:after {content:"Hongti Archive";}
.main-record_head {margin-bottom:5.2rem;}

.main-record_row_online {margin-top:5rem;}
.main-record_row_photo {margin-top:7rem;}

.main-record_top {display:flex; align-items:center; justify-content:space-between; height:3.8rem; padding-bottom:1.5rem; border-bottom:1px solid #111;}
.main-record_top h3 {font-size:2.6rem; font-weight:500;}

.main-record_control {display:flex; align-items:center; gap:0.5rem;}
.main-record_control button {display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; background:transparent; cursor:pointer;}
.main-record_prev:before, .main-record_next:before {content:""; display:block; width:1rem; height:1rem; border-top:2px solid #000; border-left:2px solid #000;}
.main-record_prev:before {transform:rotate(-45deg);}
.main-record_next:before {transform:rotate(135deg);}
.main-record_prev.swiper-button-lock, .main-record_next.swiper-button-lock {display:none;}
.main-record_pause:before {content:""; display:block; width:2px; height:1.3rem; background:#000; box-shadow:.6rem 0 0 #000; transform:translateX(-.3rem);}
.main-record_pause.is_play:before {content:""; display:block; width:0; height:0; margin-left:0; border-top:.65rem solid transparent; border-bottom:.65rem solid transparent; border-left:1rem solid #000; background:none; box-shadow:none; transform:translateX(.05rem);}

.main-record_swiper {width:100%; max-width:100%; overflow:hidden; margin-top:2.4rem;}
.main-record_swiper .swiper-slide {height:auto;}
.main-record_card {display:block; width:100%;}
.main-record_img {position:relative; overflow:hidden; width:100%; aspect-ratio:3 / 4; background:#f4f4f4;}
.main-record_img img {display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .45s ease;}
.main-record_card:hover .main-record_img img, .main-record_card:focus-visible .main-record_img img {transform:scale(1.06);}

.main-record_row_exhibit .main-record_card {position:relative;}
.main-record_row_exhibit .main-record_info {position:absolute;left:0;right:0;bottom:0;padding: 5rem 4rem;display: flex;flex-direction: column;justify-content: flex-end;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);opacity:0;transform:translateY(1.5rem);transition:opacity .4s ease, transform .4s ease;pointer-events:none;}
.main-record_row_exhibit .main-record_card:hover .main-record_info, .main-record_row_exhibit .main-record_card:focus-visible .main-record_info {opacity:1; transform:translateY(0);}
.main-record_row_exhibit .main-record_info strong {display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:2.2rem; font-weight:500;  color:#fff;}
.main-record_row_exhibit .main-record_info p {margin-top:1.2rem; color:rgba(255,255,255,.85);}

.main-record_photo_ttl {display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-top:2rem; font-size:2.2rem; font-weight:500; line-height:1.4;}

.main-record_online_list {display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap: 5rem;padding: 5rem 6rem;background: #f8f8f8;}
.main-record_online_item {display:block; color:#111;}
.main-record_online_img {position:relative;overflow:hidden;width:100%;aspect-ratio:16 / 9;background:#eee;}
.main-record_online_img img {display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .45s ease, filter .45s ease;}
.main-record_online_item:hover .main-record_online_img img, .main-record_online_item:focus-visible .main-record_online_img img {transform:scale(1.05); filter:brightness(.82);}
.main-record_online_play {position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:5.8rem; height:5.8rem; border-radius:50%; background:rgba(255,255,255,.6); backdrop-filter:blur(2px); transform:translate(-50%, -50%); transition:background .25s ease;}
.main-record_online_play:before {content:""; width:0; height:0; margin-left:.4rem; border-top:.8rem solid transparent; border-bottom:.8rem solid transparent; border-left:1.2rem solid var(--logo-color);}
.main-record_online_item:hover .main-record_online_play, .main-record_online_item:focus-visible .main-record_online_play {background:#fff;}
.main-record_online_ttl {display:block; overflow:hidden; margin-top:2rem; font-size:2.2rem; font-weight:500;}
.main_record_info {margin-top:2.3rem;}
.main_record_info strong {display: -webkit-box;  overflow: hidden;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  min-height:6.5rem; font-size: 2.2rem; font-weight: 500;}
.main_record_info p {margin:2.5rem 0 0; }


	@media screen and (max-width:1200px) {
		.main-record_head {margin-bottom:4rem;}
		.main-record_row_online {margin-top:4rem;}
		.main-record_row_photo {margin-top:5.5rem;}
		.main-record_top h3 {font-size:2.4rem;}
		.main-record_online_list {gap:3rem;}

		.main-record_row_exhibit .main-record_info {position:static; padding:0; margin-top:2rem; background:none; opacity:1; transform:none; pointer-events:auto;}
		.main-record_row_exhibit .main-record_info strong {font-size:2rem; color:#111;}
		.main-record_row_exhibit .main-record_info p {margin-top:1.2rem;  color:#666;}
		.main_record_info strong{font-size: 2rem;min-height:auto;}
	}

	@media screen and (max-width:980px) {
		.main-record_head {margin-bottom:3.5rem;}
		.main-record_top {height:auto; padding-bottom:1.4rem;}
		.main-record_top h3 {font-size:2.3rem;}
		.main-record_swiper {margin-top:2rem;}
		.main-record_online_list {grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2.4rem;}
		.main-record_row_exhibit .main-record_info strong {font-size:1.8rem;}
		.main-record_photo_ttl, .main-record_online_ttl {font-size:1.8rem;}
	}

	@media screen and (max-width:768px) {
		.main-record_head {margin-bottom:3rem;}
		.main-record_row_online {margin-top:3.5rem;}
		.main-record_row_photo {margin-top:4rem;}
		.main-record_top h3 {font-size:2.1rem;}
		.main-record_control button {width:2.2rem; height:2.2rem;}
		.main-record_swiper {margin-top:1.8rem;}
		.main-record_online_list {grid-template-columns:1fr; gap:2.4rem;  padding: 3rem;}
		.main-record_online_play {width:5rem; height:5rem;}
		.main-record_photo_ttl {margin-top:1.6rem; font-size:1.9rem;}
		.main-record_online_ttl {margin-top:1.6rem; font-size:1.9rem;}

	}


/*--------------------- 홍티 작가 ---------------------*/
.main_artist {position:relative; overflow:visible;}
.main_artist-head {position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:4rem; margin-bottom:4rem;}
.main_artist-title{width:90rem;}
.main_artist-title::after {content:"Hongti Artists"; z-index:-1;}

.main_artist-tab {display:flex; align-items:center; gap:.5rem;}
.main_artist-tab_btn {display:flex; align-items:center; justify-content:center; padding:1rem 1.5rem; border:0; background:transparent; color:#bbb; font-size:2rem; line-height:1; font-weight:500; font-family:inherit; cursor:pointer; transition:background .2s ease, color .2s ease;}
.main_artist-tab_btn.is-active {background:#000; color:#fff;}
.main_artist-tab_btn:focus-visible {outline:2px solid #ac1a1f; outline-offset:3px;}

.main_artist-body {position:relative; overflow:visible;}
.main_artist-panel {position:relative; width:100%; overflow:visible;}
.main_artist-panel[hidden] {display:none;}

.main_artist-swiper {position:relative; overflow:visible; padding-top:2rem; padding-left:max(2rem, calc((100vw - 175rem) / 2 + 2rem)); padding-right:0;}
.main_artist-swiper .swiper-wrapper {align-items:stretch;}
.main_artist-swiper .swiper-slide {width:40.8rem; height:auto;}

.main_artist-card {position:relative; display:block; height:100%; border:1px solid #000; background:#fff; color:#111; text-decoration:none; transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;}
.main_artist-card:hover,
.main_artist-card:focus-visible {transform:translateY(-1.2rem); border-color:#111; box-shadow:0 2.2rem 4rem rgba(0,0,0,.12);}
.main_artist-card:focus-visible {outline:2px solid #ac1a1f; outline-offset:4px;}

.main_artist-img {overflow:hidden; position:relative; aspect-ratio:1.47 / 1; background:#eee;}
.main_artist-img img {display:block; width:100%; height:100%; object-fit:cover;object-position: top; transition:transform .45s ease, filter .45s ease;}
.main_artist-card:hover .main_artist-img img,
.main_artist-card:focus-visible .main_artist-img img {transform:scale(1.06); filter:brightness(.92);}

.main_artist-info {position:relative; padding:3rem 3.5rem;}
.main_artist-info strong {display:block; font-size:2.2rem; font-weight:500;}
.main_artist-info p {display:flex; flex-wrap:wrap; gap:3rem; margin:1.5rem 0 0;}
.main_artist-info span {position:relative; color:#777;}
.main_artist-info span:last-child {color:#000;}
.main_artist-info span + span::before {content:""; position:absolute; left:-1.5rem; top:50%; width:1px; height:1.4rem; background:#ddd; transform:translateY(-50%);}
.main_artist-info::after {content:"";	position:absolute;	right:3.5rem;	top:3.5rem;	width:1.1rem;	height:1.1rem;background-repeat:no-repeat;	background-position:center;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.4 1H9V7.6' stroke='%23111' stroke-width='1.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3Cpath d='M8.8 1.2L1 9' stroke='%23111' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");opacity:0;transform:translate(-.4rem, .4rem);	transition:opacity .25s ease, transform .25s ease;}
.main_artist-card:hover .main_artist-info::after,
.main_artist-card:focus-visible .main_artist-info::after {opacity:1;	transform:translate(0, 0);}


.main_artist-arrow {position:absolute; top:50%; z-index:10; display:flex; align-items:center; justify-content:center; width:5rem; height:5rem; border:0; border-radius:50%; background:#fff; box-shadow:0 1rem 2rem rgba(0,0,0,.12); cursor:pointer; transform:translateY(-50%); transition:background .2s ease, transform .2s ease;}
.main_artist-arrow::before {content:""; width:1.5rem; height:1rem; background-repeat:no-repeat; background-position:center; background-size:contain;}
.main_artist-prev {left:max(2rem, calc((100vw - 175rem) / 2 + 2rem));}
.main_artist-next {right:6rem;}

.main_artist-prev::before {background-image:url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 5H2M6 1L2 5L6 9' stroke='%23111' stroke-width='1.7' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");}
.main_artist-next::before {background-image:url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5H12M8 1L12 5L8 9' stroke='%23111' stroke-width='1.7' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");}

.main_artist-arrow:hover,
.main_artist-arrow:focus-visible {background:#111; transform:translateY(-50%) scale(1.05);}

.main_artist-prev:hover::before,
.main_artist-prev:focus-visible::before {background-image:url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 5H2M6 1L2 5L6 9' stroke='%23fff' stroke-width='1.7' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");}
.main_artist-next:hover::before,
.main_artist-next:focus-visible::before {background-image:url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5H12M8 1L12 5L8 9' stroke='%23fff' stroke-width='1.7' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");}

	@media screen and (max-width:1480px) {
		.main_artist-title{width:70rem;}
		.main_artist-tab_btn{font-size:1.8rem;}
	}
	
	@media screen and (max-width:1200px) {
		.main_artist-head {gap:3rem; margin-bottom:3.5rem;  flex-direction: column;}
		.main_artist-title {width:70rem;}
		.main_artist-tab_btn {padding:.9rem 1.3rem;}
		.main_artist-swiper {padding-left:2rem;}
		.main_artist-swiper .swiper-slide {width:34rem;}
		.main_artist-info {padding:2.5rem 2.8rem;}
		.main_artist-arrow {width:4.6rem; height:4.6rem;}
		.main_artist-prev {left:2rem;}
		.main_artist-next {right:3rem;}
	}

	@media screen and (max-width:980px) {
		.main_artist-head {display:block; margin-bottom:3.5rem;}
		.main_artist-title {width:auto;}
		.main_artist-tab {margin-top:2rem; overflow-x:auto; overflow-y:hidden; padding-bottom:.5rem; white-space:nowrap;}
		.main_artist-tab_btn {flex:0 0 auto; font-size:1.8rem; padding:.9rem 1.3rem;}
		.main_artist-swiper {padding-top:1.5rem; padding-left:2rem; padding-right:2rem; overflow:hidden;}
	
		.main_artist-swiper .swiper-slide { width:auto; }
		.main_artist-card:hover,
		.main_artist-card:focus-visible {transform:none; box-shadow:none;}
		.main_artist-info {padding:2.4rem 2.6rem;}
		.main_artist-info strong {font-size:2rem;}
		.main_artist-info p {gap:2rem; margin-top:1.2rem;}
		.main_artist-info span + span::before {left:-1rem;}
		.main_artist-arrow {width:4.2rem; height:4.2rem;}
		.main_artist-prev {left:1.2rem;}
		.main_artist-next {right:1.2rem;}
	}

	@media screen and (max-width:640px) {
		.main_artist-head {margin-bottom:3rem;}
		.main_artist-tab {gap:.4rem; margin-top:1.6rem;}
		.main_artist-tab_btn {font-size:1.7rem; padding:.8rem 1.1rem;}
		.main_artist-swiper {padding-top:1rem; padding-left:1.6rem; padding-right:1.6rem;}
		.main_artist-swiper .swiper-slide {width:27rem;}
		.main_artist-info {padding:2rem 2.2rem;}
		.main_artist-info strong {font-size:1.9rem;}
		.main_artist-info p {gap:1.8rem; margin-top:1rem;}
		.main_artist-info span + span::before {left:-.9rem; height:1.2rem;}
		.main_artist-arrow {width:3.8rem; height:3.8rem;}
		.main_artist-arrow::before {width:1.3rem; height:.9rem;}
		.main_artist-prev {left:.8rem;}
		.main_artist-next {right:.8rem;}
	}



/*--------------------- 홍티 이야기 ---------------------*/
.main-story {position:relative;}
.main_story-box {position:relative; overflow:hidden; width:100%; min-height: 43rem;    padding: 5rem 18rem;  background: #262626;  display: flex; flex-direction: column;  justify-content: center;}
.main_story-bg {position:absolute; inset:0; z-index:1;}
.main_story-bg::before {content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.08) 100%);}
.main_story-bg img {display:block; width:100%; height:100%; object-fit:cover; object-position: top;}

.main_story-cont {position:relative; z-index:5; }
.main_story-text { margin-top: 2rem;  color: #fff;  font-size: 2rem;  font-weight: 400;}
.main_story-title{color:#fff;}
.main_story-title:after{content:"Hongti Story"; opacity:0.07;}

.main_story-link {display: flex; align-items: center;  flex-wrap: nowrap;  gap: 5rem;  margin-top: 5rem;}
.main_story-btn {display: inline-flex;  align-items: center;  gap: 2rem;  transition: color .2s ease;  padding: 1.5rem 0;  border-bottom: 1px solid #555;     opacity: 0.5;}
.main_story-btn::after {content:""; width:2.8rem; height:.8rem; background:url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5H13M9 1L14 5L9 9' stroke='white' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") no-repeat center / contain; transition:transform .2s ease;}
.main_story-btn:hover,
.main_story-btn:focus-visible {opacity: 1;}
.main_story-btn:hover::after,
.main_story-btn:focus-visible::after {transform:translateX(.5rem);}
.main_story-btn span{color:#fff;}

	@media screen and (max-width:1200px) {
		.main_story-box {min-height:38rem; padding:5rem 10rem;}
		.main_story-link {gap:3.5rem; margin-top:4rem;}
	}

	@media screen and (max-width:786px) {
		.main_story-box {min-height:35rem; padding:4rem 3rem;}
		.main_story-bg::before {background:linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.65) 48%, rgba(0,0,0,.35) 100%);}
		.main_story-text {margin-top:1.8rem; font-size:1.8rem; line-height:1.65;}
		.main_story-link {flex-direction:column; align-items:flex-start; gap:1.5rem; margin-top:3.2rem;}
		.main_story-btn {gap:1.5rem; padding:1.2rem 0;}
		.main_story-btn::after {width:2.4rem;}
	}

	@media screen and (max-width:480px) {
		.main_story-box {min-height:32rem; padding:3.5rem 2rem;}
		.main_story-bg::before {background:rgba(0,0,0,.68);}
		.main_story-text {margin-top:1.5rem; font-size:1.7rem; line-height:1.6;}
		.main_story-link {gap:1.2rem; margin-top:2.8rem;}
		.main_story-btn {gap:1.2rem; padding:1rem 0;}
		.main_story-btn::after {width:2.2rem;}
	}