/* 기본 커서 숨기기 (PC에서만) */
body{
	background-color: #FFF7F0;
	cursor: none;
}





h3.main_tit{
	font-size: 4.8rem;
	font-weight: 700;
	color: #CA4B40;
	line-height: 1.1;
}
@media screen and (max-width: 768px){
	h3.main_tit{font-size: 3.8rem;}
}

@media screen and (max-width: 500px){
	h3.main_tit{font-size: 22.4px;}
}









/* intro */
#intro{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 9999;
	background-color: #FFF7F0;
	display: none;
}
#intro .con_wrap{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}
#intro .con_wrap>div{
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
#intro .con_wrap .big_txt{
  font-size: 10rem;
  font-weight: 500;
  color: #CA4B40;
  font-family: 'Libre Bodoni';
  margin-bottom: 82px;
  line-height: 1;
}
#intro .con_wrap .small_txt{
  font-size: 3.2rem;
  font-weight: 500;
  color: #CA4B40;
  line-height: 1.4;
}
#intro .con_wrap .small_txt .t_wrap{
  display: block;
}

#intro .con_wrap>div{
  display: none;
}
#intro .con_wrap>div.con01{
  display: block;
}


/* 인트로 재생 중 스크롤 방지용 */
body.intro-active {
  overflow: hidden;
}

/* svg 정렬용 (필수는 아님, 보기 좋게만) */
#intro .con02 .svg_wrap {
  display: inline-block;
}
#intro .con02 svg {
  max-width: 260px;
  width: 100%;
}




/* 첫 방문일 때만 보여주기 */
html.intro-play #intro { display: block; } /* 첫 방문만 노출 */
html.intro-skip #intro { display: none !important; } /* 재진입 강제 숨김 */





@media screen and (max-width: 1024px){
	#intro .con_wrap .big_txt{font-size: 8rem; margin-bottom: 62px;}
	#intro .con_wrap .small_txt{font-size: 3rem;}
}
@media screen and (max-width: 768px){
	#intro .con_wrap .big_txt{font-size: 6rem; margin-bottom: 42px;}
	#intro .con_wrap .small_txt{font-size: 2.7rem;}
}
@media screen and (max-width: 500px){
	#intro .con_wrap>div{top: 45%;}
	#intro .con_wrap .big_txt{font-size: 4rem; margin-bottom: 20px;}
	#intro .con_wrap .small_txt{font-size: 2.4rem;}
	#intro .con02 svg{max-width: 200px}
}
































/* main_visual */
#mainVisual{
	position: relative;
	width: 100%;
	margin: 0 auto;
	margin-top: 0;
	height: 100vh;
}
#mainVisual .video_wrap{
	width: 100%;
	height: 100%;
}
#mainVisual .video_wrap video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}


/* =========================
   MAIN VISUAL VIDEO STYLE
========================= */


/* 배경영상처럼 꽉 채우기 */
#mainVisual #mainVisualVideo{
  width: 100%;
  height: 100%;
  display: block;

  /* 터치/탭으로 컨트롤 UI가 뜨는 트리거를 차단 */
  pointer-events: none;

  /* iOS에서 전체화면 전환/선택 방지 성격 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* =========================
   iOS/Safari Native Controls Hide
   (인앱 브라우저에서 컨트롤이 강제로 생기는 경우를 최대한 가림)
========================= */
#mainVisual #mainVisualVideo::-webkit-media-controls{ display:none !important; }
#mainVisual #mainVisualVideo::-webkit-media-controls-enclosure{ display:none !important; }
#mainVisual #mainVisualVideo::-webkit-media-controls-panel{ display:none !important; }
#mainVisual #mainVisualVideo::-webkit-media-controls-play-button{ display:none !important; -webkit-appearance:none; }
#mainVisual #mainVisualVideo::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }





@media screen and (max-width: 1024px){
	#mainVisual{height: auto}
	#mainVisual .video_wrap video{object-fit: contain; }
}


