@charset "utf-8";
 
/*------------------------------------
	main_Layout
------------------------------------*/
#max-contanier {position: relative; /*overflow-x: hidden;*/}
#max-contanier hr {border:0;}
#max-contanier section {position: relative; width: 100%;}


/*------------------------------------
	Main-visaul
------------------------------------*/
#mvisual {position:relative; width: 100%; height: 100vh; overflow: hidden; z-index: 1; }
#mvisual:before {position:absolute; z-index:2; width:100%; height:5rem; content:''; background:var(--white); border-radius:5rem 5rem 0 0; bottom:0; }
#mvisual .visual_swiper { position: relative; width:100%; height:100%;}
#mvisual .visual_swiper .swiper-slide {position: relative; width:100%; height:100%; overflow:hidden;}
#mvisual .visual_swiper .swiper-slide .bg {position: absolute; top:0; left:0; width: 100%; height: 100%; z-index:0;}
#mvisual .visual_swiper .swiper-slide .bg img { width: 100%; height: 100%; object-fit: cover; display: block; }


#mvisual .video {position:absolute; width:100%; height:100%; z-index:222; }
#mvisual .video video {width:100%; height:100%;}

/* 기본 상태 — 크게 시작 */
#mvisual .swiper-slide .bg {transform: scale(1.1); transition: none;}
/* 활성 상태 — 천천히 줄어듦 */
#mvisual .swiper-slide-active .bg {transform: scale(1.0);  transition: transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
 
#mvisual .txt_box {position:absolute; bottom:0; left:50%; transform:translateX(-50%); padding:13rem 0; z-index:1; width:160rem; margin:0 auto; height:100%; display:flex;  flex-direction: column;  justify-content: flex-end; margin-top:0;}
#mvisual .txt_box p { font-size: 1.1em; color: #fff; font-family: 'Outfit'; }
#mvisual .txt_box p.txt1 { font-size: 4.5vw; margin: 0 0 1rem 0; font-weight: 700; text-align: left; }
#mvisual .txt_box p.txt2 { font-size: 1.4em; font-weight: 400; font-family: 'Pretendard';  }
 
/* 기본 상태 (비활성) — 숨겨진 상태로 대기 */
#mvisual .swiper-slide .txt1,
#mvisual .swiper-slide .txt2 { opacity: 0; transform: translateY(40px); filter: blur(0); /* blur 제거 */ transition: none;}
/* 활성 상태 — 부드럽게 등장 */
#mvisual .swiper-slide-active .txt1 {opacity: 1; transform: translateY(0); filter: blur(0); transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1), transform 3s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 0.3s;}
#mvisual .swiper-slide-active .txt2 {opacity: .7; transform: translateY(0); filter: blur(0); transition: opacity 3s cubic-bezier(0.16, 1, 0.3, 1), transform 4s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 1s; /* txt1보다 0.4s 늦게 */}

/* 페이지네이션 컨테이너 */
.visual_pagination { position: absolute; bottom: 10rem !important; right: 8%; display: flex;  align-items: center;  gap: .1rem;  z-index: 10; justify-content: flex-end;}
 
/* 비디오 */
#mvisual .swiper-slide .visual_video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#mvisual .swiper-slide .visual_video:before {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:rgba(0,0,0,.15); z-index:1;}
#mvisual .swiper-slide .visual_video:after {position:absolute; top:0; left:0; width:100%; height:12rem; content:''; background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); z-index:1; }
#mvisual .swiper-slide .visual_video iframe {position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%);
pointer-events: none; }
/* 기본: PC 노출, 모바일 숨김 */
#mvisual .swiper-slide .visual_video.visual_video--mo { display: none; }
 

.visual_video iframe {opacity: 0; transition: opacity 0.6s ease;}
.visual_video iframe.loaded {opacity: 1;}
.video_poster {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity 0.6s ease;}
.video_poster.hide {opacity: 0; pointer-events: none;}


