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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1280px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:calc(-1* var(--area-padding)); cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; margin-right:var(--area-padding); }
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1280px){
	.sub-tab-list-style .area{padding:0}
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#333; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected{background-color:transparent; border-color: #eee;}
	.sub-drop-menu-style ul li.selected a em{color:#f57f20; font-weight:600; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}


/* ****************** 01 With ********************** */
@media all and ( max-width: 1520px ){
	/* con03 */
	.with-con03-wrapper .slick-prev{left: -7rem;}
	.with-con03-wrapper .slick-next{right: -7rem;}
}
@media all and ( max-width: 1420px ){
	/* con03 */
	.with-con03-wrapper {padding: 0 7rem;}
}
@media all and ( max-width: 1280px ){
	/* con03 */
	.with-con03:before{top: -25rem; height: 25rem;}
	/* con05 */
	.crew-tab-list-style.top-fixed{top: calc(var(--header-height) + 15px);}
}
@media all and ( max-width: 800px ){
	/* con01 */
	.with-con01{padding-top: 4rem;}
	.with-con01-box{display: flex; flex-wrap:wrap; height: auto;}
	.with-con01-left,
	.with-con01-right{width: 50%; height: auto;}
	.with-con01-right{text-align: center;}
	.with-con01-left h1,
	.with-con01-right h1{padding-top: 0; font-size: 3.5rem;}
	.with-con01-left p,
	.with-con01-right p{margin-top: 2rem; font-size: 1.8rem;}
	/* 라인 */
	.with-con01-right .line {display: none;}
	.with-con01-left .line{top: 7rem; margin-top: 0; width: 0.1rem; height: 0; left: 50%; transform: none;}
	/* 원 */
	.with-con01-right .cir {display: none;}
	.with-con01-left .cir {top: 14rem; margin-top: 0; width: 0.6rem; height: 0.6rem; left: 50%; margin-left: -0.3rem; transform: none;}
	/* 가운데 영역 */
	.with-con01-center{margin: 4rem auto 0; width: 53rem; height: 52.6rem; width: 43rem; height: 42.6rem; position: relative; top: 0; left: 0; transform: none;}
	.with-con01-center h1{font-size: 4.2rem;}
	.with-con01-center .earth{width: 20.1rem; height: 20.1rem;}
	/* active */
	.with-con01-box.animated .with-con01-left .line, 
	.with-con01-box.animated .with-con01-right .line {width: 0.1rem; height: 5rem;}
	/* 하단 영역 */
	.with-con01-bottom{margin-top: 10rem; padding-bottom: 10rem;}
	.with-con01-bottom:before{margin-left: -40rem; width: 80rem; height: 43rem; box-shadow: 0 5rem 15rem -5rem rgba(51,51,51,0.6);}
	.with-con01-bottom:after{top: -33rem; height: 43rem;}
	.with-con01-bottom p{font-size: 3.5rem; line-height: 1.5;}
	.with-con01-bottom p:before {top: -5rem; left: 50%; margin-left: -1.5rem; border-bottom: 1.5rem solid transparent; border-top: 1.5rem solid #333; border-left: 1.5rem solid transparent; border-right: 1.5rem solid transparent;}
	
	/* 공통 */
	.cm-with-tit h5{font-size: 4rem; line-height: 1.1;}
	.cm-with-tit h5:before{top: -5rem; margin-left: -1.5rem; 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: 4rem; font-size: 2rem; line-height: 1.66;}
	.cm-with-tit p br{display: none;}
	
	/* con02 */
	.with-con02{padding-top: 15rem;}
	.with-con02 .cm-with-tit h5{font-size: 4rem;}
	.with-con02-box{margin-top: 8rem;}
	.with-con02-txt{bottom: 30%;}
	.with-con02-txt i{font-size: 4rem;}
	.with-con02-txt p{margin-top: 1.5rem; font-size: 3rem; line-height: 1.3;}
	
	/* con03 */
	.with-con03{padding: 13rem 0;}
	.with-con03:before{top: -15rem; height: 15rem;}
	.with-con03-img-box{margin: 5rem auto 0; width: 52.7rem; width: 80%;}
	.with-con03-img-inner{padding-top: 33.4rem; padding-top: 63.37%;}
	.with-con03-txt01{margin-top: 5.5rem; font-size: 3rem; line-height: 1.66;}
	.with-con03-line{margin: 4rem auto 5rem; height: 4rem;}
	.with-con03-txt02{font-size: 4rem;}
	/* active */
	.with-con03-line.animated:before{height: 4rem;}
	.with-con03-wrapper{margin-top: 7rem; padding: 0 0 6rem 0;}
	.with-con03-item-inner{position: relative; padding: 3rem 0; height: auto; border-radius: 0;}
	.with-con03-item-inner .num{position: absolute; top: 50%; margin-top: -5rem; left: 0; width: auto; font-size: 2rem; line-height: 1.3; z-index: 1;}
	.with-con03-item-inner .img{width: 8rem;}
	.with-con03-item-inner .txt{margin-left: 3.5rem; width: calc(100% - 11.5rem); display: block; flex-wrap:wrap; align-items: center;}
	.with-con03-item-inner .txt h5{padding-right: 0; width: 100%; font-size: 2.4rem; line-height: 1.3;}
	.with-con03-item-inner .txt p{margin-top: 1.5rem; width: 100%; font-size: 1.8rem; line-height: 1.5;}
	.with-con03-item-inner .txt p i{margin: 0 1rem;}
	.with-con03-wrapper .slick-arrow{margin-top: 0; top: auto; bottom: -6rem; right: auto; left: 50%; width: 4rem; height: 4rem;}
	.with-con03-wrapper .slick-arrow i{font-size: 3.6rem;}
	.with-con03-wrapper .slick-prev{margin-left: -5rem;}
	.with-con03-wrapper .slick-next{margin-left: 1rem;}
	
	/* con04 */
	.with-con04{padding-top: 19rem;}
	.with-con04-img-box{margin-top: 5rem; position: relative;}
	.with-con04-img-box .wavelength{top: 13.5rem; margin-left: -11rem; width: 22rem; height: 22rem;}
	.with-con04-img-box .wavelength:before{margin-top: -0.5rem; left: -14rem; width: 10.5rem; height: 1rem;}
	.with-con04-img-box .wavelength:after{margin-top: -0.5rem; right: -14rem; width: 10.5rem; height: 1rem;}
	.with-con04-img-box .bell img{width: 18.3rem;}
	.with-con04-txt01{margin-top: 8rem; font-size: 3rem; line-height: 1.66;}
	.with-con04-line{margin: 4rem auto 5rem; height: 4rem;}
	.with-con04-txt02{font-size: 3rem; line-height: 1.3;}
	/* active */
	.with-con04-line.animated:before{height: 4rem;}
	.with-con04-logo{margin-top: 5rem; top: 1rem;}
	
	/* con05 */
	.with-con05{padding: 12rem 0 8rem;}
	.with-con05-img-box{margin: 8rem auto 0; max-width: 50.2rem; width: 80%;}
	.with-con05-img-inner{padding-top: 43.22%;}
	.with-con05-img-inner .girl{margin-left: 16.53%; width: 8.16%;}
	.with-con05-txt01{margin-top: 9rem; font-size: 3rem; line-height: 1.66;}
	.with-con05-txt01 b{font-weight: 700;}
	.with-con05-line{margin: 4rem auto 5rem; height: 4rem;}
	.with-con05-txt02{font-size: 2rem; line-height: 1.3;}
	.with-con05-txt02 b{margin-top: 2rem; font-size: 2.4rem;}
	/* active */
	.with-con05-line.animated:before{height: 4rem;}
	/* 탭 */
	.with-con05-crew-con{margin-top: 7.5rem;}
	.crew-tab-wrapper-style{margin-bottom:15px;}
	.crew-tab-list-style{}
	.crew-tab-list-style .area-sub{padding: 0;}
	/* Fixed */
	.crew-tab-list-style.top-fixed{top: var(--header-height);}
	.crew-tab-list-style.top-fixed .area-sub{padding: 0 var(--area-padding);}
	/* Tab 공통 스타일 */
	.crew-tab-wrapper-style,
	.crew-tab-list-style.top-fixed,
	.crew-tab-list-style ul li a{height:40px; }
	.crew-tab-list-style ul li a em{font-size:13px}
	.crew-drop-menu-style{position:relative;}
	.crew-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#000; box-sizing:border-box;}
	.crew-drop-open-btn-style span{color:#fff;}
	.crew-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.crew-drop-menu-style.open .crew-drop-open-btn-style .arrow{transform:rotate(180deg)}
	.crew-drop-menu-style ul{display:none; margin:0; width: auto; height:auto; position:absolute; top:100%; left:var(--area-padding); right:var(--area-padding); background-color:#000; border-radius: 0; z-index:11; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,0.15);}
	.crew-drop-menu-style ul li{position:static; display:block; float:none; border:0; margin: 0; border-top:1px solid rgba(255,255,255,0.15); width:auto; background-color:transparent}
	.crew-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.crew-drop-menu-style ul li a em{font-size:13px; color: rgba(255,255,255,0.4);}
	.crew-drop-menu-style ul li.selected a em{color:#fff; font-weight:700;}
	.crew-tab-con{padding: 5rem 0 1rem; display: block;}
	.crew-tab-con br{display: none;}
	.crew-tab-tit{width: 100%; font-size: 2.4rem; line-height: 1.5; padding-right: 0;}
	.crew-tab-wrapper{margin-top: 2.5rem; width: 100%;}
	.crew-tab-item{width: 50%; margin-bottom: 3rem; margin-right: 0;}
	#crewContentM1 .crew-tab-list .crew-tab-item{width: 100%;}
	.crew-tab-list .crew-tab-item:last-child{margin-right: 0;}
	.crew-tab-img{width: 8rem;}
	.crew-tab-list .crew-tab-item.leader .crew-tab-img span:before{top: -0.1rem; bottom: -0.1rem; right: -0.1rem; left: -0.1rem; width: auto; height: auto;}
	.crew-tab-img span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	.crew-tab-txt{padding-left: 2rem; padding-right: 1rem; width: calc(100% - 8rem); box-sizing: border-box;}
	.crew-tab-txt h5{font-size: 2rem; line-height: 1.3;}
	.crew-tab-txt p{margin-top: 1.2rem; font-size: 1.6rem; line-height: 1.5;}
	/* .crew-tab-txt p span{padding-right: 1rem;}
	.crew-tab-txt p span:before{right: 0.3rem;} */
}
@media all and ( max-width: 640px ){
	.with-con02-box .img {bottom: 43.41%; margin-left: -42.85%; width: 30.56%;}
	.with-con02-txt{bottom: 5%;}
	/* con03 */
	.with-con03:before{top: -12rem; height: 12rem;}
}


/* ****************** 02 Works ********************** */
@media all and ( max-width: 1024px ){
	.sub-works-list{margin: 0 -1%;}
	.sub-works-item{width: 48%; margin: 0 1% 4.5rem;}
}
@media all and ( max-width: 800px ){
	/* 탭 */
	.sub-work-tab-list li{margin: 1.5rem 3rem;}
	.sub-work-tab-list li:before{margin-top: -0.25rem; right: -3.25rem; width: 0.5rem; height: 0.5rem;}
	.sub-work-tab-list li a{font-size: 1.8rem; line-height: 1.3;}
	.sub-work-tab-list li a:before{bottom: -1.2rem; height: 0.2rem;}
	/* 리스트 */
	.sub-works-wrapper{padding: 0 5rem 6rem; padding: 0 var(--area-padding) 6rem;}
	.sub-works-item{width: 98%; margin: 0 1% 4.5rem;}
	.sub-works-txt{padding: 2.5rem	2rem 0;}
	.sub-works-txt .tit{font-size: 2rem; line-height: 1.3;}
	.sub-works-txt .category{margin-top: 2.5rem;}
	.sub-works-txt .category span{margin-bottom: 1rem; margin-right: 2rem; font-size: 1.5rem; line-height: 1.3;}
	.sub-works-txt .category span:before{right: -1rem;}
}
@media all and ( max-width: 800px ){
	/* 뷰페이지 */
	.works-visual-con {padding-top: 400px;}
	.works-view-con{padding: 10rem 0 11.5rem;}
	.works-view-top-left{width: 100%;}
	.works-view-top-left .tit{font-size: 3.4rem; line-height: 1.3;}
	.works-view-top-left .info{margin-top: 3rem;}
	.works-view-top-left .info span{margin-bottom: 1rem; margin-right: 2rem; font-size: 1.8rem; line-height: 1.3;}
	.works-view-top-left .info span:before{right: -1rem;}

	.works-view-bottom{padding-top: 6rem; padding-top: 0; display: block;}
	.works-view-bottom-left{margin-top: 6rem; width: 100%;}
	.works-view-bottom-right{margin-top: 3.5rem; width: 100%;}
	.works-view-bottom-right dl + dl{margin-top: 2rem;}
	.works-view-bottom-right dt, 
	.works-view-bottom-right dd{font-size: 1.6rem; line-height: 1.3;}
	.works-view-bottom-right dt{width: 11.5rem;}
	.works-view-bottom-right dd{width: calc(100% - 11.5rem);}
	.works-worker-list li{margin-left: -0.8rem;}
	.works-worker-list li .img{width: 5.4rem; height: 5.4rem;}
	.works-worker-list li .tooltip-info{top: 5.4rem; padding-top: 1.2rem;}
	.tooltip-info-inner{padding: 2rem 1rem 1rem;}
	.tooltip-info-inner:before{top: -0.5rem; margin-left: -0.5rem;}
	.tooltip-info-inner .name{font-size: 1.6rem; line-height: 1.3;}
	.tooltip-info-inner .info{margin-top: 1.5rem;}
	.tooltip-info-inner .info span{margin-bottom: 1rem; margin-right: 1rem; font-size: 1.6rem; line-height: 1.3;}
	.tooltip-info-inner .info span:before{right: -0.5rem;}

	/* 230523 추가 */
	.works-view-middle{margin-top: 4rem; display: block;}
	.works-view-middle-left{margin-top: 6rem; width: 100%;}
	.works-view-middle-right{width: 100%;}
	.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;}
	.works-view-middle-right dt{width: 11.5rem;}
	.works-view-middle-right dd{width: calc(100% - 11.5rem);}
	.works-view-bottom.new-css{padding-top: 6rem;}
	/* // */
}
@media all and ( max-width: 640px ){
	.works-worker-list li:nth-child(5n+1){clear: both; margin-left: 0;}
}


/* ****************** 03 Magazine ********************** */
@media all and ( max-width: 1220px ){
	.grid-wrapper-con{margin:0 -1rem;}
	.grid-sizer,
	.grid-item {margin:0 1rem 2rem;}
	.sub-magazine-txt {padding: 0 2rem;}
}
@media all and ( max-width: 800px ){
	.sub-magazine-list{grid-template-columns: repeat(6, 16.66%);}

	.sub-magazine-list .grid-item,
	.sub-magazine-list .grid-item.big-item{grid-column: span 3; grid-row: span 1;}

	.sub-magazine-txt{bottom: 1.5rem; padding:0 2rem;}
	.sub-magazine-txt .category{font-size: 1.6rem; line-height: 1.3;}
	.sub-magazine-txt .tit{margin-top: 1rem; font-size: 2rem;}
	.sub-magazine-txt .date{margin-top: 1.5rem; font-size: 1.4rem;}
}
@media all and ( max-width: 1520px ){
	.magazine-more-prev{left: -5.5rem;}
	.magazine-more-next{right: -5.5rem;}
}
@media all and ( max-width: 1460px ){
	.magazine-more-box .area-sub{max-width: none; padding: 0 8rem;}
	.magazine-more-prev{left: 2.5rem;}
	.magazine-more-next{right: 2.5rem;}
}
@media all and ( max-width: 1360px ){
	.magazine-more-tit a{right: var(--area-padding);}
}
@media all and ( max-width: 800px ){
	/* 뷰페이지 */
	.magazine-view-page{padding-top: 6rem;}
	.magazine-view-top{padding-bottom: 5rem;}
	.magazine-view-top:before {margin: 0 auto 2.5rem; 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;}
	.magazine-view-top .info{margin-top: 3.5rem;}
	.magazine-view-top .info span{margin-right: 5.5rem; font-size: 1.6rem; line-height: 1.3;}
	.magazine-view-top .info span:before{top: 0.8rem; right: -3rem; width: 0.5rem; height: 0.5rem;}

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

	/* 더보기 */
	.magazine-more-con{padding: 8rem 0 11rem;}
	.magazine-more-tit{position: relative; padding-right: 0; text-align: center;}
	.magazine-more-tit h5{font-size: 4rem; line-height: 1.3;}
	.magazine-more-tit a{margin: 2rem auto 0; position: static; display: inline-block; font-size: 1.6rem;}
	.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; position: relative;}
	.magazine-more-txt{padding: 2.5rem 1rem 0;}
	.magazine-more-txt .tit{font-size: 1.8rem; line-height: 1.3;}
	.magazine-more-txt .info{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.3;}
	.magazine-more-txt .info em{margin: 0 0.7rem;}
	.magazine-more-btn{position: absolute; top: 35%; margin-top: -2rem; width: 4rem; height: 4rem;}
	.magazine-more-btn i{font-size: 3.2rem;}
}


/* ****************** 04 Contact ********************** */
@media all and ( max-width: 800px ){
	.contact-con01{padding-bottom: 15rem;}
	.contact-con01-tit{font-size: 5rem;}
	.contact-con01-tit:before {margin: 0 auto 2.5rem;}
	.contact-con01-txt{padding-top: 6rem; font-size: 1.6rem; line-height: 1.3;}
	.contact-con01 .online-form-info{margin: 2rem 0 0;}
	.contact-con01 .online-form-info:before{margin-left: 0.5rem; display: none;}
	.contact-con01 .online-form-list{width: 100%; margin: 0;}
	.contact-con01 .online-form-list + .online-form-list{margin-top: 1rem;}
	.contact-con01 .online-form-item .tit em{margin-left: 0.3rem;}

	.contact-con02-map{position: static; width: 100%; height: 30rem;}
	.contact-con02-map iframe{width: 100%; height: 100%;}
	.contact-con02-txt{padding: 5rem 0; width: 100%; min-height: auto;}
	.contact-con02-txt-top{padding-bottom: 3rem; display: block;}
	.contact-con02-txt-top img{height: 3.1rem;}
	.contact-con02-txt-top .btn-list{margin-top: 2.5rem;}
	.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-bottom{padding-top: 4rem;}
	.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;}
	.contact-con02-txt-bottom dt{width: 9.5rem;}
	.contact-con02-txt-bottom dd{width: calc(100% - 9.5rem);}
}