/*#mainVisual .swiper-slide{
	height:100vh;
	position:relative;
	border-radius: 20px 20px 20px 23px;
}
#mainVisual .swiper-slide .bg_wrap{
	width: 100%;
	height: 100%;
}*/
/* 애니메이션이 걸릴 때만 이 클래스를 붙임 */
/*#mainVisual .bg_wrap.zoom-anim {
	animation: mainVisualZoomOut 5s ease-out forwards;
}

@keyframes mainVisualZoomOut {
	0% {
		transform: scale(1.05, 1.05);
	}
	100% {
		transform: scale(1, 1);
	}
}*/
















#portfolio{
	position: relative;
	padding-top: 160px;
	padding-bottom: 200px;
}

#portfolio .tit_wrap{
	text-align: center;
	margin-bottom: 96px;
}
#portfolio .tit_wrap h3{
	font-size: 6.4rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: #1E1E1E;
}
#portfolio .tit_wrap p{
	font-size: 4rem;
	font-weight: 400;
	line-height: 1.1;
	color: #1E1E1E;
	margin-bottom: 32px;
}
#portfolio .tit_wrap a.more_btn{
	margin: 0 auto;
}

#portfolio .port_list{
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 48px;
	align-items: flex-start ;
	justify-content: space-between;
}
#portfolio .port_list>li{position: relative;}
#portfolio .port_list>li:nth-child(2n-1) {width: calc(37.4% - 10px);}
#portfolio .port_list>li:nth-child(2n) {width: calc(62.6% - 10px);}
#portfolio .port_list>li:nth-child(3){align-self : flex-end;}
#portfolio .port_list>li:nth-child(4){align-self : flex-end; margin-top: -280px}
#portfolio .port_list>li .img_wrap{overflow: hidden; border-radius: 14px;}
#portfolio .port_list>li:nth-child(1) .img_wrap{width: 100%;height: 720px;}
#portfolio .port_list>li:nth-child(2) .img_wrap{width: 100%;height: 440px;}
#portfolio .port_list>li:nth-child(3) .img_wrap{width: 100%;height: 440px;}
#portfolio .port_list>li:nth-child(4) .img_wrap{width: 100%;height: 720px;}
#portfolio .port_list>li>a .img_wrap .img_box{
	width: 100%; height: 100%;
	transition-duration: 0.3s;
	transform-origin: center center;
	background-position: 50% 50% !important;
}
#portfolio .port_list>li h4{
	font-size: 3.2rem;
	color: #1E1E1E;
	line-height: 1.4;
	font-weight: 700;
	margin-top: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	white-space: nowrap;
}
#portfolio .port_list>li .info_wrap{
	display: flex;
	gap: 8px;
}
#portfolio .port_list>li p.info{
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: -0.03em;
	color: #757575;
}

#portfolio .port_list>li>a:hover .img_wrap .img_box,
#portfolio .port_list>li>a:active .img_wrap .img_box{
	transform: scale(1.05);
}

