@charset "utf-8";
@import url("common.css");

/*Layer*/
body {
	width: 100%;
}
#wrap {
	width: 100%;
}
#header {
}
#container {
	width: 100%;
}
#contents {
}
#footer {
	width: 100%;
}

/*header*/
.pcbr {
	display: none;
}
.ptbr {
	display: none;
}
.tbbr {
	display: none;
}
.mbbr {
	display: block;
}
.dn {
	display: none;
}

.pc_view {
	display: none;
}
.pt_view {
	display: none;
}
.t_view {
	display: none;
}

/* paging */
.paging {
	margin-top: 100px;
	text-align: center;
}
.paging a {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	font-family: "Pretendard";
	color: #6d6d6d;
	font-size: 13px;
	line-height: 30px;
}
.paging strong {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #252525;
	font-family: "Pretendard";
	color: #fff;
	font-size: 13px;
	line-height: 30px;
	font-weight: 400;
}
.paging .page_prev {
	width: 30px;
	height: 30px;
	background: url(/images/page/page_prev.png) no-repeat center;
	border: 0;
}
.paging .page_next {
	width: 30px;
	height: 30px;
	background: url(/images/page/page_next.png) no-repeat center;
	border: 0;
}

.cateWrap {
	display: flex;
	border-bottom: 2px solid #ccc;
	margin-bottom: 60px;
	overflow-x: auto;
	overflow-y: hidden;
}
.cateWrap li {
	flex-shrink: 0;
}
.cateWrap li a {
	position: relative;
	display: inline-block;
	padding: 0 10px 16px;
	font-family: "Pretendard";
	font-size: var(--fz-18);
	color: #999;
	text-align: center;
}
.cateWrap li.on a {
	color: #000;
	font-weight: 500;
}
.cateWrap li a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #000;
	opacity: 0;
	z-index: 3;
}
.cateWrap li.on a:after {
	opacity: 1;
}

/*pageTop*/
.pageTop {
	position: relative;
	width: 100%;
	height: 100vh;
}
.pageTop.nosubtop {
	display: none;
}
.pageTop .visual {
	width: 100%;
	height: 100%;
}
.pageTop.pn1 .visual {
	background: url(/images/page/subVisual01.jpg) no-repeat center / cover;
}
.pageTop.pn2 .visual {
	background: url(/images/page/subVisual02_m.jpg) no-repeat center / cover;
}
.pageTop.pn3 .visual {
	background: url(/images/page/subVisual03_m.jpg) no-repeat center / cover;
}
.pageTop.pn4 .visual {
	background: url(/images/page/subVisual04_m.jpg) no-repeat center / cover;
}
.pageTop.pn5 .visual {
	background: url(/images/page/subVisual05.jpg) no-repeat center / cover;
}
.pageTop .visual .txts {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}
.pageTop .visual .txts h2 {
	font-size: var(--fz-68);
	font-weight: 600;
	color: #fff;
}
.pageTop .visual .txts p {
	font-size: var(--fz-18);
	font-weight: 600;
	color: #fff;
	margin-top: 32px;
}
.pageTabs {
	position: relative;
	background-color: #e0e0de;
}
.pageTabs.pn2.sn2 {
	display: none;
}
.pageTabs .anchor {
	position: absolute;
	left: 0;
	top: -70px;
}
.pageTabs ul {
	width: 94%;
	max-width: 1800px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 12px;
	padding: 24px 0;
	overflow-x: auto;
}
.pageTabs ul li {
	flex-shrink: 0;
}
.pageTabs ul li a {
	font-size: var(--fz-18);
	font-weight: 600;
	color: #252525;
	display: block;
	padding: 8px 22px;
}
.pageTabs ul li.on a {
	background-color: #252525;
	color: #fff;
	border-radius: 20px;
}
.pageTabs.pn3.sn1 {
	background: #252525;
}
.pageTabs.pn3.sn1 ul li a {
	color: #fff;
}
.pageTabs.pn3.sn1 ul li.on a {
	background-color: #eee;
	color: #0e0e0e;
	border-radius: 20px;
}

/* 00 */
.m00 section {
	background-color: #e0e0de;
}
.m00 section:first-child {
	/* padding-top: 160px; */
}
.m00 .innerwrap {
	position: relative;
	z-index: 2;
	width: 90%;
	height: 100%;
	max-width: 1800px;
	margin: 0 auto;
}
.innerwrap2 {
	position: relative;
	z-index: 2;
	width: 90%;
	max-width: 1520px;
	margin: 0 auto;
}

.m00 .containerTitle {
	font-size: var(--fz-58);
	font-weight: 600;
	color: #252525;
	line-height: 1.4;
}