@media (max-width: 500px) {
	#mvisual .swiper-slide .visual_video.visual_video--pc { display: none; }
	#mvisual .swiper-slide .visual_video.visual_video--mo { display: block; }
    #mvisual .swiper-slide .visual_video iframe {transform: translate(-50%, -50%) scale(1.3);}
}



/* 개별 불릿 — Swiper가 자동 생성하는 .swiper-pagination-bullet */
.visual_pagination .swiper-pagination-bullet { position: relative; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center;
 cursor: pointer;  background: none; opacity: 1; margin: 0;}
.visual_pagination .swiper-pagination-bullet svg {position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); display:none;}
.visual_pagination .swiper-pagination-bullet-active svg {display:block}
.visual_pagination .swiper-pagination-bullet .track {fill: none;  stroke: rgba(255, 255, 255, 0.25);  stroke-width: 2;}
.visual_pagination .swiper-pagination-bullet .progress {fill: none;stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 106.81; stroke-dashoffset: 106.81;
 transition: stroke-dashoffset 0.05s linear;}
.visual_pagination .swiper-pagination-bullet span {position: relative; z-index: 1; font-size: 1.4rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); 
font-family: 'Outfit', sans-serif; line-height: 1; transition: color 0.3s;}
.visual_pagination .swiper-pagination-bullet-active span {color: #fff;}
 

@media screen and (max-width: 1600px) {       
	 
	#mvisual .txt_box {width:100%; margin-top: 0; padding: 10rem 5%; box-sizing:border-box;}
	#mvisual .txt_box p { font-size: 1.1em; color: #fff; font-family: 'Outfit'; }
	#mvisual .txt_box p.txt1 { font-size: 4.5vw; margin: 0 0 1rem 0; font-weight: 700; text-align: left; }
	#mvisual .txt_box p.txt2 { font-size: 1.4em; font-weight: 400; font-family: 'Pretendard';  }

}
@media screen and (max-width: 1024px) {
	#mvisual:before { height:2rem;  }
	#mvisual .txt_box {padding:6rem 5%;}
	#mvisual .txt_box p.txt1 {font-size: 7vw; margin:0;}

	.visual_pagination {display:none;}
}
@media screen and (max-width: 768px) { 
	
	#mvisual .txt_box p.txt1 {font-size: 9vw;}
	#mvisual .txt_box p.txt2 {font-size: 4vw;}
}




/*------------------------------------
	msect1
------------------------------------*/
#msect1 {padding:12rem 0;  overflow:hidden; background:#fff; position:relative; z-index:2;}
#msect1 .inner{ display:flex; align-items:center; justify-content:space-between; gap:6rem;}
#msect1 .txt_box{flex:0 0 45%;}
#msect1 .txt_box .stit {display:block; color:var(--main-color2); font-weight: 600; font-size: 1.8rem; margin: 0 0 2rem 0;}
#msect1 .txt_box .tit {font-size: 6.5rem; font-weight: 400; line-height:1.1; color:var(--gray);}
#msect1 .txt_box .tit strong {color:var(--black);}
#msect1 .txt_box .tit2 {display:block; font-weight: 600; font-size: 1.3em; color:#222; margin:3rem 0;}
#msect1 .txt_box > p {line-height:1.6; margin: 0 0 10rem 0;}

.con_btn{position:relative; display:inline-flex; 	align-items:center; 	padding:1rem 1rem 1rem 3rem; border:1px solid #ddd; border-radius:5rem; overflow:hidden; color:#111;
font-size:.8em;	font-weight:600; text-decoration:none; transition:color .4s ease,border-color .4s ease;}
.con_btn span,
.con_btn i{position:relative; z-index:3;}

/* 퍼지는 원 */
.con_btn::before{content:""; position:absolute; right:1rem; top:50%; width:3.8rem; height:3.8rem; border-radius:50%; background:var(--main-color1);
 transform:translateY(-50%) scale(0);   /* 평상시엔 scale(0)으로 숨김 */ transform-origin:center; transition:transform .7s cubic-bezier(.22,1,.36,1); z-index:1;}
/* 화살표 버튼 */
.con_btn i{position:relative; width:3.5rem; height:3.5rem;margin-left:4rem; border-radius:50%; flex-shrink:0; }
/* 초록 원(고정) */
.con_btn i::before{ width:3.5rem; height:3.5rem; content:""; position:absolute; 	inset:0;	border-radius:50%;	background:var(--main-color1);	 z-index:-1;	transition:opacity .25s ease;}
/* 화살표 */
.con_btn i::after{ content:"";	position:absolute;	left:50%;	top:50%;	width:3.5rem; height:3.5rem; transform:translate(-50%,-50%);
background:url(/pages/layout/kor/images/common/ico_go.svg) no-repeat center; background-size:10px;}
/* Hover */
.con_btn:hover{	color:#fff; border-color:var(--main-color1);}
.con_btn:hover::before{transform:translateY(-50%) scale(16);  /* hover 시에만 퍼지는 원 등장 */}
/* 작은 원은 사라짐 */
.con_btn:hover i::before{opacity:0;}
.con_btn:hover i {background:#fff;}
/* 화살표만 흰색으로 변경 */
.con_btn:hover i::after{background:url(/pages/layout/kor/images/common/ico_go2.svg) no-repeat center;  }
 
#msect1 .whatdo_img{flex:0 0 49%; display:grid; grid-template-columns:38rem 25rem; grid-template-areas: "img1 img2" "img1 img3"; gap:1.5rem; align-items:center;}

/* Image */
#msect1 .img1{grid-area:img1; width:38rem; height:54rem;}
#msect1 .img2{grid-area:img2; 	width:38rem; height:38rem;}
#msect1 .img3{grid-area:img3; width:25rem; height:27rem;}

#msect1 .img_item{position:relative; overflow:hidden; 	border-radius:2rem;}
#msect1 .img_item img{width:100%;	height:100%; display:block;object-fit:cover;	transition:.6s ease;}
#msect1 .img_item:hover img{	transform:scale(1.05);}
 

@media (max-width: 1600px) {
	  #msect1 { padding: 10rem 0; }
	  #msect1 .inner { gap: 4rem; }
	  #msect1 .txt_box .tit { font-size: 5rem; }
	  #msect1 .txt_box > p { margin-bottom: 6rem; }

	  #msect1 .whatdo_img {grid-template-columns: 50% 50%;}
	  #msect1 .img1 { width: 100%; height: 46rem; }
	  #msect1 .img2 { width: 100%; height: 32rem; }
	  #msect1 .img3 { width: 100%; height: 22rem; }
}
 
@media (max-width: 1024px) {
	  #msect1 { padding: 7rem 0; } 
	  #msect1 .txt_box .tit { font-size: 4rem; }
	  #msect1 .txt_box > p { margin-bottom: 4rem; }
	
	.con_btn{ padding:.6rem .6rem .6rem 2rem;} 
}

/* ===== 768px 이하: 모바일 - 이미지도 1열로 ===== */
@media (max-width: 768px) {

	#msect1 { padding: 2rem 0; }
	#msect1 .inner {flex-direction: column; align-items: flex-start;	gap: 4rem;}
	#msect1 .txt_box {flex: none; width: 100%; text-align: center; padding:0 4%; box-sizing:border-box;}

	#msect1 .txt_box .stit { font-size: 1.4rem; margin-bottom: 1.2rem; }
	#msect1 .txt_box .tit { font-size: 2.5em; }
	#msect1 .txt_box .tit2 { font-size: 1.2em; margin: 1.5rem 0; }
	#msect1 .txt_box > p { margin-bottom: 3rem; font-size: 1em; word-break:keep-all;}
	#msect1 .txt_box > p br {display:none;  }

	.con_btn { padding: .5rem .5rem .5rem 2rem; font-size: .9em; }
	.con_btn i { width: 3rem; height: 3rem; margin-left: 2rem; }
	.con_btn i::before { width: 2.8rem; height: 2.8rem; }
	.con_btn i::after { width: 2.8rem; height: 2.8rem; background-size: 8px; }
	
  #msect1 .whatdo_img {flex: none; width: 100%;  grid-template-columns: 2.2fr 1fr; grid-template-areas:"img1 img2" "img1 img3";}
  #msect1 .img1,
  #msect1 .img2,
  #msect1 .img3 {width: 100%; height: auto; aspect-ratio: unset; border-radius:1rem;}
  #msect1 .img1 { aspect-ratio: 30/30; }
  #msect1 .img2 { aspect-ratio: 28/28; }
  #msect1 .img3 { aspect-ratio: 28/28; }
 

} 


/*------------------------------------
	msect2
------------------------------------*/
#msect2 {position:relative; width:100%;  margin: 0 auto 15rem auto; height:300vh;   }
#msect2 .philosophy_wrap {position:relative; width:100%;}
#msect2 .philosophy_sticky {height:100vh; height:100vh; box-sizing:border-box; padding:2rem;}
#msect2 .philosophy_card {display:flex; width:100%; height:100%;	margin:0 auto;	padding:1.5%;	box-sizing:border-box; background:#F9F3E6; 	border-radius:3rem;	overflow:hidden;  opacity:0;}
#msect2 .philosophy_image_wrap {position:relative; width:50%; overflow:hidden; border-radius:2rem; overflow:hidden;}
#msect2 .philosophy_content {width:50%; padding:8rem; box-sizing:border-box; display:flex; flex-direction:column;}
#msect2 .philosophy_title_area {flex-shrink:0; margin-bottom:6rem;}
#msect2 .philosophy_scroll_area {position:relative; flex:1; overflow:hidden;}
#msect2 .philosophy_text_rail {position:absolute; left:0; top:100%; width:100%; display:flex; flex-direction:column; gap:12rem;}
#msect2 .text_block {opacity:.2; will-change:opacity;}
#msect2 .text_block .mimg {display:none;}
#msect2 .text_block .mimg img {max-width:100%;}
#msect2 .text_block h3 {font-size: 50px; color:#193D35;}
#msect2 .text_block p {color:#193D35; font-size: 1.4em; font-weight: 600; margin: 3rem 0;}
#msect2 .text_block a {display:block; width:190px; height:54px; background:url(./image/1/btn.svg)no-repeat 50% 50%/ contain; margin-top:45px;}
#msect2 .text_block .text_body {line-height:1.6; word-break:keep-all; color:#274F31;}
#msect2 .philosophy_img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease;}
#msect2 .philosophy_img.active {opacity:1;}

#msect2 .philosophy_eyebrow {color:var(--main-color2); margin:0 0 1rem 0; font-size: 1.8rem; font-weight: 600; text-transform: uppercase;}
#msect2 .philosophy_main_title {color:#222; font-size:5rem; word-break:keep-all;}
 

/* ===== 1600px 이하 ===== */
@media (max-width: 1600px) {
	#msect2 .philosophy_content { padding: 5rem; }
	#msect2 .philosophy_title_area { margin-bottom: 4rem; }
	#msect2 .philosophy_main_title { font-size: 4rem; }
	#msect2 .text_block h3 { font-size: 2.3em; }
	#msect2 .text_block p { font-size: 1.3em; margin:2rem 0; }
	#msect2 .text_block .text_body {font-size: .95em;}

	#msect2 .philosophy_eyebrow {font-size: .9em; }
	#msect2 .philosophy_main_title {font-size:2.2em;}
	
}

/* ===== 1024px 이하: 좌우 → 상하 스택 ===== */
@media (max-width: 1024px) {
	#msect2 {margin-bottom: 8rem;}
	
	#msect2 .philosophy_sticky {padding: 1rem;}
	#msect2 .philosophy_card {flex-direction: column; padding: 1rem; border-radius: 2rem;}
	#msect2 .philosophy_image_wrap {width: 100%; height: 40%; flex-shrink: 0;}
	#msect2 .philosophy_content {width: 100%; height: 60%; padding: 3rem;}
	#msect2 .philosophy_title_area { margin-bottom: 2.5rem; }
	#msect2 .philosophy_main_title { font-size: 3rem; }
	#msect2 .text_block { gap: unset; }
	#msect2 .text_block .mimg {height:30rem; overflow:hidden; border-radius:1rem;}
	#msect2 .text_block .mimg img {width:100%; height:100%; object-fit:cover;s}
	#msect2 .text_block h3 { font-size: 2.1em; }
	#msect2 .text_block p { font-size: 1.1em; margin:1.5rem 0; }

	#msect2 .philosophy_text_rail { gap: 6rem; }

	#msect2 .philosophy_main_title { font-size: 3rem; }
}

/* ===== 768px 이하: 모바일 - pin 애니메이션 비활성화 ===== */
@media (max-width: 768px) {
	#msect2 {height: auto; margin-bottom: 5rem;}
	#msect2 .philosophy_sticky {height: auto; padding: 0;}
	#msect2 .philosophy_card {height: auto; flex-direction: column; opacity: 1 !important; border-radius: 1.5rem;}
	#msect2 .philosophy_image_wrap {width: 100%; height: 40rem; display:none;}
	#msect2 .philosophy_content {width: 100%; height: auto; padding: 3rem 2rem;}
	#msect2 .philosophy_scroll_area {position: static; overflow: visible;}
	#msect2 .philosophy_text_rail {position: static; gap: 4rem;}
	#msect2 .text_block { opacity: 1 !important; }
	#msect2 .text_block .mimg {display:block; height:20rem; margin: 0 0 2rem 0;}
	#msect2 .text_block h3 { font-size: 1.6em; } 
	#msect2 .text_block .text_body {line-height:1.4}
	#msect2 .philosophy_img { position: static; opacity: 1 !important; height: 100%; }
	#msect2 .philosophy_img:not(:first-child) { display: none; }

	#msect2 .philosophy_main_title { font-size: 2.5rem; }
}


/*------------------------------------
	msect3
------------------------------------*/
#msect3 {position:relative; max-width:192rem; margin:0 auto; padding:0 0 0; overflow:hidden; }
#msect3 .prd_head { display:flex; align-items:flex-end; justify-content:space-between; padding:0 12rem; margin-bottom:6rem; flex-wrap:wrap; gap:4rem; }
#msect3 .stit { display:block; font-size:1.6rem; font-weight:600; color:var(--main-color2); letter-spacing:1px; margin-bottom:2rem; }
#msect3 .tit {font-size:4.5rem; font-weight:700; line-height:1.4; color:#171717; }
#msect3 .tab_wrap { display:flex; align-items:center; gap:2.4rem; }
#msect3 .tab_list { display:flex; align-items:center; gap:.8rem; background:#f4f4f4; border-radius:3rem; padding:.6rem; }
#msect3 .tab_btn { border:none; background:transparent; cursor:pointer; font-size:16px; font-weight:600; color:#9a9a9a; padding:1.4rem 2.4rem; border-radius:2.4rem; 
transition:all .25s ease; white-space:nowrap; }
#msect3 .tab_btn.active { background:#1c3d2e; color:#fff; }
#msect3 .tab_btn:hover:not(.active) { color:#555; }

/* button */
#msect3 .nav_wrap { display:flex; align-items:center; gap:1.2rem; margin-left:1.2rem; }
#msect3 .nav_btn { width:4.4rem; height:4.4rem; border-radius:50%; border:1px solid #dcdcdc; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s ease; }
#msect3 .nav_btn:hover { border-color:#1c3d2e; background:#1c3d2e; }
#msect3 .nav_btn:hover svg path { stroke:#fff; }
#msect3 .nav_btn svg { width:8px; height:14px; }

/* slide */
#msect3 {height:88rem;}
#msect3 .prd_swiper { position:relative; margin:0 auto; z-index:1; padding:4rem 0 0; overflow:visible; }
#msect3 .prd_wrapper { position:relative; width:100%; z-index:1; display:flex; align-items:center; box-sizing:content-box; transition-property:transform; }
#msect3 .prd_swiper .prd_slide { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; width:31.8rem; flex-shrink:0; transform:translate3d(0,0,0); }
#msect3 .thumb_wrap { position:relative; width:31.8rem; height:31.8rem; display:flex; align-items:center; justify-content:center; transition:width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1); }
#msect3 .thumb_dash { position:absolute; top:50%; left:50%; width:0; height:0; border:2px dotted #d8d8d8; border-radius:50%; transform:translate(-50%,-50%); opacity:0; transition:width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1), opacity .45s cubic-bezier(.4,0,.2,1); pointer-events:none; }
#msect3 .thumb_orbit { position:absolute; top:50%; left:50%; width:0; height:0; opacity:0; transition:opacity .3s ease; pointer-events:none; }
#msect3 .orbit_dot { position:absolute; top:-1.1rem; left:22.8rem; width:1.4rem; height:1.4rem; border-radius:50%; background:#036E47; border:4px solid #fff; box-shadow:0 0 8px rgba(0,0,0,0.2); }

@keyframes orbit-spin { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }
#msect3 .thumb_circle { position:relative; width:31.8rem; height:31.8rem; border-radius:50%; overflow:hidden; transition:width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1); 
box-shadow:0 1rem 3rem rgba(0,0,0,.06); }
#msect3 .thumb_circle img { width:100%; height:100%; object-fit:cover; display:block; }
#msect3 .prd_name { margin-top:2.8rem; font-size:2.2rem; font-weight:600; color:#7F7F7F; opacity:.75; transition:all .35s ease; }
#msect3 .prd_cta { margin-top:2rem; display:none; flex-direction:column; align-items:center; gap:2rem; }
#msect3 .prd_name_active { font-size:2.5rem; margin:4rem 0 1rem 0; letter-spacing:-0.025em; font-weight:700; color:#171717; word-break:keep-all;}
#msect3 .btn_more { display:inline-flex; align-items:center; gap:1rem; border:1px solid #dcdcdc; border-radius:3rem; padding:1.4rem 2.6rem; font-size:1.4rem; 
font-weight:700; letter-spacing:.5px; color:#171717; background:#fff; cursor:pointer; transition:all .2s ease; }
#msect3 .btn_more:hover { background:#1c3d2e; color:#fff; border-color:#1c3d2e; }
#msect3 .btn_more .arrow_circle { width:2.4rem; height:2.4rem; border-radius:50%; background:#1c3d2e; display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
#msect3 .btn_more:hover .arrow_circle { background:#fff; }
#msect3 .btn_more .arrow_circle svg path { stroke:#fff; transition:stroke .2s ease; }
#msect3 .btn_more:hover .arrow_circle svg path { stroke:#1c3d2e; }
#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_wrap { width:42.2rem; height:42.2rem; }
#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_circle { width:42.2rem; height:42.2rem; box-shadow:0 2rem 4.5rem rgba(0,0,0,.1); }
#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_dash { width:47rem; height:47rem; opacity:1; }
#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_orbit { width:47rem; height:47rem; opacity:1; animation:orbit-spin 8s linear infinite; }
#msect3 .prd_swiper .prd_slide.prd_slide_active .prd_name { display:none; }
#msect3 .prd_swiper .prd_slide.prd_slide_active .prd_cta { display:flex; width:110%;}

 
@media screen and (max-width: 1600px) {
	#msect3 { }
	#msect3 .prd_head { padding:0 5%; margin-bottom:5rem; gap:3rem;}
	#msect3 .stit {font-size:.9em; margin-bottom:1rem;}
	#msect3 .tit {font-size:4rem; }
	#msect3 .tab_wrap {gap:1rem; }
	#msect3 .tab_list {gap:.8rem; border-radius:3rem; padding:.6rem; }
	#msect3 .tab_btn {font-size:1em; padding:1.2rem 2rem; }

	/* button */
	#msect3 .nav_wrap {gap:1rem;}

	/* slide */
	#msect3 .prd_swiper {padding:3rem 0 0; }
	#msect3 .prd_swiper .prd_slide {width:26rem; }
	#msect3 .thumb_wrap {width:26rem; height:26rem;}
	#msect3 .thumb_circle {width:26rem; height:26rem; }
	#msect3 .prd_name { margin-top:2.2rem; font-size:2rem; }
	#msect3 .prd_cta {gap:1rem;}
	#msect3 .prd_name_active {font-size:2.4rem; margin:3rem 0 1rem 0;}
	#msect3 .btn_more {padding:1.2rem 2.4rem;}
	#msect3 .btn_more .arrow_circle { width:2.4rem; height:2.4rem;}
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_wrap { width:38rem; height:38rem; }
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_circle { width:38rem; height:38rem; }
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_dash { width:42rem; height:42rem; }
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_orbit { width:42rem; height:42rem; } 


}
@media screen and (max-width: 1024px) {
	#msect3 {height:66rem;}
	#msect3 .prd_head {gap:2rem; margin-bottom:4rem;}
	#msect3 .tit {font-size:3rem; }
	#msect3 .tab_wrap {width:100%; justify-content: space-between;}
	#msect3 .tab_list {width:100%;}
	#msect3 .tab_btn {width:25%; font-size: 1.1em; padding:.8rem 2rem;}
	
	/* button */
	#msect3 .nav_wrap {gap:.5rem;}

	/* slide */
	#msect3 .prd_swiper {padding:2rem 0 0; }
	#msect3 .prd_swiper .prd_slide {width:20rem; }
	#msect3 .thumb_wrap {width:20rem; height:20rem;}
	#msect3 .thumb_circle {width:20rem; height:20rem; }
	#msect3 .prd_name { margin-top:2rem; font-size:1.2em; }
	#msect3 .prd_name_active {font-size:1.3em; margin:2rem 0 1rem 0;}
	#msect3 .btn_more {padding:1rem 2.4rem;}
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_wrap { width:28rem; height:28rem; }
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_circle { width:28rem; height:28rem; }
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_dash { width:32rem; height:32rem; }
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_orbit { width:28rem; height:25rem; } 
	#msect3 .orbit_dot {width:.8rem; height:.8rem; border-width:3px; }

}
@media (max-width:768px){
	#msect3 {height:65rem; }
	#msect3 .tit {font-size:2.5rem; }
	#msect3 .prd_head {position:relative; z-index:2;}
	#msect3 .tab_wrap {position:relative;}
	#msect3 .tab_btn { font-size: 1em; padding:.6rem 1rem; }
	
	/* button */
	#msect3 .nav_wrap {position:absolute; top:22rem; left:0; z-index:2; width:100%; display:flex; justify-content: space-between; box-sizing:border-box; margin-left:0; padding:0;}
	#msect3 .nav_btn {width:3rem; height:3rem;}
	#msect3 .nav_btn svg {width:.6rem; height:1.2rem;}

	/* slide */ 
	
	#msect3 .prd_swiper .prd_slide {width:18rem; }
	#msect3 .thumb_wrap {width:18rem; height:18rem;}
	#msect3 .thumb_circle {width:18rem; height:18rem; }
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_wrap { width:25rem; height:25rem; }
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_circle { width:25rem; height:25rem; box-shadow:none;}
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_dash { width:28rem; height:28rem; }
	#msect3 .prd_swiper .prd_slide.prd_slide_active .thumb_orbit { width:25rem; height:17rem; } 
 
}



/*------------------------------------
	msect4
------------------------------------*/
#msect4 {padding: 12rem 0;}
#msect4 .stit {color:var(--main-color2); font-weight: 500; display:block; margin:0 0 1rem 0;}
#msect4 .tit {font-size: 4.5rem; font-weight: 700; line-height: 1.4; color: #171717;}
#msect4 .commu_head {display:flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap;}

#msect4 .commu_wrap{display:flex; gap:8%; margin-top:5rem;}
#msect4 .commu_tab{width:180px; flex-shrink:0;}
#msect4 .commu_tab ul{display:flex; flex-direction:column; gap:2rem;}
#msect4 .commu_tab li a{display:block; color:#b2b2b2; font-size:1.4em; font-weight:500; transition:.3s;}
#msect4 .commu_tab li.on a{color:#111;	font-weight:700;}
#msect4 .commu_list{	flex:1;}
#msect4 .list_box{display:none;}
#msect4 .list_box.on{display:block;}
#msect4 .list_box li{border-top:1px solid #ececec;}
#msect4 .list_box li:last-child{border-bottom:1px solid #ececec;}
#msect4 .list_box li a{	 display:flex; align-items:center;	padding:3rem; gap:2.5rem; transition:.3s;}
#msect4 .cate{width:84px; height:34px; border-radius:3rem; background:#f3f3f3; color:#999; font-size:.75em; font-weight:700; display:flex; align-items:center;
justify-content:center; flex-shrink:0;}
#msect4 .txt{flex:1 1 0; min-width:0;}
#msect4 .txt strong{font-size:1.3em; font-weight:600; color:#111;	line-height:1.3;	margin-bottom:.6rem; transition:.3s; word-break:keep-all;
display:block; overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
#msect4 .txt span{	font-size:.7em;color:#999;}
#msect4 .arrow{font-size:1.7rem; color:#666; transition:.3s; width:3rem; height:1.5rem; background:url(/pages/layout/kor/images/common/ico_arrow.svg)no-repeat 50% 50% / 3rem;}
#msect4 .list_box li:hover .txt strong{color:var(--main-color2); }
#msect4 .list_box li:hover .arrow{ transform:translateX(10px); color:#8bb442;}