@media screen and (max-width: 1280px){
	#portfolio .port_list>li:nth-child(1) .img_wrap{height: 620px;}
	#portfolio .port_list>li:nth-child(2) .img_wrap{height: 340px;}
	#portfolio .port_list>li:nth-child(3) .img_wrap{height: 340px;}
	#portfolio .port_list>li:nth-child(4) .img_wrap{height: 620px;}
}
@media screen and (max-width: 1024px){
	#portfolio{padding-top: 130px; padding-bottom: 140px;}
	#portfolio .tit_wrap{margin-bottom: 76px;}
	#portfolio .tit_wrap h3{font-size: 5.4rem;}
	#portfolio .port_list>li:nth-child(1) .img_wrap{height: 520px;}
	#portfolio .port_list>li:nth-child(2) .img_wrap{height: 240px;}
	#portfolio .port_list>li:nth-child(3) .img_wrap{height: 240px;}
	#portfolio .port_list>li:nth-child(4) .img_wrap{height: 520px;}
}
@media screen and (max-width: 768px){
	#portfolio{padding-top: 100px; padding-bottom: 80px;}
	#portfolio .tit_wrap{margin-bottom: 56px;}
	#portfolio .tit_wrap h3{font-size: 4rem;}
	#portfolio .tit_wrap p{font-size: 3rem;}
	#portfolio .port_list{row-gap: 38px;}
	#portfolio .port_list>li:nth-child(2n){width: 100%}
	#portfolio .port_list>li:nth-child(2n-1){width: 100%;}
	#portfolio .port_list>li:nth-child(4){margin-top: 0;}
	#portfolio .port_list>li:nth-child(1) .img_wrap{height: 240px;}
	#portfolio .port_list>li:nth-child(2) .img_wrap{height: 240px;}
	#portfolio .port_list>li:nth-child(3) .img_wrap{height: 240px;}
	#portfolio .port_list>li:nth-child(4) .img_wrap{height: 240px;}
	#portfolio .port_list>li h4{font-size: 2.6rem;}
}

@media screen and (max-width: 500px){
	#portfolio{padding-top: 50px; padding-bottom: 50px;}
	#portfolio .tit_wrap{margin-bottom: 48px;}
	#portfolio .tit_wrap h3{font-size: 22.4px;}
	#portfolio .tit_wrap p{font-size: 16px;}
	#portfolio .port_list{row-gap: 24px;}
	#portfolio .port_list>li:nth-child(1) .img_wrap{height: 220px;}
	#portfolio .port_list>li:nth-child(2) .img_wrap{height: 220px;}
	#portfolio .port_list>li:nth-child(3) .img_wrap{height: 220px;}
	#portfolio .port_list>li:nth-child(4) .img_wrap{height: 220px;}
	#portfolio .port_list>li h4{font-size: 16px; margin-top: 16px;}
	#portfolio .port_list>li .info_wrap{gap: 4px}
	#portfolio .port_list>li p.info{font-size: 12.8px;}
}



















#service{
	background-color: #FFF;
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 100vh !important;
}
#service .flex_wrap{
	display: flex;
	height: 100%;
}
#service .flex_wrap>div{
	width: 50%;
	height: 100%;
}
#service .left_wrap{
	background-color: #CA4B40;
	position: relative;
}
#service .left_wrap .img_box{
	width: 100%;
	height: 100%;
	background:url(/html/_img/main/main_new/main_service_bg.jpg) no-repeat center / cover;
	z-index: 1;
	position: relative;
}
#service .left_wrap .txt_box{
	position: absolute;
	left: 100px;
	bottom: 120px;
	z-index: 2;
	width: calc(100% - 200px);
}
#service .left_wrap .txt_box h3{
	font-size: 8rem;
	font-weight: 700;
	line-height: 1.4;
	color: #FFF7F0;
	margin-bottom: 64px;
}
#service .left_wrap .txt_box h3>span{
	display: block;
}
#service .left_wrap .txt_box .info_wrap p{
	font-size: 2.4rem;
	font-weight: 400;
	color: #F3F3F3;
	line-height: 1.7;
}
#service .left_wrap .txt_box .info_wrap p.txt01{
	margin-bottom: 20px;
}
#service .left_wrap .txt_box .info_wrap p span.bold{
	font-weight: 700;
}

#service .right_wrap{
	position: relative;
}



#service .right_wrap .txt_wrap{
	position: absolute;
	bottom: 140px;
	box-sizing: border-box;
	padding: 0 100px;
	padding-right: 0;
	width: 100%;
}
#service .right_wrap .txt_wrap .txt{
	color: #CA4B40;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: -0.04em;
	margin-bottom: 72px;
}
#service .right_wrap .txt_wrap .txt:last-child{margin-bottom: 0;}
#service .right_wrap .txt_wrap .txt>p{
	width: 100%;
	position: relative;
	font-size: 5.6rem;
	display: flex;
	flex-direction: column;
}
#service .right_wrap .txt_wrap .txt>p>span.kr{
	font-size: 2.4rem;
	letter-spacing: -0.03em;
}





