@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%}
}


/* ****************** 01 With ********************** */
.sub-visual-with{background-color: #050404; z-index: 1;}
/* 탭 */
.with-tab-wrapper-style{position: fixed; top: 50%; transform: translateY(-50%); left: var(--wide-padding); z-index: 99;}
.with-tab-list-style ul{}
.with-tab-list-style ul li{margin-top: 3rem; display: block;}
.with-tab-list-style ul li:first-child{margin-top: 0;}
.with-tab-list-style ul li a{position: relative; padding-left: 2rem; display: inline-block;}
.with-tab-list-style ul li a:before {position: absolute; top: 0; left: 0; display: block; content: ''; width: 0; height: 0; border-bottom: 0.6rem solid transparent; border-top: 0.6rem solid transparent; border-left: 0.6rem solid #395a43; border-right: 0.6rem solid transparent; opacity: 0; transition: opacity 0.3s;}
.with-tab-list-style ul li a em{font-size:1.4rem; letter-spacing:-0.04em; color: rgba(255,255,255,0.2); transition: color 0.3s;}
.with-tab-list-style ul li.selected a:before{opacity: 1;}
.with-tab-list-style ul li.selected a em{color:#fff; font-weight: 700;}
/* fixed*/
.with-tab-list-style.top-fixed{}
/* mobile btn */
.with-drop-open-btn-style{display:none}

@media all and (max-width:1620px){
	.with-tab-wrapper-style{visibility: hidden; opacity: 0;}
}

/* con01 */
.with-con01{position: relative;}
.with-con01-box{position: relative; display: flex; justify-content: space-between; width: 100%; height: 52.6rem;}
.with-con01-left,
.with-con01-right{height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.with-con01-right{text-align: right;}
.with-con01-left h1,
.with-con01-right h1{padding-top: 4rem; font-size: 4rem; font-weight: 800; color: transparent; -webkit-text-stroke: 0.5px #fff; font-family:var(--font-family3); transition: color 0.3s; transition-delay:0.5s; opacity: 0; transition: opacity 0.5s ease-in-out;}
.with-con01-left p,
.with-con01-right p{margin-top: 2.5rem; font-size: 2rem; color: rgba(255,255,255,0.5);}
/* 라인 */
.with-con01-left .line, 
.with-con01-right .line {
	position: absolute; box-sizing: border-box;
    top: 50%; margin-top: -0.05rem; width: 0; height: 0.1rem;
    background-color: #505050; display: block;
	transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}
.with-con01-left .line {
    left: 23rem;
    transform: translateY(50%);
}
.with-con01-right .line {
    right: 23rem;
    transform: translateY(50%);
}
/* 원 */
.with-con01-left .cir, 
.with-con01-right .cir {
    position: absolute; box-sizing: border-box;
    top: 50%; margin-top: -1rem; width: 1rem; height: 1rem;
    background-color: #505050; display: block;
    border-radius: 50%; opacity: 0; transition: opacity 0.5s ease-in-out;
}
.with-con01-left .cir {
    left: 31rem;
    transform: translateY(50%);
}
.with-con01-right .cir {
    right: 31rem;
    transform: translateY(50%);
}

/* 가운데 영역 */
.with-con01-center{width: 53rem; height: 52.6rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 1s ease-in-out;}
.with-con01-center h1{font-size: 5rem; letter-spacing: -0.04em; font-weight: 700; color: #fff; position: relative;}

.with-con01-center .wave{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; display: block; background: url('/images/content/with_con01_wave_bg.png') center/cover no-repeat; animation: spin 40s infinite linear;}
.with-con01-center .earth{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 24.1rem; height: 24.1rem; display: block; background: url('/images/content/with_con01_earth_img.png') center/cover no-repeat;}

@keyframes spin {
	to { -webkit-transform: rotate(360deg); }
}

/* active */
.with-con01-box.animated{}
.with-con01-box.animated .with-con01-left h1,
.with-con01-box.animated .with-con01-right h1{opacity: 1; transition-delay: 0.7s;}
.with-con01-box.animated .with-con01-left .line, 
.with-con01-box.animated .with-con01-right .line {width: 6rem; transition-delay: 1s;}
.with-con01-box.animated .with-con01-left .cir, 
.with-con01-box.animated .with-con01-right .cir {opacity: 1; transition-delay: 1.2s;}
.with-con01-box.animated .with-con01-center{opacity: 1; transition-delay: 1.6s;}

/* 하단 영역 */
.with-con01-bottom{margin-top: 15.5rem; position: relative; padding-bottom: 15rem; z-index: -1;}
.with-con01-bottom:before{position: absolute; bottom: 0; left: 50%; margin-left: -75rem; content: ''; width: 150rem; height: 103rem; border-radius: 0; box-shadow: 0 5rem 15rem -2.5rem rgba(51,51,51,0.6); z-index: -1; transition: border-radius 0.6s;}
.with-con01-bottom:after{position:absolute; top: -83rem; left: 0; width: 100%; height: 103rem; content: ''; z-index: -1; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#050404+0,050404+100&1+0,1+79,0+100 */
background: -moz-linear-gradient(top,  rgba(5,4,4,1) 0%, rgba(5,4,4,1) 80%, rgba(5,4,4,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(5,4,4,1) 0%,rgba(5,4,4,1) 80%,rgba(5,4,4,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(5,4,4,1) 0%,rgba(5,4,4,1) 80%,rgba(5,4,4,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#050404', endColorstr='#00050404',GradientType=0 ); /* IE6-9 */}
.with-con01-bottom p{position: relative; font-size: 4rem; line-height: 1.5; letter-spacing: -0.04em; font-weight: 300; color: #fff; text-align: center;}
.with-con01-bottom p:before {position: absolute; top: -5rem; left: 50%; margin-left: -1.5rem; display: block; content: ''; width: 0; height: 0; border-bottom: 1.5rem solid transparent; border-top: 1.5rem solid #333; border-left: 1.5rem solid transparent; border-right: 1.5rem solid transparent;}
.with-con01-bottom p b{font-weight: 700;}
/* active */
.with-con01-bottom.animated:before{border-radius: 50%;}


/* 공통 */
.cm-with-tit{text-align: center;}
.cm-with-tit h5{position: relative; font-size: 5rem; line-height: 1.1; letter-spacing: -0.04em; color: #fff; font-weight: 700;}
.cm-with-tit h5:before{position: absolute; top: -5rem; left: 50%; margin-left: -1.5rem; display: block; content: ''; width: 0; height: 0; border-bottom: 1.5rem solid transparent; border-top: 1.5rem solid var(--main-color); border-left: 1.5rem solid transparent; border-right: 1.5rem solid transparent;}
.cm-with-tit p{margin-top: 6rem; font-size: 2.4rem; line-height: 1.66; letter-spacing: -0.04em; font-weight: 300; color: rgba(255,255,255,0.6);}
.cm-with-tit p b{color: #fff; font-weight: 500;}


/* con02 */
.with-con02{padding-top: 20rem;}
.with-con02 .cm-with-tit h5{font-size: 6rem;}
.with-con02-box{margin-top: 12rem; position: relative; width: 100%; height: 0; padding-top: 44.375%; background: url("../images/content/with_con02_bg.png") center/cover no-repeat;}
.with-con02-box:after{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;transition: height 2s; content: ''; background: -moz-linear-gradient(top,  rgba(17,17,17,0) 0%, rgba(17,17,17,0.64) 48%, rgba(17,17,17,1) 100%); background: -webkit-linear-gradient(top,  rgba(17,17,17,0) 0%,rgba(17,17,17,0.64) 48%,rgba(17,17,17,1) 100%); background: linear-gradient(to bottom,  rgba(17,17,17,0) 0%,rgba(17,17,17,0.64) 48%,rgba(17,17,17,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00050404', endColorstr='#050404',GradientType=0 );}
.with-con02-box .pin{position: absolute; top: -3.3rem; left: 50%; margin-left: -0.6rem; width: 1.1rem; height: 3.4rem; background: url("../images/content/start_pin_img.png") center/cover no-repeat; display: block;}
.with-con02-box .img{position: absolute; bottom: 48.41%; left: 50%; margin-left: -33.85%; width: 21.56%;}
.with-con02-box .img .man{position: relative; width: 100%; height: 0; padding-top: 78.5%; display: block; background: url("../images/content/with_con02_man.png") center/cover no-repeat;}
.with-con02-box .img .shadow{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../images/content/with_con02_shadow.png") center/cover no-repeat;}
.with-con02-txt{position: absolute; left: 0; bottom: 31%; width: 100%; text-align: center; color: #fff;}
.with-con02-txt i{font-size: 6rem;}
.with-con02-txt p{margin-top: 4.5rem; font-size: 5rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 300; color: #fff;}
.with-con02-txt p b{font-weight: 700;}

.with-con02-box.animated:after{height: 0;}


/* con03 */
.with-con03{position: relative; padding: 13rem 0; background-color: #111;}
.with-con03:before{position: absolute; top: -35rem; left: 0; content: ''; width: 100%; height: 35rem; background-color: #111; z-index: -1;}
.with-con03-img-box{margin: 7rem auto 0; width: 52.7rem;}
.with-con03-img-inner{position: relative; width: 100%; height: 0; padding-top: 33.4rem;}
.with-con03-img-box .cir{position: absolute; top: 0; left: 0; width: 100%;}
.with-con03-img-box .man{position: absolute; bottom: 0; left: 0; width: 13.85%;}
.with-con03-img-box .cir img, .with-con03-img-box .man img{max-width: 100%; image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */}
.with-con03-img-box .cir img{animation: upDown 2.5s ease-in-out infinite;}

@keyframes upDown {
	0% {
		transform:  translateY(-5px);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform:  translateY(-5px);
	}
}

.with-con03-txt01{margin-top: 8.5rem; font-size: 3.6rem; line-height: 1.66; letter-spacing: -0.04em; font-weight: 300; color: #fff; text-align: center;}
.with-con03-txt01 b{font-weight: 700;}
.with-con03-line{margin: 5rem auto 6rem; position: relative; width: 100%; height: 5rem; display: block;}
.with-con03-line:before{position: absolute; top: 0; left: 50%; content: ''; width: 1px; height: 0; background-color: rgba(255,255,255,0.2); display: block; transition: height 0.2s;}
.with-con03-txt02{font-size: 5rem; font-weight: 700; letter-spacing: -0.04em; color: #fff; text-align: center;}
/* active */
.with-con03-line.animated:before{height: 5rem;}

.with-con03-wrapper{margin-top: 5rem; padding: 0 2rem;}
.with-con03-item-list{}
.with-con03-item-inner{padding: 0 8%; display: flex; flex-wrap:wrap; align-items: center; height: 15rem; border-radius: 15rem; box-sizing: border-box; transition:var(--transition-custom); transition-property:background-color;}
.with-con03-item-inner .num{width: 11rem; font-size: 2.4rem; line-height: 1.3; font-weight: 700; color: rgba(255,255,255,0.3); font-style: italic; display: block; transition:var(--transition-custom); transition-property: color;}
.with-con03-item-inner .img{width: 10rem; display: block;}
.with-con03-item-inner .img em{position: relative; width: 100%; height: 0; padding-top: 100%; background-color: rgba(51,51,51,0.5); border-radius: 100%; display: block; transition:var(--transition-custom); transition-property:background-color;}
.with-con03-item-inner .img em img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.with-con03-item-inner .txt{margin-left: 8rem; width: calc(100% - 29rem); display: flex; flex-wrap:wrap; align-items: center;}
.with-con03-item-inner .txt h5{padding-right: 2rem; width: 15rem; font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 500; color: #fff; box-sizing: border-box; transition:var(--transition-custom); transition-property: font-weight;}
.with-con03-item-inner .txt p{width: calc(100% - 15rem); font-size: 1.8rem; line-height: 1.5; letter-spacing: -0.04em; color: rgba(255,255,255,0.3); transition:var(--transition-custom); transition-property: color;}
.with-con03-item-inner .txt p i{display: inline-block; margin: 0 2.2rem;}

.with-con03-wrapper .slick-arrow{position: absolute; top: 50%; margin-top: -2.5rem; width: 5rem; height: 5rem;}
.with-con03-wrapper .slick-arrow i{font-size: 4.6rem; color: rgba(255,255,255,0.2); transition:var(--transition-custom); transition-property: color;}
.with-con03-wrapper .slick-prev{left: -12rem;}
.with-con03-wrapper .slick-next{right: -12rem;}

@media all and ( min-width: 801px ){
	.with-con03-item-inner:hover{background-color: var(--main-color);}
	.with-con03-item-inner:hover .txt p {color: rgba(255,255,255,0.8); }
	.with-con03-item-inner:hover .num{color: #fff;}
	.with-con03-item-inner:hover .img em{background-color: var(--main-color);}
	.with-con03-item-inner:hover h5{font-weight: 700;}
	.with-con03-item-inner:hover p{color: rgba(255,255,255,0.3);}
	.with-con03-wrapper .slick-arrow:hover i{color: #fff;}
}


/* con04 */
.with-con04{padding-top: 19rem;}

.with-con04-img-box{margin-top: 7rem; position: relative;}
.with-con04-img-box .wavelength{position:absolute; left:50%; top: 14rem; margin-left: -13rem; display:block; width:26rem; height:26rem; background-color: rgba(59,91,69,0.3); background-color: #151f18; border-radius: 100%;}
.with-con04-img-box .wavelength:before{position: absolute; top: 50%; margin-top: -0.75rem; left: -31rem; width: 14.5rem; height: 1.5rem; content: ''; background: url('/images/content/with_con04_l_bg.png') center/cover no-repeat;}
.with-con04-img-box .wavelength:after{position: absolute; top: 50%; margin-top: -0.75rem; right: -31rem; width: 14.5rem; height: 1.5rem; content: ''; background: url('/images/content/with_con04_r_bg.png') center/cover no-repeat;}
.with-con04-img-box .wavelength > span {border: 0.2rem solid rgba(59,91,69, 0.5); border-radius: 50%; animation-fill-mode: both; position: absolute; z-index: -1; left: 0; top: 0; opacity: 0; margin: 0; width: 100%; height: 100%; animation: bell-wavelength 4s cubic-bezier(1, 2, 0.66, 3) infinite; }
.with-con04-img-box .wavelength > span:nth-child(2) {animation-delay: 1s;}
.with-con04-img-box .wavelength > span:nth-child(3) {animation-delay: 1.5s;}
.with-con04-img-box .wavelength > span:nth-child(4) {animation-delay:2s;}
.with-con04-img-box .wavelength > span:nth-child(5) {animation-delay:2.5s;}
.with-con04-img-box .wavelength > span:nth-child(6) {animation-delay:4s;}
.with-con04-img-box .bell{text-align: center; display: block;}
.with-con04-img-box .bell img{width: 20.3rem; display: inline-block; position: relative;}

@keyframes bell-wavelength {
 0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0; 
	}
}

.with-con04-txt01{margin-top: 13rem; font-size: 3.6rem; line-height: 1.66; letter-spacing: -0.04em; font-weight: 300; color: #fff; text-align: center;}
.with-con04-txt01 b{font-weight: 700;}
.with-con04-line{margin: 5rem auto 6rem; position: relative; width: 100%; height: 5rem; display: block;}
.with-con04-line:before{position: absolute; top: 0; left: 50%; content: ''; width: 1px; height: 0; background-color: rgba(255,255,255,0.2); display: block; transition: height 0.2s;}
.with-con04-txt02{font-size: 3rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 700; color: var(--main-color); text-align: center;}
/* active */
.with-con04-line.animated:before{height: 5rem;}
.with-con04-logo{margin-top: 5rem; position: relative; top: 1rem; text-align: center; transform: translateY(100%); transition: transform 0.6s !important;}
.with-con04-logo img{max-width: 100%; height: auto; display: inline-block;}
.with-con04-logo.animated{transform: translateY(0);}


/* con05 */
.with-con05{padding: 19rem 0 20rem; background-color: #151515;}
.with-con05 .cm-with-tit{position: relative; z-index: 1;}

.with-con05-img-box{margin: 8rem auto 0; max-width: 50.2rem;}
.with-con05-img-inner{position: relative; width: 100%; height: 0; padding-top: 21.7rem;}
.with-con05-img-inner .moon{position: absolute; top: 0; left: 0; width: 100%; display: block; animation: upDown 2.5s ease-in-out infinite;}
.with-con05-img-inner .moon:after{position: absolute; top: -50%; left: -25%; width: 150%; height: 200%; transition: all 1s; content: ''; background-color: #151515; transform: rotate(45deg);}
.with-con05-img-inner .moon img{transform: scale(0); transform-origin:right; transition: all 0.6s;}
.with-con05-img-inner .girl{position: absolute; bottom: 0; left: 50%; margin-left: 8.3rem; width: 4.1rem; display: block;}
.with-con05-img-inner .girl img, .with-con05-img-inner .moon img{max-width: 100%;}
/* active */
.with-con05-img-inner .moon.animated:after{width: 0; transform: rotate(-45deg);}
.with-con05-img-inner .moon.animated img{transform: scale(1);}

.with-con05-txt01{margin-top: 9rem; font-size: 3.6rem; line-height: 1.66; letter-spacing: -0.04em; font-weight: 300; color: #fff; text-align: center; position: relative;}
.with-con05-txt01 b{font-weight: 700;}
.with-con05-line{margin: 5rem auto 6rem; position: relative; width: 100%; height: 5rem; display: block;}
.with-con05-line:before{position: absolute; top: 0; left: 50%; content: ''; width: 1px; height: 0; background-color: rgba(255,255,255,0.2); display: block; transition: height 0.2s;}
.with-con05-txt02{font-size: 2rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 300; color: rgba(255,255,255,0.5); text-align: center;}
.with-con05-txt02 b{margin-top: 2rem; font-size: 2.4rem; font-weight: 700; color: #fff; display: block;}
/* active */
.with-con05-line.animated:before{height: 5rem;}

/* 탭 */
.with-con05-crew-con{margin-top: 7.5rem;}
.crew-tab-wrapper-style{position:relative; height:70px; margin-bottom:15px;}
.crew-tab-list-style{}
.crew-tab-list-style ul{width:100%; height:100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: center; background-color: #000; border-radius: 70px;}
.crew-tab-list-style ul:after{display:none}
.crew-tab-list-style ul li{margin-right: 7.6rem; position:relative;}
.crew-tab-list-style ul li:last-child{margin-right: 0;}
.crew-tab-list-style ul li a{display:table; height:70px; width:100%;}
.crew-tab-list-style ul li a em{display:table-cell; vertical-align:middle; font-size:1.6rem; letter-spacing:-0.04em; color: rgba(255,255,255,0.4);}
.crew-tab-list-style ul li.selected{z-index:1;}
.crew-tab-list-style ul li.selected a em{color:#fff; font-weight: 600;}
/* Fixed */
.crew-tab-list-style.top-fixed{position:fixed; top: 15px; left:0; width:100%; height:70px; z-index: 99;}
/* Mobile */
.crew-drop-open-btn-style{display:none}

.crew-tab-con{padding: 7rem 0 3.5rem; display: flex; flex-wrap:wrap; align-items: center; border-bottom: 0.1rem solid rgba(255,255,255,0.1);}
.crew-tab-tit{width: 27rem; font-size: 2.4rem; line-height: 1.5; letter-spacing: -0.04em; color: #fff; font-weight: 700; padding-right: 2rem; box-sizing: border-box;}
.crew-tab-wrapper{width: calc(100% - 27rem);}
.crew-tab-list{display: flex; flex-wrap:wrap;}
.crew-tab-item{margin-bottom: 5rem; /* margin-right: 3rem; */ margin-right: 2.5rem; display: flex; flex-wrap:wrap; align-items: center;}
.crew-tab-list .crew-tab-item:last-child{margin-right: 0;}
.crew-tab-list .crew-tab-item:nth-child(4n+0){margin-right: 0;}
.crew-tab-img{width: 10rem;}
.crew-tab-img span{position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 100%; display: block;}
.crew-tab-list .crew-tab-item.leader .crew-tab-img span:after{position: absolute; top: -0.1rem; left: -0.1rem; right: -0.1rem; bottom:  -0.1rem; content: ''; /* width: 100%; height: 100%; */ border: 0.4rem solid var(--main-color); border-radius: 100%; box-sizing: border-box; z-index: 1;}
.crew-tab-img span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; overflow: hidden;}
.crew-tab-txt{/* padding-left: 3rem; width: 13rem; */ padding-left: 2.5rem; width: 13.8rem; box-sizing: border-box;}
.crew-tab-txt h5{font-size: 2rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.04em; color: #fff;}
.crew-tab-txt p{margin-top: 1.2rem; font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.04em; font-weight: 300; color: rgba(255,255,255,0.3);}
.crew-tab-txt p span{/* padding-right: 1rem; position: relative; display: inline-block; */word-break: break-word;}
/* .crew-tab-txt p span:before{position: absolute; bottom: 0.2rem; right: 0.3rem; display: inline-block; content: '·';} */
.crew-tab-txt p span:after{padding: 0 0.2rem 0 0.5rem; display: inline-block; content: '·';}
/* .crew-tab-txt p span:last-child{padding-right: 0;} */
.crew-tab-txt p span:last-child:after,
.crew-tab-txt p span:last-child:before{display: none;}

@media all and ( min-width: 1920px ) {
	.with-con05{padding-bottom: 30rem;}
}


/* ****************** 02 Works ********************** */
/* 탭 */
.sub-work-tab{}
.sub-work-tab-list{display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.sub-work-tab-list li{position: relative; margin: 1.5rem 3.7rem;}
.sub-work-tab-list li:before{position: absolute; top: 50%; margin-top: -0.25rem; right: -3.95rem; content: ''; width: 0.5rem; height: 0.5rem; background-color: rgba(255,255,255,0.5); border-radius: 100%;}
.sub-work-tab-list li:last-child:before{display: none;}
.sub-work-tab-list li a{font-size: 2rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 600; color: #fff; opacity: 0.5; transition:var(--transition-custom); transition-property:opacity; position: relative;}
.sub-work-tab-list li a:before{position: absolute; left: 0; bottom: -1.5rem; width: 100%; height: 0.2rem; content: ''; background-color: transparent;}
.sub-work-tab-list li a:hover{opacity: 1;}
.sub-work-tab-list li.selected a{font-weight: 600; opacity: 1;}
.sub-work-tab-list li.selected a:before{background-color: #fff;}
/* 리스트 */
.sub-works-wrapper{margin-top: 8.5rem; padding: 0 5rem 6rem;}
.sub-works-list{display: flex; flex-wrap:wrap; margin: 0 -0.87%;}
.sub-works-item{width: 31.59%; margin: 0 0.87% 4.5rem; opacity: 0; transform: translateY(10rem);}
.sub-works-item a{display: block;}
.sub-works-img{width: 100%; height: 0; padding-top: 60%; position: relative; background-color: #000;}
.sub-works-img span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; transition:all 0.5s;}
.sub-works-img .inner-logo{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0;  transition:opacity 0.5s;}
.sub-works-img .inner-logo img{max-width: 90%; max-height: 90%;}
.sub-works-txt{padding: 2.5rem	2rem 0; opacity: 0; transform: translateY(5rem);}
.sub-works-txt .tit{font-size: 2rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #fff; /* white-space:nowrap; overflow:hidden; text-overflow:ellipsis; */}
.sub-works-txt .category{margin-top: 2.5rem; display: flex; flex-wrap:wrap;}
.sub-works-txt .category span{margin-bottom: 1rem; margin-right: 2rem; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.025em; color: rgba(255,255,255,0.3); position: relative;}
.sub-works-txt .category span:before{position: absolute; top: 0; right: -1rem; display: inline-block; content: '·';}
.sub-works-txt .category span:last-child:before{display: none;}

/* active */
.sub-works-item.animated,
.sub-works-item.animated .sub-works-txt{transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; opacity: 1; transform: translateY(0);}
.sub-works-item.start,
.sub-works-item.start .sub-works-txt{ transition: opacity 2s ease-in-out, transform 2s ease-in-out; opacity: 1; transform: translateY(0);}

@media all and (hover:hover){
	.sub-works-item a:hover .sub-works-img span{opacity: 0.5;/* filter: blur(3px); */}
	.sub-works-item a:hover .sub-works-img .inner-logo{opacity: 1;}
}

/* 뷰페이지 */
.works-view-page{}
.works-visual-con{position: relative; width: 100%; height: 0; padding-top: 51.04%;}
.works-visual-con span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}

.works-view-con{padding: 10rem 0 11.5rem;}
.works-view-top{position: relative; z-index: 99;}
.works-view-top-left{width: 46.92%; width: 100%;}
.works-view-top-left .tit{font-size: 3.4rem; line-height: 1.3; letter-spacing: -0.05em; color: #fff; font-weight: 500;}
.works-view-top-left .info{margin-top: 2.5rem; display: flex; flex-wrap:wrap;}
.works-view-top-left .info span{margin-bottom: 1rem; margin-right: 2rem; font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.05em; color: rgba(255,255,255,0.3); font-weight: 300; position: relative;}
.works-view-top-left .info span:before{position: absolute; top: 0; right: -1rem; display: inline-block; content: '·';}
.works-view-top-left .info span:last-child{margin-right: 0;}
.works-view-top-left .info span:last-child:before{display: none;}

.works-view-bottom{padding-top: 6rem; padding-top: 4rem; display: flex; flex-wrap:wrap; flex-direction: row-reverse; justify-content: space-between;}
.works-view-bottom-left{width: calc(100% - 35rem);}
.works-view-bottom-right{width: 46.92%; width: 30rem;}
.works-view-bottom-right dl{display: flex; flex-wrap:wrap;}
.works-view-bottom-right dl + dl{margin-top: 3.5rem;}
.works-view-bottom-right dt, 
.works-view-bottom-right dd{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em;}
.works-view-bottom-right dt{width: 11.5rem; font-weight: 500; color: rgba(255,255,255,0.8);}
.works-view-bottom-right dd{width: calc(100% - 11.5rem); color: rgba(255,255,255,0.5);}
.works-worker-list{display: inline-block;}
.works-worker-list li{margin-left: -0.6rem; position: relative; float: left;}
.works-worker-list li:first-child{margin-left: 0;}
.works-worker-list li .img{display: block; width: 4.5rem; height: 4.5rem; border: 0.2rem solid #050404; border-radius: 100%;}
.works-worker-list li .img img{height: 100%;}
.works-worker-list li .tooltip-info{position: absolute; top: 5.4rem; left: 50%; width: 16rem; margin-left: -8rem; padding-top: 1.2rem; z-index: 10; visibility: hidden; opacity: 0; transition:var(--transition-custom);}
.works-worker-list li .tooltip-info.open{visibility: visible; opacity: 1;}
.tooltip-info-inner{padding: 2rem 1rem 1rem; background-color: var(--main-color); border-radius: 1rem; text-align: center;}
.tooltip-info-inner:before{position: absolute; top: -0.5rem; left: 47.5%; margin-left: -0.5rem; display: block; content: ''; width: 0; height: 0; border-bottom: 1rem solid var(--main-color); border-top: 1rem solid transparent; border-left: 1rem solid transparent; border-right: 1rem solid transparent;}
.tooltip-info-inner .name{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 500; color: #fff;}
.tooltip-info-inner .info{margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center;}
.tooltip-info-inner .info span{margin-bottom: 1rem; margin-right: 1rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 300; color: rgba(255,255,255,0.5); position: relative;}
.tooltip-info-inner .info span:before{position: absolute; top: 0; right: -0.5rem; display: inline-block; content: '·';}
.tooltip-info-inner .info span:last-child{margin-right: 0;}
.tooltip-info-inner .info span:last-child:before{display: none;}

/* 230523 추가 */
.view-page-new-css{background-color: #fff;}
.view-page-new-css .editor{color: #000;}
.works-view-middle{margin-top: 4rem; display: flex; flex-wrap:wrap; flex-direction: row-reverse; justify-content: space-between;}
.works-view-middle-left{width: calc(100% - 45rem);}
.works-view-middle-right{width: 35rem;}
.works-view-middle-right dl{display: flex; flex-wrap:wrap;}
.works-view-middle-right dl + dl{margin-top: 3.5rem;}
.works-view-middle-right dt, 
.works-view-middle-right dd{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em;}
.works-view-middle-right dt{width: 11.5rem; font-weight: 500; color: rgba(0,0,0,0.8);}
.works-view-middle-right dd{width: calc(100% - 11.5rem); color: rgba(0,0,0,0.5);}
.works-view-bottom.new-css{padding-top: 6rem;}
.works-view-bottom .editor{width: 100%;}
.view-page-new-css .magazine-more-con{background-color: #f6f6f6;}
.view-page-new-css .works-view-top-left .tit{color: #000;}
.view-page-new-css .works-view-top-left .info span{color: #888;}
.view-page-new-css .works-view-bottom-right dt{color: rgba(0,0,0,0.8);}
.view-page-new-css .works-view-bottom-right dd{color: rgba(0,0,0,0.5);}
.view-page-new-css .works-worker-list li .img{border-color: #fff;}

/* 뷰페이지 */
.view-page-new-css .magazine-view-top .tit{color: #000;}
.view-page-new-css .magazine-view-top .info span{color: #888;}
.view-page-new-css .magazine-view-top .info span:before{background-color: #888;}

/* 더보기 */
.view-page-new-css .magazine-more-tit h5{color: #000;}
.view-page-new-css .magazine-more-tit a{color: #888;}
.view-page-new-css .magazine-more-item a:after{color: #000;}
.view-page-new-css .magazine-more-txt .tit{color: #000;}
.view-page-new-css .magazine-more-txt .info{color: rgba(0,0,0,0.3);}
.view-page-new-css .magazine-more-btn i{color: #ccc;}

@media all and (hover:hover){
	.view-page-new-css .magazine-more-tit a:hover,
	.view-page-new-css .magazine-more-btn:hover i{color: #000;}
}
/* // */


/* ****************** 03 Magazine ********************** */
/* 리스트 */
.grid-wrapper-con{margin:0 -1.8rem;}
.grid-wrapper-con * { box-sizing: border-box; }
.grid-sizer,
.grid-item {
	/* width: calc(33.3% - 3.6rem); */
	margin:0 1.8rem 3.5rem;
}
.grid-item{float:left;}
.sub-magazine-item{opacity: 0; transform: translateY(10rem);}
/* .sub-magazine-list .grid-item.big-item{width: calc(66.66% - 3.6rem);} */

.grid-item-inner{display: block; position: relative; width: 100%; height: 0; padding-top: 58.53%; overflow: hidden;}
.grid-item.big-item .grid-item-inner{padding-top: 60.21%;}
.grid-item .grid-item-inner{}
.grid-item-inner:before{position: absolute; content:''; top:0; left:0; width:100%; height:100%; background:#000; opacity:0; z-index:1; transition:opacity 0.5s; /* backdrop-filter: blur(10px); */}
.sub-magazine-img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition:filter 0.5s;}
.sub-magazine-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition:transform 0.5s;}
.sub-magazine-txt{position: absolute; bottom: 3rem; left:50%; transform:translate(-50%, 0); opacity:0; width:100%; padding:0 3.5rem; box-sizing:border-box; z-index:2;}
.sub-magazine-txt .category{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 500; color: #fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sub-magazine-txt .tit{margin-top: 1.5rem; font-size: 2.2rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.05em; color: #fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sub-magazine-txt .date{margin-top: 3rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.025em; color: rgba(255,255,255,0.5); display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* active */
.sub-magazine-item.animated{transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; opacity: 1; transform: translateY(0);}


.sub-magazine-list{display: grid; width:100%; grid-template-columns: repeat(3, 33.33%);}
.sub-magazine-list .grid-item.big-item{grid-column: span 2; grid-row: span 2;}

/* 더보기 */
.cm-list-more-btn-box{position:relative; margin-top:5rem; text-align:center;}
.cm-list-more-btn-box:before{position:absolute; top:50%; left:0; width:100%; height:0.1rem; background-color: #222; content:"";}
.cm-list-more-btn{overflow:hidden; display: inline-block; position:relative; background-color:#050404; border-radius:50%;}
.cm-list-more-btn-icon{position:absolute; overflow:hidden; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:0.3rem; font-size:2.4rem; color:var(--main-color); transition:color 0.5s}
.cm-list-more-btn-inner {position: relative; width: 10rem; height: 10rem; visibility: inherit; display: flex; justify-content: center; align-items: center; text-align: center;}
.cm-list-more-btn-line {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.cm-list-more-btn-line svg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke: #222; stroke-width: 0.1rem; fill: none; backface-visibility: hidden;}
.cm-list-more-btn-line svg:last-child {stroke-dasharray: 31rem 31rem; stroke-dashoffset: 31rem; visibility: hidden; transition: visibility 0s 1.7s; animation: more-btn-line-out 1.7s cubic-bezier(0.215, 0.61, 0.355, 1); stroke: var(--main-color);}

@keyframes ani_icon{
	0%{transform:translateY(-100%);}
	100%{transform:translateY(0);}
}
@keyframes more-btn-line-over{
	0%{transform:rotate(-90deg)}
	to{transform:rotate(90deg); stroke-dashoffset:0;}
}
@keyframes more-btn-line-out{
	0%{transform:rotate(90deg); stroke-dashoffset:0;}
	to{transform:rotate(450deg); stroke-dashoffset:-31rem}
}
@keyframes text-up {
  from {transform: translate3d(0, 50%, 0);}
  to { transform: translate3d(0, 0, 0);}
}

@media all and (hover:hover){
	.grid-item .grid-item-inner:hover:before{opacity:0.7;}
	/* .grid-item .grid-item-inner:hover .sub-magazine-img{filter: blur(3px);} */

	.grid-item .grid-item-inner:hover .sub-magazine-txt{opacity:1; transition-duration:1s;}
	.grid-item .grid-item-inner:hover .sub-magazine-txt-inner{animation: text-up 1s cubic-bezier(0.4, 0, 0.2, 1) both 0s;}

	.cm-list-more-btn:hover .cm-list-more-btn-icon{color:var(--main-color);}
	.cm-list-more-btn:hover .cm-list-more-btn-icon i{animation: ani_icon 1s cubic-bezier(0.215, 0.61, 0.355, 1);}
	.cm-list-more-btn:hover .cm-list-more-btn-inner .cm-list-more-btn-line svg:last-child {visibility: inherit; transition: none; animation: more-btn-line-over 1.7s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;}
}

/* 뷰페이지 */
.magazine-view-page{padding-top: 6rem;}
.magazine-view-top{position: relative; padding-bottom: 5rem;}
.magazine-view-top:before {margin: 0 auto 2.5rem; display: block; content: ''; width: 0; height: 0; border-bottom: 1.5rem solid transparent; border-top: 1.5rem solid var(--main-color); border-left: 1.5rem solid transparent; border-right: 1.5rem solid transparent;}
.magazine-view-top .tit{font-size: 4.6rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; color: #fff; text-align: center;}
.magazine-view-top .info{margin-top: 3.5rem; display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.magazine-view-top .info span{margin-right: 5.5rem; font-size: 1.6rem; line-height: 1.3; font-weight: 300; letter-spacing: -0.05em; color: rgba(255,255,255,0.3); position: relative;}
.magazine-view-top .info span:last-child{margin-right: 0;}
.magazine-view-top .info span:before{position: absolute; top: 0.8rem; right: -3rem; content: ''; width: 0.5rem; height: 0.5rem; background-color: rgba(255,255,255,0.3); border-radius: 100%;}
.magazine-view-top .info span:last-child:before{display: none;}

.magazine-view-bottom{padding: 5rem 0 13.5rem;}
.magazine-view-bottom .editor{font-size: 1.6rem;}

/* 더보기 */
.magazine-more-con{padding: 8rem 0 11rem; background-color: #111;}
.magazine-more-tit{position: relative; padding-right: 14rem;}
.magazine-more-tit h5{font-size: 4rem; line-height: 1.3; letter-spacing: -0.025em; color: #fff; font-weight: 600;}
.magazine-more-tit a{position: absolute; top: 2rem; right: 0; display: inline-block; font-size: 1.6rem; color: rgba(255,255,255,0.3); transition:var(--transition-custom);}
.magazine-more-tit a i{position: relative; top: -0.1rem; margin-left: 1rem; font-size: 2rem; display: inline-block; vertical-align: middle;}
.magazine-more-box{margin-top: 3rem;}
.magazine-more-box .area-sub{position: relative;}
.magazine-more-wrapper{}
.magazine-more-list{}
.magazine-more-item{width: 25%;}
.magazine-more-item a{}
.magazine-more-item a:after{position: absolute; top: 50%; left: 50%; margin-top: -5.6rem; margin-left: -1.6rem; font-size: 3.2rem; color: #fff; content: "\e9c5"; font-family: xeicon; opacity: 0; transition:opacity 0.5s;}
.magazine-more-img{position: relative; width: 100%; height: 0; padding-top: 60%; background-color: #000; transition:filter 0.5s;}
.magazine-more-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition:opacity 0.5s;}
.magazine-more-txt{padding: 2.5rem 1rem 0;}
.magazine-more-txt .tit{font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.05em; color: #fff; font-weight: 500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.magazine-more-txt .info{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; color: rgba(255,255,255,0.3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.magazine-more-txt .info span:after{margin: 0 0.7rem; content: '•'; display: inline-block;}
.magazine-more-txt .info span:last-child:after{display: none;}
.magazine-more-btn{position: absolute; top: 35%; margin-top: -2rem; width: 4rem; height: 4rem;}
.magazine-more-btn i{font-size: 3.2rem; color: rgba(255,255,255,0.24); transition:var(--transition-custom);}
.magazine-more-prev{left: -8.5rem;}
.magazine-more-next{right: -8.5rem;}

@media all and (hover:hover){
	.magazine-more-item a:hover:after{opacity: 1;}
	/* .magazine-more-item a:hover .magazine-more-img{filter: blur(3px);} */
	.magazine-more-item a:hover .magazine-more-img img{opacity: 0.7;}
	.magazine-more-tit a:hover,
	.magazine-more-btn:hover i{color: #fff;}
}


/* ****************** 04 Contact ********************** */
.contact-con01{padding-bottom: 15rem;}
.contact-con01-tit{position: relative; font-size: 5rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; text-align: center;}
.contact-con01-tit:before {margin: 0 auto 2.5rem; display: block; content: ''; width: 0; height: 0; border-bottom: 1.5rem solid transparent; border-top: 1.5rem solid var(--main-color); border-left: 1.5rem solid transparent; border-right: 1.5rem solid transparent;}
.contact-con01-txt{padding-top: 6rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; color: #666; text-align: right;}
.contact-con01-txt em{color: #ff0000;}
.contact-con01 .online-form-info{margin: 2rem -7% 0; position: relative;}
.contact-con01 .online-form-info:before{position: absolute; top: 0; bottom: 0; left: 50%; margin-left: 0.5rem; content: ''; width: 0.1rem; background-color: rgba(255,255,255,0.1);}
.contact-con01 .online-form-list{width: 37.7%; margin: 0 6.15%;}
.contact-con01 .online-form-item .tit em{margin-left: 0.3rem; color: #ff0000;}

.contact-con02{position: relative; background-color: var(--main-color);}
.contact-con02 .area-sub{width: 100%; display: flex; flex-wrap:wrap; box-sizing: border-box;}
.contact-con02-map{position: absolute; top: 0; left: 50%; width: 50%; height: 100%;}
.contact-con02-map .map-script-wrapper{position: relative; width: 100%; height: 100%; overflow: hidden;}
.contact-con02-map .map-script-con{position:absolute; top:50%; left:50%; width:1200px; height:500px; margin:-250px 0 0 -600px;}
.contact-con02-txt{padding: 3rem 10rem 3rem 0; width: 50%; min-height: 46rem; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;}
.contact-con02-txt-top{padding-bottom: 3rem; border-bottom: 0.1rem solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: space-between;}
.contact-con02-txt-top img{height: 3.1rem;}
.contact-con02-txt-top .btn-list{display: flex;}
.contact-con02-txt-top .btn-list li{}
.contact-con02-txt-top .btn-list li + li{margin-left: 1rem;}
.contact-con02-txt-top .btn-list li a{width: 5rem; height: 5rem; display: block; border-radius: 100%; background-size: 30% !important;}
.contact-con02-txt-top .btn-list li .google-map-btn{background: #fff url("../images/content/icon_google_map.png") center no-repeat;}
.contact-con02-txt-top .btn-list li .kakao-map-btn{background: #f6e10a url("../images/content/icon_kakao_map.png") center no-repeat;}
.contact-con02-txt-bottom{padding-top: 4rem;}
.contact-con02-txt-bottom dl{display: flex;}
.contact-con02-txt-bottom dl + dl{margin-top: 2.5rem;}
.contact-con02-txt-bottom dt, .contact-con02-txt-bottom dd{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.05em; color: rgba(255,255,255,0.5);}
.contact-con02-txt-bottom dt{width: 9.5rem; font-weight: 600; color: rgba(255,255,255,0.8); letter-spacing: -0.025em;}
.contact-con02-txt-bottom dd{width: calc(100% - 9.5rem);}
.contact-con02-txt-bottom dd a{color:inherit;}