@media(max-width:1600px){
	#msect4 {padding: 10rem 0;}
	#msect4 .stit {font-size: .9em;}
	#msect4 .tit {font-size: 4rem;}

	#msect4 .commu_wrap {margin-top:4rem; gap: 3%;}
	#msect4 .list_box li a {padding:2rem;}

	#msect4 .cate {font-size: 1.4rem;}
	#msect4 .txt span {font-size: .9em;}
	
}
@media(max-width:1024px){
	#msect4 {padding: 8rem 0;}
	#msect4 .tit {font-size: 3rem;}

	#msect4 .commu_wrap{flex-direction:column; gap:2rem; margin-top:3rem;}
	#msect4 .commu_tab{width:100%;}
	#msect4 .commu_tab ul{	flex-direction:row; 	flex-wrap:wrap; gap:2rem; }
	#msect4 .commu_tab li a {font-size: 1.2em;}

	#msect4 .list_box li a{gap:1.5rem; padding:2rem 1rem; 	}
	#msect4 .txt strong{font-size:1.4em;}
	
	
	#msect4 .arrow {width:2rem; background-size:2rem;}
	#msect4 .txt span {font-size: 1em;}
}
@media(max-width:768px){
	#msect4 {padding: 6rem 0;}
	#msect4 .tit {font-size: 2.5rem;}
	#msect4 .con_btn {display:none;}

	#msect4 .commu_wrap {margin-top:2rem;}

	#msect4 .list_box li a {padding:1.5rem 1rem;}
	#msect4 .cate {font-size: 1.3rem; width:auto; height:auto; padding:1rem 1.2rem; display:none;}
	#msect4 .txt strong {font-size: 1.15em;}
}