/* m11 */
.m11 {
}
.m11 section:last-child {
	padding-bottom: 200px;
}
.m11 .section1 {
	padding: 100px 0;
}
.m11 .section1 .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 48px;
	height: 100%;
}
.m11 .section1 .container p {
	font-size: var(--fz-18);
	color: #252525;
	line-height: 1.4;
}
.m11 .section2 {
	width: 100%;
	height: 200vh;
	position: relative;
}
.m11 .section2 .container1 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	clip-path: inset(0% 0 0 0);
}
.m11 .section2 .container2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	clip-path: inset(100% 0px 0px);
}
.m11 .section2 .container1 .containerBg {
	background: url("/images/page/m11_sec2_img1.png") no-repeat center / cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.m11 .section2 .container2 .containerBg {
	background: url("/images/page/m11_sec2_img2.png") no-repeat center / cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.m11 .section2 .content {
	position: relative;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 94%;
	height: 100%;
	max-width: 1800px;
	margin: 0 auto;
}
.m11 .section2 .container .textArea {
	width: 100%;
	color: #fff;
}
.m11 .section2 .container .title {
	font-size: var(--fz-20);
	font-weight: 600;
	display: block;
}
.m11 .section2 .container .subTitle {
	margin: 35px 0;
	font-size: var(--fz-38);
	font-weight: 600;
	display: block;
}
.m11 .section2 .container .text {
	font-size: var(--fz-18);
	color: #fff;
	line-height: 1.4;
}
.m11 .section3 {
	padding: 100px 0;
}
.m11 .section3 .container {
	width: 100%;
	height: 100%;
}
.m11 .section3 .leftContent {
}
.m11 .section3 .textArea {
}
.m11 .section3 .textArea .title {
	font-size: var(--fz-20);
	font-weight: 600;
	display: block;
}
.m11 .section3 .textArea .subTitle {
	margin: 35px 0;
	font-size: var(--fz-38);
	font-weight: 600;
	display: block;
}
.m11 .section3 .textArea .text {
	font-size: var(--fz-18);
	color: #3f3f3f;
	line-height: 1.4;
}
.m11 .section3 .leftContent .thumbBox {
	margin-left: calc(-1 * (100vw - min(94vw, 1800px)) / 2);
	margin-top: 50px;
	max-width: 300px;
	aspect-ratio: 493/344;
}
.m11 .section3 .rightContent {
	margin-top: 50px;
}
.m11 .section3 .rightContent .thumbBox {
	max-width: 886px;
	aspect-ratio: 886/830;
}
.m11 .section3 .thumbBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m11 .section4 {
	text-align: center;
	background-color: #fff;
	padding-top: 200px;
	overflow: hidden;
}
.m11 .section4 .content1 {
	padding-top: 200px;
}
.m11 .section4 .content .contentTitle {
	font-size: var(--fz-38);
	font-weight: 600;
	color: #000;
}
.m11 .section4 .content .SustainabilityList {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 83px 0;
	position: relative;
}
.m11 .section4 .content .SustainabilityList::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -40px;
	width: 1px;
	height: calc(100% + 80px);
	background-color: #252525;
}
.m11 .section4 .content .SustainabilityList .listItem {
	border-radius: 50%;
	aspect-ratio: 1;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8vw;
	background-color: #fff;
	position: relative;
}
.m11 .section4 .content .SustainabilityList .listItem svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.m11 .section4 .content .SustainabilityList .listItem .textBox {
	position: relative;
}

.m11 .section4 .content .SustainabilityList .itemTitle {
	font-size: var(--fz-38);
	font-weight: 600;
	color: #252525;
}
.m11 .section4 .content .SustainabilityList .itemText {
	margin-top: 15px;
	font-size: var(--fz-18);
	color: #3f3f3f;
}
.m11 .section4 .content .contentText {
	font-size: var(--fz-38);
	font-weight: 600;
	color: #313131;
	line-height: 1.4;
}

/* m12 */
.m12 {
}
.m12 .section1 {
	padding: 100px 0;
}
.m12 .contentText1 {
	margin-top: 48px;
}
.m12 .contentText b {
	font-size: var(--fz-24);
	font-weight: 600;
	color: #252525;
	line-height: 1.4;
}
.m12 .contentText p {
	font-size: var(--fz-18);
	color: #3f3f3f;
	line-height: 1.4;
}
.m12 .contentText b + p {
	margin-top: 18px;
}
.m12 .thumbArea {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.m12 .thumbArea .thumb {
	width: 100%;
}
.m12 .thumbArea .thumb img {
	width: 100%;
}
.m12 .contentText2 {
	margin-top: 40px;
	width: 100%;
}
.m12 .contentText2 .ceo {
	font-weight: 600;
	background-color: #e0e0de;
}
.m12 .contentText2 .ceo b {
	font-size: var(--fz-18);
	color: #000;
	display: inline-block;
	margin: 0 35px 0 16px;
}
.m12 .contentText2 .ceo img {
	mix-blend-mode: multiply;
	width: 130px;
}

.m13 {
}
.m13 .section1 {
	padding: 200px 0;
}
.m13 .section1 .titWrap {
	text-align: center;
	padding-bottom: 250px;
}
.m13 .section1 .titWrap h3 {
	font-size: var(--fz-58);
	font-weight: 600;
}
.m13 .section1 .titWrap p {
	font-size: var(--fz-18);
	font-weight: 600;
	line-height: 1.7em;
	margin-top: 50px;
}
.m13 .section1 .conWrap {
	position: relative;
}
.m13 .section1 .conWrap .center {
	position: absolute;
	left: 10px;
	top: 20px;
	width: 1px;
	height: 100%;
	background: #252525;
	z-index: 10;
}
.m13 .section1 .conWrap .center .pen {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 180px;
	height: 491px;
}
.m13 .section1 .conWrap > ul {
	display: flex;
	flex-direction: column;
	gap: 50px;
}
.m13 .section1 .conWrap > ul > li {
	width: 100%;
}
.m13 .section1 .conWrap > ul > li .con {
	position: relative;
	padding-left: 30px;
}
.m13 .section1 .conWrap > ul > li .con:after {
	content: "";
	position: absolute;
	left: 7.5px;
	top: 29px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #252525;
}
.m13 .section1 .conWrap > ul > li .con .year {
	font-size: 40px;
	font-weight: 600;
	margin-bottom: 10px;
}
.m13 .section1 .conWrap > ul > li .con li {
	position: relative;
	font-family: "Pretendard";
	font-size: 13px;
	padding-left: 10px;
}
.m13 .section1 .conWrap > ul > li .con li + li {
	margin-top: 10px;
}
.m13 .section1 .conWrap > ul > li .con li:after {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border: 1px solid #222;
	box-sizing: border-box;
}

.m14 {
}
.m14 .slgWrap {
	padding: 160px 4% 120px;
	width: 100%;
	text-align: center;
	background: #e0e0de;
}
.m14 .slgWrap p {
	font-size: var(--fz-58);
	font-weight: 600;
	color: #252525;
}
.m14 .section1 {
	position: relative;
	width: 100%;
	padding: 0 0 200px;
	background: #dadada;
}
.m14 .section1 .boxWrap {
	margin: 100px auto 0;
	width: 92%;
	padding: 40px 4%;
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(20px);
	z-index: 5;
}
.m14 .section1 .boxWrap .count {
	font-size: var(--fz-24);
	font-weight: 600;
	color: #424242;
	margin-bottom: 40px;
}
.m14 .section1 .boxWrap .count span {
	font-size: var(--fz-68);
	color: #252525;
}
.m14 .section1 .boxWrap ul {
}
.m14 .section1 .boxWrap ul li {
	width: 100%;
}
.m14 .section1 .boxWrap ul li a {
	width: 100%;
	padding: 12px 0;
	border-bottom: 1px solid #3c3c3c;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.m14 .section1 .boxWrap ul li a span {
	font-size: var(--fz-24);
	font-weight: 600;
	color: #949494;
}
.m14 .section1 .boxWrap ul li a .arr {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #3c3c3c;
}
.m14 .section1 .boxWrap ul li a .arr i {
	display: block;
	width: 24px;
	height: 24px;
	background: url(/images/page/m14_arr.png) no-repeat center / contain;
}
.m14 .section1 .boxWrap ul li.on a span {
	color: #252525;
}
.m14 .section1 .boxWrap ul li.on a .arr {
	background: #3c3c3c;
}
.m14 .section1 .boxWrap ul li.on a .arr i {
	background: url(/images/page/m14_arr_wh.png) no-repeat center / contain;
}
.m14 .section1 .mapArea {
	position: relative;
	width: 100%;
	height: 400px;
	padding-top: 30px;
}

.m14 .section1 .mapArea > .backBtn {
	position: absolute;
	right: 30px;
	top: 30px;
	width: 40px;
	height: 40px;
	background: #6b6b6b;
	cursor: pointer;
	z-index: 15;
}
.m14 .section1 .mapArea > .backBtn img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.m14 .section1 .worldMap {
	position: relative;
	width: 100%;
	overflow-x: auto;
}
.m14 .section1 .worldMap > img {
	display: block;
	width: 820px;
	max-width: unset;
	height: 400px;
}
.m14 .section1 .worldMap li {
	position: absolute;
}
.m14 .section1 .worldMap li:nth-child(1) {
	left: 37%;
	top: 34%;
}
.m14 .section1 .worldMap li:nth-child(2) {
	left: 105%;
	top: 29%;
}
.m14 .section1 .worldMap li:nth-child(3) {
	left: 71%;
	top: 64%;
}
.m14 .section1 .worldMap li:nth-child(4) {
	left: 127%;
	top: 45%;
}
.m14 .section1 .worldMap li:nth-child(5) {
	left: 161.5%;
	top: 55%;
}
.m14 .section1 .worldMap li:nth-child(6) {
	left: 91%;
	top: 49%;
}
.m14 .section1 .worldMap li:nth-child(7) {
	left: 180%;
	top: 73%;
}
.m14 .section1 .worldMap li:nth-child(8) {
	left: 176.5%;
	top: 36%;
}

.m14 .section1 .worldMap li a {
	position: relative;
	display: block;
	text-align: center;
}
.m14 .section1 .worldMap li a .point {
	display: block;
	margin: 0 auto;
	width: 20px;
	height: 26px;
	background: url(/images/page/m14_point.png) no-repeat center / contain;
}
.m14 .section1 .worldMap li.on a .point {
	background: url(/images/page/m14_point_hv.png) no-repeat center / contain;
}
.m14 .section1 .worldMap li a span {
	position: absolute;
	left: 50%;
	top: 30px;
	transform: translateX(-50%);
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1em;
}

.m14 .section1 .mapWrap {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* 숨겨진 상태에서 클릭 방지 */
}
.m14 .section1 .mapWrap .map {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 430px;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.4s ease,
		visibility 0.4s ease;
	z-index: 10;
	overflow-x: auto;
}
.m14 .section1 .mapWrap .map.on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.m14 .section1 .mapWrap .map > img {
	width: 820px;
	height: 100%;
	max-width: unset;
	object-fit: cover;
}
.m14 .section1 .mapWrap .map .backBtn {
	position: absolute;
	right: 60px;
	top: 150px;
	width: 70px;
	height: 70px;
	background: #6b6b6b;
	cursor: pointer;
}
.m14 .section1 .mapWrap .map .backBtn img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.m15 {
}
.m15 .section1 {
	padding: 160px 0 80px;
}
.m15 .section1 .tabconWrap {
}
.m15 .section1 .tabconWrap .tabcon {
	display: none;
}
.m15 .section1 .tabconWrap .tabcon.on {
	display: block;
}
.m15 .section1 .tabconWrap .tabcon .top {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.m15 .section1 .tabconWrap .tabcon .top .adr {
	font-size: var(--fz-68);
	font-weight: 600;
}
.m15 .section1 .tabconWrap .tabcon .top .dlWrap {
}
.m15 .section1 .tabconWrap .tabcon .top .dlWrap dl {
}
.m15 .section1 .tabconWrap .tabcon .top .dlWrap dl + dl {
	margin-top: 20px;
}
.m15 .section1 .tabconWrap .tabcon .top .dlWrap dl dt {
	font-size: var(--fz-16);
	font-weight: 600;
}
.m15 .section1 .tabconWrap .tabcon .top .dlWrap dl dd {
	font-size: var(--fz-16);
	color: #3f3f3f;
}
.m15 .section1 .tabconWrap .tabcon .map {
	margin-top: 30px;
	width: 100%;
	height: 400px;
}

.m21 {
}
.m21 .section1 {
	padding: 0 0 200px;
}
.m21 .section1 .titWrap {
	padding: 80px 0;
	text-align: center;
}
.m21 .section1 .titWrap h3 {
	font-size: var(--fz-68);
	font-weight: 600;
}
.m21 .section1 .list {
	display: flex;
	flex-wrap: wrap;
	gap: 50px 30px;
}
.m21 .section1 .list li {
	width: 100%;
}
.m21 .section1 .list li a {
	position: relative;
	display: block;
	width: 100%;
}
.m21 .section1 .list li a:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #3c3c3c;
	box-sizing: border-box;
	opacity: 0;
	transition: all 0.3s;
}
.m21 .section1 .list li a:hover:after {
	opacity: 1;
}
.m21 .section1 .list li a .thumb {
	width: 100%;
	aspect-ratio: 318 / 373;
	overflow: hidden;
}
.m21 .section1 .list li a .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s;
}
.m21 .section1 .list li a:hover .thumb img {
	transform: scale(1.1);
}
.m21 .section1 .list li a .txtWrap {
	position: relative;
	width: 100%;
	padding: 25px;
}
.m21 .section1 .list li a .txtWrap .tit {
	width: calc(100% - 40px);
	font-family: "Pretendard";
	font-size: var(--fz-16);
	line-height: 1.45em;
	color: #6d6d6d;
}
.m21 .section1 .list li a .txtWrap .name {
	width: calc(100% - 40px);
	font-family: "Pretendard";
	font-size: var(--fz-20);
	font-weight: 600;
	line-height: 1.3em;
	margin-top: 5px;
}
.m21 .section1 .list li a .txtWrap .arr {
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	transition: all 0.3s;
}
.m21 .section1 .list li a:hover .txtWrap .arr {
	opacity: 1;
}

.m21_view {
}
.m21_view .section1 {
	padding: 60px 0;
}
.m21_view .section1 .innerwrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.m21_view .section1 .imgWrap {
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
}
.m21_view .section1 .imgWrap .thumbArea {
	position: relative;
	width: 100%;
	padding: 0 30px;
	margin-top: 40px;
}
.m21_view .section1 .imgWrap .thumbArea .thumbSwiper {
	height: 60px;
}
.m21_view .section1 .imgWrap .thumbArea .thumbSwiper .swiper-slide {
	cursor: pointer;
	aspect-ratio: 318 / 373;
	height: 100%;
	width: auto;
}
.m21_view .section1 .imgWrap .thumbArea .thumbSwiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m21_view .section1 .imgWrap .thumbArea .thumbSwiper .swiper-slide-thumb-active:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #3c3c3c;
	box-sizing: border-box;
}
.m21_view .section1 .imgWrap .thumbArea .btn {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border: 1px solid #3c3c3c;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.m21_view .section1 .imgWrap .thumbArea .btn:hover {
	background: #3c3c3c;
}
.m21_view .section1 .imgWrap .thumbArea .btn.vprev {
	right: unset;
	left: 0;
}
.m21_view .section1 .imgWrap .thumbArea .btn.vprev i {
	display: block;
	width: 10px;
	height: 10px;
	background: url(/images/page/m21_view_arr_up.png) no-repeat center / contain;
	transform: rotate(-90deg);
}
.m21_view .section1 .imgWrap .thumbArea .btn.vprev:hover i {
	background: url(/images/page/m21_view_arr_up_wh.png) no-repeat center / contain;
}
.m21_view .section1 .imgWrap .thumbArea .btn.vnext {
	bottom: 0;
}
.m21_view .section1 .imgWrap .thumbArea .btn.vnext i {
	display: block;
	width: 10px;
	height: 10px;
	background: url(/images/page/m21_view_arr_down.png) no-repeat center / contain;
	transform: rotate(-90deg);
}
.m21_view .section1 .imgWrap .thumbArea .btn.vnext:hover i {
	background: url(/images/page/m21_view_arr_down_wh.png) no-repeat center / contain;
}
.m21_view .section1 .imgWrap .mainArea {
	width: 100%;
	aspect-ratio: 318 / 373;
}
.m21_view .section1 .imgWrap .mainArea .mainSwiper {
	width: 100%;
	height: 100%;
}
.m21_view .section1 .imgWrap .mainArea .mainSwiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m21_view .section1 .infoWrap {
	width: 100%;
	margin-top: 40px;
}
.m21_view .section1 .infoWrap .titWrap {
	margin-bottom: 50px;
}
.m21_view .section1 .infoWrap .titWrap .subTit {
	font-family: "Pretendard";
	font-size: var(--fz-18);
	color: #6d6d6d;
}
.m21_view .section1 .infoWrap .titWrap .name {
	font-family: "Pretendard";
	font-size: var(--fz-38);
	font-weight: 600;
	margin: 5px 0 20px;
}
.m21_view .section1 .infoWrap .titWrap .price {
	font-size: var(--fz-24);
	font-weight: 600;
	color: #6d6d6d;
}
.m21_view .section1 .infoWrap h4 {
	font-family: "Pretendard";
	font-size: var(--fz-18);
	font-weight: 600;
	margin-bottom: 10px;
}
.m21_view .section1 .infoWrap .feature {
	padding: 20px 0;
	border-top: 1px solid #b5b5b5;
	border-bottom: 1px solid #b5b5b5;
}
.m21_view .section1 .infoWrap .feature .con {
	font-family: "Pretendard";
	font-size: var(--fz-18);
	line-height: 1.7em;
}
.m21_view .section1 .infoWrap .color {
	margin: 30px 0;
}
.m21_view .section1 .infoWrap .color .list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.m21_view .section1 .infoWrap .color .list li {
	display: block;
	width: calc((100% - 55px) / 12);
	aspect-ratio: 1;
}
.m21_view .section1 .infoWrap .spec {
}
.m21_view .section1 .infoWrap .spec ul {
	width: 100%;
	height: 100%;
}
.m21_view .section1 .infoWrap .spec li {
	width: 100%;
	height: 60px;
	padding: 10px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #b5b5b5;
}
.m21_view .section1 .infoWrap .spec li:last-child {
	border-bottom: 1px solid #b5b5b5;
}
.m21_view .section1 .infoWrap .spec li .txts {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding-right: 10px;
}
.m21_view .section1 .infoWrap .spec li .txts .size {
	font-family: "Pretendard";
	width: 70px;
	font-size: var(--fz-18);
	font-weight: 600;
	color: #6d6d6d;
}
.m21_view .section1 .infoWrap .spec li .txts .figure {
	font-family: "Pretendard";
	width: calc(100% - 70px);
	font-size: var(--fz-18);
	color: #6d6d6d;
}
.m21_view .section1 .infoWrap .spec li .penImg {
	flex-shrink: 1;
	height: 100%;
	display: flex;
	align-items: center;
}
.m21_view .section1 .infoWrap .spec li .penImg img {
	max-height: 100%;
}
.m21_view .section1 .infoWrap .linkBtn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: 8px 25px;
	margin-top: 60px;
	border-radius: 100px;
	border: 1px solid #3c3c3c;
	transition: all 0.3s;
}
.m21_view .section1 .infoWrap .linkBtn span {
	font-family: "Pretendard";
	font-size: 18px;
	font-weight: 600;
}
.m21_view .section1 .infoWrap .linkBtn i {
	display: block;
	width: 24px;
	height: 24px;
	background: url(/images/main/link_arr.png) no-repeat center / contain;
}
.m21_view .section1 .infoWrap .linkBtn:hover {
	background: #3c3c3c;
}
.m21_view .section1 .infoWrap .linkBtn:hover span {
	color: #fff;
}
.m21_view .section1 .infoWrap .linkBtn:hover i {
	background: url(/images/main/link_arr_wh.png) no-repeat center / contain;
}
.m21_view .section2 {
	padding: 60px 0 200px;
	background: #fff;
}
.m21_view .section2 .tit {
	font-family: "Pretendard";
	font-size: var(--fz-38);
	font-weight: 600;
	color: #252525;
	text-align: center;
	padding-bottom: 60px;
	border-bottom: 1px solid #ccc;
}
.m21_view .section2 .con {
	padding-top: 80px;
	text-align: center;
}

