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

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


.pcbr{display:none;}
.ptbr{display:none;}
.tbbr{display:none;}
.mbbr{display:block;}
.dn{display:none;}
.pc_view{display: none;}
.pt_view{display: none;}

.innerwrap{
	width: 92%;
	max-width: 1440px;
	margin: 0 auto;
}

.innerwrap2{
	width: 92%;
	max-width: 1760px;
	margin: 0 auto;
}

.paging{
	margin-top:80px;
	text-align:center;
}
.paging a{
	display:inline-block;vertical-align:top;box-sizing:border-box;
	width:32px;height:32px;
	font-family:"Wix Madefor Display";color:#999;font-size:18px;line-height:32px; font-weight: 500;
}
.paging strong{
	display:inline-block;vertical-align:top;box-sizing:border-box;
	width:32px;height:32px;
	border-radius:50%;
	background:#1c1c1c;
	font-family:"Wix Madefor Display";color:#fff;font-size:18px;line-height:32px;font-weight:400;
}
.paging .page_begin{
	width:32px;height:32px;
	background:url(/images/common/page_begin.png) no-repeat center;
	border:0;
}
.paging .page_prev{
	width:32px;height:32px;
	background:url(/images/common/page_prev.png) no-repeat center;
	border:0;margin-right:20px;
}
.paging .page_next{
	width:32px;height:32px;
	background:url(/images/common/page_next.png) no-repeat center;
	border:0;margin-left:20px;
}
.paging .page_end{
	width:32px;height:32px;
	background:url(/images/common/page_end.png) no-repeat center;
	border:0;
}


.page_top{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	border-radius: 0 0 0 185px;
}
.page_top .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.page_top.pn1 .bg{background: url(/images/page/sub_visual1.jpg) no-repeat center / cover;}
.page_top.pn2 .bg{background: url(/images/page/sub_visual2.jpg) no-repeat center / cover;}
.page_top.pn3 .bg{background: url(/images/page/sub_visual3.jpg) no-repeat center / cover;}
.page_top.pn4 .bg{background: url(/images/page/sub_visual4.jpg) no-repeat center / cover;}

.page_top .inner{
	position: absolute;
	left: 50%;
	bottom: 160px;
	transform: translateX(-50%);
	width: 92%;
	max-width: 1760px;
	padding-bottom: 200px;
	border-bottom: 1px solid rgba(255,255,255,0.6);
	display: flex;
	justify-content: space-between;
    align-items: flex-start;
   flex-direction: column;
}
.page_top .inner .titwrap{}
.page_top .inner .titwrap .dep1{
	font-family: "Poppins";
	font-size: min(16vw,126px);
	font-weight: 500;
	color: #fff;
}
.page_top .inner .pageLocation{
	display: flex;
	align-items: flex-end;
	position: absolute;
	bottom: 120px;
	flex-wrap: wrap;
}
.page_top .inner .pageLocation li{
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	color: #fff;
	line-height: 1.7;
}
.page_top .inner .pageLocation li:after{
	content: "";
	position: absolute;
	left: 6px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(-45deg);
}
.page_top .inner .pageLocation li:first-child{padding-left: 0;}
.page_top .inner .pageLocation li:first-child:after{
	display: none;
}
.page_top .inner .pageLocation li a.home img{margin: -5px 4px 0px 0;}
.page_top .inner .slogan{
	font-size: min(5vw,42px);
	font-weight: 600;
	line-height: 1.5em;
	text-align: left;
	color: #fff;
}


.page_tit{
	padding: 200px 0 150px;
	width: 92%;
	max-width: 1440px;
	margin: 0 auto;
	font-size:clamp(30px, 3vw, 34px);
	font-weight: 600;
}

#pageTop{
position: absolute;
top: -50px;
width: 100%;
}

/* subtap */
.sub_tab{
width: 92%;
max-width: 1760px;
margin: 0 auto;
display: flex;
justify-content: center;
margin-top: 60px;
position: relative;
z-index: 2;
gap: 20px;
}

.sub_tab ul{
display: flex;
gap: 10px;
width: fit-content;
padding: 10px 45px;
border-radius: 50px;
background: #f5f5f5;
white-space: nowrap;
overflow-x: auto;
flex-wrap: wrap;
}

.sub_tab ul li{
width: calc((100% - 10px)/2);
}

.sub_tab ul li a{
display: inline-block;
padding: 14px;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
color: #666;
width: 100%;
text-align: center;
transition: all 0.4s;
}

.sub_tab ul li a:hover{
background: #0081c8;
color: #fff;
}

.sub_tab ul li.on a{
background: #0081c8;
color: #fff;
}

@media screen and (max-width: 455px) {
    .sub_tab ul {
	            width: 100%;
        flex-direction: column;
    }
	.sub_tab ul li {
        width: 100%;
    }
}


.m00{position: relative; overflow: hidden;}
.m00:after{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 632px;
	height: 596px;
	background: url(/images/page/page_bgIcon.png) no-repeat center / contain;
	z-index: -1;
}

