@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:#333; border-color:#333;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

body {background: #121212;}

/* 공통 버튼 */
.cm-more-btn{margin: 0 auto; padding: 0 2rem; min-width: 16.7rem; height: 5.6rem; border: 1px solid #FDFDFD; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: space-between; box-sizing: border-box; transition: var(--transition-custom); transition-property: border;}
.cm-more-btn span{font-size: 2rem; letter-spacing: -0.01em; font-weight: 600; color: #fff; transition: var(--transition-custom); transition-property: color;}
.cm-more-btn svg,
.cm-more-btn img{margin-left: 1.5rem; position: relative; height: 1.6rem;}
.cm-more-btn svg path{stroke: #fff; transition: var(--transition-custom); transition-property: stroke;}

.cm-more-btn:hover{border-color: var(--main-color);}
.cm-more-btn:hover span{color: var(--main-color);}
.cm-more-btn:hover svg path{stroke:var(--main-color);}
.cm-more-btn:hover svg,
.cm-more-btn:hover img{animation: move 0.9s ease-in-out; animation-iteration-count: 1;}

/* 각 포인트 모서리 */
:root{
	--corner-3rem: 3rem;
}
.cm-square-corner{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.cm-square-corner span {position: absolute; display: inline-block; width: var(--corner-3rem); height: var(--corner-3rem); border: 1px solid #8E95A3; }
.cm-square-corner span.point01 {top: calc(-1 * (var(--corner-3rem) / 2)); left: calc(-1 * (var(--corner-3rem) / 2)); border-right: 0; border-bottom: 0; border-top-left-radius: calc(var(--corner-3rem) / 2);}
.cm-square-corner span.point02 {top: calc(-1 * (var(--corner-3rem) / 2)); right: calc(-1 * (var(--corner-3rem) / 2)); border-left: 0; border-bottom: 0; border-top-right-radius: calc(var(--corner-3rem) / 2);}
.cm-square-corner span.point03 {bottom: calc(-1 * (var(--corner-3rem) / 2)); left: calc(-1 * (var(--corner-3rem) / 2)); border-right: 0; border-top: 0; border-bottom-left-radius: calc(var(--corner-3rem) / 2);}
.cm-square-corner span.point04 {bottom: calc(-1 * (var(--corner-3rem) / 2)); right: calc(-1 * (var(--corner-3rem) / 2)); border-left: 0; border-top: 0; border-bottom-right-radius: calc(var(--corner-3rem) / 2);}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	:root{
		--corner-3rem: 2.4rem;
	}
	.cm-more-btn{padding: 0 1.5rem; min-width: 16.7rem; min-width: auto; height: 4.6rem;}
	.cm-more-btn span{font-size: var(--font-size-P2);}
	.cm-more-btn svg,
	.cm-more-btn img{margin-left: 1.5rem; height: 1.6rem;}
}


/* ******************  1. About ********************** */
.about-page{position: relative;}
.about-effect-cir01 {position: absolute; top: -16rem; left: 0; /* width: 833px; height: 895px; */ width:43.38vw; height: 46.61vw; /* opacity: 0.5; */ background: url("/images/content/about_effect_cir01.png") center/cover no-repeat; display: block; z-index: -1;}
.about-effect-cir02 {position: absolute; top: 21.6rem; right: 0; top: -5vw;/* width: 696px; height: 1632px; */ width: 36.25vw; height: 85vw; opacity: 0.9; background: url("/images/content/about_effect_cir02.png") center/cover no-repeat; display: block; z-index: -1;}

.about-con01{padding-bottom: 18rem; overflow: hidden;}
.about-con01-tit h5{font-size: 10rem; line-height: 1.1; letter-spacing: -0.01em; color: #E5E5E5; font-weight: 400; text-align: center;}
.about-con01-tit h5 span{font-weight: 400; color: #747474;}
.about-con01-tit p{margin-top: 4rem; font-size: 3rem; line-height: 1.3; letter-spacing: -0.01em; color: #CDCDCD; text-align: center;}

.about-con01-wrapper{margin: 9.1rem auto 0; max-width: 1144px;}
.about-con01-list{margin: -8.2rem -9.2rem; display: flex; flex-wrap:wrap;}
.about-con01-item{margin: 8.2rem 9.2rem; width: calc(50% - 18.4rem);}
.about-con01-inner{position: relative;}
.about-con01-add{position: absolute; top: -4.4rem; left: 0; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center;}
.about-con01-add em{margin-right: 1rem; width: 0.8rem; height: 0.8rem; background-color: #0CF300; border-radius: 100%; display: block; transition: var(--transition-custom); transition-property: background-color;}
.about-con01-add span{font-size: 2rem; line-height: 1.3; letter-spacing: -0.01em; color: #0CF300; transition: var(--transition-custom); transition-property: color, content;}
.about-con01-add span:after{content: 'STBY';}
.about-con01-img{position: relative; height: 0; padding-top: 56.25%; /* width: 480px; height: 270px; */}
.about-con01-img .cm-square-corner span{transition: var(--transition-custom); transition-property: border-color;}
.about-con01-img .img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2rem; object-fit: cover;}
.about-con01-txt{position: absolute; top: 0; left: 0; padding: 1rem; width: 100%; height: 100%; border-radius: 2rem; background-color: rgba(0,88,88,0.9); backdrop-filter: blur(1rem); display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; transition: var(--transition-custom); transition-property: opacity; box-sizing: border-box;}
.about-con01-txt p{font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.01em; color: #fff; text-align: center; word-break: break-word;}
.about-con01-info{margin-top: 2rem; text-align: center;}
.about-con01-info h5{font-size: 3.2rem; line-height: 1.45; letter-spacing: -0.01em; color: #F2F4FA;}
.about-con01-info p{margin-top: 0.5rem; font-size: 1.8rem; line-height: 1.5; letter-spacing: -0.01em; color: #E8EBF0;}

@media (min-width: 801px) {
	.about-con01-inner:hover .about-con01-img .cm-square-corner span{border-color: #fff;}
	.about-con01-inner:hover .about-con01-txt{opacity: 1;}
	.about-con01-inner:hover .about-con01-add em{background-color: #F30000;}
	.about-con01-inner:hover .about-con01-add span{color: #F30000;}
	.about-con01-inner:hover .about-con01-add span:after{content: 'REC';}
}

.about-con02 {display: flex; position: relative; align-items: stretch; background-color: #101010;}

.about-con02-left {width: 50%; height: 100vh; position: sticky; top: 0;}
.about-con02-left .category-image {position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; display: flex; flex-direction: column; justify-content: flex-end; z-index: 1;}
.category-image.active {opacity: 1; pointer-events: auto;}
.category-image .bg {position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1;}
.category-image .bg-m{display: none; position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1;}
.category-image .bg-m:before,
.category-image .bg:before{position: absolute; bottom: 0; left: 0; width: 100%; height: 27rem; content: '';
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#020202+0,0f0f0f+100&0+0,1+100 */
background: linear-gradient(to bottom,  rgba(2,2,2,0) 0%, rgba(2,2,2,0.7) 30%, rgba(15,15,15,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.category-image .txt{position: absolute; left: 10%; right: 10%; bottom: 9.44%; font-size: 2.4rem; line-height: 1.5; letter-spacing: -0.01em; color: #fff;}

.about-con02-right {padding: 20vh 0; width: 50%; display: flex; flex-direction: column;}
.about-con02-right .slider {display: flex; flex-direction: column; align-items: center;}
.about-con02-right .slide {padding: 5.6rem 0; width: 50%; max-width: 44.4rem; box-sizing: border-box; /* min-height: 100vh; */}
.about-con02-right .slide .box{position: relative; width: 100%; height: 0; padding-top: 100%; background-color: #000; display: block;}
.about-con02-right .slide .box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2rem; overflow: hidden;}
.about-con02-right .slide .box {filter: blur(11.8px); transform: scale(0.75); opacity: 0.3; transition: none; will-change: transform, filter, opacity;}

@media all and (min-width:801px){
	.category-image .txt{opacity: 0 !important; -webkit-transform: translate3d(-30px, 0, 0) !important; transform: translate3d(-30px, 0, 0) !important;}
	.category-image.active .txt{opacity: 1 !important; -webkit-transform: none !important; transform: none !important;}
}
@media all and (max-width:1280px){
	.about-con01-list{margin: -8.2rem -7.4rem;}
	.about-con01-item{margin: 8.2rem 7.4rem; width: calc(50% - 14.8rem);}
}
@media all and (max-width:800px){
	.about-page{position: relative;}
	.about-effect-cir01 {top: -16rem; width:83.38vw; height: 86.61vw;}
	.about-effect-cir02 {top: 41.6rem; width: 46.25vw; height: 95vw;}

	.about-con01{padding-bottom: 8.4rem;}
	.about-con01-tit h5{font-size: var(--font-size-H0); line-height: var(--line-height-110);}
	.about-con01-tit p{margin-top: 4rem; font-size: var(--font-size-H6); line-height: var(--line-height-130); display: none;}

	.about-con01-wrapper{margin: 9.1rem auto 0;}
	.about-con01-list{margin: -5rem 0;}
	.about-con01-item{margin: 5rem 0; width: 100%;}
	.about-con01-inner{padding: 1rem; position: relative;}
	.about-con01-inner .cm-square-corner span.point01 {top: calc(-1 * (var(--corner-3rem) / 2)); left: calc(-1 * (var(--corner-3rem) / 2));}
	.about-con01-inner .cm-square-corner span.point02 {top: calc(-1 * (var(--corner-3rem) / 2)); right: calc(-1 * (var(--corner-3rem) / 2));}
	.about-con01-inner .cm-square-corner span.point03 {bottom: calc(-1 * (var(--corner-3rem) / 2)); left: calc(-1 * (var(--corner-3rem) / 2));}
	.about-con01-inner .cm-square-corner span.point04 {bottom: calc(-1 * (var(--corner-3rem) / 2)); right: calc(-1 * (var(--corner-3rem) / 2));}
	.about-con01-add {top: -3rem;}
	.about-con01-add em{margin-right: 1rem; width: 0.8rem; height: 0.8rem;}
	.about-con01-add span{font-size: var(--font-size-P2); line-height: var(--line-height-130);}
	.about-con01-img .img{border-radius: 2rem;}
	.about-con01-txt{top: 1rem; left: 1rem; padding: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); border-radius: 2rem;}
	.about-con01-txt p{font-size: var(--font-size-P4); line-height: var(--line-height-150);}
	.is-pc .about-con01-txt p br{display: none;}
	.about-con01-info{margin-top: 1.5rem;}
	.about-con01-info h5{font-size: var(--font-size-H3); line-height: var(--line-height-145);}
	.about-con01-info p{margin-top: 0.5rem; font-size: var(--font-size-P2); line-height: var(--line-height-150);}

	.about-con01-inner.active .about-con01-img .cm-square-corner span{border-color: #fff;}
	.about-con01-inner.active .about-con01-txt{opacity: 1;}
	.about-con01-inner.active .about-con01-add em{background-color: #F30000;}
	.about-con01-inner.active .about-con01-add span{color: #F30000;}
	.about-con01-inner.active .about-con01-add span:after{content: 'REC';}

	.about-con02 {display: flex; position: relative; align-items: stretch;}

	.about-con02-left {width: 100%; height: auto; position: relative;}
	.about-con02-left .category-image {position: relative; width: 100%; height: 0; padding-top: 208.33%; opacity: 1;}
	.category-image .bg{display: none;}
	.category-image .bg-m{display: block;}
	.category-image .bg-m:before,
	.category-image .bg:before{height: 33%;}
	.category-image .txt{left: var(--area-padding); right: var(--area-padding); bottom: 9.3%; font-size: var(--font-size-P2); line-height: var(--line-height-150);}

	.about-con02-right {display: none;}
}


/* ******************  2. IP ********************** */
.ip-page{padding-bottom: 19rem; position: relative;}
.ip-effect-cir01 {position: absolute; /* top: -16rem; */ top: -8.33vw; right: 0; /* width: 1182px; height: 1738px; */ width:61.56vw; height: 90.52vw; opacity: 0.5; background: url("/images/content/ip_effect_cir01.png") center/cover no-repeat; display: block; z-index: -1;}
.ip-effect-cir02 {position: absolute; bottom: 0; left: 0; /* width: 856px; height: 667px; */ width: 44.58vw; height: 34.73vw; opacity: 0.5; background: url("/images/content/ip_effect_cir02.png") center/cover no-repeat; display: block; z-index: -1;}
.ip-effect-cir03 {position: absolute; bottom: 0; left: 0; /* width: 394px; height: 889px; */ width: 20.52vw; height: 46.3vw; opacity: 0.5; background: url("/images/content/ip_effect_cir03.png") center/cover no-repeat; display: block; z-index: -1;}

.ip-tab-container{padding: 0 5%; display: flex; flex-wrap:wrap; justify-content: space-between;}

/* 왼쪽 :: 탭 */
@media all and (min-width:801px){
	.ip-tab-wrapper{padding-top: 29rem; width: 28%;}
	.ip-tab-wrapper-inner{width: 100%;}
	.ip-tab-list{position: sticky;  top: 50%; transform: translateY(-50%); left: 0;}
	.ip-tab-list ul{display: flex; flex-direction: column; transform:none !important;}
	.ip-tab-list ul li{margin-top: 3rem; position:relative;}
	.ip-tab-list ul li:first-child{margin-top: 0;}
	.ip-tab-list ul li:before{position: absolute; top: 1.4rem; left: -5vw; content: ''; width: 0; height: 1px; background-color: #fff; opacity: 0; transition: var(--transition-custom); transition-property: width, opacity;}
	.ip-tab-list ul li a{position: relative; font-size: 1.8rem; line-height: 1.4; letter-spacing: -0.01em; font-weight: 500; color: rgba(255,255,255,0.5); transition: var(--transition-custom); transition-property: color, padding-left;}
	.ip-tab-list ul li a:before{position: absolute; top: 50%; margin-top: -0.4rem; left: 2rem; width: 0.8rem; height: 0.8rem; background-color: var(--main-color); border-radius: 100%; content: ''; opacity: 0; transition: var(--transition-custom); transition-property: opacity;}
	.ip-tab-list ul li a em{font-size:inherit; font-weight: inherit; color: inherit;}
	.ip-tab-list ul li.selected:before{width: 5vw; opacity: 1;}
	.ip-tab-list ul li.selected a{padding-left: 4.8rem; font-size: 2.2rem; font-weight: 600; color: rgba(255,255,255,1);}
	.ip-tab-list ul li.selected a:before{opacity: 1; transition-delay:0.3s;}
}

/* 오른쪽 :: 내용 */
.ip-tab-content{width: calc(72% - 2rem); max-width: 129rem;}
.ip-bnr-box{position: relative; width: 100%; height: 0; padding-top: 30.23%; border-radius: 2rem; overflow: hidden;}
.ip-bnr-box span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.ip-bnr-box .m-img{display: none;}

.ip-txt-box{margin-top: 6rem; display: flex; flex-wrap:wrap;}
.ip-txt-box-left{width: 40%;}
.ip-txt-box-left .state{font-size: 2rem; letter-spacing: -0.01em; font-weight: 600; color: #fff;}
.ip-txt-box-left .tit{margin-top: 1rem; font-size: 4rem; line-height: 1.45; letter-spacing: -0.01em; font-weight: 600; color: #fff;}
.ip-txt-box-left .year{margin-top: 1rem; font-size: 3.2rem; line-height: 1.12; letter-spacing: -0.01em; font-weight: 600;	 color: #fff;}
.ip-txt-box-left .cm-more-btn{margin-top: 2rem;}
.ip-txt-box-right{max-width: 70.6rem; width: 60%; padding-left: 2rem; font-size: 1.8rem; line-height: 1.5; letter-spacing: -0.01em; color: #fff; box-sizing: border-box;}

.ip-img-box{margin-top: 6rem;}
.ip-img-list{margin: -1.2rem; display: flex; flex-wrap:wrap;}
.ip-img-item{margin: 1.2rem; width: 852px; width: calc(66.975% - 2.4rem);}
.ip-img-inner{position: relative; width: 100%; height: 0; padding-top: 57.51%; border-radius: 2rem; overflow: hidden;}
.ip-img-inner span{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.ip-img-item.item02{width: 414px; width: calc(33.025% - 2.4rem);}
.ip-img-item.item03{width: 414px; width: calc(33.33% - 2.4rem);}
.ip-img-item.item04{width: 414px; width: calc(33.33% - 2.4rem);}
.ip-img-item.item05{width: 414px; width: calc(33.33% - 2.4rem);}
.ip-img-item.item06{width: 560px; width: calc(44.345% - 2.4rem);}
.ip-img-item.item07{width: 706px; width: calc(55.655% - 2.4rem);}

.ip-img-item.item02 .ip-img-inner{padding-top: 118.35%;}
.ip-img-item.item03 .ip-img-inner{padding-top: 70.04%;}
.ip-img-item.item04 .ip-img-inner{padding-top: 70.04%;}
.ip-img-item.item05 .ip-img-inner{padding-top: 70.04%;}
.ip-img-item.item06 .ip-img-inner{padding-top: 64.28%;}
.ip-img-item.item07 .ip-img-inner{padding-top: 50.99%;}


@media all and (max-width:1280px){
	.ip-txt-box-left{width: 100%;}
	.ip-txt-box-right{margin-top: 6rem; padding-left: 0; max-width: none; width: 100%;}
}
@media all and (max-width:800px){
	.ip-page{padding-bottom: 0;}
	.ip-tab-container{padding: 0; display: flex; flex-wrap:wrap; justify-content: space-between;}
	
	/* 왼쪽 :: 탭 */
	.ip-tab-wrapper{padding: 0 var(--area-padding);width: 100%;height: var(--header-height);box-sizing: border-box;display: flex;align-items: center;}
	.ip-tab-list{width: 100%; /* max-width: 36.8rem; */ margin: 0 auto; position: relative;}
	.ip-tab-list ul{display: flex;}
	.ip-tab-list ul li{width: auto !important;}
	.ip-tab-list ul li a{padding: 0 2.1rem; height: 4.5rem; border: 2px solid #1A1E27; background-color: #1A1E27; display: inline-block; transform:scale(1); border-radius: 4.5rem; transition: var(--transition-custom); transition-property: border; box-sizing: border-box;}
	.ip-tab-list ul li a em{margin-top: 0; /* font-size: 2rem; */ font-size: var(--font-size-P2); line-height: calc(4.5rem - 4px); letter-spacing: -0.01em; font-weight: 500; color: #8E95A3; opacity: 1; transition: var(--transition-custom); transition-property: opacity; display: block; text-align: center;}
	.ip-tab-list ul li.selected a{transform:scale(1); border-color: var(--main-color);}
	.ip-tab-list ul li.selected a em{color: var(--main-color);}

	#header.black-ver #headerInnerWrap{background-color: #121212;}
	.ip-tab-list.top-fixed{position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc(var(--header-height) - 1px); z-index: 99; background-color: #121212; border-bottom: 1px solid #353C49; box-sizing: border-box;}
	.ip-tab-list.top-fixed ul{padding: 10px var(--area-padding);}

	.ip-tab-list.swiper-container-horizontal .swiper-pagination-bullets {bottom: -5.8rem; opacity: 1; visibility: visible;}
	.ip-tab-list .swiper-pagination-bullet {width: 1.6rem; height: 1.6rem; border-radius: 100%; background: transparent; border: 1px solid #C4CAD4; box-sizing: border-box; opacity: 1; transition: var(--transition-custom); transition-property: background, border-color;}
	.ip-tab-list .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 0.8rem;}
	.ip-tab-list .swiper-pagination-bullet-active {background: var(--main-color); border-color: var(--main-color);}

	/* 오른쪽 :: 내용 */
	.ip-tab-content{padding-bottom: 12rem; width: 100%; max-width: none;}
	.ip-bnr-box{padding-top: 67.7%; border-radius: 0;}
	.ip-bnr-box .pc-img{display: none;}
	.ip-bnr-box .m-img{display: block;}

	.ip-txt-box{margin-top: 6rem; padding: 0 var(--area-padding);}
	.ip-txt-box-left{width: 100%;}
	.ip-txt-box-left .state{font-size: var(--font-size-P2); letter-spacing: -0.01em; font-weight: 600;}
	.ip-txt-box-left .tit{margin-top: 1rem; font-size: var(--font-size-H1); line-height: var(--line-height-145); letter-spacing: -0.01em; font-weight: 600;}
	.ip-txt-box-left .year{margin-top: 0; font-size: var(--font-size-H2); line-height: var(--line-height-110); letter-spacing: -0.01em; font-weight: 600;}
	.ip-txt-box-left .cm-more-btn{margin-top: 2.8rem;}
	.ip-txt-box-right{margin-top: 6rem; font-size: var(--font-size-P3); line-height: var(--line-height-150); letter-spacing: -0.01em; box-sizing: border-box;}

	.ip-img-box{margin-top: 6rem; padding: 0 var(--area-padding);}
	.ip-img-list{margin: -1rem;}
	.ip-img-item{margin: 1rem; width: calc(100% - 2rem);}
	.ip-img-inner{padding-top: 56.81%; border-radius: var(--border-radius);}

	.ip-img-item.item02,
	.ip-img-item.item03,
	.ip-img-item.item04,
	.ip-img-item.item05,
	.ip-img-item.item06,
	.ip-img-item.item07{width: calc(100% - 2rem);}

	.ip-img-item.item02 .ip-img-inner,
	.ip-img-item.item03 .ip-img-inner,
	.ip-img-item.item04 .ip-img-inner,
	.ip-img-item.item05 .ip-img-inner,
	.ip-img-item.item06 .ip-img-inner,
	.ip-img-item.item07 .ip-img-inner{padding-top: 56.81%;}
}


/* ******************  3. Virtual Platform ********************** */
.sub-visual-virtual{position:relative; z-index: 1;}
/* .content-virtual{background: url("/images/content/virtual_con01_back.jpg") 50% 0 no-repeat;} */
.content-virtual{position: relative;}
.virtual-effect-cir01 {position: absolute; top: 0; left: 0; /* width: 609px; height: 829px; */ width:31.71vw; height: 43.17vw; opacity: 0.8; background: url("/images/content/virtual_effect_cir01.png") center/cover no-repeat; display: block; z-index: -1;}
.virtual-effect-cir02 {position: absolute; top: 10vh; right: 0; /* width: 668px; height: 1080px; */ width: 34.79vw; height: 56.25vw; opacity: 0.5; background: url("/images/content/virtual_effect_cir02.png") center/cover no-repeat; display: block; z-index: -1;}

.virtual-page{position: relative;}
.virtual-con01{margin-top: 41rem; position: relative; z-index: 0; height: 100vh;}
.virtual-con01-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none;}
.virtual-con01-bg-inner {border-radius: 10rem; overflow: hidden; width: 79.58%; height: 78.33%; max-height: 79.2rem; transition: none;}
.virtual-con01-bg-inner img{width: 100%; height: 100%; display: block; object-fit: cover;}
.virtual-con01-bg-inner .filter{--opacity-amount: 0; --blur-amount: 0px; backdrop-filter: blur(var(--blur-amount)); -webkit-backdrop-filter: blur(var(--blur-amount)); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,var(--opacity-amount)); pointer-events: none;}

.virtual-con01-box{position: relative; z-index: 2;}
.virtual-con01-box-inner{display: flex; flex-wrap:wrap; justify-content: space-between;}
.virtual-con01-box-txt{padding-top: calc(5.5rem + var(--header-height)); padding-bottom: 9.8rem; padding-right: 1rem; width: 47.36%; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box;}
.virtual-con01-box-txt .tit{width: 100%; position: relative;}

.virtual-con01-box-txt .tit .virtual-con01-tit{font-size: 8rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 300; color: #fff;
position: relative; width: 81rem; top: -40.8rem; left: 100%; transform: translateX(-50%); white-space: nowrap;}
.virtual-con01-box-txt .tit .virtual-con01-tit span{display: inline-block; padding-left: 18rem;}
.virtual-con01-box-txt .tit .virtual-con01-tit b{font-weight: 700;}

.virtual-con01-box-txt .txt{font-size: 2rem; line-height: 1.5; letter-spacing: -0.01em; color: #fff;}
.virtual-con01-box-img{max-width: 91.6rem; width: 52.64%; min-height: 100vh; display: flex; align-items: center;}
.virtual-con01-box-img ul{display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); gap: 1rem; width: 100%; grid-template-areas: ". img1" "img2 img3" "img4 .";}
.virtual-con01-box-img ul li:nth-child(1){grid-area: img1;}
.virtual-con01-box-img ul li:nth-child(2){grid-area: img2;}
.virtual-con01-box-img ul li:nth-child(3){grid-area: img3;}
.virtual-con01-box-img ul li:nth-child(4){grid-area: img4;}
.virtual-con01-box-img ul li span{position: relative; width: 100%; height: 0; padding-top: 64.06%; display: block;}
.virtual-con01-box-img ul li span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover;}

.virtual-con02{padding-top: 16rem;}

.virtual-con02-list{margin-top: 6rem; border-top: 1px solid rgba(216,220,226,0.3);}
.virtual-con02-item{padding: 2rem 0; border-bottom: 1px solid rgba(216,220,226,0.3); display: flex; flex-wrap:wrap; align-items: center;}
.virtual-con02-num{width: 9.3rem; font-size: 2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; color: rgba(89, 95, 114, 1);}
.virtual-con02-tit{width: calc(51.67% - 9.3rem); font-size: 2.8rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: #fff;}
.virtual-con02-txt{/* width: 696px; */ width: 48.33%;}
.virtual-con02-txt p{font-size: 2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; color:rgba(165, 173, 189, 1);}
.virtual-con02-txt p + p{margin-top: 1.5rem;}

.virtual-con03{padding-top: 16rem; position: relative;}
.virtual-effect-cir05 {position: absolute; top: -14vw; right: 0; /* width: 668px; height: 1080px; */ width: 34.79vw; height: 56.25vw; opacity: 0.6; background: url("/images/content/virtual_effect_cir02.png") center/cover no-repeat; display: block; z-index: -1;}
.virtual-con03-wrapper{}
.virtual-con03-list{display: flex; gap: 2.4rem;}
.virtual-con03-item{width: 16.66%;}
.virtual-con03-inner{position: relative; width: 100%; --virtual-con03-height: 56.5rem; height: var(--virtual-con03-height); overflow: hidden;}
.virtual-con03-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: 100%; height: var(--virtual-con03-height); border-radius: var(--border-radius); overflow: hidden; background-color: #000;}
.virtual-con03-bg:before{position: absolute; left: 0; bottom: 0; width: 100%; height: 38rem; content: '';
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: linear-gradient(to top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
z-index: 1;}
.virtual-con03-bg:after{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; content: '';
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00fdff+0,00fdff+100&1+0,1+38,0+100 */
background: linear-gradient(to top,  rgba(0,253,255,0.7) 0%, rgba(0,253,255,0.7) 40%, rgba(0,0,0,0.3) 95%, rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
opacity: 0; transition:var(--transition-custom); transition-property: opacity;}
.virtual-con03-bg span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-size: cover !important; transition:var(--transition-custom); transition-property: opacity;}
.virtual-con03-bg .m-img{display: none;}
.virtual-con03-inner h5{position: absolute; left: 0; bottom: 0; width: 100%; font-size: 2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; color: #fff; text-align: center; transform: translateY(-4rem); transition:var(--transition-custom); transition-property: transform; z-index: 2;}
.virtual-con03-inner p{position: absolute; left: 0; bottom: -3rem; width: 100%; font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.01em; color: #fff; text-align: center; opacity: 0; transition:var(--transition-custom); transition-property: bottom, opacity; z-index: 2;}
.virtual-con03-inner:hover .virtual-con03-bg span{opacity: 0.7;}
.virtual-con03-inner:hover .virtual-con03-bg:after{opacity: 1;}
.virtual-con03-inner:hover h5{transform: translateY(0); bottom: auto; top: 3.2rem;}
.virtual-con03-inner:hover p{bottom: 3rem; opacity: 1;}


.virtual-con04{padding-top: 16rem;}
.virtual-con04 #contentInfoCon .content-tit{line-height: 1.45;}
.virtual-con04-list{}
.virtual-con04-item{}
.virtual-con04-item + .virtual-con04-item{margin-top: 2.4rem;}
.virtual-con04-item a{width: 100%; display: flex; flex-wrap:wrap;}
.virtual-con04-item:nth-child(even) a{flex-direction: row-reverse;}
.virtual-con04-bg{width: 69.44%; height: 14rem; border-radius: var(--border-radius); overflow: hidden; position: relative; background-size: cover !important;}
.virtual-con04-bg:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; opacity: 0; transition:var(--transition-custom); transition-property: opacity;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00fdff+0,00fdff+100&0+0,0.8+100 */
background: linear-gradient(to right,  rgba(0,253,255,0) 0%,rgba(0,253,255,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.virtual-con04-txt{width: 30.56%; padding-left: 4.58%; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; box-sizing: border-box;}
.virtual-con04-item:nth-child(even) .virtual-con04-txt{padding-left: 0; padding-right: 2.05%;}
.virtual-con04-txt p{font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: rgba(142, 149, 163, 1); transition:var(--transition-custom); transition-property: color;}
.virtual-con04-txt svg{height: 8rem;}
.virtual-con04-txt svg path{stroke: #333; transition:var(--transition-custom); transition-property: stroke;}

.virtual-con04-item.open .virtual-con04-bg:after,
.virtual-con04-item:hover .virtual-con04-bg:after{opacity: 1;}
.virtual-con04-item.open .virtual-con04-txt p,
.virtual-con04-item:hover .virtual-con04-txt p{color: #fff;}
/* .virtual-con04-item.open .virtual-con04-txt svg path, */
.virtual-con04-item:hover .virtual-con04-txt svg path{stroke: var(--main-color);}

.virtual-con04-bottom{padding: 4rem 4.86%; display: none;}
.virtual-con04-bottom ul{margin: 0 -1.2rem; display: flex; flex-wrap:wrap;}
.virtual-con04-bottom ul li{margin: 0 1.2rem; width: calc(33.33% - 2.4rem);}
.virtual-con04-bottom ul li span{position:relative; width: 100%; height: 0; padding-top: 69.71%; display: block; border-radius: var(--border-radius); overflow: hidden;}
.virtual-con04-bottom ul li span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


.virtual-con05{padding-top: 16rem; position: relative;}
.virtual-effect-cir03 {position: absolute;/*  top: -42rem; */ top: -21.87vw; left: 0; /* width: 637px; height: 1295px; */ width: 33.17vw; height: 67.44vw; opacity: 0.8; background: url("/images/content/virtual_effect_cir03.png") center/cover no-repeat; display: block; z-index: -1;}
.virtual-effect-cir04 {position: absolute; /* bottom: -42rem; */ bottom: -21.87vw; right: 0; /* width: 624px; height: 1341px; */ width: 32.5vw; height: 69.84vw; opacity: 0.5; background: url("/images/content/virtual_effect_cir04.png") center/cover no-repeat; display: block; z-index: -1;}

.virtual-con05 .virtual-con05-svg{/* width="1682" height="462" */ height: 46.2rem; display: block; margin: 0 auto;}
.virtual-con05-en-tit{font-size: 12rem; letter-spacing: -0.01em; color: var(--main-color); text-align: center;}
.virtual-con05-en-sub-tit{margin-top: -1rem; font-size: 5.6rem; line-height: 1.5; letter-spacing: -0.01em; font-weight: 400; color: #fff; text-align: center;}
.virtual-con05-en-sub-tit b{font-weight: 600; color: var(--main-color);}
.virtual-con05-tit{margin-top: 2rem; font-size: 2.4rem; line-height: 1.5; letter-spacing: -0.01em; font-weight: 600; color: #fff; text-align: center;}

.virtual-con05-middle{margin: 3rem auto 0; padding: 0 var(--area-padding); max-width: 168rem; display: flex; align-items: center;}
.virtual-con05-left,
.virtual-con05-right{width: 20.8rem; height: 31.5rem; font-size: 2.4rem; line-height: 1.5; letter-spacing: -0.01em; font-weight: 600; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 2rem; border: 2px solid rgba(89, 95, 114, 1); box-sizing: border-box;}
.virtual-con05-line{width: 18rem;}
.virtual-con05-line em{width: 100%; height: 2px; background-color: rgba(89, 95, 114, 1); display: block;}
.virtual-con05-line01 span{margin: 0.6rem 0; width: 100%; font-size: 2rem; line-height: 1.5; letter-spacing: -0.01em; font-weight: 600; color: #fff; text-align: center; display: block;}
.virtual-con05-center{width: 90.4rem; /* height: 46.2rem; */ border-radius: 2rem; border: 2px solid rgba(89, 95, 114, 1); box-sizing: border-box;}
.virtual-con05-center-inner{padding: 2rem;}
.virtual-con05-center ul{margin: -0.4rem; display: flex; flex-wrap:wrap;}
.virtual-con05-center ul li{margin: 0.4rem; padding: 1.4rem 1.4rem 1.6rem; width: calc(33.33% - 0.8rem); background-color: rgba(71, 71, 71, 1); box-sizing: border-box; border-radius: 1.2rem;}
.virtual-con05-center ul li span{position: relative; width: 100%; height: 0; padding-top: 57.48%; display: block;}
.virtual-con05-center ul li span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.virtual-con05-center ul li p{margin-top: 1rem; font-size: 1.6rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: #fff; text-align: center;}

.virtual-con05-txt{margin-top: 3rem; font-size: 2rem; line-height: 1.5; letter-spacing: -0.01em; color: #BCBCBC; text-align: center;}

.virtual-con06{padding: 16rem 0 19rem;}
.virtual-con06-wrapper{margin:6rem auto 0;}
.virtual-con06-list{display: flex; gap: 2.4rem; width:100%; --virtual-con06-height: 56.5rem; height: var(--virtual-con06-height); white-space:nowrap; font-size:0;}
.virtual-con06-item{padding-top: 5rem; position:relative; overflow:hidden; width:12rem; height:100%; white-space:nowrap;}
.virtual-con06-inner{display:block; width:100%; position:relative; height:var(--virtual-con06-height); margin:0;}
.accordion-inner-box{border-radius: 2rem; overflow: hidden; position:relative; height:var(--virtual-con06-height); width:100%; background-size:cover !important;}
.accordion-inner-box video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition:var(--transition-custom); transition-property: opacity, visibility;}
.accordion-inner-box .icon{position:absolute; top:50%; left:50%; width: 11.25%; max-width: 11.3rem; z-index:1; transform: translate(-50%, -50%); cursor: pointer; transition:var(--transition-custom); transition-property: opacity, visibility;}
.accordion-inner-box.show video{opacity: 1; visibility: visible;}
.accordion-inner-box.show .icon{opacity: 0; visibility: hidden;}
.accordion-inner-box .icon img{width: 100%;}
.accordian-tit-box{position:absolute; left:0; top:0; width:100%; height:var(--virtual-con06-height); z-index:1; cursor:pointer;}
.accordian-tit-box:before{position:absolute; top:0px; left:0px; width:100%; height:var(--virtual-con06-height); content:""; background-color:rgba(0,0,0,0.2); backdrop-filter: blur(3rem); border-radius: 2rem;}
.accordian-tit-box .accordian-tit{position:absolute;top: -3rem; left: 43px;right: 0;width: 56.5rem;transform:rotate(90deg);transform-origin: left bottom;text-align: center;color:#fff;font-size:2.4rem;line-height: 1.3;letter-spacing: -0.01em;font-weight: 600;color: #fff;}

/* Active */
.virtual-con06-item.active{width: calc(100% - 36rem - 6rem);}
.virtual-con06-item.active .accordion-inner-box video,
.virtual-con06-item.active .accordion-inner-box .icon{z-index: 9;}
.active .accordian-tit-box{cursor:default;}
.active .accordian-tit-box:before{display: none;}
.active .accordian-tit-box .accordian-tit{width: 100%; top: -5rem; left: 0; text-align: left; transform: rotate(0);}
@media all and ( min-width: 801px ){
	.active .accordian-tit-box .accordian-tit{animation:active-title 0.5s alternate both 0.2s;}
}

@keyframes active-title {
	0% {
		opacity: 0;
		left:-2rem;
	}
	100% {
		opacity: 1;
		left:0
	} 
}

@media all and (max-width:1780px){
	.virtual-con01-box-txt .tit .virtual-con01-tit{left: calc(100% + var(--area-padding));}
}
@media all and ( max-width: 1280px ){
	.virtual-con01{margin-top: 32rem;}
	.virtual-con01-box-txt .tit .virtual-con01-tit{font-size: 7rem; left: calc(100% + var(--area-padding)); width: 71rem;}
	.virtual-con01-box-txt {padding-top: calc(3.5rem + var(--header-height)); padding-right: 3rem;}
	.virtual-con01-bg-inner {height: 63rem;}
}
@media all and ( max-width: 800px ){
	.virtual-con01{margin-top: 0; height: auto;}

	.virtual-con01-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none;}
	.virtual-con01-bg-inner {border-radius: 10rem; overflow: hidden; width: 100%; height: 100%; transition: none;}
	.virtual-con01-bg-inner img{width: 100%; height: 100%; display: block; object-fit: cover;}
	.virtual-con01-bg-inner .filter{backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); pointer-events: none;}

	.virtual-con01-box{padding: 12rem 0; position: relative; z-index: 2;}
	.virtual-con01-box-inner{display: block;}
	.virtual-con01-box-txt{padding-top: 0; padding-bottom: 0; padding-right: 1rem; width: 100%; min-height: auto; box-sizing: border-box; display: block;}
	.virtual-con01-box-txt .tit{width: 100%; position: relative;}

	.virtual-con01-box-txt .tit .virtual-con01-tit{text-align: left;  font-size: var(--font-size-H1); line-height: var(--line-height-130); letter-spacing: -0.01em; font-weight: 300; color: #fff;
	position: relative; top: 0; left: 0; transform: translateX(0); width: 100%; text-align: center;}
	.virtual-con01-box-txt .tit .virtual-con01-tit b{font-weight: 700;}
	.virtual-con01-box-txt .tit .virtual-con01-tit span {padding-left: 0;}

	.virtual-con01-box-txt .txt{margin-top: 2.5rem; font-size: var(--font-size-P2); line-height: var(--line-height-150); text-align: center;}
	.virtual-con01-box-img{margin-top: 5.6rem; max-width: none; width: 100%; min-height: auto; display: block;}
	.virtual-con01-box-img ul{display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); gap: 1rem; width: 100%; grid-template-areas: ". img1" "img2 img3" "img4 .";}
	.virtual-con01-box-img ul li:nth-child(1){grid-area: img1;}
	.virtual-con01-box-img ul li:nth-child(2){grid-area: img2;}
	.virtual-con01-box-img ul li:nth-child(3){grid-area: img3;}
	.virtual-con01-box-img ul li:nth-child(4){grid-area: img4;}
	.virtual-con01-box-img ul li span{position: relative; width: 100%; height: 0; padding-top: 64.06%; display: block;}
	.virtual-con01-box-img ul li span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover;}

	.virtual-con02{padding-top: 10rem;}
	.virtual-con02-list{margin-top: 5.6rem;}
	.virtual-con02-item{padding: 2rem 0 2rem 5rem; position: relative;}
	.virtual-con02-num{position: absolute; top: 2.2rem; left: 0; width: 5rem; font-size: var(--font-size-P1); line-height: var(--line-height-130);}
	.virtual-con02-tit{width: 100%; font-size: var(--font-size-P1); line-height: var(--line-height-130);}
	.virtual-con02-txt{margin-top: 1.5rem; width: 100%;}
	.virtual-con02-txt p{font-size: var(--font-size-P2); line-height: var(--line-height-130);}
	.virtual-con02-txt p + p{margin-top: 0.5rem;}

	.virtual-con03{padding-top: 10rem;}
	.virtual-con03-wrapper{margin-top: 5.6rem;}
	.virtual-con03-list{flex-wrap:wrap; gap: 6rem;}
	.virtual-con06-item.active,
	.virtual-con03-item{display: block; width: 100%;}
	.virtual-con03-inner{position: relative; width: 100%; --virtual-con03-height: auto; height: var(--virtual-con03-height); overflow: visible;}
	.virtual-con03-bg{position: relative; height: 0; padding-top: 29.82%; border-radius: var(--border-radius);}
	.virtual-con03-bg .m-img{display: block;}
	.virtual-con03-bg .pc-img{display: none;}
	.virtual-con03-bg:before{height: 68%; opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);}
	.virtual-con03-bg:after{display: none;}
	.virtual-con03-inner h5{font-size: var(--font-size-P1); line-height: var(--line-height-130); letter-spacing: -0.01em; bottom: 9.37%; transform: translateY(0);}
	.virtual-con03-inner h5 br{display: none;}
	.virtual-con03-inner p{margin-top: 1.6rem; opacity: 1; position: static; font-size: var(--font-size-P3); line-height: var(--line-height-150); text-align: left; color: rgba(142, 149, 163, 1);}
	.virtual-con03-inner:hover .virtual-con03-bg span{opacity: 1;}
	.virtual-con03-inner:hover h5{transform: translateY(0); bottom: 9.37%; top: auto;}
	
	.virtual-con04{padding-top: 16rem;}
	.virtual-con04-list{}
	.virtual-con04-item{display: flex; flex-wrap:wrap;}
	.virtual-con04-item:nth-child(even){flex-direction: row-reverse;}
	.virtual-con04-item + .virtual-con04-item{margin-top: 2.4rem;}
	.virtual-con04-top{position: relative;}
	.virtual-con04-item a {pointer-events: none;}
	.virtual-con04-bg{width: 100%; height: 18rem; height: 0; padding-top: 25.56%; border-radius: var(--border-radius); overflow: hidden; position: relative; background-size: cover !important;}
	.virtual-con04-bg:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; opacity: 1; background: rgba(0, 88, 88, 0.6);}
	.virtual-con04-item:nth-child(even) .virtual-con04-txt,
	.virtual-con04-txt{position: absolute; top: 0; left: 0; padding: 0 3.7rem; padding: 2.59rem; width: 100%; height: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; box-sizing: border-box; z-index: 1;}
	.virtual-con04-txt p{font-size: var(--font-size-H6); line-height: var(--line-height-130); color: #fff;}
	.virtual-con04-txt p br{display: none;}
	.virtual-con04-txt svg{height: 5.3rem; height: 3.71rem;}
	.virtual-con04-txt svg path{stroke: #fff !important;}

	.virtual-con04-bottom{padding: 1.2rem 0; width: 100%; display: block !important;}
	.virtual-con04-bottom ul{margin: 0 -0.6rem;}
	.virtual-con04-bottom ul li{margin: 0 0.6rem; width: calc(50% - 1.2rem);}
	.virtual-con04-bottom ul li:nth-child(2)~*{display: none !important;}

	.virtual-con05{padding-top: 16rem;}
	.virtual-con05-en-tit{font-size: var(--font-size-lg);}
	.virtual-con05-en-sub-tit{margin-top: 0rem; font-size: var(--font-size-H5); line-height: var(--line-height-150);}
	.virtual-con05-tit{margin-top: 1.6rem; font-size: var(--font-size-P2); line-height: var(--line-height-110); color: #A5ADBD;}

	.virtual-con05-middle,
	.virtual-con05-txt{display: none;}

	.virtual-con06{padding: 6rem 0 16rem;}
	.virtual-con06-wrapper{margin:5.6rem auto 0;}
	.virtual-con06-list{flex-wrap:wrap; gap: 5.6rem; width:100%; height: auto; white-space:initial; overflow:visible; font-size:initial;}
	.virtual-con06-item{padding-top: 4rem; display:block; width:100%; height:auto; position:relative; overflow:visible; width:100% !important; height:auto; white-space:initial;}
	.virtual-con06-inner{height: auto;}
	.accordion-inner-box{height: 0; padding-top:52.41%; background-size:cover !important; border-radius: var(--border-radius);}
	.accordian-tit-box{cursor: auto; height: auto;}
	.accordian-tit-box:before{display: none;}
	.active .accordian-tit-box .accordian-tit,
	.accordian-tit-box .accordian-tit{top: -4rem !important; left: 0 !important;width: 100%;transform:rotate(0deg) !important; text-align: left;color:#fff;font-size:var(--font-size-P2);line-height: var(--line-height-130);}
	.accordion-inner-box .icon{/* width: 11.25%; max-width: 11.3rem; */ width: 17.04%; max-width: 11.3rem;}
}


/* ******************  4. VFX ********************** */
.sub-visual-vfx{position:relative; z-index: 1;}
.content-vfx{position: relative;}
.content-vfx .virtual-effect-cir01{opacity: 0.9;}
.content-vfx .virtual-effect-cir02 {top: 84vh; opacity: 0.6;}

.vfx-con01{position: relative;}
.vfx-con01 #contentInfoCon .content-tit{line-height: 1.45;}
.vfx-con01 #contentInfoCon .content-sub-tit {line-height: 1.6;}
.vfx-con01 #contentInfoCon .content-sub-tit b{font-weight: 400; color: var(--main-color);}
.vfx-con01-wrapper{margin-top: 6rem;}
.vfx-con01-tit{font-size: 3rem; line-height: 1.6; letter-spacing: -0.01em; font-weight: 600; color: var(--main-color);}
.vfx-con01-list{margin-top: 2rem; border-top: 1px solid rgba(216,220,226,0.3);}
.vfx-con01-item{padding: 2rem 0; border-bottom: 1px solid rgba(216,220,226,0.3); display: flex; flex-wrap:wrap; align-items: center;}
.vfx-con01-num{width: 9.3rem; font-size: 2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; color: rgba(89, 95, 114, 1);}
.vfx-con01-txt{width: calc(100% - 9.3rem); font-size: 2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: #E8EBF0;}

.vfx-con02{padding: 16rem 0 18rem;}
.vfx-con02-wrapper{}
.vfx-con02-list{display: flex; gap: 2.4rem;}
.vfx-con02-item{width: 16.66%;}
.vfx-con02-inner{position: relative; width: 100%; --vfx-con02-height: 56.5rem; height: var(--vfx-con02-height); border-radius: var(--border-radius); overflow: hidden;}
.vfx-con02-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: 100%; height: var(--vfx-con02-height); border-radius: var(--border-radius); overflow: hidden; background-color: #000;}
.vfx-con02-bg:before{position: absolute; left: 0; bottom: 0; width: 100%; height: 38rem; content: '';
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: linear-gradient(to top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
z-index: 1;}
.vfx-con02-bg span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-size: cover !important; transition:var(--transition-custom); transition-property: opacity;}
.vfx-con02-bg .m-img{display: none;}
.vfx-con02-inner h5{position: absolute; left: 0; bottom: 0; width: 100%; height: 2.6em; font-size: 2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; transform: translateY(-4rem); z-index: 2;}

.vfx-con03 {display: flex; position: relative; align-items: stretch;}
.vfx-con03-left {width: 50%; height: 100vh; position: sticky; top: 0;}
.vfx-con03-left .vfx-con03-image {position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; display: flex; flex-direction: column; justify-content: flex-end; z-index: 1;}
.vfx-con03-image.active {opacity: 1; pointer-events: auto;}
.vfx-con03-image img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}

.vfx-con03-right {width: 50%; display: flex; flex-direction: column;}
.vfx-con03-right .slider {width: 100%; display: flex; flex-direction: column; align-items: center;}
.vfx-con03-right .slide {padding: 5rem 10.41%; width: 100%; min-height: 100vh; background-color: #fff; box-sizing: border-box; box-sizing: border-box; display: flex; align-items: center;}
.vfx-con03-right .slide .vfx-con03-img{width: 100%; height: auto; display: none;}
.vfx-con03-right .slide .vfx-con03-img img{width: 100%; height: 100%; object-fit: cover;}
.vfx-con03-right .slide .vfx-con03-txt{width: 100%; display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--font-family2);}
.vfx-con03-right .slide .vfx-con03-txt h5{font-size: 4rem; line-height: 1.45; letter-spacing: -0.01em; font-weight: 700; color: #121212;}
.vfx-con03-right .slide .vfx-con03-txt p{margin-top: 3rem; font-size: 2rem; line-height: 1.45; letter-spacing: -0.01em; color: #595F72;}


@media all and ( max-width: 800px ){
	.vfx-con01 #contentInfoCon .content-sub-tit{/* font-size: 1.7rem; */ font-size: var(--font-size-P3); font-size: var(--font-size-P4);}
	.vfx-con01-wrapper{margin-top: 5.6rem;}
	.vfx-con01-tit{font-size: 2.8rem; font-size: var(--font-size-H4); line-height: var(--line-height-160);} 
	.vfx-con01-list{margin-top: 2rem;}
	.vfx-con01-item{padding: 2rem 0 2rem 5rem; position: relative;}
	.vfx-con01-num{position: absolute; top: 2.2rem; left: 0; width: 5rem; font-size: var(--font-size-P1); line-height: var(--line-height-130);}
	.vfx-con01-txt{width: 100%; font-size: var(--font-size-P1); line-height: var(--line-height-130);}
	
	.vfx-con02{padding-top: 10rem 0 12rem;}
	.vfx-con02-wrapper{margin-top: 5.6rem;}
	.vfx-con02-list{flex-wrap:wrap; gap: 2.6rem;}
	.vfx-con02-item{display: block; width: 100%;}
	.vfx-con02-inner{position: relative; width: 100%; --vfx-con02-height: auto; height: var(--vfx-con02-height); overflow: visible;}
	.vfx-con02-bg{position: relative; height: 0; padding-top: 29.82%; border-radius: var(--border-radius);}
	.vfx-con02-bg .m-img{display: block;}
	.vfx-con02-bg .pc-img{display: none;}
	.vfx-con02-bg:before{height: 68%; opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);}
	.vfx-con02-inner h5{height: auto; display: block; font-size: var(--font-size-P1); line-height: var(--line-height-130); letter-spacing: -0.01em; bottom: 9.37%; transform: translateY(0);}
	.vfx-con02-inner h5 br{display: none;}

	.vfx-con03 {display: flex; position: relative; align-items: stretch;}
	.vfx-con03-left {display: none;}

	.vfx-con03-right {width: 100%;}
	.vfx-con03-right .slider {width: 100%;}
	.vfx-con03-right .slide {padding: 0; width: 100%; min-height: auto; display: block;}
	.vfx-con03-right .slide .vfx-con03-img{position: relative; width: 100%; height: 0; padding-top: 95.40%; display: block;}
	.vfx-con03-right .slide .vfx-con03-img img{position: absolute; top: 0; left: 0;}
	.vfx-con03-right .slide .vfx-con03-txt{padding: 16rem var(--area-padding) 5.6rem;}
	.vfx-con03-right .slide .vfx-con03-txt h5{font-size: var(--font-size-H1); line-height: var(--line-height-145);}
	.vfx-con03-right .slide .vfx-con03-txt p{margin-top: 2.8rem; font-size: var(--font-size-P2); line-height: var(--line-height-145);}
}


/* ******************  5. Works ********************** */
.content-works{position: relative;}
.works-effect-cir01 {position: absolute; top: 0; left: 0; /* width: 827px; height: 1047px; */ width:43.07vw; height: 54.53vw; opacity: 0.5; background: url("/images/content/works_effect_cir01.png") center/cover no-repeat; display: block; z-index: -1;}
.works-effect-cir02 {position: absolute; top: 50%; margin-top: -67.445vw; right: 0; /* width: 722px; height: 2590px; */ width: 37.6vw; height: 134.89vw; opacity: 0.4; background: url("/images/content/works_effect_cir02.png") center/cover no-repeat; display: block; z-index: -1;}
.works-effect-cir03 {position: absolute; bottom: 0; left: 0; /* width: 769px; height: 885px; */ width: 40.05vw; height: 46.09vw; opacity: 0.5; background: url("/images/content/works_effect_cir03.png") center/cover no-repeat; display: block; z-index: -1;}

.works-con01{}

.works-con01-wrapper{}
.works-con01-list{margin: -3rem -1.25rem; display: flex; flex-wrap:wrap;}
.works-con01-item{margin: 3rem 1.25rem; width: calc(25% - 2.5rem);}
.works-con01-img{position: relative; width: 100%; height: 0; padding-top: 139.58%; border-radius: 2rem; overflow: hidden;}
.works-con01-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.works-con01-txt{margin-top: 2rem;}
.works-con01-txt .info{font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.01em; font-weight: 600; color: var(--main-color);}
.works-con01-txt .tit{margin-top: 1.2rem; font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: #fff;}
.works-con01-btn{margin-top: 12rem; text-align: center;}

.works-con02{margin-top: 16rem; padding-bottom: 22rem;}
.works-con02-tab-container{max-width: 114.4rem; margin: 0 auto;}
.works-con02-tab-wrapper{}
.works-con02-tab-list{}
.works-con02-tab-list ul{margin: -0.25rem 0; display: flex; flex-wrap:wrap; align-items: center;}
.works-con02-tab-list ul li{width: auto; margin: 0.25rem 0; margin-right: 5rem;}
.works-con02-tab-list ul li:last-child{margin-right: 0;}
.works-con02-tab-list ul li a{font-size: 3rem; line-height: 1.4; letter-spacing: -0.01em; font-weight: 600; color: #fff; opacity: 0.3; transition: var(--transition-custom); transition-property: opacity;}
.works-con02-tab-list ul li a em{font-size:inherit; font-weight: inherit; color: inherit;}
.works-con02-tab-list ul li.selected a{font-size: 4rem; font-weight: 900; opacity: 1; color: var(--main-color);}

.works-con02-tab-con{margin-top: 6rem;}
.sub-video-con{width: 100%; position: relative;}
.sub-video-wrapper{position:relative; width: 100%; left: auto !important; overflow:hidden; border-radius: 3rem; z-index: 5;}
.sub-video-box{position:relative; width: 100%; height:0; padding-top: 56.25%;}
.sub-video-box video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.sub-video-cover{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer; overflow: hidden;}
.sub-video-cover .thumb{position: absolute; top: 0; left: 0; display:block; width:100%; height:100%; transition:var(--transition-custom); transition-property: transform;}
.sub-video-cover .thumb img{width:100%; height:100%; object-fit: cover;}
.sub-video-cover .icon{position:absolute; top:50%; left:50%; width: 12.67%; max-width: 14.5rem; z-index:1; transform: translate(-50%, -50%);}
.sub-video-cover .icon img{width: 100%;}

@media all and (min-width: 801px){
	.works-con02-tab-list ul {transform: none !important;}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	.works-con01-list{margin: -3rem -1.2rem;}
	.works-con01-item{margin: 3rem 1.2rem; width: calc(50% - 2.4rem);}
	.works-con01-img{padding-top: 139.58%; border-radius: 2rem;}
	.works-con01-txt{margin-top: 2rem;}
	.works-con01-txt .info{font-size: var(--font-size-P5); line-height: var(--line-height-150);}
	.works-con01-txt .tit{margin-top: 1.2rem; font-size: var(--font-size-H5); line-height: var(--line-height-130);}
	.works-con01-btn{margin-top: 12rem;}

	.works-con02{margin-top: 16rem; padding-bottom: 10rem;}
	.works-con02-tab-wrapper{overflow: hidden;}
	.works-con02-tab-list ul{flex-wrap: initial; flex-flow: nowrap; margin: 0;}
	.works-con02-tab-list ul li,
	.works-con02-tab-list ul li:last-child{margin-right: 1.4rem; width: auto;}
	.works-con02-tab-list ul li a{padding: 0 2.1rem; height: 4.8rem; font-size: var(--font-size-P2); line-height: calc(4.8rem - 4px); letter-spacing: -0.01em; font-weight: 500; color: #8E95A3; border-radius: 4.8rem; box-sizing: border-box; border: 2px solid #1A1E27; background-color: #1A1E27; display: inline-block; transition: var(--transition-custom); transition-property: border, color; opacity: 1;}
	.works-con02-tab-list ul li.selected a{font-size: var(--font-size-P2); font-weight: 500; border-color: var(--main-color); color: var(--main-color);}

	.works-con02-tab-con{margin-top: 2rem;}
	.works-con02 .cm-square-corner{display: none;}
	.sub-video-wrapper{border-radius: 2rem;}
	.sub-video-box{padding-top: 56.25%;}
	.sub-video-cover .icon{width: 17.04%; max-width: 12rem;}
}



/* ******************  6. News ********************** */
/* list */
.content-news{position: relative;}
.news-page {position: relative; padding-bottom: 15rem;}
.news-effect-cir01 {position: absolute; top: 0; right: 0; /* width: 1182px; height: 1738px; */ width:61.56vw; height: 90.52vw; opacity: 0.5; background: url("/images/content/news_effect_cir01.png") center/cover no-repeat; display: block; z-index: -1;}
.news-effect-cir02 {position: absolute; bottom: 0; left: 0; /* width: 856px; height: 889px; */ width: 44.58vw; height: 46.3vw; opacity: 0.5; background: url("/images/content/news_effect_cir02.png") center/cover no-repeat; display: block; z-index: -1;}

.news-list-con {/* margin-bottom: 12rem; */}
.news-list {display: flex; flex-wrap: wrap; margin: -3rem -1.2rem;}
.news-list li {width: calc(33.3333% - 2.4rem); margin: 3rem 1.2rem;}
.news-list li a {position: relative; display: block;}
.news-list li a .img-box {position: relative;}
.news-list li a .img-box span { position: relative; display: block; width: 100%; padding-top: 59.17%; border-radius: 2rem; overflow: hidden;}
.news-list li a .img-box span .img-cover{object-fit: cover; transition:var(--transition-custom);}
.news-list li a .txt-box {padding:2rem 0 3rem;}
.news-list li a .txt-box .date {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.5; color: var(--main-color); margin-bottom: 1rem;}
.news-list li a .txt-box .tit {font-size: 2.4rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: #FDFDFD; overflow:hidden;display:block;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; height: 4em; margin-bottom: 1.5rem;}
.news-list li a .txt-box .txt {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.5; color: #8E95A3; overflow:hidden;display:block;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; height: 4.5em;}
.news-list li a .read-btn {width: 9.92rem; height: 4.2rem;display: flex; align-items: center; justify-content: space-between; padding:0 1.3rem 0 1.5rem; border: 1px solid #595F72; box-sizing: border-box; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; color: #595F72; border-radius: 0.6rem; transition:var(--transition-custom);}
.news-list li a .read-btn i {font-size: 2rem; position: relative;}
.news-list li a .read-btn svg{position: relative;}
.news-list li a .read-btn svg path{stroke:#595F72; transition:var(--transition-custom);}
.news-btn-con {margin-top: 12rem; text-align: center;}

.news-list li a:hover .img-box span img{transform: scale(1.1) rotate(0.002deg);}
.news-list li a:hover .read-btn{border-color: #fff; color: #fff;}
.news-list li a:hover .read-btn svg path{stroke:#fff;}
.news-list li a:hover svg,
.news-list li a:hover i{animation: move 0.9s ease-in-out; animation-iteration-count: 1;}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	.news-page {padding-bottom: 10rem;}
	.news-con-tit {font-size: 4rem; font-weight: 600; letter-spacing: -0.01em; color: #FDFDFD; line-height: 1.3; margin-bottom: 6rem;}
	.news-list-con {/* margin-bottom: 12rem; */}
	.news-list {display: flex; flex-wrap: wrap; margin: -3rem -1.2rem;}
	.news-list li {width: calc(100% - 2.4rem); margin: 3rem 1.2rem;}
	.news-list li a .img-box span {padding-top: 59.17%; padding-top: 60.51%; border-radius: 2rem;}
	.news-list li a .txt-box {padding: 2rem 0 3rem; padding: 4rem 0;}
	.news-list li a .txt-box .date {font-size: 1.6rem; font-size: var(--font-size-P3); line-height: var(--line-height-150); margin-bottom: 1rem;}
	.news-list li a .txt-box .tit {font-size: 2.4rem; font-size: var(--font-size-H5); line-height: var(--line-height-130); -webkit-line-clamp: 3; height: auto; max-height: 4em; margin-bottom: 1.5rem;}
	.news-list li a .txt-box .txt {font-size: 1.6rem; font-size: var(--font-size-P3); line-height: 1.5; -webkit-line-clamp: 3; height: auto; max-height: 4.5em;}
	.news-list li a .read-btn {width: 9.92rem; height: 4.2rem;display: flex; align-items: center; padding:0 1.3rem 0 1.5rem; border: 1px solid #F2F4FA; font-size: 1.4rem; font-size: var(--font-size-P5); font-weight: 400; color: #F2F4FA;}
	.news-list li a .read-btn i {font-size: 2rem; position: relative;}
	.news-list li a .read-btn svg path{stroke:#F2F4FA;}
	.news-btn-con {margin-top: 12rem; text-align: center;}
}


/* view */
.news-view-page{position: relative;}
.news-view-page .back-to-list-btn{position: fixed; bottom: 4rem; left: 3.12%;}
.news-view-page .back-to-list-btn .cm-more-btn{margin: 0; border: 1px solid #353c49; background-color: #fff; border-radius: 1rem;}
.news-view-page .back-to-list-btn .cm-more-btn span{color: #2B2B2B;}
.news-view-page .back-to-list-btn .cm-more-btn svg{margin-left: 0; margin-right: 1.5rem; transform: scaleX(-1);}
.news-view-page .back-to-list-btn .cm-more-btn svg path{stroke: #2B2B2B;}
.news-view-page .back-to-list-btn .cm-more-btn:hover svg{animation: move-reverse 0.9s ease-in-out;}

@keyframes move-reverse {
	0% {left: 0%;}
	50% {left: -5%;}
	100% {left: 0%;}
}

.news-visual-con{position:relative; width:100%; height: 50rem;}
.news-visual-img{position:absolute; top:0px; left:0px; width:100%; height:50rem; overflow:hidden; background-color: #000;}
.news-visual-img-inner{position:absolute; top:0px; left:0px; width:100%; height:100%; background-size:cover !important; opacity: 0.4;}
.news-visual-txt{position:relative; z-index:1; text-align:center; display:table; width:100%; height:100%; box-sizing: border-box;}
.news-visual-txt-container{position:relative; width:100%; }
.news-visual-txt-container .info{font-size:1.6rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 400; color: #9C9C9C;}
.news-visual-txt-container .info em{margin: 0 0.5rem 0 0.8rem;}
.news-visual-txt-container .tit{margin-top: 1.2rem; font-size:4rem; line-height: 1.45; letter-spacing: -0.01em; font-weight: 600; color: #fff;}
.news-visual-txt-container .cm-more-btn{margin: 3rem auto 0; padding: 0 2rem; min-width: 14.2rem; height: 4.1rem;}
.news-visual-txt-container .cm-more-btn span{font-size: 1.4rem; font-weight: 400;}

.news-view-con{padding: 12rem 0; background-color: #fff;}
.news-view-con-inner{max-width: 1144px; margin: 0 auto; padding: 0 var(--area-padding); box-sizing: border-box;}
.news-view-con-inner.editor *,
.news-view-con-inner.editor{font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.01em; color: #2B2B2B;}

@media all and (max-width:1500px){
	.news-view-page .back-to-list-btn{left: var(--area-padding);}
	.news-view-page .back-to-list-btn .cm-more-btn{background-color: rgba(232, 235, 240, 0.6); backdrop-filter: blur(1rem);}
}
@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	.news-view-page .back-to-list-btn{bottom: 4rem; left: var(--area-padding);}
	.news-view-page .back-to-list-btn .cm-more-btn{margin: 0; border: 1px solid rgba(53, 60, 73, 1);}
	.news-view-page .back-to-list-btn .cm-more-btn span{color: rgba(43, 43, 43, 1);}
	.news-view-page .back-to-list-btn .cm-more-btn svg{margin-left: 0; margin-right: 1.5rem; transform: scaleX(-1);}
	.news-view-page .back-to-list-btn .cm-more-btn svg path{stroke: rgba(43, 43, 43, 1);}
	.news-view-page .back-to-list-btn .cm-more-btn:hover svg{animation: move-reverse 0.9s ease-in-out;}

	.news-visual-con{height: 100vh; height: 80rem !important;}
	.news-visual-img{height:100%;}
	.news-visual-img-inner{opacity: 0.4;}
	.news-visual-txt-container .info{font-size:1.6rem; font-size: var(--font-size-P5) ;line-height: var(--line-height-130);}
	.news-visual-txt-container .tit{margin-top: 1.2rem; font-size:var(--font-size-H2); line-height: var(--line-height-145);}
	.news-visual-txt-container .cm-more-btn{margin: 3rem auto 0; padding: 0 2rem; min-width: 14.2rem; height: 4.1rem;}
	.news-visual-txt-container .cm-more-btn span{font-size: 1.4rem; font-size: var(--font-size-P5);}

	.news-view-con{padding: 10rem 0 12rem;}
	.news-view-con-inner.editor *,
	.news-view-con-inner.editor{font-size: 1.6rem; line-height: 1.5;}
}


/* ******************  7. CONTACT ********************** */
.content-contact{position: relative;}
.contact-effect-cir01 {position: absolute; top: 0rem; left: 0; /* width: 955px; height: 872px; */ width:49.73vw; height: 45.41vw; opacity: 0.5; background: url("/images/content/contact_effect_cir01.png") center/cover no-repeat; display: block; z-index: -1;}
.contact-effect-cir02 {position: absolute; bottom: 0; right: 0; /* width: 927px; height: 893px; */ width: 48.28vw; height: 46.51vw; opacity: 0.5; background: url("/images/content/contact_effect_cir02.png") center/cover no-repeat; display: block; z-index: -1;}

.contact-page {position: relative; max-width: 1724px; margin: 0 auto; padding: 0 var(--area-padding) 15rem;}

.contact-con {position: relative; display: flex; align-items: center; z-index: 1;}
.contact-con.contact-con02 {margin-top: 16.6rem; flex-direction: row-reverse;}
.contact-con .map-con {position: relative; width: 47.1%; padding: 2rem; box-sizing: border-box;}
.contact-con .map-con .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.contact-con .map-con .bg span {position: absolute; display: inline-block; width: 2.4rem; height: 2.4rem; border: 1px solid #8E95A3; }
.contact-con .map-con .bg span.point01 {top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 1rem;}
.contact-con .map-con .bg span.point02 {top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 1rem;}
.contact-con .map-con .bg span.point03 {bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 1rem;}
.contact-con .map-con .bg span.point04 {bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 1rem;}
.contact-con .map-con .map-box {position: relative; width: 100%; height: 0; padding-top:60.10%; border-radius: 2rem; overflow: hidden; z-index: 1;}
.contact-con .map-con .map-box iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.contact-con .info-con {width: 52.9%; padding-left: 15.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.contact-con.contact-con02 .info-con {padding-left: 0; padding-right: 15.5rem;}
.contact-con .contact-tit {font-size: 4rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: #fff; margin-bottom: 6rem;}
.contact-con .info-con dl {display: flex;}
.contact-con .info-con dl + dl {margin-top: 3rem;}
.contact-con .info-con dl dt {width: 4rem;}
.contact-con .info-con dl dt img {max-width: 100%;}
.contact-con .info-con dl dd {width: calc(100% - 4rem); padding-left: 2rem; box-sizing: border-box;}
.contact-con .info-con dl dd .tit {font-size: 2.6rem; font-weight: 600; letter-spacing: -0.01em; color: #FDFDFD; line-height: 1.45; display: block; margin-bottom: 1.2rem;}
.contact-con .info-con dl dd .txt {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.01em; color: #E8EBF0; line-height: 1.45;}
.contact-con .info-con .location-group .txt + .txt{margin-top: 1.5rem;}
.contact-con .info-con dl dd .txt .middle-dot{letter-spacing: -0.25em; margin-left: -0.25em;}
.contact-con .info-con dl dd .txt span{display: inline-block; margin-right: 0.5rem;}
.contact-con .info-con dl dd .txt span.txt-tit{color: var(--main-color);}
.contact-con .info-con dl dd .txt span.txt-tit02{color: rgba(142, 149, 163, 1);}

@media all and (max-width:1280px){
	.contact-con .contact-tit.display-m {display: none;}
	.contact-con .contact-tit.display-pc {display: block;}

	.contact-con .info-con {padding-left: 8rem;}
	.contact-con.contact-con02 .info-con {padding-right: 8rem;}
	.contact-con .contact-tit {margin-bottom: 4rem;}
}
@media all and (max-width:800px){
	.contact-page {padding: 0 var(--area-padding) 10rem;}
	.contact-con {display: block;}
	.contact-con.contact-con02 {margin-top: 16.6rem;}
	.contact-con .contact-tit.display-m {display: block; text-align: center; font-size: var(--font-size-H1);}
	.contact-con .contact-tit.display-pc {display: none;}

	.contact-con .map-con {width: 100%; padding: 1rem;}
	.contact-con .map-con .bg span.point01 {top: -0.2rem; left: -0.2rem; border-top-left-radius: 1.2rem;}
	.contact-con .map-con .bg span.point02 {top: -0.2rem; right: -0.2rem; border-top-right-radius: 1.2rem;}
	.contact-con .map-con .bg span.point03 {bottom: -0.2rem; left: -0.2rem; border-bottom-left-radius: 1.2rem;}
	.contact-con .map-con .bg span.point04 {bottom: -0.2rem; right: -0.2rem; border-bottom-right-radius: 1.2rem;}

	.contact-con .info-con {width: 100%; padding-left: 0;}
	.contact-con.contact-con02 .info-con {padding-right: 0;}

	.contact-con .info-con dl  {margin-top: 5rem;}
	.contact-con .info-con dl + dl {margin-top: 4rem;}
    .contact-con .info-con dl dd .tit {font-size: var(--font-size-H5); line-height: var(--line-height-145);}
    .contact-con .info-con dl dd .txt {font-size: var(--font-size-P3); line-height: var(--line-height-145);}
}

.editor iframe.video-jwplayer{border: 0; height: 400px;}