.m22 {
}

#canvas-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 1;
}
.m22 canvas {
	display: block;
}
.m22 .brandLogo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 92%;
}
.m22 .brandLogo img {
	transform: scale(0.7);
	transform-origin: center;
}
.m22 .brandLogo .link {
	display: flex;
	gap: 10px;
	padding: 8px 24px;
	margin: 40px auto 0;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(20px);
	border: 1px solid #3c3c3c;
	width: fit-content;
}
.m22 .brandLogo .link span {
	font-size: var(--fz-18);
	font-weight: 600;
}
.m22 .brandLogo .link i {
	display: block;
	width: 24px;
	height: 24px;
	background: url(/images/page/m41_view_arr.png) no-repeat center / cover;
}
#scroll-spacer {
	height: 400vh; /* pin 영역 + 섹션이 올라올 공간 */
	position: relative;
}

.m22 .section {
	position: relative;
	z-index: 10;
}
.m22 .section1 {
	width: 100%;
	height: 100vh;
}
.m22 .section1 .slg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	text-align: center;
	font-size: var(--fz-58);
	font-weight: 600;
	line-height: 1.5em;
}

.m22 .section2 {
	width: 100%;
	height: 100vh;
	background: #e0e0de;
}
.m22 .section2 .innerwrap {
	height: 100%;
}
.m22 .section2 .innerwrap .conWrap {
	height: 100%;
	padding: 140px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.m22 .section2 .innerwrap .conWrap .imgWrap {
	position: relative;
	width: 100%;
	height: calc(100% - 100px);
}
.m22 .section2 .innerwrap .conWrap .imgWrap .img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	opacity: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}
.m22 .section2 .innerwrap .conWrap .imgWrap .img.on {
	opacity: 1;
}
.m22 .section2 .innerwrap .conWrap .imgWrap .img img {
	width: 100%;
	max-height: 100%;
}
.m22 .section2 .innerwrap .conWrap .tabWrap {
	width: 100%;
	height: 100px;
	display: flex;
	align-items: flex-end;
	border-bottom: 2px solid #ccc;
	overflow: hidden;
	overflow-x: auto;
	padding-bottom: 10px;
}
.m22 .section2 .innerwrap .conWrap .tabWrap li {
	flex-shrink: 0;
}
.m22 .section2 .innerwrap .conWrap .tabWrap li a {
	position: relative;
	display: inline-block;
	padding: 0 10px 16px;
	font-family: "Pretendard";
	font-size: var(--fz-18);
	color: #999;
	text-align: center;
}
.m22 .section2 .innerwrap .conWrap .tabWrap li.on a {
	color: #000;
}
.m22 .section2 .innerwrap .conWrap .tabWrap li a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 3px;
	background: #000;
	opacity: 0;
}
.m22 .section2 .innerwrap .conWrap .tabWrap li.on a:after {
	opacity: 1;
}