.section{
	position: relative;
	z-index: 1;
}
.section.gray{background: #f8f8f8;}

/* m10 ~ */
.m10 h6.section1-title {
font-size: min(7vw, 60px);
font-weight: 600;
line-height: min(10vw, 80px);
}

/* m11 */
.m11 .section1 {
padding-bottom:100vw;
background: url(/images/page/m11_img1.png) no-repeat  8% bottom / contain;
background-size: 110%;
}

.m11 .section1 .content1 {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.m11 .section1 .content1 .section1-title {
width:100%;
}

.m11 .section1 .content1 .content-box {
margin-top: 130px;
width:100%;
}

.m11 .section1 .content1 .content-box img {
border-radius: 20px;
overflow: hidden;
}

.m11 .section1 .content1 .content-box p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin-top:50px;
}


/* m12 */
.m12 .section1 {
padding-bottom:200px;
}

.m12 .section1 .content1 .con1 {
display: flex;
justify-content: space-between;
flex-direction: column;
gap:50px;
}

.m12 .section1 .content1 .con1 .section1-title {
width:100%;
}

.m12 .section1 .content1 .con1 .text-box {
width: 100%
}

.m12 .section1 .content1 .con1 .text-box p {
font-size: 14px;
color: #666;
line-height: 1.7;
}

.m12 .section1 .content1 .con1 .text-box p:not(:first-child):not(.text-name) {
margin-top: 50px;
}

.m12 .section1 .content1 .con1 .text-box .text-name {
margin-top: 50px;
}

.m12 .section1 .content1 .con1 .text-box .text-name img {
margin-left:10px;
}

.m12 .section1 .con2 {
margin-top:80px;
background: url(/images/page/m12_img2.png) no-repeat  center / cover;
border-radius:28px 28px 200px;
height:510px;
position: relative;
}

.m12 .section1 .con2 img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* m13 */
.m13 .section1 {
margin-bottom:200px;
}

.m13 .section1 .content1 .content-box {
border-radius: 20px;
display: flex;
flex-direction: column;
height:600px;
color:#fff;
padding: 120px 50px;
}

.m13 .section1 .content1 .content-box strong {
font-size:clamp(26px, 3vw, 34px);;
margin-bottom:27px;
}

.m13 .section1 .content1 .content-box span {
font-size:34px;
}

.m13 .section1 .content1 .content-box p {
margin-top: auto;
font-size: 16px;
line-height: 1.7;
color:#fff;
padding-top:35px;
border-top:1px solid rgba(255, 255, 255, 0.4);

}

.m13 .section1 .content1 .con1 {
margin-top: 150px;
background: url(/images/page/m13_m_img1.png) no-repeat  center / cover;
}

.m13 .section1 .content1 .con2 {
margin-top: 60px;
background: url(/images/page/m13_m_img2.png) no-repeat  center / cover;
}

.m13 .section2 {
background: url(/images/page/m13_img3.png) no-repeat  70% / cover;
}

.m13 .section2 .innerwrap {
padding:180px 0 280px;
}

.m13 .section2 .section2-title {
color:#fff;
font-size:clamp(26px, 3vw, 34px);
font-weight: 600;
}

.m13 .section2 .content1 {}

.m13 .section2 .content1 .coreValue-list {
margin-top:60px;
}

.m13 .section2 .content1 .coreValue-list .list-item{
display: flex;
align-items: center;
justify-content: center;
gap:40px;
}

.m13 .section2 .content1 .coreValue-list .list-item:not(:first-child) {
margin-top:130px;
}

.m13 .section2 .content1 .coreValue-list .list-item .item-title{
width:150px;
height:150px;
border-radius: 20px;
font-size: 16px;
font-weight: 500;
text-align: center;
color:#111;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.m13 .section2 .content1 .coreValue-list .list-item:not(:last-child) .item-title::before {
content: '';
position: absolute;
width: 1px;
height: 120px;
border-left: 1px dashed #fff;
bottom: 0;
left: 50%;
transform: translate(-50%, 125px);
}

.m13 .section2 .content1 .coreValue-list .list-item .item-text{
flex:1;
}

.m13 .section2 .content1 .coreValue-list .list-item .item-text__subTitle{
font-size: 16px;
color:#fff;
font-weight: 500;
}

.m13 .section2 .content1 .coreValue-list .list-item .item-text__des{
font-size: 14px;
color:#fff;
display: inline-block;
line-height: 1.7;
}

@media screen and (max-width: 520px) {
.m13 .section2 .content1 .coreValue-list .list-item {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 40px;
flex-direction: column;
}

.m13 .section2 .content1 .coreValue-list .list-item:not(:last-child) .item-title::before {
display:none;
}

.m13 .section2 .content1 .coreValue-list .list-item .item-text {
margin-left: 0;
}

.m13 .section2 .content1 .coreValue-list .list-item:not(:first-child) {
margin-top: 20vw;
}
}


/* m14 */
.m14 .section1 {
margin-bottom:200px;
}

.m14 .section1 .con1 {
margin-top:150px;
}

.m14 .section1 .certificate-list {
display:grid;
grid-template-columns: repeat(1, 1fr);
grid-row-gap: 100px;
justify-items: center;
}

.m14 .section1 .certificate-list .list-item {
width:100%;
}

.m14 .section1 .certificate-list .list-item .thumb-wrap {
max-width:300px;
width:100%;
aspect-ratio: 300 / 430;
border-radius: 20px;
overflow: hidden;
border: 1px solid #e3e2e2;
margin: 0 auto;
}

.m14 .section1 .certificate-list .list-item .thumb-box img{
width: 100%;
height: 100%;
object-fit: cover;
}

.m14 .section1 .certificate-list .list-item .thumb-text {
text-align: center;
margin-top:32px;
font-size: 14px;
font-weight: 600;
}

/* m15 */
.m15 .section1 {
margin-bottom:200px;
}

.m15 .section1 .con1 {
margin-top:130px;
}

.m15 .section1 .related-list {
display:grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 25px;
grid-row-gap: 50px;
justify-items: center;
}

.m15 .section1 .related-list .list-item {
width: 100%;
height:170px;
border-radius: 20px;
border: 1px solid #e3e2e2;
background-color: #f9f9f9
}

.m15 .section1 .related-list .list-item .thumb-box {
width: 100%;
height: 100%;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}

/* m16 */
.m16 .section1 .content1{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap:40px;
}

.m16 .section1 .content1 .con{
width: calc((100% - 40px)/2);
}

.m16 .section1 .content1 .con .con-title {
display: flex;
justify-content: flex-start;
align-items: center;
gap:20px;
}

.m16 .section1 .content1 .con .con-title .icon-wrap {
width: 60px;
height: 60px;
border-radius: 20px; 
background-color:#f4f4f4;
display: flex;
justify-content: center;
align-items: center;
}

.m16 .section1 .content1 .con .con-title strong {
font-size:clamp(18px, 2.4vw, 20px);
}

.m16 .section1 .content1 .con .con-text {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #ccc;
font-size: 14px;
color:#666;
}

.m16 .section2 {
margin-top: 100px;
}

.m16 .section2 .root_daum_roughmap {
width:100%;
}

.m16 .section2 .root_daum_roughmap .wrap_controllers,
.m16 .section2 .root_daum_roughmap .cont{
display: none;
}

@media screen and (max-width: 520px) {
.m16 .section1 .content1{
flex-direction: column;
gap:100px;
}

.m16 .section1 .content1 .con {
width:100%;
}

.m16 .section2 .root_daum_roughmap .wrap_map {
height: 65vh;
}
}


/* m20 */

/* product 공통 css */
.m20 .con_tit{
	width: 100%;
	padding-bottom: 60px;
	border-bottom: 1px solid #000;
}
.m20 .con_tit.mg{margin-top: 100px;}
.m20 .con_tit h3{
font-size: min(6vw, 60px);
font-weight: 600;
line-height: min(8vw, 80px);
}
.m20 .con_tit p{
	font-size: 14px;
	line-height: 1.6em;
	color: #666;
	margin-top: 30px;
}
.m20 .con_p{
	position: relative;
	padding-left: 24px;
	margin-bottom: 40px;
	font-size:clamp(24px, 2.6vw, 28px);;
	font-weight: 600;
}
.m20 .con_p:after{
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 3px solid #0081c8;
	box-sizing: border-box;
}
.m20 .con{
	margin-top: 100px;
}
.cc_p{
	position: relative;
	padding-left: 17px;
	font-size: 14px;
	color: #666;
	line-height: 1.6em;
}
.cc_p + .cc_p{margin-top: 20px;}
.cc_p:after{
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1px solid #0684c9;
	box-sizing: border-box;
}

.m20 .mobile-img{
display:block;
}

/* m211 */
.m211{}
.m211 .section1{
	padding: 0 0 100px;
}
.m211 .section1 .intro_box{
	width: 100%;
	min-height: 468px;
	padding: 40px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: url(/images/page/m211_sec1_intro_bg.jpg) no-repeat center / cover;
}
.m211 .section1 .intro_box h3{
	font-size: 40px;
	font-weight: 600;
	color: #fff;
}
.m211 .section1 .intro_box .txts{}
.m211 .section1 .intro_box .txts h4{
	font-size:clamp(24px, 2.6vw, 28px);
	font-weight: 600;
	color: #fff;
}
.m211 .section1 .intro_box .txts p{
	font-size: 15px;
	line-height: 1.7em;
	color: #fff;
	margin-top: 30px;
}
.m211 .section1 .imgwrap{
	display: flex;
	margin-top: 20px;
	gap: 20px;
	flex-direction: column;
}
.m211 .section1 .imgwrap .img{
	width: 100%;
	text-align:center;
}
.m211 .section1 .imgwrap .img .box{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 412px;
	padding: 50px;
	border-radius: 20px;
	background: #f9f9f9;
}
.m211 .section1 .imgwrap .img .tit{
	display: inline-block;
	margin-top: 20px;
	padding: 10px 35px;
	border-radius: 50px;
	background: #565656;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.m211 .section2{
	padding: 100px 0;
}
.m211 .section2 .con1 .con_p{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	gap: 20px;
}
.m211 .section2 .con1 .con_p span{
	font-size: 12px;
	font-weight: 400;
  text-align: right;
}
.m211 .section2 .con1 .con_span {
font-size: 14px;
color: #666;
line-height: 1.6em;
display: block;
}
.m211 .section2 .con1 .list{
position: relative;
margin-top:40px;
}

.m211 .section2 .con1 .list .boxwrap .box .img{
	width: 100%;
	aspect-ratio: 466 / 220;
	border-radius: 20px;
	overflow: hidden;
}
.m211 .section2 .con1 .list .boxwrap .box .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m211 .section2 .con1 .list .boxwrap .box .tit{
	width: 100%;
	margin-top: 20px;
	padding: 12px 0;
	border-radius: 50px;
	border: 2px solid #0081c8;
	font-size: 14px;
	font-weight: 600;
	color: #0081c8;
	text-align: center;
}
.m211 .section2 .con1 .list .boxwrap .box:last-child .tit{
	border: 2px solid #130063;
	color: #130063;
}
.m211 .section2 .con1 .list .box_exp{
	width: 100%;
	margin-top: 20px;
	padding: 12px 0;
	border-radius: 50px;
	background: #ececec;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.m211 .section2 .con1 .swiper-pagination {
display:block;
bottom: -60px;
}

.m211 .section2 .con1 .swiper-pagination-bullet{
width: 8px;
height: 8px;
background: #cfcfcf;
opacity:1;
}

.m211 .section2 .con1 .swiper-pagination-bullet-active {
background: #646464;
}

.m211 .section2 .con1 > .arr{
	text-align: center;
	margin: 40px 0;
}
.m211 .section2 .con1 .expwrap{
	margin-top: 120px;
	padding: 40px 20px;
	border-radius: 20px;
	background: #fff;
}

.m211 .section2 .con1 .expwrap strong {
    position: relative;
	 text-decoration: underline;
}

.m211 .section2 .con2 .boxwrap{
	width: 100%;
	padding: 40px 20px;
	border-radius: 20px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;
	gap:40px;
}
.m211 .section2 .con2 .boxwrap .img{
	width: 100%;
	text-align: center;
}
.m211 .section2 .con2 .boxwrap .arr{
	width: 110px;
	text-align: center;
	flex-shrink: 0;
	transform: rotate(90deg);
}
.m211 .section2 .con2 .boxwrap .expwrap{
	width: 100%;
}

.m211 .section3{
	padding: 100px 0 200px;
}
.m211 .section3 .con .conwrap{}
.m211 .section3 .con .conwrap .con_box{
	padding: 40px;
	background: #f8f8f8;
	border-radius: 20px 20px 0 0;
	overflow-x:scroll;
}
.m211 .section3 .con .conwrap .con_box .img{
width: 1350px;
}
.m211 .section3 .con .conwrap .con_box .exp{
	margin-top: 50px;
	font-size: 14px;
	width: 1350px;
}
.m211 .section3 .con .conwrap .con_exp{
	margin-top: 10px;
	padding: 15px 20px;
	border-radius: 0 0 20px 20px;
	background: #0081c8;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-align: center;
}

.m211 .section3 .con3 .conwrap .con_box_wrap{
display: flex;
width: 1350px;
}
.m211 .section3 .con3 .conwrap .con_box .txtwrap{
	width: 50%;
	padding-right: 140px;
	position: relative;
}
.m211 .section3 .con3 .conwrap .con_box .txtwrap:after{
	content: "";
	position: absolute;
	right: 70px;
	top: 0;
	width: 1px;
	height: 100%;
	background: #ccc;
}
.m211 .section3 .con3 .conwrap .con_box .txtwrap .tit{
	font-size: 24px;
	font-weight: 600;
}
.m211 .section3 .con3 .conwrap .con_box .txtwrap p{
	font-size: 14px;
	line-height: 1.7em;
	color: #666;
	margin: 20px 0 30px;
}
.m211 .section3 .con3 .conwrap .con_box .txtwrap ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
.m211 .section3 .con3 .conwrap .con_box .txtwrap li{
	display: block;
	width: calc((100% - 15px) / 2);
	padding: 15px 10px;
	border-radius:50px;
	font-size: 16px;
	color: #fff;
	text-align: center;
}
.m211 .section3 .con3 .conwrap .con_box .txtwrap li:nth-child(1){background: #6c658f;}
.m211 .section3 .con3 .conwrap .con_box .txtwrap li:nth-child(2){background: #796f6f;}
.m211 .section3 .con3 .conwrap .con_box .txtwrap li:nth-child(3){background: #977b7b;}

.m211 .section3 .con4 .boxwrap{
	width: 100%;
	padding: 90px 30px;
	border-radius: 20px;
	background: #f8f8f8;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.m211 .section3 .con4 .boxwrap .img{
	width: 100%;
	text-align: center;
	border-bottom: 1px solid #ccc;
		padding-bottom: 60px;
}

.m211 .section3 .con4 .boxwrap .txts{
	width: 100%;
	padding-top: 60px;
}

.m211 .section3 .con5 .boxwrap img:not(.mobile-img){
display:none;
}

.m211 .section3 .con5 .boxwrap .mobile-img {
display:block;
}

.m211 .section3 .con5 .boxwrap,
.m211 .section3 .con6 .boxwrap{
	width: 100%;
	padding: 40px 20px;
	border-radius: 20px;
	background: #f8f8f8;
}
.m211 .section3 .con6 .boxwrap{
	display: flex;
	flex-direction: column;
	gap:30px;
}
.m211 .section3 .con6 .boxwrap .imgwrap{
	width: 100%;
	text-align: center;
}
.m211 .section3 .con6 .boxwrap .imgwrap .img{
	width: 100%;
	height: 320px;
	border-radius: 20px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.m211 .section3 .con6 .boxwrap .arr{
	text-align: center;
}
.m211 .section3 .con6 .boxwrap .arr img{
        transform: rotate(90deg);
}
.m211 .section3 .con6 .boxwrap .imgwrap .tit{
	display: inline-block;
	margin-top: 20px;
	width: 210px;
	height: 46px;
	line-height: 46px;
	border-radius: 50px;
	font-family: "Poppins";
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background: #737373;
}
.m211 .section3 .con6 .boxwrap .imgwrap:last-child .tit{
	background: #0081c8;
}

.m211 .section3 .qna{}
.m211 .section3 .qna .list{
	width: 100%; box-sizing: border-box;
	border-bottom: 1px solid #ccc;
}
.m211 .section3 .qna .list:first-child{border-top: 1px solid #000;}
.m211 .section3 .qna .list .ask{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 20px;
	cursor: pointer;
	box-sizing: border-box;
}
.m211 .section3 .qna .list .ask .q{
	font-family: "Myriad Pro";
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	font-size: 16px;
	text-align: center;
	font-weight: 300;
	background: #f8f8f8;
	color: #666;
}
.m211 .section3 .qna .list .ask.active .q{
	color: #fff;
	background: #0081c8;
}
.m211 .section3 .qna .list .ask .tit{
	position: relative;
	width: calc(100% - 60px);
	padding-left: 20px;
	font-size: 14px;
	color: #000;
	font-weight: 600;
	line-height: 1.6em;
}
.m211 .section3 .qna .list .ask.active .tit{
	color: #0081c8;
}
.m211 .section3 .qna .list .ask .tit:after{
	content: "";
	position: absolute;
	right: -20px;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	width: 10px;
	height: 10px;
	border-left: 2px solid #777;
	border-bottom: 2px solid #777;
	transition: all 0.4s;
}
.m211 .section3 .qna .list .ask.active .tit:after{
	transform: translateY(-50%) rotate(135deg);
}
.m211 .section3 .qna .list .answer{
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	background: #fafafa;
	display: none;
}
.m211 .section3 .qna .list .answer>div{
	width: 100%;
	display: flex;
}
.m211 .section3 .qna .list .answer>div .a{
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	font-size: 16px;
	text-align: center;
	font-weight: 300;
	background: #fff;
	color: #0081c8;
}
.m211 .section3 .qna .list .answer>div .con{
	width: calc(100% - 40px);
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.6em;
	margin-top: 10px;
}

.m211 .section3 .con .videowrap{
	position: relative;
}
.m211 .section3 .con .videowrap video{
	width: 100%;
	border-radius: 20px;
}

.play_icon{
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.play_icon .circle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 126px;
	height: 126px;
	border-radius: 50%;
	border: 1px solid #fff;
}
.play_icon .circle1{animation: wave 2s ease-in infinite 0s;}
.play_icon .circle2{animation: wave 2s ease-in infinite 0.3s;}
.play_icon .circle3{animation: wave 2s ease-in infinite 0.7s;}
@keyframes wave{
0%{opacity:0.8;width:126px;height:126px;}
100%{opacity:0.2;width:180px;height:180px;}
}


/* m212 */
.m212 {}

.m212 .sec1 .content1 {
margin-bottom:100px;
}

.m212 .sec1 .content1 .con1 {
margin-top: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap:60px;
}

.m212 .sec1 .content1 .con1-img {
background: #f9f9f9;
border-radius: 20px;
width: 100%;
height: 480px;
display: flex;
justify-content: center;
align-items: center; 
padding: 20px;
}

.m212 .sec1 .content1 .con-title {
max-width: 670px;
}

.m212 .sec1 .content1 .con-title h3{
font-size: min(6vw, 60px);
font-weight: 600;
line-height: min(8vw, 80px);
}

.m212 .sec1 .content1 .con-title .con1-text__wrap {
padding-top:45px;
margin-top: 40px;
border-top:1px solid #e3e2e2;
}

.m212 .sec1 .content1 .con-title .con1-text{
position: relative;
padding-left: 17px;
font-size: 14px;
color: #666;
line-height: 1.7;
}

.m212 .sec1 .content1 .con-title .con1-text::before{
content: "";
position: absolute;
left: 0;
top: 11px;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid #0684c9;
box-sizing: border-box;
}

.m212 .sec1 .content1 .con-title .con1-text + .con1-text{
margin-top: 20px;
}

.m212 .sec1 .content1 .con2 {
margin-top: 100px;
}

.m212 .sec1 .content1 .con2 .whatAnewgen-list {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
gap: 40px;
flex-direction: column;
}

.m212 .sec1 .content1 .con2 .whatAnewgen-list .list-item {
background: #f9f9f9;
border-radius: 20px;
width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
padding: 40px;
position: relative;
text-align: center;
}

.m212 .sec1 .content1 .con2 .whatAnewgen-list .list-item::after {
content:'';
position: absolute;
width: calc(100% - 80px);
height:1px;
background: #e3e2e2;
top:130px;
}

.m212 .sec1 .content1 .con2 .whatAnewgen-list .list-item .item-title {
color: var(--main-color);
font-size:16px;
font-weight: 500;
width: auto;
flex-shrink: 0;
}

.m212 .sec1 .con2 .whatAnewgen-list .list-item .item-title span {
display: block;
font-family: 'Poppins';
font-size:16px;
margin-bottom: 14px;
}

.m212 .sec1 .content1 .con2 .whatAnewgen-list .list-item .item-text {
padding-top: 35px;
margin-top: 30px;
}

.m212 .sec1 .content1 .con2 .whatAnewgen-list .list-item .item-text p {
color:#666;
font-size: 14px;
line-height: 1.7;
word-break: keep-all;
}

.m212 .sec1 .content1 .con2 .whatAnewgen-list .list-item .item-text p:not(:first-child) {
margin-top:25px;
}

.m212 .sec2 {
background: #f9f9f9;
padding:100px 0;
}

.m212 .sec2 .content1 .con {
background: #fff;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: stretch;
padding: 40px 20px;
flex-direction: column;
}

.m212 .sec2 .content1 .con1 .con-box{
width: 100%;
} 

.m212 .sec2 .content1 .con1 .box1 {
text-align: center;
}

.m212 .sec2 .content1 .con1 .box1 .box-title {
font-size:clamp(24px, 2.6vw, 28px);;
font-weight: 600;
}

.m212 .sec2 .content1 .con1 .box1 .box-text {
margin:40px auto 0;
font-size: 14px;
color:#666;
line-height: 1.7;
max-width:435px;
}

.m212 .sec2 .content1 .con1 .box1 .box-caption {
margin-top:30px;
font-size: 14px;
color:#666;
line-height: 30px;
border: 1px solid #e3e2e2;
border-radius: 20px;
padding: 38px;
}

.m212 .sec2 .content1 .con1 .box2{
background: #f9f9f9;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
margin-top: 60px;
}

.m212 .sec2 .content1 .con2 {
gap: 40px;
}

.m212 .sec2 .content1 .con2 .box1 {
text-align: center;
margin: 0 auto;
}

.m212 .sec2 .content1 .con2 .box1 img:not(.mobile-img){
display:none;
}

.m212 .sec2 .content1 .con2 .box2 {
border: 1px solid #e3e2e2;
border-radius: 20px;
padding: 40px 20px;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.m212 .sec2 .content1 .con2 .box2 .box-title {
font-size: 24px;
font-weight: 600;
}

.m212 .sec2 .content1 .con2 .box2 .whyAnewgen-list{
margin-top:38px;
}

.m212 .sec2 .content1 .con3,
.m212 .sec2 .content1 .con4,
.m212 .sec2 .content1 .con5{
gap:120px;
padding: 40px 20px;
} 

.m212 .sec2 .content1 .con3 .box1,
.m212 .sec2 .content1 .con4 .box1,
.m212 .sec2 .content1 .con5 .box1 {
width: 100%;
background: #f8f8f8;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
aspect-ratio: 1 / 1;
padding:20px;
}

.m212 .sec2 .content1 .con3 .box1 .img-caption,
.m212 .sec2 .content1 .con4 .box1 .img-caption,
.m212 .sec2 .content1 .con5 .box1 .img-caption{
position: absolute;
left: 50%;
bottom: -62px;
transform: translateX(-50%);
color:#fff;
padding: 13px 40px;
border-radius: 21px;
width: 100%;
text-align: center;
background: #565656;
font-size: 14px;
}

.m212 .sec2 .content1 .con3 .box2,
.m212 .sec2 .content1 .con4 .box2,
.m212 .sec2 .content1 .con5 .box2 {
width: 100%;
border: 1px solid #e3e2e2;
border-radius: 20px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1 / 0.8;
padding:20px;
}

.m212 .sec2 .content1 .con3 .box2 .box-title,
.m212 .sec2 .content1 .con4 .box2 .box-title,
.m212 .sec2 .content1 .con5 .box2 .box-title {
font-size: 16px;
font-weight: 600;
text-align: center;
}

.m212 .sec3 {
padding: 100px 0 200px;
}

.m212 .sec3 .content1 .con1 .con-box_container{
margin-top: 40px;
padding: 40px 20px;
background: #f8f8f8;
border-radius: 20px 20px 0 0;
}

.m212 .sec3 .content1 .con1 .con-text {
font-size: 14px;
color:#666;
line-height: 1.7;
display: block;
margin-top: 40px;
}

.m212 .sec3 .content1 .con1 .con-box {
display:flex;
flex-direction: column;
gap:40px;
}


.m212 .sec3 .content1 .con1 .con-box .con-box__img {
background:#fff;
border-radius:20px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.m212 .sec3 .content1 .con1 .con-box__caption {
margin-top: 10px;
padding: 15px 20px;
border-radius: 0 0 20px 20px;
background: #0081c8;
font-size: 16px;
font-weight: 600;
color: #fff;
text-align: center;
}

.m212 .sec3 .content1 .con2 .con-box {
display:flex;
padding: 40px 20px;
background: #f8f8f8;
border-radius: 20px 20px 0 0;
flex-wrap: wrap;
gap: 40px;
flex-direction: column;
}

.m212 .sec3 .content1 .con2 .con-box .con-box__img {
background:#fff;
border-radius:20px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.m212 .sec3 .content1 .con2 .con-box  .con-box__text {
border: 1px solid #e3e2e2;
border-radius: 20px;
padding: 40px 20px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.m212 .sec3 .content1 .con2 .con-box  .con-box__text p {
font-size: 16px;
font-weight: 600;
text-align: center;
}

.m212 .sec3 .content1 .con2 .con-box  .con-box__text p:not(:first-child){
margin-top:20px;
}

.m212 .sec3 .content2 {
padding-top: 100px;
} 

.m212 .sec3 .content2 .con1 {
display:flex;
flex-direction: column;
padding: 40px 20px;
background: #f8f8f8;
border-radius: 20px 20px 0 0;
gap: 30px;
}

.m212 .sec3 .content2 .con1 .con-box  {
width: 100%;
text-align: center;
}

.m212 .sec3 .content2 .con1 .con-box__img  {
width: 100%;
height: 370px;
border-radius: 20px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}

.m212 .sec3 .content2 .con1 .arr {
text-align: center;
}

.m212 .sec3 .content2 .con1 .arr img {
    transform: rotate(90deg);
}

.m212 .sec3 .content2 .con-box p  {
display: inline-block;
margin-top: 20px;
width: 210px;
height: 46px;
line-height: 46px;
border-radius: 50px;
font-family: "Poppins";
font-size: 14px;
font-weight: 500;
color: #fff;
background: #737373;
width: 100%;
}

.m212 .sec3 .content2 .con1 .box1 p {
background: #737373;
}

.m212 .sec3 .content2 .con1 .box2 p  {
background: var(--main-color);
}

/* m213 */
.m213 {}

.m213 .sec1 .content1 {
margin-bottom:100px;
}

.m213 .sec1 .con1 {
margin-top: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap:40px;
}

.m213 .sec1 .con1-img {
background: #f9f9f9;
border-radius: 20px;
width: 100%;
max-height: 400px;
display: flex;
justify-content: center;
align-items: center; 
overflow: hidden;
}

.m213 .sec1 .con1-img img {
height: 100%;
width: 100%;
object-fit: cover;
}

.m213 .sec1 .con-title {
max-width: none;
}

.m213 .sec1 .content1 .con-title h3{
font-size: min(6vw, 60px);
font-weight: 600;
line-height: min(8vw, 80px);
}

.m213 .sec1 .con-title .con1-text__wrap {
padding-top:45px;
margin-top: 40px;
border-top:1px solid #e3e2e2;
}

.m213 .sec1 .con-title .con1-text{
position: relative;
padding-left: 17px;
font-size: 14px;
color: #666;
line-height: 1.7;
}

.m213 .sec1 .con-title .con1-text::before{
content: "";
position: absolute;
left: 0;
top: 11px;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid #0684c9;
box-sizing: border-box;
}

.m213 .sec1 .con-title .con1-text + .con1-text {
	margin-top: 40px;
}

.m213 .sec1 .con2 .anewderm-list {
margin-top:90px;
border:1px solid #e3e2e2;
border-radius: 20px;
	padding: 40px 20px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap:20px;
}

.m213 .sec1 .con2 .anewderm-list .list-item {
background: #f9f9f9;
border-radius: 20px;
text-align: center;
width: 100%;
padding: 20px;
}

.m213 .sec1 .con2 .anewderm-list .list-item .item-number {
font-family: 'Poppins';
font-size: 14px;
color: var(--main-color);
font-weight: 500;
position: relative;
}

.m213 .sec1 .con2 .anewderm-list .list-item .item-number::after {
content:'';
position: absolute;
width: 100%;
height: 1px;
background-color: var(--main-color);
left: 0;
bottom: 2px;
}

.m213 .sec1 .con2 .anewderm-list .list-item .item-text {
margin-top: 21px;
color:#666;
font-size: 14px;
}

.m213 .sec1 .con3 .Indication-list{
margin-top:90px;
display:flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 40px;
}

.m213 .sec1 .con3 .Indication-list .list-item{
text-align: center;
width: 100%;
}

.m213 .sec1 .con3 .Indication-list .list-item:not(:first-child) {
border-top:1px solid #e3e2e2;
padding-top:40px;
}

.m213 .sec1 .con3 .Indication-list .list-item .item-img{
width:100px;
height:100px;
border-radius:50%;
background-color:#f9f9f9;
text-align: center;
line-height: 100px;
margin: 0 auto;
}

.m213 .sec1 .con3 .Indication-list .list-item .item-title{
color:#000;
font-size:18px;
font-weight: 600;
margin-top:34px;
}

.m213 .sec1 .con3 .Indication-list .list-item .item-text{
color:#666;
font-size:16px;
margin-top:34px;
}


/* m214 */
.m214 {}

.m214 .sec1 .content1 {
margin-bottom: 100px;
}

.m214 .sec1 .content1 .con1 {
margin-top: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
gap: 40px;
}

.m214 .sec1 .content1 .con1-img {
background: url(/images/page/m211_cn4_img1.png) no-repeat center /cover;
border-radius: 20px;
width: 100%;
height: 480px;
display: flex;
justify-content: center;
align-items: center;
}

.m214 .sec1 .content1 .con-title {
max-width: none;
}

.m214 .sec1 .content1 .con-title h3 {
font-size: min(6vw, 60px);
font-weight: 600;
line-height: min(8vw, 80px);
}

.m214 .sec1 .content1 .con-title .con1-text__wrap {
padding-top: 45px;
margin-top: 40px;
border-top: 1px solid #e3e2e2;
}

.m214 .sec1 .content1 .con-title .cont-subTitle {
font-size:clamp(24px, 2.6vw, 28px);;
font-weight: 600;
margin-bottom: 30px;
}

.m214 .sec1 .content1 .con-title .con1-text {
position: relative;
padding-left: 17px;
font-size: 14px;
color: #666;
line-height: 1.7;
}

.m214 .sec1 .content1 .con-title .con1-text::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid #0684c9;
box-sizing: border-box;
}

.m214 .sec1 .content1 .con-title .con1-text + .con1-text {
margin-top: 40px;
}

.m214 .sec1 .content1 .con2 {
margin-top: 100px;
}

.m214 .sec1 .content1 .con2 .whatScecmL-list {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
row-gap: 20px;
column-gap: 40px;
flex-direction: column;
}

.m214 .sec1 .content1 .con2 .whatScecmL-list .list-item {
background: #f9f9f9;
border-radius: 20px;
width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
padding: 40px 20px;
}

.m214 .sec1 .content1 .con2 .whatScecmL-list .list-item .item-title::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background: #e3e2e2;
bottom: -30px;
left: 0;
}

.m214 .sec1 .content1 .con2 .whatScecmL-list .list-item .item-title {
color: var(--main-color);
font-size: 14px;
font-weight: 500;
width: 100%;
flex-shrink: 0;
line-height: 1.7;
text-align: center;
position: relative;
}

.m214 .sec1 .content1 .con2 .whatScecmL-list .list-item .item-title span {
display: block;
font-family: 'Poppins';
font-size: 16px;
margin-bottom: 14px;
}


.m214 .sec1 .content1 .con2 .whatScecmL-list .list-item .item-text p {
padding-top: 35px;
 margin-top: 30px;
color: #666;
font-size: 14px;
line-height: 1.7;
text-align: center;
word-break: keep-all;
}

.m214 .sec2 .content1 {
margin-top: 80px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding-bottom:100px;
row-gap:60px;
}

.m214 .sec2 .content1 .con {
margin-top:0;
width: 100%;
padding: 0 40px;
}

.m214 .sec2 .content1 .con:not(:last-child){
border-bottom: 1px solid #e3e2e2;
padding-bottom:40px;
}

.m214 .sec2 .content1 .con .img-box{
min-height:36px;
margin-bottom:35px;
}

.m214 .sec2 .content1 .con .con-title {
color:#000;
font-size:16px;
font-weight: 600;
margin-bottom:28px;
display: block;
}

.m214 .sec2 .content1 .con .con-text {
line-height: 1.7;
font-size: 14px;
color: #666;
}

.m214 .sec3 {
background: #f9f9f9;
padding: 100px 0;
}

.m214 .sec3 .content1 .con {
background:#fff;
border-radius: 20px;
padding: 40px 20px;
}

.m214 .sec3 .content1 .con-box__container {
display:flex;
align-items:stretch;
flex-direction: column;
justify-content: space-between;
gap:100px;
}

.m214 .sec3 .content1 .con3 .con-box__container{
gap:40px;
}

.m214 .sec3 .content1 .con-box{
width: 100%;
text-align: center;
}

.m214 .sec3 .content1 .con1 .con-box .img-box,
.m214 .sec3 .content1 .con2 .con-box .img-box,
.m214 .sec3 .content1 .con3 .con-box .img-box
{ 
background: #f8f8f8;
border-radius: 20px;
padding: 20px;
aspect-ratio: 600 / 410;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.m214 .sec3 .content1 .con1 .box1 .img-caption,
.m214 .sec3 .content1 .con2 .box1 .img-caption,
.m214 .sec3 .content1 .con3 .box1 .img-caption{
margin-top:16px;
color: #fff;
padding: 13px;
border-radius: 21px;
background: #565656;
width: 100%;
text-align: center;
display: block;
font-size: 14px;
}

.m214 .sec3 .content1 .con1 .box2 .img-caption,
.m214 .sec3 .content1 .con2 .box2 .img-caption{
margin-top:16px;
color: #fff;
padding: 13px;
border-radius: 21px;
background: var(--main-color);
width: 100%;
text-align: center;
display: block;
font-size: 14px;
}

.m214 .sec3 .content1 .con .con-text {
margin-top: 40px;
font-size: 18px;
font-weight: 600;
}

.m214 .sec3 .content1 .con .con-caption {
font-size: 14px;
color:#666;
display: inline-block;
margin-top: 25px;
}

.m214 .sec3 .content1 .con3 .box2 .con-text{
margin-top: 0px;
text-align:center;
}

.m214 .sec3 .content1 .con4 .con-box__container {
display: block;
text-align: center;
}

.m214 .sec3 .content1 .con4 .con-box {
width: 100%;
aspect-ratio: auto;
display: block;
position: relative;
background: #f8f8f8;
overflow: hidden;
 border-radius: 20px;
 padding: 40px;
}

.m214 .sec3 .content1 .con4 .con-box__container .table-cpation {
position: absolute;
right: 20px;
top: 20px;
z-index: 2;
}

.m214 .sec3 .content1 .con4 .con-box .img-box {
}

.m214 .sec3 .content1 .con4 .con-box .swiper {
position: relative
}

.m214 .sec3 .content1 .con4 .con-box .swiper-slide{
width: 100%;
}

.m214 .sec3 .content1 .con4 .con-box .text-box{
margin-top: 120px;
}

.m214 .sec3 .content1 .con4 .con-box .text-box p{
font-size: 14px;
color:#666;
text-align: left;
line-height: 1.7;
}

.m214 .sec3 .content1 .con4 .swiper-pagination {
display: block;
bottom: -60px;
}

.m214 .sec3 .content1 .con4 .swiper-pagination-bullet-active {
background: #646464;
}

.m214 .sec3 .content1 .con4 .img-caption {
display: block;
margin-top: 20px;
color: #fff;
padding: 13px 40px;
border-radius: 21px;
background: #565656;
font-size: 14px;
}


.m214 .sec3 .content1 .con4 .con-text {
margin-top: 60px;
text-align: left;
}

.m214 .sec4 {
padding: 100px 0;
}

.m214 .sec4 .content1 .con1 h6 {
font-size:clamp(24px, 2.6vw, 28px);;
font-weight: 600;
}

.m214 .sec4 .content1 .con1 p {
color:#666;
font-size:14px;
line-height: 1.7;
margin-top:40px;
}

.m214 .sec4 .content1 .con1 .con-box {
margin-top:40px;
display:flex;
justify-content: space-between;
flex-direction: column;
gap: 40px;
}

.m214 .sec4 .content1 .con1 .con-box__img {
padding: 20px;
background: #f8f8f8;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex-direction: column;
}

.m214 .sec3 .content1 .con3 .con-box .img-box{
min-height:auto;
aspect-ratio: auto;
}

.m214 .sec4 .content1 .con1 .con-box__img:first-child img {
border-bottom: 1px solid #e3e2e2;
padding-bottom:40px;
}

.m214 .sec4 .content1 .con1 .con-box__img p {
color:#666;
font-size:14px;
margin-top:40px;
}

.m214 .sec5 {
padding-bottom: 200px;
}

.m214 .sec5 .content1 .con1 {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
flex-direction: column;
row-gap: 60px;
column-gap: 30px;
}

.m214 .sec5 .content1 .con1 .con-box {
width: 100%;
display: flex;
align-items: flex-start;
gap:35px;
}

.m214 .sec5 .content1 .con1 .con-box .con-box__img {
border-radius: 20px;
overflow:hidden;
}

.m214 .sec5 .content1 .con1 .con-box .con-box__text {
flex: 1;
}

.m214 .sec5 .content1 .con1 .con-box .box-title {
font-size: 18px;
color:var(--main-color);
font-weight: 600;
}

.m214 .sec5 .content1 .con1 .con-box .box-text {
margin-top:20px;
line-height: 1.7;
font-size: 14px;
color:#666;
}

.m214 .sec5 .content1 .con1 .con-box .recommended-list {
margin-top:14px;
padding-top:20px;
border-top: 1px solid #e3e2e2;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 10px;
}

.m214 .sec5 .content1 .con1 .con-box .recommended-list .list-item {
font-size: 14px;
color:#666;
position: relative;
padding-left: 20px;
}

.m214 .sec5 .content1 .con1 .con-box .recommended-list .list-item::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid #0684c9;
box-sizing: border-box;
}



/* m22 */
.m22 .sec1 {
padding-bottom: 100px;
}

.m22 .sec1 .con1 {
background:url(/images/page/m22_m_img1.png) no-repeat center / cover;
width: 100%;
aspect-ratio: 128/209;
margin-top:0;
border-radius: 20px;
}

.m22 .sec2 {
background-color:#f8f8f8;
padding: 100px 0;
}

.m22 .sec2-title{
padding-bottom: 60px;
border-bottom: 1px solid #000;
font-size:clamp(26px, 3vw, 34px);;
font-weight: 600;
}

.m22 .sec2 .con1-textContainer {
margin-top:80px;
} 

.m22 .sec2 .con1-textContainer h6 {
font-size:clamp(24px, 2.6vw, 28px);;
font-weight: 600;
position: relative;
padding-left: 30px;
}

.m22 .sec2 .con1-textContainer h6::before {
content:'';
width:8px;
height: 8px;
position: absolute;
border-radius: 50%;
border: 3px solid var(--main-color);
top: 10px;
left:0px;
}

.m22 .sec2 .con1-textContainer p {
color:#666;
font-size: 14px;
margin-top:30px;
line-height: 1.7;
}

.m22 .sec2 .con1-textContainer .con1-text2 {
margin-top:40px;
}

.m22 .sec2 .con1-box {
margin-top: 40px;
background-color: #fff;
padding: 20px;
border-radius: 20px 20px 0 0;
overflow-x: scroll;
}

.m22 .sec2 .con1-box .box1 {
background-color:#f8f8f8;
border-radius: 20px;
padding:65px;
width: 1350px;
}

.m22 .sec2 .con1-box .box1 .img-box{
text-align: center;
}

.m22 .sec2 .con1-box .box2 {
margin-top:10px;
border: 1px solid hwb(0 40% 60% / 34%);
border-radius: 20px;
padding: 40px ;
display: flex;
justify-content: center;
align-items: center;
gap:20px;
width: 1350px;
}

.m22 .sec2 .con1-box .box2 p {
color:#666;
font-size: 14px;
position: relative;
padding-left: 38px;
width: calc((100% - 20px)/2);
}

.m22 .sec2 .con1-box .box2 p::before {
content:'';
width:25px;
height: 3px;
position: absolute;
top: 50%;
left:0px;
transform: translateY(-50%);
}

.m22 .sec2 .con1-box .box2 p:first-child::before {
background-color:#f79a29;
}

.m22 .sec2 .con1-box .box2 p:nth-child(2)::before {
background-color:#ec008c;
}

.m22 .sec2 .con1-box .box2 p:nth-child(3)::before {
background-color:#a7a9ac;
}

.m22 .sec2 .con1-box .box2 p:nth-child(4)::before {
background-color:#8896cc;
}

.m22 .sec2 .con1 .box-caption {
margin-top: 10px;
padding: 15px 20px;
border-radius: 0 0 20px 20px;
background: #f16269;
font-size: 16px;
font-weight: 600;
color: #fff;
text-align: center;
line-height: 1.7;
}

.m22 .sec2 .con2-title {
font-size:clamp(24px, 2.6vw, 28px);
font-weight: 600;
position: relative;
padding-left: 30px;
}

.m22 .sec2 .con2-title:before {
content:'';
width:8px;
height: 8px;
position: absolute;
border-radius: 50%;
border: 3px solid var(--main-color);
top: 10px;
left:0px;
}

.m22 .sec2 .con2 .box1 {
margin-top:40px;
background-color: #fff;
padding: 20px;
border-radius: 20px;
overflow-x: scroll;
}

.m22 .sec2 .con2 .box1 table {
width:1350px;
border-collapse: collapse;
}

.m22 .sec2 .con2 .box1 table col {
width:20%;
}

.m22 .sec2 .con2 .box1 table tr {
height: 67px;
text-align: center;
}

.m22 .sec2 .con2 .box1 table tr:not(:first-child){
border-top: 1px solid #bfbfbf;
}
.m22 .sec2 .con2 .box1 table tr th:not(:first-child),
.m22 .sec2 .con2 .box1 table tr td:not(:first-child){
border-left: 1px solid #bfbfbf;
}

.m22 .sec2 .con2 .box1 table tr:not(:first-child):nth-child(odd){
background:#f8f8f8;
}
.m22 .sec2 .con2 .box1 table tr td:nth-child(1){
color:#000;
}

.m22 .sec2 .con2 .box1 table tr th:not(:first-child):nth-child(2),
.m22 .sec2 .con2 .box1 table tr td:not(:first-child):nth-child(2){
background:#565656;
color:#fff;
}

.m22 .sec2 .con2 .box1 table th {
font-size: 16px;
color:#666;
font-weight: 600;
background:#dcddde;
}

.m22 .sec2 .con2 .box1 table td {
font-size:18px;
color:#666;
}

.m22 .sec2 .con2 .box1 .table-caption {
font-size:16px;
color:#666;
display: inline-block;
margin-top: 25px;
}

.m22 .sec2 .con3 .box1{
margin-top: 40px;
background-color: #fff;
padding:20px;
border-radius: 20px;
overflow-x: scroll;
}

.m22 .sec2 .con3 .box1 .img-box{
width: 1350px;
}

.m22 .sec2 .con3 .box1 .box-caption {
font-size:16px;
color:#666;
display: inline-block;
margin-top: 25px;
}

.m22 .sec2 .con3 .box1 p {
margin-top:60px;
font-size:20px;
font-weight:600;
width: 1350px;
}

.m22 .sec2 .con3 .box1 span {
font-size:14px;
color:#666;
display: inline-block;
margin-top: 30px;
width: 1350px;
}

.m22 .sec3 {
padding-bottom: 200px ;
}

.m22 .sec3 .con-title {
padding-bottom: 60px;
border-bottom: 1px solid #000;
font-size:clamp(26px, 3vw, 34px);;
font-weight: 600;
}

.m22 .sec3 .box {
margin-top:80px;
}


.m22 .sec3 .con1 .box1 {
background-color: #f8f8f8;
border-radius: 20px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 50px;
}

.m22 .sec3 .con1 .box-caption {
margin-top: 10px;
padding: 15px 20px;
border-radius: 0 0 20px 20px;
background: #f79a29;
font-size: 16px;
font-weight: 600;
color: #fff;
text-align: center;
line-height: 1.7;
}

.m22 .sec3 .con2{
margin-top: 100px;
}

.m22 .sec3 .con2 .box1 {
background-color: #f8f8f8;
border-radius: 20px;
padding: 60px 40px;
display: flex;
gap:50px;
}

.m22 .sec3 .con2 .box1 .img-box1{
width:calc((100% - 50px)/2);
text-align: right;
}

.m22 .sec3 .con2 .box1 .img-box2 {
width:calc((100% - 50px)/2);
text-align: left;
}

.m22 .sec3 .con2 .box-caption {
margin-top: 10px;
padding: 15px 20px;
border-radius: 0 0 20px 20px;
background: #8796cb;
font-size: 16px;
font-weight: 600;
color: #fff;
text-align: center;
line-height: 1.7;
}

.m22 .sec3 .con3{
margin-top: 100px;
}

.m22 .sec3 .con3 .box1 {
display: flex;
gap:32px;
align-items: stretch;
flex-direction: column;
}

.m22 .sec3 .con3 .box1-1 {
padding: 40px;
border: 1px solid hwb(0 40% 60% / 34%);
border-radius:20px;
width:100%;
}

.m22 .sec3 .con3 .box1-2 {
border-radius: 20px;
width:100%;
background: #f8f8f8;
position: relative;
color:#666;
font-size:16px;
font-weight: 600;
line-height: 1.7;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 640 / 470;
}

.m22 .sec3 .con3 .box1-2::after {
content:'';
background: url(/images/page/m22_logo.png) no-repeat bottom / contain;
position: absolute;
bottom: 0;
width: 100%;
height: 140px;
left: 0;
}

.m22 .sec3 .box .swiper {
position: relative;
overflow: hidden;
}

.m22 .sec3 .box .swiper img{
border-radius:20px;
}

.m22 .sec3 .box .swiper .swiper-pagination-bullet {
width: 34px;
height: 6px;
border-radius:3px;
background:#fff;
opacity:1;
}

.m22 .sec3 .box .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
background:#565656;
}

.swiper-button-prev,
.swiper-button-next {
display: none;
}

.m22 .sec3 .con4 .box2 {
overflow-x:scroll;
}

.m22 .sec3 .con4 .box2 .img-box{
width: 1350px;
}

.m22 .sec3 .con4{
margin-top: 100px;
}


/* m23 */
.m23 .con {
margin-top:0;
}

.m23 .con-box {
margin-top:80px;
}

.m23 .content .con > .con-title {
font-size:clamp(26px, 3vw, 34px);;
font-weight: 600;
padding-bottom: 60px;
border-bottom: 1px solid #000;
}

.m23 .content .con .con-title__container{
padding-bottom: 60px;
border-bottom: 1px solid #000;
}

.m23 .content .con .con-title__container h3 {
font-size:clamp(26px, 3vw, 34px);;
font-weight: 600;
}

.m23 .content .con .con-title__container p {
font-size: 14px;
line-height: 1.7;
color: #666;
margin-top: 30px;
}

.m23 .sec1 .content1 .con1-img {
background:url(/images/page/m23_m_img1.png) no-repeat center / contain;
width:100%;
aspect-ratio:128/209;
} 

.m23 .sec1 .content1 .con1-text {
display: flex;
align-items: flex-start;
margin-top:60px;
flex-direction: column;
}

.m23 .sec1 .content1 .con1-text h3 {
font-size: min(6vw, 60px);
font-weight: 600;
line-height: min(8vw, 80px);
padding-bottom:50px;
}

.m23 .sec1 .content1 .con1-text .whatExosome-list {
padding: 20px 0;
width: 100%;
padding-top:50px;
border-top: 1px solid #e3e2e2;
}

.m23 .sec1 .content1 .con1-text .whatExosome-list .list-item {
position: relative;
padding-left: 17px;
font-size: 14px;
color: #666;
line-height: 1.7;
}

.m23 .sec1 .content1 .con1-text .whatExosome-list .list-item::before{
content: "";
position: absolute;
left: 0;
top: 11px;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid #0684c9;
box-sizing: border-box;
}

.m23 .sec1 .content2,
.m23 .sec1 .content3,
.m23 .sec1 .content4,
.m23 .sec1 .content5{
margin-top:100px;
}

.m23 .sec1 .content2 .con-title span {
color: var(--main-color);
}

.m23 .sec1 .content2 .con-box .box {
background: #f9f9f9;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 20px;
gap:45px;
}

.m23 .sec1 .content2 .con-box .box:not(:first-child){
margin-top:20px;
}

.m23 .sec1 .content2 .con-box .img-box {
width:100px;
height:100px;
border-radius: 50%;
background:#fff;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}

.m23 .sec1 .content2 .con-box .box p {
font-size: 14px;
line-height: 1.5;
color: #000;
padding: 40px 20px;
position: relative;
text-align: center;
}

.m23 .sec1 .content2 .con-box .box p::before{
content:'';
position: absolute;
top: 0;
left: 50%;
width: 60px;
height: 1px;
transform: translateX(-50%);
background-color: #e3e2e2;
}

.m23 .sec1 .content3 .con1 .con-box,
.m23 .sec1 .content3 .con2 .con-box{
background: #f9f9f9;
border-radius: 20px;
padding: 20px;
}

.m23 .sec1 .content3 .con1 .img-box {
background:url(/en/images/page/m23_m_img2.png) no-repeat center / contain;
aspect-ratio: 571/710
}

.m23 .sec1 .content3 .con2 {
margin-top:100px;
}

.m23 .sec1 .content3 .con2 .img-box {
background:url(/en/images/page/m23_m_img3.png) no-repeat center / contain;
aspect-ratio: 95/118;
}

.m23 .sec1 .content4 {
padding-bottom:100px;
}

.m23 .sec1 .content4 .con1 .con-box {
overflow-x:scroll;
}

.m23 .sec1 .content4 .con1 .con-box .img-box{
width:1350px;
}

.m23 .sec1 .content4 .con2,
.m23 .sec1 .content4 .con3{
margin-top:100px;
}

.m23 .sec1 .content4 .con2 .con-box h6{
font-size:clamp(24px, 2.6vw, 28px);;
font-weight: 600;
position: relative;
padding-left: 30px;
}

.m23 .sec1 .content4 .con2 .con-box h6::before{
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
border: 3px solid var(--main-color);
top: 10px;
left: 0px;
}

.m23 .sec1 .content4 .con2 .box {
margin-top:40px;
display: flex;
gap:50px;
flex-direction: column;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-1 {
background: #f9f9f9;
border-radius: 20px;
width:100%;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-1 .img-box {
text-align: center;
border-radius: 20px;
padding: 40px 20px;

}

.m23 .sec1 .content4 .con2 .con-box1 .box1-1 .img-caption {
margin-top:18px;
color: #fff;
padding: 12px 20px;
border-radius: 18px;
background: #00aeef;
width: max-content;
margin-left: auto;
font-size: 14px;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-2 {
width:100%;
border: 1px solid hwb(0 40% 60% / 34%);
border-radius: 20px;
text-align: center;
padding: 55px 30px 34px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-2__title {
font-size: 24px;
font-weight: 600;
margin-bottom:20px;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list {
border: 1px solid #e3e2e2; 
border-radius: 20px;
padding: 20px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top:40px;
        flex-direction: column;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list .list-item {
color: #666;
font-size: 14px;
position: relative;
padding-left: 40px;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list .list-item::before {
content: '';
width: 25px;
height: 3px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%);
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list .list-item::after{
content: '';
width: 7px;
height: 7px;
position: absolute;
top: 50%;
left: 9px;
transform: translateY(-50%);
border-radius: 50%;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list .list-item:nth-child(1)::before,
.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list .list-item:nth-child(1)::after{
background-color: #000;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list .list-item:nth-child(2)::before,
.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list .list-item:nth-child(2)::after{
background-color: #939598;
}

.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list .list-item:nth-child(3)::before,
.m23 .sec1 .content4 .con2 .con-box1 .box1-2Titile-list .list-item:nth-child(3)::after{
background-color: #00aeef;
}

.m23 .sec1 .content4 .con2 .con-box2 .box1 {
border-radius: 20px;
gap:100px;
}

.m23 .sec1 .content4 .con2 .con-box2 .box1 .box1-1,
.m23 .sec1 .content4 .con2 .con-box2 .box1 .box1-2{
width: 100%;
position: relative;
padding: 20px;
border: 1px solid #bfbfbf;
border-radius:20px;
}

.m23 .sec1 .content4 .con2 .con-box2 .box1 .box1-1::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #e3e2e2;
bottom: -50px;
}

.m23 .sec1 .content4 .con2 .con-box2 .box1 .box1-1 .img-box,
.m23 .sec1 .content4 .con2 .con-box2 .box1 .box1-2 .img-box{
background: #ffffff;
border-radius: 20px;
padding: 20px;
text-align: center;
}

.m23 .sec1 .content4 .con2 .con-box2 .box1 .box1-1 .img-caption{
color: #fff;
padding: 13px 40px;
border-radius: 21px;
background: #565656;
width: 100%;
margin: 20px auto 0;
font-size: 14px;
text-align: center
}

.m23 .sec1 .content4 .con2 .con-box2 .box1 .box1-2 .img-caption{
color: #fff;
padding: 13px 40px;
border-radius: 21px;
background: var(--main-color);
width: 100%;
margin: 20px auto 0;
font-size: 14px;
text-align: center
}

.m23 .sec1 .content4 .con3 .con-box1__container {
}

.m23 .sec1 .content4 .con3 .con-box1 {
display: flex;
flex-direction: column;
justify-content: space-between;
background: #f8f8f8;
border-radius: 20px;
padding: 40px;
gap:100px;
}

.m23 .sec1 .content4 .con3 .con-box1 .img-box {
position: relative;
}

.m23 .sec1 .content4 .con3 .con-box1 .box:not(:last-child) .img-box::after {
content: "";
width: 23px;
height: 30px;
background:url(/images/page/m23_m_icon_arr.png) no-repeat center / contain;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 70px);
}

.m23 .sec2 {
background-color: #f8f8f8;
padding: 100px 0;
}

.m23 .sec2 .content1 .con1 .con-box h6 {
font-size:clamp(24px, 2.6vw, 28px);;
font-weight: 600;
position: relative;
padding-left: 30px;
}

.m23 .sec2 .content1 .con1 .con-box h6::before {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
border: 3px solid var(--main-color);
top: 10px;
left: 0px;
}

.m23 .sec2 .content1 .con1 .con-box1 .box {
margin-top: 40px;
display: flex;
background: #ffffff;
border-radius: 20px;
gap: 100px;
flex-direction: column;
padding: 40px 20px;
}

.m23 .sec2 .content1 .con1 .box .box1-1{
width: 100%;
position: relative;
}

.m23 .sec2 .content1 .con1 .con-box1 .box1-1::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #e3e2e2;
bottom: -50px;
}

.m23 .sec2 .content1 .con1 .con-box1 .box1-1 .img-box {
border-radius: 20px;
}

.m23 .sec2 .content1 .con1 .con-box1 .box1-2 .img-box {
border-radius: 20px;
}

.m23 .sec2 .content1 .con1 .box .box1-1 .img-caption {
color: #fff;
padding: 13px 40px;
border-radius: 21px;
background: #565656;
width: 100%;
margin: 20px auto 0;
font-size: 14px;
text-align: center;
}

.m23 .sec2 .content1 .con1 .box .box1-2 .img-caption {
color: #fff;
padding: 13px 40px;
border-radius: 21px;
background: var(--main-color);
width: 100%;
margin: 20px auto 0;
font-size: 14px;
text-align: center;
}


.m23 .sec2 .content1 .con1 .con-box3 .con-box__textContainer,
.m23 .sec2 .content1 .con1 .con-box4 .con-box__textContainer {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
gap:20px;
}

.m23 .sec2 .content1 .con1 .con-box3 .con-box__textContainer p,
.m23 .sec2 .content1 .con1 .con-box4 .con-box__textContainer p{
color:#666;
font-size: 14px;
line-height: 1.7;
}

.m23 .sec2 .content1 .con1 .con-box3 .con-box__textContainer span,
.m23 .sec2 .content1 .con1 .con-box4 .con-box__textContainer span {
color:var(--main-color);
}

.m23 .sec2 .content1 .con1 .con-box2 .box-container,
.m23 .sec2 .content1 .con1 .con-box3 .box-container,
.m23 .sec2 .content1 .con1 .con-box4 .box-container{
}

.m23 .sec2 .content1 .con1 .con-box2 .box{
display: flex;
gap:20px;
flex-direction: column;
margin-top:20px;
} 

.m23 .sec2 .content1 .con1 .con-box3 .box,
.m23 .sec2 .content1 .con1 .con-box4 .box{
display: flex;
gap:20px;
margin-top:20px;
flex-wrap: wrap;
}


.m23 .sec2 .content1 .con1 .con-box3 .img-box,
.m23 .sec2 .content1 .con1 .con-box4 .img-box{
width: calc((100% - 20px)/2);
}


.m23 .sec2 .content1 .con1 .con-box2 .box .img-caption,
.m23 .sec2 .content1 .con1 .con-box3 .box .img-caption,
.m23 .sec2 .content1 .con1 .con-box4 .box .img-caption {
  margin-top: 20px;
  padding: 12px;
  border-radius: 27px;
  background: #ececec;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  text-align: center;
  display: flex;
  align-items: center; 
  justify-content: center;

}

.m23 .sec3 {
padding: 100px 0;
}

.m23 .sec3 .box-caption {
display: none;
}

.m23 .sec3 .box-caption .box-caption__1 {
background: #565656;
color: #fff;
padding: 12px 34px;
border-radius: 18px;
width: max-content;
font-size: 13px;
}

.m23 .sec3 .box-caption .box-caption__2 {
background: #00aeef;
color: #fff;
padding: 12px 34px;
border-radius: 18px;
width: max-content;
font-size: 13px;
}

.m23 .sec3 .box {
display: flex;
border-radius: 20px;
justify-content: space-between;
flex-direction: column;
}

.m23 .sec3 .con-box .box:nth-of-type(n+3) {
  margin-top: 90px;
}

.m23 .sec3 .box .box-1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background:#ececec;
border-radius: 20px;
width: 100%;
position: relative;
padding: 20px;
}

.m23 .sec3 .box .box-1::before{
content:'';
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #ececec;
border-radius: 20px;
}

.m23 .sec3 .box .box-1 span {
font-family: 'Poppins';
font-size: 14px;
color: var(--main-color);
font-weight: 500;
}

.m23 .sec3 .box .box-1 p {
margin-top: 21px;
color: #666;
font-size: 16px;
font-weight: 600;
}

.m23 .sec3 .box .box-2 {
display: flex;
gap:20px;
border-radius: 20px;
margin-top:20px;
position: relative;
}

.m23 .sec3 .box .box-2::before{
content: "";
width: 8px;
height: 8px;
position: absolute;
border-top: 2px solid var(--main-color);
border-right: 2px solid var(--main-color);
left: calc(50% - 4px);
transform: translate(-50%, -50%) rotate(45deg);
top: 50%;
}

.m23 .sec3 .box .box-2 .img-box{
position: relative;
}

.m23 .sec3 .box .box-2 .img-box1::after {
content:'Before treatment';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -70px;
background-color: #565656;
color:#fff;
border-radius: 27px;
height: 54px;
line-height: 54px;
width: 100%;
font-size: 14px;
text-align: center;
}

.m23 .sec3 .box .box-2 .img-box2::after {
content:'After 4ᵗʰ treattment';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -70px;
background-color: var(--main-color);
color:#fff;
border-radius: 27px;
height: 54px;
line-height: 54px;
width: 100%;
font-size: 14px;
text-align: center;
}



/* m33 */
.m33 .section1 {
padding-bottom: 180px;
}

.m33 .search-box {
width: 100%;
height: 180px;
background-color:#f8f8f8;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 50px;
}

.m33 form {
position: relative;
width: 100%;
}

.m33 .search-box input {
max-width: 844px;
width: 100%;
padding: 22px 30px;
border: 1px solid #bfbfbf;
border-radius:30px;
font-size:14px;
}


.m33 .search-box input::placeholder{
font-size:14px;
color:#888;
}

.m33 .search-box button {
position: absolute;
width:21px;
height: 21px;
transform: translate(-50%, -50%);
top:50%;
right:20px;
border:none;
background: url(/images/page/m33_icon1.png) no-repeat center / cover;
}

.m33 .notice-text {
margin-top:100px;
font-size: 16px;
line-height: 1.7;
font-weight: 600;
}

.m33 .notice-text span {
color: var(--main-color);
}

.m33 .brochure-list {
margin-top:60px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 40px;
grid-row-gap: 50px;
justify-items: center;
}

.m33 .brochure-list .list-item .thumb {
border-radius:20px;
overflow: hidden;
border: 1px solid rgba(102, 102, 102, 0.34);
}

.m33 .brochure-list .list-item .thumb img {
height: 100%;
width: 100%;
object-fit: cover;
}

.m33 .brochure-list .list-item .txtwrap{
margin:20px 0;
min-height:84px;
}

.m33 .brochure-list .list-item .tit {
font-family: 'Poppins';
font-size: 14px;
font-weight: 600;
color: #000;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}

.m33 .brochure-list .list-item .date {
font-family: 'Poppins';
font-size: 14px;
color: #666;
margin-top:20px;
}

.m33 .brochure-list .list-item a {
display:block;
background-color: var(--main-color);
border-radius:30px;
color: #fff;
font-size: 14px;
padding:18px 0;
text-align: center;
}




.bbs{padding: 0 0 180px;}
.bbs .list_type1{border-top: 1px solid #000;}
.bbs .list_type1 li{border-bottom: 1px solid #ccc;}
.bbs .list_type1 li a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 30px 20px;
}
.bbs .list_type1 li a .txtwrap{
display:flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.bbs .list_type1 li a .txtwrap .tit{
	font-size: 14px;
	font-weight: 600;
	display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.bbs .list_type1 li a .txtwrap .con{
display:none;
}
.bbs .list_type1 li a .txtwrap .date{
	font-size: 14px;
	color: #666;
}
.bbs .list_type1 li a .more_btn{
display:none;
}
.bbs .list_type1 li a .more_btn span{
	font-family: "Poppins";
	font-size: 14px;
}
.bbs .list_type1 li a .more_btn .arr{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 58px;
	height: 58px;
	border: 1px solid #000;
	border-radius: 50%;
	margin-left: 10px;
	transition: all 0.3s;
	flex-shrink: 0;
}
.bbs .list_type1 li a:hover .more_btn .arr{
	background: #0081c8;
	border: 1px solid #0081c8;
}
.bbs .list_type1 li a .more_btn .arr i{
	display: block;
	width: 10px;
	height: 10px;
	background: url(/images/page/bbs_arr.png) no-repeat center / cover;
	transition: all 0.3s;
}
.bbs .list_type1 li a:hover .more_btn .arr i{
	background: url(/images/page/bbs_arr_wh.png) no-repeat center / cover;
}

.bbs .list_type2{
	display: flex;
	flex-wrap: wrap;
	column-gap: 40px;
	row-gap: 50px;
}
.bbs .list_type2 li{
	width: calc((100% - 50px) / 2);
}
.bbs .list_type2 li a{
	display: block;
}
.bbs .list_type2 li a .thumb{
	width: 100%;
	aspect-ratio: 448 / 280;
	border-radius: 20px;
	overflow: hidden;
}
.bbs .list_type2 li a .thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.7s;
}
.bbs .list_type2 li a:hover .thumb img{
	transform: scale(1.1);
}
.bbs .list_type2 li a .txtwrap{
	margin-top: 35px;
}
.bbs .list_type2 li a .txtwrap .tit{
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.bbs .list_type2 li a .txtwrap .con{
	margin: 15px 0 20px;
	font-size: 14px;
	color: #555;
	line-height: 1.7em;
	height: 3.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.bbs .list_type2 li a .txtwrap .date{
	font-size: 16px;
	color: #666;
}

.bbs_view{padding: 0 0 180px;}
.bbs_view .titwrap{
	width: 100%;
	padding: 60px 4%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #ccc;
	text-align: center;
}
.bbs_view .titwrap .tit{
	font-size: 36px;
	font-weight: 600;
}
.bbs_view .titwrap .date{
	font-size: 18px;
	margin-top: 30px;
	color: #666;
}
.bbs_view .filewrap{
	width: 100%;
	padding: 30px 4%;
	border-bottom: 1px solid #ccc;
	background: #f9f9f9;
}
.bbs_view .filewrap ul{
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 5px;
}
.bbs_view .filewrap li a{
	font-size: 18px;
	display: flex;
	align-items: center;
}
.bbs_view .filewrap li a i{
	display: block;
	width: 20px;
	height: 18px;
	background: url(/images/page/file_icon.png) no-repeat center / contain;
	margin-left: 10px;
}
.bbs_view .conwrap{
	padding: 100px 4%;
	border-bottom: 1px solid #ccc;
}
.bbs_view .listBtn{
	text-align: center;
	margin-top: 70px;
}
.bbs_view .listBtn a{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 170px;
	height: 70px;
	border-radius: 70px;
	background: #0081c8;
	font-family: "Poppins";
	font-size: 14px;
	color: #fff;
}
.bbs_view .listBtn a img{margin-left: 60px;}


.m41 .section1{padding: 140px 0 220px; background: #f8f8f8;}
.m41 .section1 .formarea > .est{
	font-size: 14px;
	margin-bottom: 80px;
}
.m41 .section1 .formarea > .est span{
	color: #0081c8;
}
.m41 .section1 .formarea .inquirywrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 40px;
	flex-direction: column;
}
.m41 .section1 .formarea .inquirywrap dl{width: 100%;}
.m41 .section1 .formarea .inquirywrap dl.w50{width: 100%;}
.m41 .section1 .formarea .inquirywrap dl.blank{height: 0;display: none;}
.m41 .section1 .formarea .inquirywrap dl dt{
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 15px;
}
.m41 .section1 .formarea .inquirywrap dl dt .est{
	color: #0081c8;
}
.m41 .section1 .formarea .inquirywrap dl dd{}
.m41 .section1 .formarea .inquirywrap dl dd input{
	box-sizing: border-box;
	height: 60px;
	padding: 0 25px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #c6c6cb;
	font-size: 14px;
	width: 100%;
	outline: none;
}
.m41 .section1 .formarea .inquirywrap dl dd.tel {
	display: flex;
}
.m41 .section1 .formarea .inquirywrap dl dd.tel .etc{
	width: 20px;
	line-height: 1.7;
	text-align: center;
}
.m41 .section1 .formarea .inquirywrap dl dd.tel input[type="tel"]{
	width: calc((100% - 40px) / 3);
}
.m41 .section1 .formarea .inquirywrap dl dd select{
	width: 100%;
	border: 1px solid #c6c6cb;
	height: 60px;
	padding: 0 25px;
	box-sizing: border-box;
	border-radius: 8px;
	font-size: 14px;
	appearance: none;
	background: url(/images/page/m41_select_arr.png) no-repeat right 25px center #fff;
}

.m41 .section1 .formarea .inquirywrap dl dd textarea {
	font-size: 14px;
	width: 100%;
	height: 250px;
	resize: none;
	border: 1px solid #c6c6cb;
	border-radius: 8px;
	overflow-y: auto;
	padding: 25px;
	box-sizing: border-box;
}

.m41 .section1 .formarea .agreewrap{
	margin-top: 90px;
	padding: 90px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.m41 .section1 .formarea .agreewrap > .tit{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 50px;
}
.m41 .section1 .formarea .agreewrap .txtwrap{
	width: 100%;
	padding: 25px;
	box-sizing: border-box;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #c6c6cb;
}
.m41 .section1 .formarea .agreewrap .txtwrap .txts{
	width: 100%;
	height: 250px;
	overflow-y: auto;
	font-size: 16px;
	line-height: 1.7em;
}
.m41 .section1 .formarea .agreewrap .txtwrap .txts .con{
	margin-top: 50px;
}
.m41 .section1 .formarea .agreewrap .txtwrap .txts .con .tit{
	font-size: 16px;
	font-weight: 600;
	color: #666;
	margin-bottom: 25px;
}
.m41 .section1 .formarea .agreewrap .txtwrap .txts .con p{
	font-size: 14px;
	line-height: 1.7em;
}
.m41 .section1 .formarea .agreewrap .txtwrap .txts .con .list{
	margin: 20px 0;
}
.m41 .section1 .formarea .agreewrap .txtwrap .txts .con .list .exp{
	position: relative;
	padding-left: 23px;
}
.m41 .section1 .formarea .agreewrap .txtwrap .txts .con .list .exp:after{
	content: "";
	position: absolute;
	left: 13px;
	top: 12px;
	width: 5px;
	height: 1px;
	background: #666;
}

.m41 .section1 .formarea .agreewrap .txtwrap .txts::-webkit-scrollbar {
	width: 3px;
}
.m41 .section1 .formarea .agreewrap .txtwrap .txts::-webkit-scrollbar-thumb {
	background: #000;
}
.m41 .section1 .formarea .agreewrap .txtwrap .txts::-webkit-scrollbar-track {
	background: #ccc;
}

.m41 .section1 .formarea .agreewrap .agree{
	padding-top: 30px;
	display: flex;
	align-items: center;
}
.m41 .section1 .formarea .agreewrap .agree .agree_btn{
	width: 27px;
	height: 27px;
}
.m41 .section1 .formarea .agreewrap .agree label{
	padding-left: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #000;
}

.m41 .section1 .formarea .buttonarea{
	margin-top: 60px;
	text-align: center;
}
.m41 .section1 .formarea .buttonarea button{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 170px;
	height: 70px;
	border-radius: 70px;
	border: none;
	background: #0081c8;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}
.m41 .section1 .formarea .buttonarea button i{
	display: block;
	width: 10px;
	height: 10px;
	background: url(/images/page/m41_submit_arr.png) no-repeat center / contain;
	margin-left: 20px;
}


/* 모션 */
.ani {
opacity: 0;

transition: all 1s;
}

.ani.top {
transform: translateY(50px);
}

.ani.left {
transform: translateX(-50px);
}

.ani.right {
transform: translateX(50px);
}

.ani.in-view {
opacity: 1;
}

.ani.top.in-view {
transform: translateY(0px);
}

.ani.left.in-view {
transform: translateX(0px);
}

.ani.right.in-view {
transform: translateX(0px);
}