/* 기존텍스트 수정 25.12.24 수정
#service .right_wrap .txt_wrap{
	position: absolute;
	top: 546px;
	box-sizing: border-box;
	padding: 0 100px;
	width: 100%;
}
#service .right_wrap .txt_wrap .txt{
	color: #CA4B40;
	font-weight: 700;
	line-height: 1.7;
}
#service .right_wrap .txt_wrap .txt>p{
	display: flex;
	align-items: center;
	column-gap: 24px;
	width: 100%;
	position: absolute;
	top: 0;
}
#service .right_wrap .txt_wrap .txt.txt01{
	font-size: 4rem;
}
#service .right_wrap .txt_wrap .txt.txt01 span.big{
	font-size: 8rem;
}
#service .right_wrap .txt_wrap .txt.txt02{
	margin: 96px 0;
	font-size: 4.8rem;
} 
#service .right_wrap .txt_wrap .txt.txt02 span.big{
	font-size: 8rem;
}
#service .right_wrap .txt_wrap .txt.txt03{
	font-size: 5.6rem;
}
*/




@media screen and (max-width: 1280px){
	#service .right_wrap .txt_wrap{bottom: 120px;}
	#service .right_wrap .txt_wrap .txt{margin-bottom: 20px;}
}


@media screen and (max-width: 1920px){
	#service .left_wrap .img_box{height: 100vh;}
	#service .left_wrap .txt_box{left: 5.208vw; width: calc(100% - 10.416vw);}
	#service .left_wrap .txt_box h3{font-size: 4.167vw;}
	#service .left_wrap .txt_box .info_wrap p{font-size: 1.250vw;;}

	#service .right_wrap .txt_wrap{padding: 0 5.208vw; }
	#service .right_wrap .txt_wrap .txt>p{font-size: 2.917vw;}
	#service .right_wrap .txt_wrap .txt>p>span.kr{font-size: 1.250vw;}
}

@media screen and (max-width: 768px){
	#service{height: unset !important;}
	#service .flex_wrap{display: block; height: unset;}
	#service .flex_wrap>div{width: 100%; height: unset;}
	#service .left_wrap .img_box{height: 100%;}
	#service .left_wrap .txt_box{left: 18px; bottom: unset; position: relative; padding-top: 56px; padding-bottom: 120px; width: calc(100% - 36px);}
	#service .left_wrap .txt_box h3{font-size: 9.115vw;}
	#service .left_wrap .txt_box .info_wrap p{font-size: 2.865vw;}

	#service .right_wrap{padding: 68px 0;}
	#service .right_wrap .txt_wrap{bottom: auto; padding: 0 18px; position: relative; top: 0;}
	#service .right_wrap .txt_wrap .txt>p{position: relative; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid #d9d9d9; border-radius: 16px; height: 142px; width: 100%; position: relative; font-size: 5.990vw;}
	#service .right_wrap .txt_wrap .txt>p>span.kr{font-size: 2.865vw;}

}

@media screen and (max-width: 500px){
	#service .left_wrap .txt_box h3{font-size: 41.4px;}
	#service .left_wrap .txt_box .info_wrap p{font-size: 14px;}

	#service .right_wrap{padding: 48px 0;}
	#service .right_wrap .txt_wrap .txt>p{font-size: 20px; height: 102px;}
	#service .right_wrap .txt_wrap .txt>p>span.kr{font-size: 14px;}

}




