.m22 .section3 {
	padding: 100px 0;
	background: #fff;
}
.m22 .section3 .logo {
	text-align: center;
	margin-bottom: 50px;
	transform: scale(0.7);
	transform-origin: center;
}
.m22 .section3 .product {
	padding-bottom: 70px;
}
.m22 .section3 .product .swiper-slide {
	display: block;
	width: 320px;
}
.m22 .section3 .product .swiper-slide:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #3c3c3c;
	box-sizing: border-box;
	opacity: 0;
	transition: all 0.3s;
}
.m22 .section3 .product .swiper-slide:hover:after {
	opacity: 1;
}
.m22 .section3 .product .swiper-slide .thumb {
	width: 100%;
	aspect-ratio: 320 / 375;
	overflow: hidden;
}
.m22 .section3 .product .swiper-slide .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s;
}
.m22 .section3 .product .swiper-slide:hover .thumb img {
	transform: scale(1.05);
}
.m22 .section3 .product .swiper-slide .txtWrap {
	position: relative;
	width: 100%;
	padding: 25px;
}
.m22 .section3 .product .swiper-slide .txtWrap .tit {
	width: calc(100% - 40px);
	font-family: "Pretendard";
	font-size: var(--fz-16);
	line-height: 1.45em;
	color: #6d6d6d;
}
.m22 .section3 .product .swiper-slide .txtWrap .name {
	width: calc(100% - 40px);
	font-family: "Pretendard";
	font-size: var(--fz-20);
	font-weight: 600;
	line-height: 1.3em;
	margin-top: 5px;
}
.m22 .section3 .product .swiper-slide .txtWrap .arr {
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	transition: all 0.3s;
}
.m22 .section3 .product .swiper-slide:hover .txtWrap .arr {
	opacity: 1;
}
.m22 .section3 .product .ctr {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.m22 .section3 .product .ctr .swiper-scrollbar {
	width: calc(100% - 20px - 75px);
	margin-right: 20px;
	position: static;
	height: 2px;
	display: block !important;
}
.m22 .section3 .product .ctr .btns {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	width: 75px;
}
.m22 .section3 .product .ctr .btns > div {
	position: static;
	width: 36px;
	height: 36px;
	cursor: pointer;
}
.m22 .section3 .product .ctr .btns .vprev {
	background: url(/images/main/sec7_prev.png) no-repeat center / contain;
}
.m22 .section3 .product .ctr .btns .vnext {
	background: url(/images/main/sec7_next.png) no-repeat center / contain;
}

.m22 .section4 {
	width: 100%;
	padding: 100px 0;
}
.m22 .section4 .tit {
	font-size: var(--fz-68);
	font-weight: 600;
	text-align: center;
	margin-bottom: 60px;
}
.m22 .section4 .conWrap {
	display: flex;
	flex-direction: column;
	height: calc(100% - 200px);
}
.m22 .section4 .conWrap .conSize {
	width: 100%;
}
.m22 .section4 .conWrap .conNib {
	width: 100%;
	margin-top: 60px;
}

.m22 .section4 .conWrap .con .exp {
	font-size: var(--fz-20);
	font-weight: 600;
	margin-bottom: 20px;
}
.m22 .section4 .conWrap .conSize ul {
	width: 100%;
	height: 300px;
	padding-right: 30px;
	overflow-y: auto;
}
.m22 .section4 .conWrap .con li {
	width: 100%;
	height: 60px;
	padding: 15px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #3c3c3c;
}
.m22 .section4 .conWrap .con li:last-child {
	border-top: 1px solid #3c3c3c;
}
.m22 .section4 .conWrap .conSize .spec {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding-right: 20px;
}
.m22 .section4 .conWrap .conSize .spec .size {
	width: 50px;
	font-size: 14px;
	font-weight: 600;
	color: #424242;
}
.m22 .section4 .conWrap .conSize .spec .figure {
	width: calc(100% - 50px);
	font-size: 14px;
	color: #6d6d6d;
}
.m22 .section4 .conWrap .conNib ul {
	width: 100%;
	height: 300px;
	padding-right: 30px;
	overflow-y: auto;
}
.m22 .section4 .conWrap .conNib li .type {
	font-size: 14px;
	font-weight: 600;
	color: #424242;
	padding-right: 20px;
	flex-shrink: 0;
}

.m22 .section4 .conWrap .con .penImg {
	flex-shrink: 1;
	height: 100%;
	display: flex;
	align-items: center;
}
.m22 .section4 .conWrap .con .penImg img {
	max-height: 100%;
}
.m22 .section4 .conWrap .con ul::-webkit-scrollbar {
	width: 4px;
}
.m22 .section4 .conWrap .con ul::-webkit-scrollbar-track {
	background-color: #b5b5b5;
}
.m22 .section4 .conWrap .con ul::-webkit-scrollbar-thumb {
	background-color: #3c3c3c;
}

.m22 .section5 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.m22 .section5 video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m22 .section5 .slg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	text-align: center;
	font-size: var(--fz-68);
	font-weight: 600;
	color: #fff;
}
.m22 .section6 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.m22 .section6 .conWrap {
	width: 92%;
}
.m22 .section6 .conWrap .logo {
}
.m22 .section6 .conWrap .logo img {
	transform: scale(0.7);
	transform-origin: center;
}
.m22 .section6 .conWrap .slg {
	font-size: var(--fz-68);
	font-weight: 600;
	margin: 20px 0 50px;
}
.m22 .section6 .conWrap .exp {
	font-size: var(--fz-30);
	font-weight: 600;
	line-height: 1.3em;
}
.m22 .section6 .conWrap .mainImg {
	margin-top: 120px;
}

