/* ====== visual ====== */
.visualSlideWrapper { position: relative; } 
.visualSlider { position: relative; } 
.visualSlider .swiper-wrapper > .el { position:relative; overflow:hidden; height:100vh; will-change: opacity, transform; background: #000; } 
.visualSlider .swiper-wrapper > .el:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .25); content: ''; z-index: 1; } 
.visualSlider .swiper-wrapper > .el .wideImgVisual,
.visualSlider .swiper-wrapper > .el .bg { position:absolute; left:0; top:0; width:100%; height:100%;} 
.visualSlider .swiper-wrapper > .el .wideImgVisual { position: relative; width: 100%; overflow: hidden; background: #111; clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); } 
.visualSlider .swiper-wrapper > .el .bg > img { width: 115%; height: 115%; object-fit: cover; transform: scale(1); transition: 6s ease-out;} 
.visualSlider .swiper-wrapper > .el .vod_wrap { position: relative; width: 100%; height: 100%; } 
.visualSlider .swiper-wrapper > .el .vod_wrap:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .1367); content: ''; z-index: 1; } 

.visualSlider .swiper-wrapper > .el.swiper-slide-active .bg > img{ transform: scale(1.1);}

.visualSlideWrapper .slogan_wrap { position: absolute; top: 46.5%; transform: translateY(-50%); left: 0; width: 100%; z-index: 2; } 
.visualSlideWrapper .slogan_wrap .slogan { text-align: center; } 
.visualSlideWrapper .slogan_wrap .slogan > .line { display: none; width: 8svw; height: 2px; background: #fff; margin: 0 auto; margin-bottom: 1.5rem; } 
.visualSlideWrapper .slogan_wrap .slogan > .t1 { font-size: var(--font-size-xl); text-transform: uppercase; font-family: var(--ff1); font-weight: 400; letter-spacing: 0; line-height: 1; color: #fff; } 
.visualSlideWrapper .slogan_wrap .slogan > .t4 { font-size: var(--font-size-base); font-family: var(--ff1); color: #fff; margin-top: var(--space-4); letter-spacing: 0; text-transform: uppercase; line-height: var(--line-height-normal); } 

.visualSlideWrapper .visualSlider_control { position: absolute; left: 50%; transform: translateX(-50%); bottom: 20svw; z-index: 99; } 
.visualSlideWrapper .visualSlider_control .paging { } 
.visualSlideWrapper .visualSlider_control .paging .swiper-pagination-bullet { width: 2px; height: 10px; min-width: 2px; min-height: 10px; background: #fff; opacity: .5; margin: 0 .525rem; transition: .5s ease; } 
.visualSlideWrapper .visualSlider_control .paging .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; transform: rotate(30deg); } 

.mainScroll { position:absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 99; } 
.mainScroll .inner { align-items: center; justify-content: center; } 
.mainScroll .tt { display:block; text-align: center; color: #fff; font-size: var(--font-size-sm-1); margin-bottom: var(--space-2); font-family: var(--ff1); font-weight: 400; } 
.mainScroll .mouseImg { position:relative; } 
.mainScroll .mouseImg > .point { width: 1px; height: 35px; background: rgba(255, 255, 255, 0.2); margin: 0 auto; position: relative; overflow: hidden; } 
.mainScroll .mouseImg > .point > span { display: block; width: 1px; height: 200%; background: #fff; position: absolute; top: 0; left: 0; bottom: auto; -webkit-animation: scroll 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: scroll 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } 

@-webkit-keyframes scroll { 
 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 
to { -webkit-transform: translateY(50%); transform: translateY(50%); } 
 }

@keyframes scroll { 
 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 
to { -webkit-transform: translateY(50%); transform: translateY(50%); } 
 }
.mainScroll .mouseImg > img { width: 100%; height: 30px; object-fit: contain; filter: var(--crWhitefil); } 

.visualTslide { padding: 1.75rem 0; border-bottom: 1px solid var(--color-point); } 
.visualTslide .textAni { padding: 0; font-size: var(--font-size-md-1); text-transform: uppercase; font-weight: 300; font-family: var(--ff1); letter-spacing: 2px; text-transform: uppercase; } 
.visualTslide .textAni:before { background-image: url(../images/inc/pillar.png); padding: 0 1.25rem; background-repeat: no-repeat; background-position: center center; background-size: contain; content: ''; } 


/* ====== sec_about ====== */
#sec_about { } 
#sec_about .mainAboutContainer { display: flex; gap: 6rem; height: 75svh; } 
#sec_about .mainAboutContainer .sideImg { position:relative; width: 22.5%; height: 85%; } 
#sec_about .mainAboutContainer .sideImg .bg { } 
#sec_about .mainAboutContainer .sideImg.lf { margin-bottom: auto; } 
#sec_about .mainAboutContainer .sideImg.rf { margin-top: auto; } 
#sec_about .mainAboutContainer .main_tit { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; } 

/*== sec_about_new ==*/
#sec_about{}
#sec_about .AboutContainer{ display: flex; align-items: center; gap: 6rem; justify-content: space-between;}
#sec_about .AboutContainer .aboutInfo{ width: 50%;}
#sec_about .AboutContainer .aboutImgCon{ width: 50%; margin-left: 8svw; display: flex; gap: var(--gap-md); height: 52.4svh;}
#sec_about .AboutContainer .aboutImgCon > .imgCon{ width: 100%; height: 100%;}


/* ====== sec_gallery ====== */
#sec_gallery{ padding-top: 0;}
.gallery_table { display: flex; flex-wrap: wrap; } 
.gallery_table .tableItem { display: flex; gap: 3rem; width: 100%; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--color-point); } 
.gallery_table .tableItem:last-of-type { /* padding-bottom: 0; margin-bottom: 0; border-bottom: none; */ } 
.gallery_table .tableItem:first-of-type { padding-top: 2rem; border-top: 1px solid var(--color-point); } 
.gallery_table .tableItem .tableCon { position:relative; width: calc((100% - 9rem) / 4); } 
.gallery_table .tableItem .tableCon:before { position: absolute; right: -1.5rem; width: 1px; height: 100%; background: var(--color-point); content: ''; } 
.gallery_table .tableItem .tableCon:last-of-type:before{ display: none;}
.gallery_table .tableItem .tableCon .inner { position:relative; display: block; } 
.gallery_table .tableItem .tableCon .inner > .imgCon { position:relative; width: 100%; height: 30svh; } 
.gallery_table .tableItem .tableCon .inner > .imgCon .bg { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; color: rgb(255, 255, 255); backdrop-filter: blur(8px); overflow: hidden; transition: .3s ease; background: rgba(0, 0, 0, 0.25); z-index: 2; opacity: 0; visibility: hidden; } 
.gallery_table .tableItem .tableCon .inner > .imgCon .bg .more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--ff1); font-size: var(--font-size-sm); padding-bottom: .25rem; border-bottom: 2px solid var(--color-point3); } 
.gallery_table .tableItem .tableCon .inner > .infoCon { padding-top: 1.5rem; padding-bottom: .25rem; } 
.gallery_table .tableItem .tableCon .inner > .infoCon > .tit { font-size: var(--font-size-base); font-weight: 600; line-height: 1; } 
.gallery_table .tableItem .tableCon .inner > .infoCon > .txt { font-size: var(--font-size-sm); line-height: 1; font-weight: 400; margin-top: var(--space-2); } 

.gallery_table .tableItem .tableCon .inner:hover > .imgCon .bg { opacity: 1; visibility: visible; } 

/* ====== sec_widebg ====== */
#sec_widebg{ padding-top: 0;}
#sec_widebg .mainWideContainer{}
#sec_widebg .mainWideContainer .topTit{ display: flex; justify-content: center; align-items: center; gap: var(--gap-md);}
#sec_widebg .mainWideContainer .topTit .tit{ font-size: calc(190 / 1920 * 100vw); text-transform: uppercase; text-align: center; font-weight: 200; color: var(--color-point3); font-family: var(--ff1);}
#sec_widebg .mainWideContainer .topTit .mdT{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: var(--font-size-xl); font-family: var(--ff1);}
#sec_widebg .mainWideContainer .wideImgCon{ position: relative; width: 100%; height: 58.5svh;}

/* ====== sec_colpro ====== */
#sec_colpro{ padding-top: 0;}
.colproSlider_wrap{ position:relative;}
.colproSlider_wrap .colSlider_control .swiperBtn{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: auto; height: auto;}
.colproSlider_wrap .colSlider_control .swiperBtn:hover{ background: transparent;}
.colproSlider_wrap .colSlider_control .swiperBtn.prev{ left: 1rem;}
.colproSlider_wrap .colSlider_control .swiperBtn.prev:before{ content: '\e908'; font-size: 2rem; color: #fff;}
.colproSlider_wrap .colSlider_control .swiperBtn.next{ right: 1rem;}
.colproSlider_wrap .colSlider_control .swiperBtn.next:before{ content: '\e90b'; font-size: 2rem; color: #fff;}
.colproSlider_wrap .colSlider{ }
.colproSlider_wrap .colSlider .colProContainer{ display: block; box-sizing: border-box; /* background-image: url(../images/temp/colpro_bg01.jpg); */  background-repeat: no-repeat; background-position: center center; background-size: cover; transition: .3s ease;}
.colproSlider_wrap .colSlider .colProContainer .imgCon{ width: 100%; height: 55svh; background: #000;}
.colproSlider_wrap .colSlider .colProContainer .imgCon > img{ width: 100%; height: 100%; object-fit: contain;}
.colproSlider_wrap .colSlider .colProContainer .pName{  padding-top: var(--space-2); text-align: center; font-size: var(--font-size-md-1); font-weight: 500;}
.colproSlider_wrap .colSlider .colProContainer:hover .pName{ text-decoration: underline;}

/* ====== sec_rowpro ====== */
#sec_rowpro{ padding-top: 0;}
.rowproContainer{}
.rowproContainer .rowproList{ display: flex; flex-wrap: wrap; gap: 1rem;}
.rowproContainer .rowproList > li{ width: calc((100% - 3rem) / 4);}
.rowproContainer .rowproList > li > .inner{ display: block; padding: 2rem; border: 1px solid transparent; box-sizing: border-box; background: #000; transition: .3s ease;}
.rowproContainer .rowproList > li > .inner > .rowproImg{ width: 100%; height: 20svh;}
.rowproContainer .rowproList > li > .inner > .rowproImg > img{ width: 100%; height: 100%; object-fit: contain;}
.rowproContainer .rowproList > li > .inner > .pName{ font-size: var(--font-size-md-1); text-align: center; margin-top: var(--space-4); font-weight: 400; color: #fff;}
.rowproContainer .rowproList > li > .inner:hover{ border: 1px solid #111;}
#sec_rowpro{}
#sec_rowpro .mainProTab{ display: flex; gap: 2rem;}
#sec_rowpro .mainProTab > li{}
#sec_rowpro .mainProTab > li > .con{ position:relative; cursor: pointer;}
#sec_rowpro .mainProTab > li > .con:before{ position: absolute; top: 50%; transform: translateY(-50%); left: -1rem; width: 7px; height: 7px; background: var(--color-point); content: ''; opacity: 0; transition: .3s ease;}
#sec_rowpro .mainProTab > li > .con > .tt{ font-size: var(--font-size-base); line-height: 1; font-weight: 500; opacity: .5; transition: .3s ease;}

#sec_rowpro .mainProTab > li.on > .con:before{ opacity: 1;}
#sec_rowpro .mainProTab > li.on > .con > .tt{ opacity: 1;}

/* ====== sec_exhibit ====== */
#sec_exhibit{ padding-top: 0;}
.exhibitSlider_wrap{ position:relative;}
.exhibitSlider_wrap .exhibitSlider{ width: 100%; overflow: visible !important;}
.exhibitSlider_wrap .exhibitSlider .swiper-slide{ width: 60%; }
.exhibitSlider_wrap .exhibitSlider .exhibitImg{ width: 100%; height: 70svh;}
.exhibitSlider_wrap .exhibitSlider .exhibitImg > img{ width: 100%; height: 100%; object-fit: cover;}
.exhibitSlider_wrap .exhibitSlider_control .swiperBtn{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 5rem; height: 5rem; border: 1px solid #fff; background: rgba(0,0,0, .015); backdrop-filter: blur(2px); border-radius: var(--radius-pill);}
.exhibitSlider_wrap .exhibitSlider_control .swiperBtn.prev{ left: 6vw;}
.exhibitSlider_wrap .exhibitSlider_control .swiperBtn.prev:before{ content: '\e908'; color: #fff;}
.exhibitSlider_wrap .exhibitSlider_control .swiperBtn.next{ right: 6vw;}
.exhibitSlider_wrap .exhibitSlider_control .swiperBtn.next:before{ content: '\e90b'; color: #fff;}
.exhibitSlider_wrap .exhibitSlider_control .swiperBtn:hover{ background: var(--color-point3); border: 1px solid var(--color-point3);}