/* brand */
#brand{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 140px 0;
}
#brand .bg_circle{
	position: absolute;
	width: 1215px;
	height: 1215px;
	background: url(/html/_img/main/main_new/main_bg_circle.png) no-repeat center / cover;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	bottom: -607.5px;
}
#brand .wrap1700{
	position: relative;
	z-index: 2;
}
#brand .tit_wrap{
	margin-bottom: 96px;
}
#brand .tit_wrap h3{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #CA4B40;
	column-gap: 20px;
}
#brand .tit_wrap h3>span{
	font-size: 4rem;
	font-weight: 400;
	line-height: 1.7;
}
#brand .tit_wrap h3>span.t_wrap>span.flex_wrap{
	display: flex;
	align-items: center;
}
#brand .tit_wrap h3>span.t_wrap span.bold{
	font-size: 6.4rem;
	font-weight: 900;
} 
#brand .con_wrap{
	position: relative;
	z-index: 5;
}
#brand .mainBrandSwiper2 {
	margin-top: 54px;
}
#brand .swiper.mainBrandSwiper .swiper-wrapper,
#brand .swiper.mainBrandSwiper2 .swiper-wrapper{
  transition-timing-function: linear !important;
}
#brand .swiper-slide{
	width: 360px;
	height: 280px;
	border-radius: 16px;
	overflow: hidden;
	margin: 0 10px;
}
#brand .swiper-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

@media screen and (max-width: 1280px){
	#brand .bg_circle{width: 1015px; height: 1015px;}
	#brand .tit_wrap h3>span{font-size: 5rem;}
	#brand .tit_wrap h3>span.t_wrap span.bold{font-size: 8rem;}
	
}
@media screen and (max-width: 1024px){
	#brand{padding: 110px 0;}
	#brand .bg_circle{ bottom: -832px}
	#brand .tit_wrap{margin-bottom: 7px;}
}
@media screen and (max-width: 768px){
	#brand{padding: 80px 0;}
	#brand .tit_wrap{margin-bottom: 56px;}
	#brand .tit_wrap h3{flex-direction: column; row-gap: 0;}
	#brand .tit_wrap h3>span{font-size: 3rem;}
	#brand .tit_wrap h3>span.t_wrap span.bold{font-size: 6rem;}
	
	#brand .swiper-slide{width: 260px; height: 202px}
}

@media screen and (max-width: 500px){
	#brand{padding: 50px 0;}
	#brand .tit_wrap{margin-bottom: 40px;}
	#brand .tit_wrap h3>span{font-size: 16px;}
	#brand .tit_wrap h3>span.t_wrap span.bold{font-size: 32px;}
	

	#brand .mainBrandSwiper2{margin-top: 48px;}
}


























/* clients */
#clients{
	padding-top: 100px;
	padding-bottom: 120px;
	background-color: #FFF;
}
#clients h3.main_tit{
	text-align: center;
	margin-bottom: 96px;
}
#clients .clients_img .logo_list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#clients .clients_img .logo_list>li{
	overflow: hidden;
	box-sizing: border-box;
	display: block;
	width: calc(16.6666% - 16.6666px);
}
#clients .clients_img .logo_list>li img{
	width: 100%;
}

@media screen and (max-width: 1024px){
	#clients{padding-top: 80px; padding-bottom: 100px;}
	#clients h3.main_tit{margin-bottom: 76px;}
	#clients .clients_img .logo_list{gap: 10px;}
	#clients .clients_img .logo_list>li{width: calc(16.6666% - 8.3333px);}

}
@media screen and (max-width: 768px){
	#clients{padding-top: 60px; padding-bottom: 80px;}
	#clients h3.main_tit{margin-bottom: 56px;}
}
@media screen and (max-width: 500px){
	#clients{padding-top: 40px; padding-bottom: 40px;}
	#clients .wrap1720{width: 100%; box-sizing: border-box; padding: 0 31px;}
	#clients h3.main_tit{margin-bottom: 32px;}
	#clients .clients_img .logo_list{gap: 3.93px; box-sizing: border-box;}
	#clients .clients_img .logo_list>li{width: calc(16.6666% - 3.275px);}
}