.m31 {
}
.m31 .section1 {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #252525;
}
.m31 .section1 .txts {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 92%;
	text-align: center;
}
.m31 .section1 .txts h3 {
	font-size: var(--fz-58);
	font-weight: 600;
	color: #fff;
}
.m31 .section1 .txts p {
	font-size: var(--fz-18);
	line-height: 1.7em;
	color: #fff;
	margin-top: 45px;
}
.m31 .section2 {
	position: relative;
	z-index: 10;
}
.m31 .section2 .conWrap {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.m31 .section2 .conWrap .txtWrap {
	width: 100%;
	padding: 100px 4%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.m31 .section2 .conWrap .txtWrap p {
	font-size: var(--fz-38);
	font-weight: 600;
	color: #252525;
	text-align: center;
}
.m31 .section2 .conWrap .imgWrap {
	width: 100%;
	padding: 100px 4%;
	background: #fff;
	display: flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.m31 .section2 .conWrap .imgWrap .img {
	width: 100%;
}
.m31 .section2 .conWrap .imgWrap .img img {
	width: 100%;
}
.m31 .section2 .conWrap .imgWrap p {
	width: 100%;
	margin-top: 50px;
	font-size: var(--fz-18);
	line-height: 1.7em;
	color: #3f3f3f;
}

.m32 {
}
.m32 .section1 {
	padding: 0 !important;
}
.m32 .section1 .txts {
	padding: 60px 0;
	text-align: center;
}
.m32 .section1 .txts h3 {
	font-size: var(--fz-58);
	font-weight: 600;
	color: #252525;
}
.m32 .section2 {
	padding: 0 0 200px;
}
.m32 .section2 .conWrap {
	display: flex;
	flex-direction: column;
}
.m32 .section2 .conWrap + .conWrap {
	margin-top: 60px;
}
.m32 .section2 .conWrap .imgWrap {
	position: relative;
	width: 100%;
	height: 100%;
}
.m32 .section2 .conWrap .imgWrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m32 .section2 .conWrap .txtWrap {
	width: 100%;
	margin-top: 50px;
}
.m32 .section2 .conWrap .txtWrap .tit {
	font-size: var(--fz-68);
	font-weight: 600;
}
.m32 .section2 .conWrap .txtWrap p {
	width: 100%;
	margin-top: 50px;
	font-size: var(--fz-18);
	line-height: 1.7em;
	color: #3f3f3f;
}

.m32 .section3 {
	padding: 160px 0 180px;
	background: #fff;
}
.m32 .section3 .titWrap {
}
.m32 .section3 .titWrap h3 {
	font-size: var(--fz-58);
	font-weight: 600;
}
.m32 .section3 .titWrap p {
	margin-top: 50px;
	font-size: var(--fz-24);
	line-height: 1.7em;
	color: #3f3f3f;
}
.m32 .section3 ul {
	margin: 40px 0;
	display: flex;
	flex-wrap: wrap;
}
.m32 .section3 li {
	width: 100%;
	padding: 20px;
	border-top: 1px solid #ccc;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.m32 .section3 li.blank {
	display: none;
}
.m32 .section3 li:last-child {
	border-bottom: 1px solid #ccc;
}
.m32 .section3 li .top {
	display: flex;
	justify-content: space-between;
}
.m32 .section3 li .top span {
	font-size: var(--fz-18);
	color: #3f3f3f;
}
.m32 .section3 li p {
	font-size: var(--fz-30);
	font-weight: 600;
	line-height: 1.5em;
	margin-top: 50px;
}
.m32 .section3 .slg {
	font-size: var(--fz-24);
	line-height: 1.7em;
	color: #3f3f3f;
}

.m33 {
}
.m33 .section1 {
	padding: 0 !important;
}
.m33 .section1 .txts {
	padding: 150px 0;
	text-align: center;
}
.m33 .section1 .txts h3 {
	font-size: var(--fz-58);
	font-weight: 600;
	color: #252525;
}
.m33 .section1 .txts p {
	margin-top: 50px;
	font-size: var(--fz-18);
	line-height: 1.7em;
}

.m33 .section2 {
	position: relative;
	padding: 150px 0;
}
.m33 .section2 .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/images/page/m33_sec2_bg_m.jpg) no-repeat center / cover;
}
.m33 .section2 .conTit {
	font-size: var(--fz-38);
	font-weight: 600;
	color: #fff;
	margin-bottom: 80px;
}
.m33 .section2 .boxWrap {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.m33 .section2 .boxWrap .box {
	width: 100%;
	padding: 30px;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(20px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.m33 .section2 .boxWrap .box .numArea {
}
.m33 .section2 .boxWrap .box .numArea .num {
	font-size: var(--fz-88);
	font-weight: 600;
	color: #fff;
	line-height: 0.9em;
}
.m33 .section2 .boxWrap .box .numArea span {
	font-size: var(--fz-24);
	font-weight: 600;
	color: #fff;
}
.m33 .section2 .boxWrap .box .tit {
	padding-top: 15px;
	margin-top: 40px;
	border-top: 1px solid #fff;
	font-size: var(--fz-24);
	color: #fff;
}
.m33 .section2 .boxWrap .box .plus {
	position: absolute;
	right: 30px;
	top: 30px;
	width: 30px;
	height: 30px;
}
.m33 .section2 .boxWrap .box .plus:before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 4px;
	background: #fff;
}
.m33 .section2 .boxWrap .box .plus:after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	width: 100%;
	height: 4px;
	background: #fff;
}
.m33 .section3 {
	padding: 150px 0 210px;
}
.m33 .section3 .conWrap {
	padding: 60px 0 160px;
	border-top: 1px solid #000;
	display: flex;
	flex-direction: column;
}
.m33 .section3 .conWrap .conTit {
	width: 100%;
	font-size: var(--fz-38);
	font-weight: 600;
	margin-bottom: 50px;
}
.m33 .section3 .conWrap .con {
	width: 100%;
}
.m33 .section3 .conWrap .con .imgWrap {
}
.m33 .section3 .conWrap .con .imgWrap + .imgWrap {
	margin-top: 40px;
}
.m33 .section3 .conWrap .con .imgWrap .img {
	width: 100%;
	height: 300px;
}
.m33 .section3 .conWrap .con .imgWrap .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m33 .section3 .conWrap .con .imgWrap p {
	font-size: var(--fz-24);
	line-height: 1.7em;
	margin-top: 15px;
}

.m33 .section3 .patent {
	display: flex;
	gap: 30px;
	padding-bottom: 10px;
	overflow-x: auto;
}
.m33 .section3 .patent li {
	position: relative;
	width: 316px;
	flex-shrink: 0;
}
.m33 .section3 .patent li .img {
	width: 100%;
	height: 100%;
}
.m33 .section3 .patent li .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m33 .section3 .patent li .hov {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(20px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	opacity: 0;
	transition: all 0.4s;
	cursor: pointer;
}
.m33 .section3 .patent li:hover .hov {
	opacity: 1;
}
.m33 .section3 .patent li .hov p {
	font-size: var(--fz-24);
	font-weight: 600;
	line-height: 1.7em;
	color: #fff;
}
.m33 .section3 .patent li .hov .btn {
	display: inline-flex;
	gap: 5px;
	padding: 8px 25px;
	border-radius: 50px;
	border: 1px solid #e4e4e4;
	margin-top: 20px;
}
.m33 .section3 .patent li .hov .btn span {
	font-size: var(--fz-18);
	font-weight: 600;
	color: #fff;
}
.m33 .section3 .patent li .hov .btn i {
	display: block;
	width: 24px;
	height: 24px;
	background: url(/images/page/m33_sec3_arr.png) no-repeat center / cover;
}

.bbs {
}
.bbs .section1 {
	padding: 0 0 200px !important;
}
.bbs .section1 .titWrap .sns {
	padding-top: 50px;
	display: flex;
	justify-content: flex-end;
	gap: 25px;
}
.bbs .section1 .titWrap h3 {
	padding: 70px 0;
	text-align: center;
	font-size: var(--fz-68);
	font-weight: 600;
}
.bbs .section1 .list {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}
.bbs .section1 .list li {
	width: 100%;
}
.bbs .section1 .list li a {
	display: block;
	width: 100%;
}
.bbs .section1 .list li a .thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.bbs .section1 .list li a .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s;
}
.bbs .section1 .list li a:hover .thumb img {
	transform: scale(1.1);
}
.bbs .section1 .list li a .txts {
	margin-top: 20px;
}
.bbs .section1 .list li a .txts .tit {
	font-family: "Pretendard";
	font-size: var(--fz-24);
	font-weight: 600;
	line-height: 1.3em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bbs .section1 .list li a .txts .con {
	font-family: "Pretendard";
	font-size: var(--fz-18);
	line-height: 1.45em;
	height: 2.9em;
	color: #313131;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 14px 0;
}
.bbs .section1 .list li a .txts .date {
	font-size: var(--fz-17);
	color: #6d6d6d;
}

.bbs_view {
}
.bbs_view .section1 {
	padding: 0 0 200px !important;
}
.bbs_view .section1 > .innerwrap > .titWrap .sns {
	padding-top: 50px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
.bbs_view .section1 > .innerwrap > .titWrap h3 {
	padding: 70px 0;
	text-align: center;
	font-size: var(--fz-68);
	font-weight: 600;
}
.bbs_view .section1 .conWrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.bbs_view .section1 .conWrap .titWrap {
	width: 100%;
	padding: 40px 0;
	border-bottom: 1px solid #ccc;
}
.bbs_view .section1 .conWrap .titWrap .tit {
	font-family: "Pretendard";
	font-size: var(--fz-38);
	font-weight: 600;
	line-height: 1.4em;
}
.bbs_view .section1 .conWrap .titWrap .date {
	margin-top: 30px;
	font-size: var(--fz-18);
	color: #6d6d6d;
}
.bbs_view .section1 .conWrap .con {
	width: 100%;
	padding-top: 50px;
}
.bbs_view .section1 .conWrap .con .fileWrap {
	margin-top: 100px;
}
.bbs_view .section1 .conWrap .con .fileWrap .file {
	padding: 30px 15px;
	border-top: 1px solid #b5b5b5;
	display: flex;
}
.bbs_view .section1 .conWrap .con .fileWrap .file:last-child {
	border-bottom: 1px solid #b5b5b5;
}
.bbs_view .section1 .conWrap .con .fileWrap .file dt {
	font-family: "Pretendard";
	font-size: var(--fz-20);
	font-weight: 600;
	width: 75px;
}
.bbs_view .section1 .conWrap .con .fileWrap .file dd {
	width: calc(100% - 75px);
}
.bbs_view .section1 .conWrap .con .fileWrap .file dd img {
	margin-right: 7px;
}
.bbs_view .section1 .conWrap .con .fileWrap .file dd a {
	font-family: "Pretendard";
	font-size: var(--fz-18);
	color: #666666;
}

.bbs_view .section1 .listBtn {
	margin-top: 60px;
	text-align: center;
}
.bbs_view .section1 .listBtn a {
	display: inline-flex;
	gap: 5px;
	padding: 8px 25px;
	border-radius: 50px;
	border: 1px solid #3c3c3c;
}
.bbs_view .section1 .listBtn a span {
	font-size: var(--fz-18);
	font-weight: 600;
}
.bbs_view .section1 .listBtn a i {
	display: block;
	width: 24px;
	height: 24px;
	background: url(/images/page/m41_view_arr.png) no-repeat center / cover;
}

/* m51 */
.m51 {
}
.m51 .section1 {
	padding: 200px 0 100px;
}
.m51 .section1 .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 48px;
	height: 100%;
}

.m51Tabs {
	display: flex;
	width: 100%;
	margin-top: 50px;
	box-shadow: 0 -2px 0 #ccc inset;
}
.m51Tabs li {
}
.m51Tabs li a {
	display: block;
	padding: 0 20px 16px;
	font-family: Pretendard;
	font-size: var(--fz-18);
	color: #999;
}
.m51Tabs li.on a {
	font-weight: 600;
	color: #252525;
	border-bottom: 3px solid #000;
}
.m51 .titleArea {
	padding: 60px 0;
	text-align: center;
}
.m51 .titleArea h5 {
	font-family: Pretendard;
	font-size: var(--fz-38);
	color: #252525;
	font-weight: 600;
	line-height: 1.5em;
}
.m51 .titleArea h5 + p {
	margin-top: 24px;
	font-family: Pretendard;
	font-size: var(--fz-18);
	color: #6d6d6d;
}
.m51 .conArea {
	width: 100%;
}
.m51 .conArea.tab1 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.m51 .conArea.tab1 dl {
	flex: 1;
	box-sizing: border-box;
	padding: 60px 0 0 20px;
	border-left: 1px solid #ccc;
	text-align: left;
}
.m51 .conArea.tab1 dl:nth-child(1) {
	background: url(/images/page/m51_t1_icon1.png) no-repeat 40px top / 40px;
}
.m51 .conArea.tab1 dl:nth-child(2) {
	background: url(/images/page/m51_t1_icon2.png) no-repeat 40px top / 40px;
}
.m51 .conArea.tab1 dl:nth-child(3) {
	background: url(/images/page/m51_t1_icon3.png) no-repeat 40px top / 40px;
}
.m51 .conArea.tab1 dl dt {
	font-family: "pretendard";
	font-size: var(--fz-30);
	color: #252525;
	font-weight: 500;
}
.m51 .conArea.tab1 dl dd {
	margin-top: 15px;
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #6d6d6d;
	line-height: 1.65em;
}

.m51 .conArea.tab2 {
	display: flex;
	flex-direction: column;
	padding: 24px 0;
	border-top: 1px solid #b5b5b5;
	text-align: left;
}
.m51 .conArea.tab2 > h6 {
	width: 100%;
	margin-bottom: 30px;
	font-family: "pretendard";
	font-size: var(--fz-30);
	color: #252525;
	font-weight: 500;
}
.m51 .conArea.tab2 > div {
	width: 100%;
}
.m51 .conArea.tab2 > div dl {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid #b5b5b5;
}
.m51 .conArea.tab2 > div dl dt {
	width: 100%;
	font-family: "pretendard";
	font-size: var(--fz-20);
	color: #252525;
	font-weight: 600;
}
.m51 .conArea.tab2 > div dl dd {
	width: 100%;
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #313131;
	line-height: 160%;
}

.m51 .conArea.tab3 {
}
.m51 .conArea.tab3 .faq {
	display: flex;
	flex-direction: column;
	gap: 15px;
	text-align: left;
}
.m51 .conArea.tab3 .faq .question {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 20px;
	border: 1px solid #666;
	cursor: pointer;
}
.m51 .conArea.tab3 .faq .question.active {
	background: #252525;
}
.m51 .conArea.tab3 .faq .question .tit {
	width: 80%;
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #252525;
	line-height: 140%;
	font-weight: 500;
}
.m51 .conArea.tab3 .faq .question.active .tit {
	color: #fff;
}
.m51 .conArea.tab3 .faq .question .arr {
	position: relative;
	width: 20px;
	height: 20px;
}
.m51 .conArea.tab3 .faq .question .arr:before {
	display: block;
	content: "";
	width: 100%;
	height: 2px;
	background: #666;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.m51 .conArea.tab3 .faq .question .arr:after {
	display: block;
	content: "";
	width: 2px;
	height: 100%;
	background: #666;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}
.m51 .conArea.tab3 .faq .question.active .arr:after {
	opacity: 0;
}
.m51 .conArea.tab3 .faq .question .answer {
	display: none;
	width: 100%;
	padding-top: 36px;
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #666;
	line-height: 160%;
}
.m51 .conArea.tab3 .faq .question.active .answer {
	color: #fff;
}

.m51 .section2 {
	padding: 120px 0;
	background: #fff;
}
.m51 .section2 h4 {
}
.m51 .section2 h4 + p {
	margin-top: 20px;
	font-family: "pretendard";
	font-size: var(--fz-20);
	color: #6d6d6d;
}
.m51 .section2 .formWrap {
	display: flex;
	flex-direction: column;
	margin-top: 80px;
}
.m51 .section2 .formWrap > div {
	width: 100%;
}
.m51 .section2 .formWrap > div + div {
	margin-top: 40px;
}
.m51 .section2 .req {
	color: #d71249;
}
.m51 .section2 .formWrap dl {
	margin-bottom: 40px;
}
.m51 .section2 .formWrap dl:last-child {
	margin: 0;
}
.m51 .section2 .formWrap dl dt {
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #313131;
	font-weight: 600;
}
.m51 .section2 .formWrap dl dd {
}
.m51 .section2 .formWrap dl dd input::placeholder {
	color: #999;
}
.m51 .section2 .formWrap dl dd input[type="text"],
.m51 .section2 .formWrap dl dd input[type="tel"],
.m51 .section2 .formWrap dl dd input[type="email"],
.m51 .section2 .formWrap dl dd input[type="date"] {
	width: 100%;
	height: 50px;
	border: 0;
	outline: 0;
	padding: 0 14px;
	border-bottom: 1px solid #666;
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #313131;
}
.m51 .section2 .formWrap dl dd .radio {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding: 24px 0 0;
}
.m51 .section2 .formWrap dl dd .radio input {
	display: none;
}
.m51 .section2 .formWrap dl dd .radio input + label {
	position: relative;
	padding-left: 28px;
	font-family: "pretendard";
	font-size: var(--fz-16);
	color: #313131;
}
.m51 .section2 .formWrap dl dd .radio input + label:before {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: -2px;
	width: 18px;
	height: 18px;
	border: 1px solid #b5b5b5;
	border-radius: 50%;
}
.m51 .section2 .formWrap dl dd .radio input + label:after {
	display: block;
	content: "";
	position: absolute;
	left: 5px;
	top: 3px;
	width: 10px;
	height: 10px;
	background: #b5b5b5;
	border-radius: 50%;
	opacity: 0;
}
.m51 .section2 .formWrap dl dd .radio input:checked + label:after {
	opacity: 1;
}
.m51 .section2 .formWrap dl dd .tip {
	margin-top: 16px;
	font-family: "pretendard";
	font-size: var(--fz-16);
	color: #6d6d6d;
}
.m51 .section2 .formWrap dl dd textarea {
	width: 100%;
	height: 240px;
	border: 0;
	outline: 0;
	resize: none;
	padding: 15px 20px;
	margin-top: 16px;
	border: 1px solid #b5b5b5;
	background: #f9f9f9;
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #313131;
}

.filebox {
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
}
.filebox input[type="file"] {
	display: none;
}
.filebox .upload-name {
	width: calc(100% - 100px - 10px);
	height: 50px;
	padding: 0 14px;
	border: 1px solid #b5b5b5;
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #313131;
	background: #f9f9f9;
}
.filebox label {
	width: 100px;
	height: 50px;
	background: #252525;
	font-family: "pretendard";
	font-size: var(--fz-16);
	color: #fff;
	text-align: center;
	line-height: 50px;
}
.agreeWrap {
	margin: 80px 0 0;
}
.agreeWrap .tit {
	font-family: "pretendard";
	font-size: var(--fz-24);
	color: #313131;
	font-weight: 500;
}
.agreeWrap .textArea {
	margin: 20px 0 0;
	padding: 30px;
	background: #f9f9f9;
}
.agreeWrap .textArea .inner {
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #313131;
	line-height: 165%;
	white-space: pre-line;
}
.agreeWrap .agree {
	margin-top: 24px;
}
.agreeWrap .agree input {
	display: none;
}
.agreeWrap .agree input + label {
	position: relative;
	padding-left: 28px;
	font-family: "pretendard";
	font-size: var(--fz-20);
	color: #313131;
}
.agreeWrap .agree input + label:before {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	border: 1px solid #b5b5b5;
	border-radius: 50%;
}
.agreeWrap .agree input + label:after {
	display: block;
	content: "";
	position: absolute;
	left: 5px;
	top: 5.5px;
	width: 10px;
	height: 10px;
	background: #000;
	border-radius: 50%;
	opacity: 0;
}
.agreeWrap .agree input:checked + label:after {
	opacity: 1;
}
.agreeWrap .agree .msg {
	margin-top: 10px;
	font-family: "pretendard";
	font-size: var(--fz-15);
	color: #6d6d6d;
}

.m51 .section2 button {
	display: block;
	width: 180px;
	height: 49px;
	margin: 80px auto 0;
	border-radius: 65px;
	background: #252525;
	border: 0;
	outline: 0;
	font-family: "pretendard";
	font-size: var(--fz-18);
	color: #fff;
}