/* contact */
#mainContact{
	position: relative;
	padding-top: 100px;
	padding-bottom: 120px;
}
#mainContact .wrap1720{
	display: flex;
	justify-content: space-between;
}
#mainContact .left_wrap{
	width: 545px;
} 
#mainContact .left_wrap .info_wrap{
	margin-top: 96px;
	margin-bottom: 140px;
}
#mainContact .left_wrap .info_wrap dl{
	display: flex;
	column-gap: 84px;
	margin-bottom: 24px;
}
#mainContact .left_wrap .info_wrap dl:last-child{margin-bottom: 0;}
#mainContact .left_wrap .info_wrap dl>dt{
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.7;
	color: #CA4B40;
	width: 86px;
}
#mainContact .left_wrap .info_wrap dl>dd{
	font-size: 1.8rem;
	font-weight: 400;
	color: #CA4B40;
	width: calc(100% - 170px)
}
#mainContact .right_wrap{
	width: 1064px;
	height: 546px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(204,204,204,0.9);
} 
#mainContact .right_wrap .map_box{
	width: 100%;
	height: 100%;
	position: relative;
}
#mainContact .right_wrap .map_box .root_daum_roughmap{
	width: 100%;
	height: 100%;
	box-sizing: border-box !important;
}
#mainContact .right_wrap .map_box .root_daum_roughmap .wrap_map{
	height: 100%;
	height: 100%;
	box-sizing: border-box !important;
}
#mainContact .right_wrap .map_box .root_daum_roughmap .wrap_controllers,
#mainContact .right_wrap .map_box .root_daum_roughmap .cont{
	display: none;
}
#mainContact .mob_btn{display: none;}

.root_daum_roughmap_landing .border1,
.root_daum_roughmap_landing .border2,
.root_daum_roughmap_landing .border3,
.root_daum_roughmap_landing .border4{display: none;}


@media screen and (max-width: 1280px){
	#mainContact{padding-top: 80px; padding-bottom: 100px;}
	#mainContact .left_wrap{width: 45%;}
	#mainContact .right_wrap{width: 50%;}
}
@media screen and (max-width: 1024px){
	#mainContact{padding-top: 80px; padding-bottom: 100px;}
	#mainContact .wrap1720{flex-direction: column; row-gap: 76px;}
	#mainContact .left_wrap{width: 100%;}
	#mainContact .left_wrap .info_wrap{margin-top: 40px; margin-bottom: 40px;}
	#mainContact .right_wrap{width: 100%; height: 400px;}
}
@media screen and (max-width: 768px){
	#mainContact{padding-top: 60px; padding-bottom: 80px;}
	#mainContact .wrap1720{row-gap: 60px;}
	#mainContact .left_wrap .info_wrap{margin-bottom: 0; margin-top: 40px;}
	#mainContact .left_wrap .info_wrap dl{box-sizing: border-box; column-gap: 20px;  margin-bottom: 24px;}
	#mainContact .left_wrap .more_btn{margin: 0 auto;}
	#mainContact .right_wrap{height: 300px;}

	#mainContact .pc_btn{display: none;}
	#mainContact .mob_btn{display: flex; background-color: transparent; color: #CA4B40;}
}
@media screen and (max-width: 500px){
	#mainContact{padding-top: 48px; padding-bottom: 64px;}
	#mainContact .wrap1720{row-gap: 40px;}
	#mainContact .left_wrap .info_wrap dl{column-gap: 0;}
	#mainContact .left_wrap .info_wrap dl>dt{width: 64px; font-size: 14.4px;}
	#mainContact .left_wrap .info_wrap dl>dd{width: calc(100% - 64px); font-size: 14.4px;}
	#mainContact .right_wrap{height: 180px;}
}