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

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

.pcbr{display:none;}
.ptbr{display: none;}
.tbbr{display:none;}
.tmbr{display: block;}
.mbbr{display:block;}
.pc_view{display: none !important;}
.pt_view{display: none !important;}
.t_view{display: none !important;}
.tm_view{display: block !important;}
.m_view{display: block !important;}
.dn{display:none;}
* {font-family:"Pretendard", "Noto Sans KR",  "돋움", dotum,sans-serif;box-sizing:border-box;}
button{background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer;}

/*subvisual*/
.sub_visual{position: relative;width: 100%; height: 100vh;z-index:10;
display: flex;align-items:center;
overflow:hidden;
}
.sub_visual .bg{
	position: absolute;
	width:100%;height:100%;
	top:0;left:0;
	overflow:hidden;
	z-index:-1;
}
.sub_visual .bg{
	width: 100%;height: 100%;
	background: url(/images/page/sub_visual1.jpg)no-repeat center / cover;
}
.sub_visual .bg.pn1{background: url(/images/page/sub_visual1.jpg) no-repeat center / cover;}
.sub_visual .bg.pn2{background: url(/images/page/sub_visual2.jpg) no-repeat center / cover;}
.sub_visual .bg.pn2.sn2{background: url(/images/page/sub_visual22.jpg) no-repeat center / cover;}
.sub_visual .bg.pn2.sn3{background: url(/images/page/sub_visual23.jpg) no-repeat center / cover;}
.sub_visual .bg.pn3{background: url(/images/page/sub_visual3.jpg) no-repeat center / cover;}
.sub_visual .bg.pn4{background: url(/images/page/sub_visual4.jpg) no-repeat center / cover;}
.sub_visual .bg.pn5{background: url(/images/page/sub_visual5.jpg) no-repeat center / cover;}
.sub_visual .slogan{
	text-align: center;width:100%;
	padding:0 2vw;
}
.sub_visual .slogan h2{
	font-family:"Cormorant";font-size:min(16vw, 45px);color:#fff;font-weight:600;
}
.sub_visual .slogan p{
	position: relative;
	margin-top:10px;
	font-size:min(5vw, 22px);color:#fff;font-family: "Pretendard";font-weight:500;
}

/*subtab*/
.subtabarea {
position: absolute;
left:50%;
width:100%;
bottom: 40px;
display: flex;justify-content:center;
transform:translateX(-50%);
}
.subtabarea .subtab{
	 border-radius: 32.5px; /* 둥근 모서리 */
    display: flex;
	width:auto;
    padding: 5px 4vw;
	background: rgba(255,255,255,0.1);
	backdrop-filter:blur(10px);
}
.subtab li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.subtab li a {
    display: block;
	box-sizing:border-box;
    padding: 0 4vw;
    color: #fff;
    text-decoration: none;
	white-space:nowrap;
    font-size: 15px;
    font-weight: 400;
    border-radius: 32.5px;
    transition: background-color 0.3s, color 0.3s;
	text-align: center;
	height: 55px;
	line-height: 55px;
}

.subtab li.on a {
    background-color: #399646;
    color: #fff;font-weight: 400;
}

.subtab li a:hover {
    background-color: rgba(57,150,70,0.8);
    color: #fff;
}

.subtab li + li {
    margin-left: 10px;
}

.m00{width:100%;/* overflow:hidden; */padding:100px 0;}
.innerwrap{max-width:1760px;width:94%;box-sizing:border-box;margin:0 auto;}
section{padding-top: 100px;}
section.sec1{padding-top: 0;}
.pgTit{
	width:94%;
	position: relative;
	color:#222222;font-size:34px;font-weight: bold;
	margin-bottom: 60px;
}
.pgTit h3{font:inherit;font-family: "Pretendard";}
.pgDesc{
color:#222222;font-size:20px;font-weight: 600;line-height: 1.3em;
}

/*m11*/
.m11{padding-bottom: 0;}
.m11 .overview{
	margin-top:90px;padding-bottom:100px;
	position: relative;
	overflow:hidden;
}
.m11 .overview ul{
	display:flex;flex-wrap:wrap;
	border-top:1px solid #ccc;
}
.m11 .overview ul li{
	position: relative;
	box-sizing:border-box;
	width:100%;
	padding:40px 3vw;
	border-bottom:1px solid #ccc;
}

.m11 .overview ul li .icon{margin-bottom: 40px;}
.m11 .overview ul li .txts{}
.m11 .overview ul li .txts .tit{font-size:20px;color:#000;font-weight:600;}
.m11 .overview ul li .txts .txt{margin-top:20px;font-size:16px;color:#666;line-height:1.7em;}

.m11 h4.tit2{
color:#000000;font-weight: bold;font-size:22px;font-family: "Pretendard";margin-bottom: 57px;
}
.m11 .sec2{
background: #f3f3f3;padding-bottom: 100px;
}
.m11 .sec2 .slog{
font-size:26px;color:#000;font-weight:600;font-family: "Pretendard";line-height: 1.4em;margin-bottom: 40px;display: block;
}
.m11 .sec2 .slog strong{font:inherit;font-weight: bold;color:#399646;}
.m11 .greeting{
}
.m11 .greeting>.img{width:100%;}
.m11 .greeting>.img img{display: block;margin:0 auto;width:100%;}

.m11 .greeting>.txtarea{width: 100%;padding-left: 0;margin-top: 50px;}

.m11 .greeting>.txtarea .txt{
font-size:15px;color:rgba(0,0,0,0.8);line-height: 1.6em;font-weight: 300;
}
.m11 .greeting .boxs{display: flex;flex-wrap:wrap;gap:20px;;margin:40px 0;}
.m11 .greeting .boxs>li{
background: #fff;width:100%;
padding:40px 4vw;
}
.m11 .greeting .boxs>li  img{display: block;margin:0 auto;}
.m11 .greeting .boxs>li .ltit{
margin-top: 20px;margin-bottom: 20px;text-align: center;display: block;
color:#000000;font-weight: 600;font-size:20px;
}
.m11 .greeting .boxs>li .ltxt{
text-align: center;font-weight: 300;font-size:15px;line-height: 1.5em;color:rgba(0,0,0,0.8);
}
.m11 .greeting .ceo{margin-top: 30px;display: flex;align-items:center;}
.m11 .greeting .ceo .bar{
display: block;margin:0 2vw;
width:1px;height:16px;background: #c2c2c2;
}
.m11 .greeting .ceo p,
.m11 .greeting .ceo b{
color:#000000;font-weight: 500;font-size:16px;
}
.m11 .greeting .ceo b{font-weight: 600;display: block;margin-right: 15px;}
.m11 .sec3{
position: relative;width:100%;
padding-top: 0;
}
.m11 .sec3:before{
	position: absolute;content:'';
	width:100%;height:calc(25% + 200px);
	top:0;left:0;
	background: #f3f3f3;
	z-index:-1;
}
.m11 .merit{
position: relative;
width:100%;
padding:100px 4.17vw 80px;
}
.m11 .merit .bg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: -1;
background: url(/images/page/m11_merit_bg.jpg)no-repeat center / cover;
}
.m11 .merit .titlearea{
text-align: center;
padding-bottom: 55px;
border-bottom: 1px solid rgba(255,255,255,0.5);
margin-bottom: 80px;
}
.m11 .merit .titlearea h5{
text-align: center;color:#ffffff;font-weight: 600;font-size:22px;
}
.m11 .merit .list{
display: flex;flex-wrap:wrap;
gap:20px 1.04vw;
}
.m11 .merit .list>li{
width:100%;background: #ffffff;
padding:40px 0;
display: flex;
flex-direction:column;
align-items:center;
}
.m11 .merit .list>li .icon{

display: flex;align-items:center;justify-content:center;

}
.m11 .merit .list>li dl{width: 100%;
padding:2vw;
}
.m11 .merit .list>li dl>dt{
color:#000000;font-size:20px;font-weight: 600;text-align: center;
}
.m11 .merit .list>li dl>dd{
font-weight: 300;font-size:15px;line-height: 1.5em;color:rgba(0,0,0,0.8);
margin-top: 20px;text-align: center;
}
.m11 .sec4{
width:100%;
padding-bottom: 300px;
background: url(/images/page/m11_sec4_bg_mo.jpg)no-repeat center bottom /100%;
}
.m11 .sec4 .imgwrap{
margin-top: 100px;
}
.m11 .sec4 .imgwrap img{display: block;margin:0 auto;width:min(40vw, 640px);}

@media screen and (max-width:990px){
.m11 .sec4 .imgwrap img{width:min(65vw, 640px);}
}
@media screen and (max-width:500px){
.m11 .sec4 .imgwrap img{width:min(80vw, 100%);}
}
@media screen and (max-width:320px){
.m11 .sec4 .imgwrap img{width:min(90%, 100%);}
}
@media screen and (max-width:290px){
.m11 .sec4 .imgwrap img{width:100%;;}
}

/*m12*/
/*m12*/
.m12 .sec1{position: relative;margin-top: 40px;padding: 0 0 50px;}
.m12 .sec1 .con_title_g{text-align: left;margin-bottom:50px;}
 .m12 .con_title_g .title2 {
        font-size: 24px;
        font-weight: 600;
        color: #222222;
        line-height: 1.3;
		margin-bottom: 40px;
    }
.m12 .sec1 .history_slider:before{display: block;
content:"";position: absolute;top: 7px;left: 0;width: calc(100vw - 260px);height: 3px;
background:  linear-gradient(90deg, #399646,#bec7c3,#bec7c3);}
.m12 .sec1 .history_slider{position: relative;}
.m12 .sec1 .history_slider .item{position: relative;padding-top: 60px;padding-right: 30px;width: 100%;/* max-width:700px !important; */}
.m12 .sec1 .history_slider .item:before{display: block;content:"";position: absolute;top: 0;left: 0;width: 15px;height: 15px;border: 4px solid #cacaca;background: #f4f1ee;border-radius: 50%;box-sizing: border-box;transition: 0.3s;z-index: 20;}
.m12 .sec1 .history_slider .item:after{display: block;content:"";position: absolute;top: 7px;left: 0;width: 200%;height: 3px;background: linear-gradient(90deg, #bec7c3, #cacaca, #cacaca);transition: 0.5s;}
.m12 .sec1 .history_slider .year{font-size: 36px;
letter-spacing:-0.02em;
color: rgba(202,202,202,1);line-height: 1em;font-family: 'Wix Madefor Display',sans-serif;font-weight: 600;margin-bottom: 30px;transition: 0.3s;}
.m12 .sec1 .history_slider .history ul > li{width: 100%;display: flex;flex-wrap: wrap;}
.m12 .sec1 .history_slider .history ul > li + li{margin-top: 12px;}
.m12 .sec1 .history_slider .history ul > li .con{
word-break:break-all;position: relative;padding-left: 14px;
width:calc(100% - 46px);box-sizing:border-box;padding-right: 1vw;
font-size: 15px;color: rgba(0,0,0,0.8);font-weight: 300;line-height: 1.5;transition: 0.3s;}
.m12 .sec1 .history_slider .history ul > li .con + .con{margin-top: 10px;}
.m12 .sec1 .history_slider .history ul > li .con:before{
	position: absolute;content:'';
	width: 5px;height: 5px;border-radius:50%;
	box-sizing:border-box;
	border:1px solid #bcbcbc;
	top:9px;left:0;
}
/* .m12 .sec1 .history_slider .history ul > li .img{margin-top: 32px;}
.m12 .sec1 .history_slider .history ul > li .img img{max-width:100%;} */
.m12 .sec1 .history_slider .history>.img{margin-top: 44px;}
.m12 .sec1 .history_slider .history>.img img{max-width:100%;width:438px;min-height:246px;object-fit:contain;}


.m12 .sec1 .history_slider .swiper-slide-prev .history ul > li .img{opacity:0.5;}
.m12 .sec1 .history_slider .swiper-slide-active .history ul > li .img,
.m12 .sec1 .history_slider .swiper-slide-next .history ul > li .img{opacity:1;}


.m12 .sec1 .history_slider .item.swiper-slide-next:before{border-color:#98c29e;}
.m12 .sec1 .history_slider .item.swiper-slide-active:before{background:#f5f5f5;border-color:#399646;}
.m12 .sec1 .history_slider .item.swiper-slide-next:after{background: linear-gradient(90deg, #399646,#bec7c3,#bec7c3);}
.m12 .sec1 .history_slider .item.swiper-slide-prev:after{background: linear-gradient(90deg,  #399646,#cf206d);}
.m12 .sec1 .history_slider .item.swiper-slide-active:after{background: linear-gradient(90deg, #399646, #98c29e,#98c29e,#e8e8e8);}
.m12 .sec1 .history_slider .swiper-slide-next .year{color:#444;}
.m12 .sec1 .history_slider .swiper-slide-next .history ul > li .con,
.m12 .sec1 .history_slider .swiper-slide-active .history ul > li .con{color:#000000;}
.m12 .sec1 .history_slider .swiper-slide-active .year{color:#399646;}
.m12 .sec1 .his_util{}
.m12 .sec1 .his_util .swiper-pagenav{display: flex;flex-wrap: wrap;align-items: center;}
.m12 .sec1 .his_util .swiper-pagination{
padding: 0 20px;padding-left: 0;display: block;width: auto;bottom: auto;position: relative;font-size: 14px;
color: #878787;font-family: 'Wix Madefor Display',sans-serif;font-weight: 500;}
.swiper-pagination-current{color:#282828;font-weight: 600;}
.m12 .sec1 .his_util button{position: relative;width: 40px;height: 40px;background: #f1f1f1;border-radius: 50%;display: block;}
.m12 .sec1 .his_util button:hover{
background: #282828;
}
.m12 .sec1 .his_util button:hover:before{
	border: 1px solid #d4d4d4;border-top: 0;border-left: 0;
}
.m12 .sec1 .his_util button:before{display: block;content:"";
position: absolute;top: 50%;left: 50%;width: 4px;height: 4px;border: 1px solid #777;
transform: translate(-50%, -50%) rotate(135deg);border-top: 0;border-left: 0;}
.m12 .sec1 .his_util button.button_next{margin-left: 6px;}
.m12 .sec1 .his_util button.button_next:before{transform: translate(50%, -50%) rotate(-45deg);left: 15px;}

/*m13*/
.m13 .maparea{
margin:60px auto;
width:100%;
}
.m13 .maparea .root_daum_roughmap{
	width: 100%;
}
.m13 .maparea .root_daum_roughmap .wrap_map{
	width: 100%;
	height: 65vh;
}
.m13 .maparea .root_daum_roughmap .cont{
	display: none;
}


.m13 .info{
display: flex;flex-wrap:wrap;row-gap:40px;
}
.m13 .info>dl{width:100%;padding-left:calc(60px + 3vw);position: relative;padding-right: 6vw;}
.m13 .info>dl:last-child{margin-right: 0;}
.m13 .info>dl:before{
	position: absolute;content:'';
	width: 60px;height: 60px;
	border-radius:50%;
	top:0;left:0;
	background: url(/images/page/m13_icon1.png)no-repeat center / cover;
}
.m13 .info>dl.tel:before{
background: url(/images/page/m13_icon2.png)no-repeat center / cover;
}
.m13 .info>dl.fax:before{
background: url(/images/page/m13_icon3.png)no-repeat center / cover;
}
.m13 .info>dl.mail:before{
background: url(/images/page/m13_icon4.png)no-repeat center / cover;
}
.m13 .info>dl{}
.m13 .info> dl + dl{}
.m13 .info>dl>dt{
font-size:20px;color:#000000;font-weight: 700;font-family: "Pretendard";
margin-bottom: 16px;
}
.m13 .info>dl>dd,
.m13 .info>dl>dd>a{
word-break:keep-all;word-wrap:normal;
color:rgba(0,0,0,0.8);font-size:15px;font-weight: 300;line-height: 1.6em;
}


/*m21,m22,m23 sec1 공통*/
/* .m20 .sec1{padding:0 0 150px;} */
.m20{padding-top: 0;}
.m20 .pgTit{display: none;}
.m20 .sec1{
	padding: 120px 0;
	overflow: hidden;
}
.m20 .sec1 .innerwrap{
	position: relative;
	display: flex;
	flex-direction:column-reverse;
}
.m20 .sec1 .txtwrap{
	position: relative;
	z-index: 1;
	margin-top: 50px;
	width:100%;
}
.m20 .sec1 .txtwrap h2{
	font-family: "Pretendard", serif;
	font-size: 15px;
	font-weight: 600;
	color: #222222;
}
.m20 .sec1 .txtwrap h3{
	font-family: "Noto Serif KR";
	font-size: 23px;
	font-weight: 500;
	line-height: 1.5em;
	color: #000;
	margin: 28px 0;
}
.m20 .sec1 .txtwrap h3 * {font-family: "Noto Serif KR";}
.m20 .sec1 .txtwrap p{
	font-size: 15px;
	line-height: 1.7em;
	color: rgba(0,0,0,0.8);
	font-weight: 350;
}
.m20 .sec1 .txtwrap .infowrap{
margin-top:22px;padding-top: 22px;
border-top:1px solid rgba(0,0,0,0.2);
}
.m20 .sec1 .txtwrap .infowrap h6{color:#000000;font-size:17px;font-weight: 600;font-family: "Pretendard";margin-bottom: 30px;}
.m20 .sec1 .txtwrap .infowrap ul{display: flex;flex-wrap:wrap;gap:10px;}
.m20 .sec1 .txtwrap .infowrap ul>li{
position: relative;
background: #eeeeee;
border-radius:30px;
height: auto;
padding:30px 3vw;
width:calc((100% - 10px * 2) / 3);
display: flex;align-items:center;justify-content:center;
color:#222222;font-size:15px;font-weight: 600;
font-family: "Pretendard";
}
.m20 .sec1 .txtwrap .infowrap ul>li>span{font:inherit;color:inherit;text-align: center;}
.m20 .sec1 .txtwrap .infowrap ul>li:before{
	position: absolute;
	content:'';
	right:-8px;
	top:50%;transform:translateY(-50%);
	background: url(/images/page/m21_sec1_tri.png)no-repeat center / contain;
	width: 6px;height: 12px;
}
.m20 .sec1 .txtwrap .infowrap ul>li:last-child:before{display: none;}
.m20 .sec1 .txtwrap .infowrap ul.type2{gap:0.83vw;}
.m20 .sec1 .txtwrap .infowrap ul.type2>li{
width:calc((100% - 0.83vw * 2) / 3);
}
.m20 .sec1 .txtwrap .infowrap ul.type2>li:before{display: none;}
.m20 .sec1 .img{
	width: 100%;
	height: 65vh;
	max-height: 740px;
/* 	visibility: hidden; */
	overflow: hidden;
}
.m20 .sec1 .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* m21 */
.m21{padding-bottom: 0;}
.m21 h5{font-size:20px;color:#171717;font-weight:600;}
.m21 .sec2{
	padding:120px 0;
	background:#f3f3f3;
	text-align:center;
}
.m21 .sec2 .title{}
.m21 .sec2 .title>div:nth-child(1){font-size:16px;color:#000;font-weight:500;padding:0 4vw;line-height: 1.5em;}
.m21 .sec2 .title>div:nth-child(1) strong{color:#399646;font-weight:500;}
.m21 .sec2 .title>div:nth-child(2){margin-top:25px;font-size:25px;color:#171717;font-weight:600;line-height:1.3em;}
.m21 .sec2 .img{margin:60px 0 0;}
.m21 .sec2 .img img:last-child{display: block;margin-top: 30px;}

.m21 .sec3{
	padding:120px 0;
	text-align:center;
}
.m21 .sec3 .title{}
.m21 .sec3 .title>div:nth-child(1){font-size:16px;color:#171717;font-weight:500;}
.m21 .sec3 .title>div:nth-child(2){margin-top:20px;font-size:25px;color:#399646;font-weight:600;line-height:1.3em;}
.m21 .sec3 ul{display:flex;justify-content:space-between;margin:60px 0 55px;}
.m21 .sec3 ul li{margin:0 2px;}
.m21 .sec3 ul li:nth-child(1){margin-left:0;}
.m21 .sec3 ul li:nth-child(5){margin-right:0;}
.m21 .sec3 .exp{
	padding:0 5%;
	text-align:left;
}
.m21 .sec3 .exp dl{}
.m21 .sec3 .exp dl dt{font-size:21px;color:#000;font-weight:500;}
.m21 .sec3 .exp dl dd{margin-top:20px;font-size:17px;color:#444;}

.m21 .sec4{
	padding:120px 0;
	background:#f3f3f3;
	text-align:center;
}
.m21 .sec4 h5{text-align:left;}
.m21 .sec4 .state{margin:55px 0 0;}
.m21 .sec4 .state ul{display:flex;flex-wrap:wrap;justify-content:space-between;}
.m21 .sec4 .state ul li{width:100%;padding:0 0 15px;border-bottom:1px solid #ccc;}
.m21 .sec4 .state ul li + li{margin-top: 20px;}
.m21 .sec4 .state ul li.line{width:1px;background:#ccc;display: none;}
.m21 .sec4 .state ul li .img img{width:100%;}
.m21 .sec4 .state ul li .tit{
	display:flex;align-items:center;justify-content:center;
	width:100%;height:52px;
	margin:30px 0;
	border-radius:26px;
	background:#399646;
	font-size:16px;color:#fff;font-weight:600;text-align:center;
}
.m21 .sec4 .state ul li .info{display:flex;}
.m21 .sec4 .state ul li .info dl{
	box-sizing:border-box;
	position:relative;
	width:33.333%;
	padding:0 4vw;
	border-right:1px solid #ccc;
	text-align:left;
}
.m21 .sec4 .state ul li .info dl:before{
	display:block;content:"";
	width:3px;height:3px;
	border:1px solid #399646;
	border-radius:50%;
	position:absolute;left:5px;top:4px;
}
.m21 .sec4 .state ul li .info dl:first-child{padding:0 10px;padding-right: 2vw;}
.m21 .sec4 .state ul li .info dl:last-child{border:0;}
.m21 .sec4 .state ul li .info dl dt{font-size:14px;color:#000;font-weight:500;}
.m21 .sec4 .state ul li .info dl dd{margin-top:10px;font-size:14px;color:#000;}
.m21 .sec4 .list{
	margin:60px 0 0;
	padding:50px 4vw;
	background:#fff;
	text-align:center;
}
.m21 .sec4 .list h6{font-size:19px;color:#000;font-weight:500;}
.m21 .sec4 .list ul{display:flex;flex-wrap:wrap;gap:10px 10px;margin:30px 0 0;}
.m21 .sec4 .list ul li{
	box-sizing:border-box;
	width:calc((100% - 10px * 2) / 3);
	padding:15px 0;
	border:1px solid #ccc;
	border-radius:10px;
	text-align:center;
}
.m21 .sec4 .list ul li .icon{display:inline-flex;align-items:center;height:44px;}
.m21 .sec4 .list ul li .tit{font-size:15px;color:#000;}

.m21 .sec5{padding:120px 0 100px;}
.m21 .sec5 .title{text-align:center;}
.m21 .sec5 .title>div{font-size:25px; line-height: 1.5em; color:#171717;font-weight:600;}
.m21 .sec5 .title>div span{color: #399646;}
.m21 .sec5 .title p{
	font-size: 15px;
	line-height: 1.7em;
	color: #444;
	margin-top: 20px;
}
.m21 .sec5 .title p b{
	font-weight: 600;
}
.m21 .sec5 .conwrap{

}
.m21 .sec5 .conwrap .graph{
	margin: 40px 0 50px;
}
.m21 .sec5 .conwrap .graph .cate{
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}
.m21 .sec5 .conwrap .graph .cate dl{
	display: flex;
	align-items: center;
}
.m21 .sec5 .conwrap .graph .cate dl + dl{
	margin-left: 40px;
}
.m21 .sec5 .conwrap .graph .cate dl dt{
	display: block;
	width: 20px;
	height: 20px;
	background: #dfdfdf;
	margin-right: 10px;
}
.m21 .sec5 .conwrap .graph .cate dl:nth-child(2) dt{
	background: #399646;
}
.m21 .sec5 .conwrap .graph .cate dl dd{
	font-size: 16px;
	font-weight: 500;
}
.m21 .sec5 .conwrap .graph .img{
	text-align: center;
	width:100%;overflow:hidden;overflow-x:auto;
	padding-bottom: 20px;
}
.m21 .sec5 .conwrap .graph .img img{max-width:unset;width:840px;}
.m21 .sec6{
	padding:0;
}
.m21 .sec6 .box_tit{
	font-size: 26px;
	text-align: center;
	line-height: 1.4em;
	font-weight: 600;
	color: #000;
	margin-bottom: 80px;
}
.m21 .sec6 .box_tit span{
	color: #399646;
}

.m21 .sec6 .step{position:relative;width:100%;padding:110px 0;}
.m21 .sec6 .step .bglist>.bg{
	position: absolute;
	top:50%;left:50%;
	transform:translate(-50%, -50%);
	width: 100%;height: 100%;
	opacity:0;transition:opacity 0.6s;
}
.m21 .sec6 .step .bglist>.bg1{background: url(/images/page/m21_sec6_img1.jpg)no-repeat center / cover;}
.m21 .sec6 .step .bglist>.bg2{background: url(/images/page/m21_sec6_img2.jpg)no-repeat center / cover;}
.m21 .sec6 .step .bglist>.bg3{background: url(/images/page/m21_sec6_img3.jpg)no-repeat center / cover;}
.m21 .sec6 .step .bglist>.bg.act{opacity:1;}
.m21 .sec6 .step ul{
	display:flex;flex-wrap:wrap;gap:1.82vw;
	margin:0 auto;
	max-width: 1480px;
	width: 94%;
	box-sizing: border-box;
}
.m21 .sec6 .step ul li{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	width:100%;
	aspect-ratio:47 / 40;
	position: relative;
	z-index:20;
	border:1px solid rgba(255,255,255,0.4);
	transition:all 0.3s ease;
	cursor:pointer;
}
.m21 .sec6 .step ul li.act{
background: rgba(255,255,255,0.25);
border:none;
backdrop-filter:blur(20px);
}

.m21 .sec6 .step ul li .tit{font-size:16px;color:#fff;font-weight:600;margin-top: 25px;line-height: 1.6em;text-align: center;}

@media screen and (max-width:990px){
	.m21 .sec6 .step ul{flex-direction:column;align-items:center;}
	.m21 .sec6 .step ul li{
		width:100%;
	}
}






/* m22 */
/* m22 */
.m22{padding-bottom:0;}
.m22 h5{font-size:21px;color:#171717;font-weight:600;}
.m22 h5.specTitle{font-size:18px;}
.m22 .sec2{
	padding:120px 0;
	background:#f3f3f3;
	text-align:left;
}
.m22 .sec2 h4{font-size:30px;color:#000;font-weight:600; margin-bottom: 50px;}
.m22 .sec2 .img1{margin:30px 0 0;width:100%;overflow:hidden;overflow-x:auto;}
.m22 .sec2 .img1 img{width:940px;max-width:unset;}
.m22 .sec2 .title_g{
margin:60px 0 40px;

}
.m22 .sec2 .title_g h5{}
.m22 .sec2 .title_g h6{margin-top: 25px;font-size:17px;color:#000;font-weight:600;line-height: 1.4em;}
.m22 .sec2 .title_g h6 strong{font-weight:600;}
.m22 .sec2 .title_g h6 strong.c1{color:#963939;}
.m22 .sec2 .title_g h6 strong.c2{color:#399646;}
.m22 .sec2 .conwrap{
	display:flex;flex-wrap:wrap;
	margin:70px 0 0;
}
.m22 .sec2 .conwrap .area{box-sizing:border-box;}
.m22 .sec2 .conwrap .area:nth-child(1){width:100%;}
.m22 .sec2 .conwrap .area:nth-child(2){width:100%;margin-top: 50px;}
.m22 .sec2 .conwrap .area img{width: 100%;}
.m22 .sec2 .conwrap .area > ul{
	margin:30px 0 0;
	padding:20px 4vw;
	background: #e5e5e5;
	display: flex;flex-direction:column;align-items:center;
}
.m22 .sec2 .conwrap .area > ul li{
	position:relative;
	padding-left:15px;
	font-size:15px;color:#555;
}
.m22 .sec2 .conwrap .area > ul li:before{
	display:block;content:"";
	width:5px;height:5px;
	border:1px solid #bbb;
	border-radius:50%;
	position:absolute;left:0;top:4px;
}
.m22 .conwrap .area .spec{margin:28px 0 0;border-top:1px solid #000;}
.m22 .conwrap .area .spec dl{
	display:flex;
	padding:32px 0;
	border-bottom:1px solid #ccc;
}
.m22 .conwrap .area .spec dl dt{width:150px;font-size:15px;color:#000;font-weight:500;}
.m22 .conwrap .area .spec dl dd{
	width:calc(100% - 150px);
	font-size:15px;color:#555;
}
.m22 .conwrap .area .spec dl dd ul{width:80%;}
.m22 .conwrap .area .spec dl dd ul.type2{column-count: 2;}
.m22 .conwrap .area .spec dl dd ul li{
	position:relative;
	padding-left:15px;
	font-size:15px;color:#555;line-height:1.7em;
}
.m22 .conwrap .area .spec dl dd ul li:before{
	display:block;content:"";
	width:5px;height:5px;
	border:1px solid #bbb;
	border-radius:50%;
	position:absolute;left:0;top:8px;	
}

.m22 .sec3{padding:120px 0;}
.m22 .sec3 h4{
	font-size: 26px; font-weight: 600; color: #000; margin-bottom: 50px;
}
.m22 .sec3 .img1{
	margin:50px 0;
}
.m22 .sec3 .img1>div{background:#f3f3f3;}
.m22 .sec3 .img1>div:nth-child(1){width:100%;}
.m22 .sec3 .img1>div:nth-child(3){width:100%;margin-top: 20px;}
.m22 .sec3 .title_g{
margin:60px 0 40px;
}

.m22 .sec3 .title_g h6{margin-top: 40px;font-size:17px;color:#000;font-weight:600;line-height: 1.4em;}
.m22 .sec3 .conwrap{
	display:flex;flex-wrap:wrap;
	margin:70px 0 0;
}
.m22 .sec3 .conwrap .area{box-sizing:border-box;}
.m22 .sec3 .conwrap .area:nth-child(1){width: 100%;}
.m22 .sec3 .conwrap .area:nth-child(2){width: 100%;margin-top: 40px;}

.m22 .sec3 .conwrap .area .multyBox{}
.m22 .sec3 .conwrap .area .multyBox .boxwrap:nth-child(1){width:100%;

}
.m22 .sec3 .conwrap .area .multyBox .boxwrap:nth-child(2){margin-top: 30px;width:100%;display:flex;flex-wrap:wrap;align-content:space-between;}
.m22 .sec3 .conwrap .area .multyBox .boxwrap:nth-child(2)>div{width:100%;}
.m22 .sec3 .conwrap .area .multyBox .boxwrap:nth-child(2)>div:last-child{margin-top: 30px;}
.m22 .sec3 .conwrap .area .multyBox .boxwrap .tit{margin-bottom:20px;font-size:18px;color:#000;font-weight:600;}
.m22 .sec3 .conwrap .area .multyBox .boxwrap .con{display:flex;justify-content:space-between;}
.m22 .sec3 .conwrap .area .multyBox .boxwrap .con img{width: 100%;}
.m22 .sec3 .conwrap .area .multyBox .boxwrap .con dl{
	box-sizing:border-box;
	width:49%;
	aspect-ratio: 22 / 17;
	padding:2vw;
	border:1px dashed #ccc;
	text-align:center;
	display: flex;flex-direction:column;align-items:center;justify-content:center;
}
.m22 .sec3 .conwrap .area .multyBox .boxwrap .con dl dt{font-size:15px;color:#399646;font-weight:600;}
.m22 .sec3 .conwrap .area .multyBox .boxwrap .con dl dd{margin-top: 15px;font-size:16px;color:#555;}
.m22 .sec3 .conwrap .area .multyBox .boxwrap .con dl dd strong{font-size:32px;color:#000;line-height:1em;}

.m22 .sec4{
	padding:120px 0;
	background:#f3f3f3;
	text-align:left;
}
.m22 .sec4 .img1>div{background:#fff;}
.m22 .sec3 .conwrap .area .multyBox .boxwrap:nth-child(2) .tit{margin-bottom:15px;}
.m22 .sec4 .conwrap .area .multyBox .boxwrap .con{flex-wrap:wrap;align-content:space-between;}
.m22 .sec4 .conwrap .area .multyBox .boxwrap .con dl{
	width:calc((100% - 0.5vw) / 2);
	margin-top:0.5vw;
	padding:1.2vw 1vw;
	aspect-ratio: 225 / 136;
}
.m22 .sec4 .conwrap .area .multyBox .boxwrap .con dl dt{font-size:15px;font-weight:500;}
.m22 .sec4 .conwrap .area .multyBox .boxwrap .con dl dt span{border-bottom:1px solid #399646;}
.m22 .sec4 .conwrap .area .multyBox .boxwrap .con dl dd{
	display:flex;align-items:center;justify-content:center;
	margin-top:10px;
	font-size:15px;
}





/* m23 */
.m23{padding-bottom:0;}
.m23 .sec2{
	padding:120px 0;
	background:#f3f3f3;
	text-align:left;
}
.m23 .sec2 h4 {
	font-size: 25px;
	color: #000;
	font-weight: 600;
}
.m23 .sec2 .conwrap{
	display:flex;flex-wrap:wrap;align-items:center;
	margin:70px 0 0;
}
.m23 .sec2 .conwrap .area{box-sizing:border-box;width:100%;}
.m23 .sec2 .conwrap .area img{width:100%;object-fit:cover;object-position:center center;max-height:60vh;}
.m23 .sec2 .conwrap .area:nth-child(1){}
.m23 .sec2 .conwrap .area:nth-child(2){margin-top: 50px;}
.m23 .sec2 .conwrap .area .imgarea{margin-bottom:20px;}
.m23 .sec2 .conwrap .area .imgarea .tit{margin-bottom: 20px;width:100%;font-size:18px;color:#000;font-weight:600;}
.m23 .sec2 .conwrap .area .imgarea .img{width:100%;}
.m23 .sec2 .conwrap .area .m23Sec2Table{width:100%;border-top:2px solid #111;}
.m23 .sec2 .conwrap .area .m23Sec2Table th{
	width:50%;
	padding:10px 2vw;
	border-bottom:1px solid #ccc;border-right:1px solid #ccc;
	font-size:15px;color:#000;font-weight:600;text-align:center;
}
.m23 .sec2 .conwrap .area .m23Sec2Table td{
	padding:10px 2vw;
	border-bottom:1px solid #ccc;border-right:1px solid #ccc;
	font-size:15px;color:#555;text-align:center;
}
.m23 .sec2 .conwrap .area .m23Sec2Table td.num{color:#000;font-weight:500;}
.m23 .sec2 .conwrap .area .m23Sec2Table th:last-child,
.m23 .sec2 .conwrap .area .m23Sec2Table td:last-child{border-right:0;}

.m23 .sec3{padding:120px 0;}
.m23 .sec3 h4{
	font-size: 25px;
	color: #000;
	font-weight: 600;
}
.m23 .sec3 .systems{}
.m23 .sec3 .systems>ul{width:94%;display:flex;justify-content:space-between;position:relative;max-width:100%;margin:60px auto 50px;}
.m23 .sec3 .systems>ul:before{
	display:block;content:"";
	width:100%;height:1px;
	background:#ccc;
	position:absolute;left:0;top:50%;
}
.m23 .sec3 .systems>ul>li{position:relative;z-index:10;max-width:100px;width:16vw;aspect-ratio: 1 / 1;;}
.m23 .sec3 .systems>ul>li>a{
	display:flex;align-items:center;justify-content:center;
	width:100%;height:100%;
	border:1px solid #ccc;border-radius:50%;
	background:#fff;
	font-size:15px;color:#000;font-weight:500;text-align:center;
	cursor:default;
}
.m23 .sec3 .systems>ul>li:nth-child(1).on>a{
	border:1px solid #399646;
	background:#399646 url(/images/page/m23_systems_bg1.png) no-repeat center;
	background-size:cover;
	text-indent:-9999px;
}
.m23 .sec3 .systems>ul>li:nth-child(2).on>a{
	border:1px solid #399646;
	background:#399646 url(/images/page/m23_systems_bg2.png) no-repeat center;
	background-size:cover;
	text-indent:-9999px;
}
.m23 .sec3 .systems>ul>li:nth-child(3).on>a{
	border:1px solid #399646;
	background:#399646 url(/images/page/m23_systems_bg3.png) no-repeat center;
	background-size:cover;
	text-indent:-9999px;
}
.m23 .sec3 .systems>ul>li:nth-child(4).on>a{
	border:1px solid #399646;
	background:#399646 url(/images/page/m23_systems_bg4.png) no-repeat center;
	background-size:cover;
	text-indent:-9999px;
}
.m23 .sec3 .systems>ul>li:nth-child(5).on>a{
	border:1px solid #399646;
	background:#399646 url(/images/page/m23_systems_bg5.png) no-repeat center;
	background-size:cover;
	text-indent:-9999px;
}
.m23 .sec3 .systems .systemSlider{}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide{width:90vw;}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap{
	overflow:hidden;
	display:flex;
	flex-direction:column-reverse;
	border-radius:10px;
	background:#f3f3f3;
}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div{width:100%;}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.infoarea{
	box-sizing:border-box;
	padding:40px 4vw;
	text-align:left;
	min-height:460px;
}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.infoarea .numbering{
	width:120px;max-width:100%;height:35px;
	background:#fff;
	border-radius:18px;
	font-size:14px;color:#000;font-weight:600;text-align:center;line-height:35px;
}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.infoarea .tit{
	margin:20px 0 50px;
	font-size:25px;color:#000;font-weight:600;line-height:1.2em;
}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.infoarea ul{}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.infoarea ul li{
	position:relative;
	padding-left:15px;margin-bottom:15px;
	font-size:15px;color:#555;line-height:1.6em;
}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.infoarea ul li strong{color:#000;font-weight:600;}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.infoarea ul li:before{
	display:block;content:"";
	width:5px;height:5px;
	border:1px solid #999;border-radius:50%;
	position:absolute;left:0;top:8px;
}

.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.systemGallery{height:40vh;}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.systemGallery .swiper-wrapper{height:100%;}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.systemGallery .swiper-slide{
	position:relative;
}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.systemGallery .swiper-slide>.img{width: 100%;height: 100%;}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.systemGallery .swiper-slide>.img img{
	width:100%;height: 100%;object-fit:cover;
}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .conwrap>div.systemGallery .swiper-slide .title{
	position:absolute;left:4vw;bottom:20px;
	font-size:15px;color:#fff;font-weight:600;
}
.systemGallery .ctr{
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	display:flex;align-items:center;justify-content:center;justify-content: center;
	z-index:10;
	width:100%;
	display: none;
}
.systemGallery .ctr .gallPrev {
	width: 13px;
	height: 24px;
	background: url(/images/main/vprev.png) no-repeat;
	cursor: pointer;
}
.systemGallery .ctr .gallNext {
	width: 13px;
	height: 24px;
	background: url(/images/main/vnext.png) no-repeat;
	cursor: pointer;
}
.systemGallery .gallPaging {
	position: static;
	z-index: 100;
	margin: 0 50px;
}
.systemGallery .ctr .swiper-pagination-bullet{
	opacity:1;
    display: inline-block;
	position:relative;
	width:8px;height:8px;
	border-radius: 50%;
	margin:0 15px;
	background:#fff;
	border-radius: 50%;
}
.systemGallery .ctr .swiper-pagination-bullet:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.5);
	opacity: 0;
}
.systemGallery .ctr .swiper-pagination-bullet-active:after{opacity: 1;}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .tip{margin-top:35px;}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .tip li{
	position:relative;
	padding-left:10px;
	font-size:15px;color:#555;
}
.m23 .sec3 .systems .systemSlider>.swiper-wrapper>.swiper-slide .tip li:before{
	display:block;content:"*";
	position:absolute;left:0;top:3px;
}

.m23 .sec4{
	padding:120px 0;
	background:#f3f3f3;
}
.m23 .sec4 h4{
	font-size: 28px;
	color: #000;
	font-weight: 600;
}
.m23 .sec4 .conwrap{align-items:flex-start;}
.m23 .sec4 .conwrap .area:nth-child(2){
width:100%;overflow:hidden;overflow-x:auto;
padding-bottom: 20px;
}
.m23 .sec4 .conwrap .area .m23Sec2Table{width:640px;}
.m23 .sec4 .conwrap .area .m23Sec2Table th{width:auto;padding:13px;}
.m23 .sec4 .conwrap .area .m23Sec2Table td{width:auto;padding:13px 30px;}
.m23 .sec4 .conwrap .area .m23Sec2Table td.tr{text-align:right;}
.m23 .sec4 .conwrap .area .m23Sec2Table tfoot th,
.m23 .sec4 .conwrap .area .m23Sec2Table tfoot td{background:#f3f7f1;color:#000;font-weight:600;}



#custom_cursor{
display: none !important;
width: 120px;height: 120px;position: fixed;top: 0;left: 0;transform: translate(-50%, -50%); z-index: 15000;pointer-events: none;}
.custom_cursor_inner {display: block;width: 100%;height: 100%;position: relative;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.custom_hover_circle{display: block;width: 0;height: 0;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);overflow: hidden;opacity: 0;border-radius: 50%;}
.custom_hover_circle {z-index: 1; font-size:16px;color:#fff; border: 1px solid #fff; font-weight: 500;transition:all 0.3s; display: flex;justify-content: center;align-items: center;}
.custom_hover_circle span{display: inline-block;white-space: nowrap; margin: 0 15px;font-family: "Cormorant", serif;}
.custom_hover_circle .arr1{
	display: block;
	width: 6px;
	height: 10px;
	background: url(/images/page/cursor_arr1.png) no-repeat center / contain;
}
.custom_hover_circle .arr2{
	display: block;
	width: 6px;
	height: 10px;
	background: url(/images/page/cursor_arr2.png) no-repeat center / contain;
}
#custom_cursor.on .custom_hover_circle {border: 1px solid #000; color: #000;}
#custom_cursor.on .custom_hover_circle .arr1{
	background: url(/images/page/cursor_arr1_bl.png) no-repeat center / contain;
}
#custom_cursor.on .custom_hover_circle .arr2{
	background: url(/images/page/cursor_arr2_bl.png) no-repeat center / contain;
}




/* m31 */
.m31{}
.m31 .category{}
.m31 .category ul{display:flex;flex-wrap:wrap;justify-content:center;width:100%;box-shadow:0 -1px 0 #ccc inset;}
.m31 .category ul li{position:relative;width:50%;border-bottom: 1px solid #eee;;}
.m31 .category ul li a{
	display:flex;align-items:center;justify-content:center;
	width:100%;height:70px;
	font-size:17px;color:#666;text-align:center;
}
.m31 .category ul li a:after{
	display:block;content:"";
	width:100%;height:3px;
	background:#000;
	position:absolute;left:0;bottom:0;
	transform:scaleX(0);transition:all 0.6s;
}
.m31 .category ul li.on a{color:#000;font-weight:600;}
.m31 .category ul li.on a:after{transform:scaleX(1);}
.m31 .list{margin:80px 0 0;}
.m31 .list ul{display:flex;flex-wrap:wrap;gap:30px 1.56vw;}
.m31 .list ul li{
	position:relative;
	width:calc((100% - 1.56vw * 2) / 3);

}
.m31 .list ul li .img img{width:100%;}
.m31 .list ul li .layer{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:rgba(0,0,0,0.5);
	opacity:0;
	transition:all 0.6s;
}
.m31 .list ul li .layer>div{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;padding:22px 4vw;}
.m31 .list ul li .layer>div .tit{font-size:19px;color:#fff;font-weight:500;}
.m31 .list ul li .layer>div .info{margin-top:10px;font-size:15px;color:rgba(255,255,255,0.8);}
.m31 .list ul li .layer>div .info .bar{
	display:inline-block;
	width:1px;height:12px;
	background:rgba(255,255,255,0.5);
	margin:0 10px;
}
.m31 .list ul li:hover .layer{opacity:1;}
.listMore{margin-top:50px;font-size:14px;color:#666;font-weight:600;text-align:center;}
.listMore .thisNum{color:#000;}
.listMore .bar{}
.listMore .totalNum{}

@media screen and (max-width:1024px){
	.m31 .list ul li{
	width:calc((100% - 1.56vw) / 2);
	}
}
@media screen and (max-width:640px){
	.m31 .list ul li{
	width:100%;
	}
}




/* m31_view */
.m31 .case{}
.m31 .case .title{font-size:32px;color:#000;font-weight:700;text-align:center;}
.m31 .case .info{
	display:flex;align-items:center;justify-content:center;
	margin:22px 0 50px;
	font-size:16px;color:#666;text-align:center;
}
.m31 .case .info .cate{color:#399646;font-weight:500;}
.m31 .case .info .bar{
	display:inline-block;
	width:1px;height:14px;
	margin:0 10px;
	background:#ccc;
}
.m31 .case .gallery{}
.m31 .case .gallery .swiper-slide{
	text-align: center;
}
.m31 .case .gallery .ctr{
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	display:flex;align-items:center;justify-content:center;justify-content: center;
	z-index:10;
	width:100%;
}
.m31 .case .gallery .ctr .gprev {
	width:10px;height:20px;
	background: url(/images/main/vprev.png) no-repeat center / contain;
	cursor: pointer;
}
.m31 .case .gallery .ctr .gnext {
	width:10px;height:20px;
	background: url(/images/main/vnext.png) no-repeat center/ contain;
	cursor: pointer;
}
.m31 .case .gallery .ctr .gpaging {
	position: static;
	z-index: 100;
	margin:0 5vw;
}
.m31 .case .gallery .ctr .swiper-pagination-bullet{
	opacity:1;
    display: inline-block;
	position:relative;
	width:6px;height:6px;
	border-radius: 50%;
	margin:0 12px;
	background:#fff;
	border-radius: 50%;
}
.m31 .case .gallery .ctr .swiper-pagination-bullet:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width:30px;height:30px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.5);
	opacity: 0;
}
.m31 .case .gallery .ctr .swiper-pagination-bullet-active:after{opacity: 1;}
.m31 .case .gallery .swiper-slide img{aspect-ratio: 3 / 2; }
.m31 .case .caseinfo{
	display:flex;flex-wrap:wrap;align-items:center;
	margin:40px 0 0;
	border-top:2px solid #000;border-bottom:1px solid #999;
}
.m31 .case .caseinfo .tit{width:100%;font-size:20px;color:#000;padding:40px 4vw;font-weight:600;text-align:center;}
.m31 .case .caseinfo .list{width:100%;margin:0;box-sizing:border-box;border-top:1px solid #999;}
.m31 .case .caseinfo .list dl{
	display:flex;align-items:center;
	padding:20px 0;
	border-bottom:1px solid #999;
}
.m31 .case .caseinfo .list dl:last-child{border:0;}
.m31 .case .caseinfo .list dl dt{
	box-sizing:border-box;
	width:150px;
	padding:0 4vw;
	font-size:16px;color:#000;font-weight:600;
}
.m31 .case .caseinfo .list dl dd{width:calc(100% - 150px);font-size:16px;color:#666;}
.btnList{margin:80px 0 0;}
.btnList a{
	display:block;
	position:relative;
	width:200px;height:58px;
	max-width:100%;
	margin:0 auto;padding-right:20px;
	background:#111;
	border-radius:37px;
	font-family:"Poppins";font-size:15px;color:#fff;text-align:center;line-height:58px;
}
.btnList a .menu{
	position:absolute;right:8px;top:8px;
	box-sizing:border-box;
	width:45px;height:45px;
	padding:15px 3vw;
	background:#292929;
	border-radius:50%;
}
.btnList a .menu>div{width:100%;height:2px;margin-bottom:3px;background:#fff;}
.btnList a .menu>div:nth-child(2){width:75%;}





/* m41 */
.bbs{}
.bbs .list1{display:flex;flex-wrap:wrap;gap:50px 2.5vw;margin-bottom: 50px;}
.bbs .list1>li{
	width:100%;
	padding:0 0 40px;
	border-bottom:1px solid #ccc;
}
.bbs .list1>li .thumb img{width:100%;}
.bbs .list1>li .tit{
	margin:40px 0 0;
	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
	font-size:19px;color:#000;font-weight:600;
}
.bbs .list1>li .txt{
	margin:12px 0 20px;
	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
	font-size:15px;color:#666;
}
.bbs .list1>li .date{margin-top:30px;font-size:14px;color:#666;}


.bbs .list2{margin-bottom:65px;border-top:2px solid #111;}
.bbs .list2>li{border-bottom:1px solid #999;}
.bbs .list2>li>a{
	display:flex;align-items:center;
	padding:30px 0;
}
.bbs .list2>li>a .date{
	position:relative;
	padding:0 0 0 0px;
	width:90px;
	border-right:1px solid #999;
	text-align:center;
}
.bbs .list2>li>a .date .day{font-family:"Poppins";font-size:32px;color:#399646;font-weight:600;line-height:1em;}
.bbs .list2>li>a .date .ym{font-family:"Poppins";font-size:14px;color:#399646;font-weight:400;line-height:1em;}
.bbs .list2>li>a .txts{
	box-sizing:border-box;
	width:calc(100% - 90px - 40px);
	padding:0 4vw;
}
.bbs .list2>li>a .txts .tit{
	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
	font-size:18px;color:#000;font-weight:600;
}
.bbs .list2>li>a .txts .txt{
	margin:8px 0 0;
	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
	font-size:15px;color:#666;
}
.bbs .list2>li>a .more{width:40px;text-align:center;}
.bbs .list2>li>a .more span{
	box-sizing:border-box;
	display:inline-block;
	width:40px;height:40px;
	border:1px solid #666;border-radius:50%;
	background:url(/images/common/bbs_more.png) no-repeat center / contain;
	transition:all 0.24s;
}
.bbs .list2>li>a:hover .more span{
	border:1px solid #399646;
	background:#399646 url(/images/common/bbs_more2.png) no-repeat center;
}




/* paging */
.paging{text-align:center;}
.paging a{
	display:inline-block;vertical-align:top;box-sizing:border-box;
	width:38px;height:38px;
	margin:0 10px;
	color:#666;font-size:19px;line-height:38px;font-weight:400;
}
.paging strong{
	display:inline-block;vertical-align:top;box-sizing:border-box;
	position:relative;
	width:38px;height:38px;
	margin:0 10px;
	color:#399646;font-size:19px;line-height:38px;font-weight:600;
}
.paging strong:after{
	display:block;content:"";
	width:9px;height:2px;
	background:#399646;
	position:absolute;left:50%;bottom:0;
	transform:translateX(-50%);
}
.paging .page_begin{
	width:38px;height:38px;
	background:url(/images/common/page_begin.png) no-repeat center;
	border:0;
}
.paging .page_prev{
	width:38px;height:38px;
	background:url(/images/common/page_prev.png) no-repeat center;
	border:0;margin-right:20px;
}
.paging .page_next{
	width:38px;height:38px;
	background:url(/images/common/page_next.png) no-repeat center;
	border:0;margin-left:20px;
}
.paging .page_end{
	width:38px;height:38px;
	background:url(/images/common/page_end.png) no-repeat center;
	border:0;
}





/* bbsView */
.bbsView{}
.bbsView .titlearea{
	padding:0 0 70px;
	text-align:center;
}
.bbsView .titlearea .tit{font-size:25px;color:#000;font-weight:700;overflow-wrap: break-word;padding:0 4vw;}
.bbsView .titlearea .date{margin-top:10px;font-family:"Poppins";font-size:15px;color:#000;font-weight:400;}
.bbsView .viewcon{
	box-sizing:border-box;
	padding:60px 4vw;
	border-top:1px solid #999;border-bottom:1px solid #999;
}
.bbsView .viewcon iframe{
	max-width:100%;width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* 16:9 비율 */
  }



/* m51 */
.m51{}
.m51 .sec1{}
.m51 .sec1 .tit1{font-size:20px;color:#000;font-weight:600;}
.m51 .sec1 .related{display:flex;flex-wrap:wrap;margin:30px 0 40px;gap:10px;}
.m51 .sec1 .related li{width:100%;}
.m51 .sec1 .related li input{display:none;}
.m51 .sec1 .related li input + label{
	display:block;
	box-sizing:border-box;
	width:100%;height:60px;
	background:#f1f1f1;
	font-size:16px;color:#555;text-align:center;font-weight:500;line-height:60px;
}
.m51 .sec1 .related li input:checked + label{
	border:3px solid #399646;
	color:#399646;
	background:#fff;
	line-height:64px;
}
.formwrap{
	display:flex;flex-wrap:wrap;justify-content:space-between;
	padding:0;
	border-top:2px solid #111;border-bottom:1px solid #ccc;
}
.formwrap .inputwrap{
	box-sizing:border-box;
	width:49%;
	margin:20px 0;
}
.formwrap .inputwrap.w100{width:100%;}
.formwrap .inputwrap .tit2{margin-bottom:15px;font-size:16px;color:#000;font-weight:500;}
.formwrap .inputwrap .req,
.m51 .sec1 .tit1 .req{position:relative;}
.m51 .sec1 .tit1 .req:after,
.formwrap .inputwrap .req:after{
	display:block;content:"";
	width:5px;height:5px;
	border-radius:50%;
	background:#399646;
	position:absolute;left:100%;top:8px;
	margin-left:2px;
}
.formwrap .inputwrap .input{}
.formwrap .inputwrap .input input{
	box-sizing:border-box;
	width:100%;height:60px;
	padding:0 4vw;
	background:#f3f3f3;
	border:0;outline:0;
	font-size:15px;color:#555;
}
.formwrap .inputwrap .input select{
	appearance: none;
	box-sizing:border-box;
	width:100%;height:60px;
	padding:0 2vw;
	padding-right: 15px;
	background:#f3f3f3 url(/images/page/sel_arr.png) no-repeat calc(100% - 15px) center;
	border:0;outline:0;
	font-size:15px;color:#555;
}
.formwrap .inputwrap .input textarea{
	box-sizing:border-box;
	width:100%;height:280px;
	padding:20px 2vw;
	background:#f3f3f3;
	border:0;outline:0;resize:none;
	font-size:15px;color:#555;
}
.formwrap .inputwrap .email{display:flex;align-items:center;justify-content:space-between;}
.formwrap .inputwrap .email input{width:calc((100% - 3vw - 13px) / 3);}
.formwrap .inputwrap .email span{width:13px;font-size:14px;text-align:center;}
.formwrap .inputwrap .email select{width:calc((100% - 3vw - 13px) / 3);}
.formwrap .inputwrap .tip{position:relative;margin-top:5px;padding-left:10px;font-size:14px;color:#555;}
.formwrap .inputwrap .tip:before{
	display:block;content:"*";
	font-size:17px;color:#399646;
	position:absolute;left:0;top:0;
}
.formwrap .inputwrap .tel{display:flex;align-items:center;justify-content:space-between;}
.formwrap .inputwrap .tel input{width:calc((100% - 2vw) / 3);}
.formwrap .inputwrap .tel select{width:calc((100% - 2vw) / 3);}

.agreewrap{margin:50px 0 40px;}
.agreewrap .tit1{}
.agreewrap .tit1 + p{margin-top:20px;font-size:16px;color:#555;}
.agreewrap .infoarea{margin-top:35px;border-top: 2px solid #000;}
.agreewrap .infoarea .info-box{border-bottom: 1px solid #ccc;}
.agreewrap .infoarea .info-box .topwrap{
	display: flex;align-items:center;justify-content:space-between;
	padding:25px 4vw;
}
.agreewrap .infoarea .info-box .topwrap .td{width:calc(100% -15px);}
.agreewrap .infoarea .info-box .topwrap .td .req{
	display: inline-block;margin-left: 6px;width:6px;height:6px;background: #399646;border-radius:50%;
	vertical-align:top;position: relative;top:4px;
}
.agreewrap .infoarea .info-box .topwrap input[type=checkbox] {
	position: absolute;overflow: hidden;clip: rect(0 0 0 0);width: 1px;height: 1px;margin: -1px;padding: 0;border: 0;
}
.agreewrap .infoarea .info-box .topwrap input[type=checkbox]+label {
	position: relative;top: 0px;
	font-size:16px;color:#111;font-weight: 600;
	padding-left: 35px;line-height: 1.2;
	display: block;
}
.agreewrap .infoarea .info-box .topwrap input[type=checkbox]+label:before {
	position: absolute;left: 0;top: -3px;
	display: block;content:'';
	box-sizing: border-box;
	width: 24px;height: 24px;text-align: center;
	background: url(/images/page/chk_icon.png)no-repeat center / cover;
}
.agreewrap .infoarea .info-box .topwrap input[type=checkbox]:checked+label:before {
	background: url(/images/page/chked_icon.png)no-repeat center / cover;
}
.agreewrap .infoarea .info-box .topwrap .arrow{
	display: block;
	background: url(/images/page/agree_arr.png)no-repeat right center;
	width: 12px;height: 7px;transition:transform 0.4s ease;
	cursor:pointer;
}
.agreewrap .infoarea .info-box .topwrap .arrow.up{
	transform:rotate(-180deg);transition:transform 0.4s ease;
}
.agreewrap .infoarea .info-box .botwrap{display: none;padding:25px 4vw;border-top: 1px solid #cccccc;}
.agreewrap .infoarea .info-box .botwrap p{margin-bottom:20px;font-size:15px;color:#555;line-height:1.7em;}
.agreewrap .infoarea .info-box .botwrap dl{
	box-sizing:border-box;
	display:flex;
	align-items:center;
	position:relative;
	margin-bottom:10px;padding:14px 0;
	border:1px solid #ccc;
}
.agreewrap .infoarea .info-box .botwrap dl:last-child{margin:0;}
.agreewrap .infoarea .info-box .botwrap dl dt{
	box-sizing:border-box;
	position:relative;
	width:40%;
	padding:0 4vw;
	font-size:15px;color:#000;font-weight:600;text-align:center;
}
.agreewrap .infoarea .info-box .botwrap dl dt:after{
	display:block;content:"";
	width:1px;height:100%;
	background:#ccc;
	position:absolute;right:0;top:0;
}
.agreewrap .infoarea .info-box .botwrap dl dd{
	box-sizing:border-box;
	width:60%;
	padding:0 4vw;
	font-size:15px;color:#666;line-height:1.7em;
}
.btn_contactus{
	display:block;
	width:160px;height:58px;
	margin:60px auto 0;
	max-width:100%;
	background:#000;
	border-radius:38px;
	font-family:"Poppins";font-size:15px;color:#fff;
}

@media screen and (max-width:1080px){
.formwrap .inputwrap{width:100%;}
}
/* @media screen and (max-width:640px){
.agreewrap .infoarea .info-box .botwrap dl{flex-wrap:wrap;}
.agreewrap .infoarea .info-box .botwrap dl dt,
.agreewrap .infoarea .info-box .botwrap dl dd{width: 100%;}
.agreewrap .infoarea .info-box .botwrap dl dt:after{display: none;}
} */



/* m52 */
.m52{}
.m52 .faq{border-top:2px solid #000;word-break:keep-all;}
.m52 .faq .question{display:flex;align-items:center;justify-content:space-between;padding:30px 4vw;cursor:pointer;border-top:1px solid #999;}
.m52 .faq .question .mark{
	width:45px;height:45px;
	background:#000;
	border-radius:50%;
	font-family:"Poppins";font-size:20px;font-weight:600;color:#fff;text-align:center;line-height:45px;
}
.m52 .faq .question .tit{
	box-sizing:border-box;
	width:calc(100% - 45px - 20px);
	padding:0px 4vw 0;
	font-size:17px;color:#000;font-weight:600;
}
.m52 .faq .question .arr{width:20px;text-align:center;}
.m52 .faq .question .arr:after{
	display:inline-block;content:"";
	width:6px;height:6px;margin:0px 0 0 0;
	border-right:3px solid #222;border-bottom:3px solid #222;
	transform:rotate(45deg);transition:all 0.24s;
}
.m52 .faq .question.active .arr:after{transform:rotate(225deg);}
.m52 .faq .question.active .mark{background:#399646;color:#fff;}
.m52 .faq .question.active .tit{color:#399646;}

.m52 .faq .answer{display:none;background:#f6f6f6;}
.m52 .faq .answer>div{display:block;padding:30px 4vw;}
.m52 .faq .answer>div .mark{
	width:45px;height:45px;
	background:#fff;
	border-radius:50%;
	font-family:"Poppins";font-size:18px;font-weight:600;color:#399646;text-align:center;line-height:45px;
}
.m52 .faq .answer>div p{
	box-sizing:border-box;
	margin-top: 30px;
	width:100%;
	font-size:15px;color:#666;padding:0px 0;text-align:left;line-height:180%;
}






/*motion*/
.fadeLeft, .fadeRight, .fadeUp, .fadeIn, .fadeImgRight{opacity:0;}
.imgAni{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.imgAni.in-view{animation-name: imgAni; animation-duration:1.25s;animation-fill-mode:forwards;}
.fadeLeft.in-view{animation-name: fadeLeft;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeRight.in-view{animation-name: fadeRight;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeRight2.in-view{animation-name: fadeRight2;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeUp.in-view{animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeUp2.in-view{animation-name: fadeUp2;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeIn.in-view{animation-name: fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeImgRight.in-view{animation-name: fadeImgRight;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
/*  .sub_visual .bg{opacity:0;}
.sub_visual.in-view .bg{opacity:1;animation: bgScale 1.5s ease;animation-fill-mode:forwards;} */

  @keyframes bgScale{
   0%{transform:scale(1.15);}
   100%{transform:scale(1);}
  }
@keyframes fadeLeft{
 0%{transform:translate3d(-100px, 0, 0);opacity:0;}
  100%{transform:translate3d(0px, 0, 0);opacity:1;}
}
@keyframes fadeRight{
 0%{transform:translate3d(70%, 0, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeRight2{
 0%{transform:translate3d(100px, 0, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeUp{
0%{transform:translate3d(0%, 60px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeUp2{
0%{transform:translate3d(0%, 100px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeIn{
0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes imgAni{
0%{clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}

}
@keyframes fadeImgRight{
0%{opacity:0;clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
100%{opacity:1;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}
@keyframes fadeImgLeft{
0%{opacity:0;clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{opacity:1;clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}
}

.sub_visual .bg{transform:scale(1.2);clip-path:circle(20%);filter:blur(10px);transition:all 1.6s;}
.sub_visual.in-view .bg{
clip-path:circle(100%);filter:blur(0px);transform:scale(1);
}
.sub_visual .slogan h2,
.sub_visual .slogan p{
	opacity:0;
	transform:translateY(-100px);transition:all 1s;
}
.sub_visual .slogan.in-view h2,
.sub_visual .slogan.in-view p{
	opacity:1;
	transform:translateY(0);transition:all 0.9s;
}
.sub_visual .slogan.in-view p{transition-delay:0.1s;}
.subtabarea .subtab{opacity:0;transition:all 1s;transform:translateY(60px);}
.subtabarea.in-view .subtab{
opacity:1;transform:translateY(0px);
}

.pgTit h3{opacity:0;}
.pgTit.in-view h3{animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease;}
.pgTit:before{width:0;transition:width 1.3s; transition-delay:0s;}
.pgTit.in-view:before{width:100%;}
.pgDesc{opacity:0;}
.pgDesc.in-view{animation-name: fadeUp2;animation-duration: 1s;animation-fill-mode:forwards;animation-timing-function: ease;}

.m11 .overview .bg{transform:scale(1.25);filter:blur(5px);transition:all 1s;}
.m11 .overview.in-view .bg{transform:scale(1);filter:blur(0px);}
.m11 .overview .titlearea .tag,
.m11 .overview .titlearea .slog{
opacity:0;transform:translateY(80px);transition:all 1s;
}
.m11 .overview .titlearea.in-view .tag,
.m11 .overview .titlearea.in-view .slog{
opacity:1;transform:translateY(0px);
}
.m11 .overview .titlearea.in-view .slog{transition-delay:0.2s;}
.m11 .overview .list>li{transform:translateY(150%);transition:all 1s;transition-delay:0.1s;}
.m11 .overview .list.in-view>li{transform:translateY(0);}
.m11 .overview .list.in-view>li:nth-child(2){transition-delay:0.2s;}
.m11 .overview .list.in-view>li:nth-child(3){transition-delay:0.3s;}
.m11 .overview .list.in-view>li:nth-child(4){transition-delay:0.4s;}

.m11 .sec2 .slog{opacity:0;transform:translateY(60px);transition:all 1s;}
.m11 .sec2 .slog.in-view{opacity:1;transform:translateY(0px);}
.m11 h4.tit2{opacity:0;transform:translateY(60px);transition:all 1s;}
.m11 h4.tit2.in-view{opacity:1;transform:translateY(0px);}
.m11 .greeting>.img{
opacity:0;
transform:translateX(-100px);transition:all 1s;
}
.m11 .greeting>.img.in-view{
opacity:1;
transform:translateX(0px);
}
.m11 .greeting>.txtarea{opacity:0;transform:translateX(100px);transition:all 1s;}
.m11 .greeting>.txtarea.in-view{opacity:1;transform:translateX(0px);}
.m11 .greeting .boxs>li{
transform:rotateY(270deg);opacity:0;transition:all 1.25s;transition-delay:0.2s;
}
.m11 .greeting .boxs.in-view>li{
transform:rotateY(0deg);opacity:1;
}
.m11 .merit{opacity:0;transform:translateY(100px);transition:all 1s;}
.m11 .merit.in-view{opacity:1;transform:translateY(0px);}
.m11 .merit .titlearea{opacity:0;transform:translateY(60px);transition:all 1s;}
.m11 .merit.in-view .titlearea{opacity:1;transform:translateY(0px);}
.m11 .merit .list>li{
opacity:0;
transform:translateX(50px);transition:all 1s;
}
.m11 .merit .list.in-view>li{
opacity:1;
transform:translateX(0px);transition-delay:0.1s;
}
.m11 .merit .list.in-view>li:nth-child(2){transition-delay:0.2s;}
.m11 .merit .list.in-view>li:nth-child(3){transition-delay:0.3s;}
.m11 .merit .list.in-view>li:nth-child(4){transition-delay:0.4s;}
.m11 .sec4 .imgwrap{opacity:0;transform:translateY(100px);transition:all 1s;}
.m11 .sec4 .imgwrap.in-view{opacity:1;transform:translateY(0px);}

.m12 .con_title_g .title2{opacity:0;transform:translateY(100px);transition:all 1s;}
.m12 .con_title_g .title2.in-view{
opacity:1;transform:translateY(0px);
}
.m12 .sec1 .contents{opacity:0;transform:translateY(100px);transition:all 1s;}
.m12 .sec1 .contents.in-view{
opacity:1;transform:translateY(0px);transition-delay:0.1s;
}

.m13 .info dl{opacity:0;transform:translateY(100px);transition:all 1s;}
.m13 .info.in-view dl{
opacity:1;transform:translateY(0px);
}
.m13 .info.in-view dl:nth-child(2){transition-delay:0.1s;}
.m13 .info.in-view dl:nth-child(3){transition-delay:0.2s;}
.m13 .info.in-view dl:nth-child(4){transition-delay:0.3s;}





.m21 .intro .bg{transform:scale(1.1) translateY(100px);}
.m21 .sec1 .intro .txt{opacity:0;transform:translateY(60px);}
.m21 .intro.in-view .bg{transform:scale(1) translateZ(0);transition:all 1s;}
.m21 .sec1.in-view .intro .txt{opacity:1;transform:translateY(0);transition:all 1s 0.5s;}

.m21 .sec5 .step ul li.circle{opacity:0;transform:translateY(100px) rotateY(180deg);}
.m21 .sec5 .step ul li.arr{opacity:0;}

.m21 .sec5 .step ul.in-view li.circle{opacity:1;transform:translateY(0) rotateY(0);}
.m21 .sec5 .step ul.in-view li.arr{opacity:1;}
.m21 .sec5 .step ul.in-view li.circle:nth-child(1){transition:all 1s;}
.m21 .sec5 .step ul.in-view li.arr:nth-child(2){transition:all 1s 0.4s;}
.m21 .sec5 .step ul.in-view li.circle:nth-child(3){transition:all 1s 0.4s;}
.m21 .sec5 .step ul.in-view li.arr:nth-child(4){transition:all 1s 0.6s;}
.m21 .sec5 .step ul.in-view li.circle:nth-child(5){transition:all 1s 0.6s;}

.m21 .sec3 ul{opacity:0;transform:translateX(50%);}
.m21 .sec3 ul.in-view{opacity:1;transform:translateX(0%);transition:all 1s;}

.m21 .sec4 .state ul li.ani{opacity:0;transform:translateY(60px);}
.m21 .sec4 .state ul li.in-view{opacity:1;transform:translateY(0);transition:all 1s;}
.m21 .sec4 .state ul li.in-view:nth-child(1){transition:all 1s;}
.m21 .sec4 .state ul li.in-view:nth-child(3){transition:all 1s 0.2s;}
.m21 .sec4 .state ul li.in-view:nth-child(5){transition:all 1s 0.4s;}



.m22 .intro .bg{transform:scale(1.1) translateY(100px);}
.m22 .sec1 .intro .txt{opacity:0;transform:translateY(60px);}
.m22 .intro.in-view .bg{transform:scale(1) translateZ(0);transition:all 1s;}
.m22 .sec1.in-view .intro .txt{opacity:1;transform:translateY(0);transition:all 1s 0.5s;}

.m22 .sec1 .step ul li.circle{opacity:0;transform:translateY(100px) rotateY(180deg);}
.m22 .sec1 .step ul li.arr{opacity:0;}

.m22 .sec1 .step ul.in-view li.circle{opacity:1;transform:translateY(0) rotateY(0);}
.m22 .sec1 .step ul.in-view li.arr{opacity:1;}
.m22 .sec1 .step ul.in-view li.circle:nth-child(1){transition:all 1s;}
.m22 .sec1 .step ul.in-view li.arr:nth-child(2){transition:all 1s 0.4s;}
.m22 .sec1 .step ul.in-view li.circle:nth-child(3){transition:all 1s 0.4s;}
.m22 .sec1 .step ul.in-view li.arr:nth-child(4){transition:all 1s 0.6s;}
.m22 .sec1 .step ul.in-view li.circle:nth-child(5){transition:all 1s 0.6s;}




.m23 .intro .bg{transform:scale(1.1) translateY(100px);}
.m23 .sec1 .intro .txt{opacity:0;transform:translateY(60px);}
.m23 .intro.in-view .bg{transform:scale(1) translateZ(0);transition:all 1s;}
.m23 .sec1.in-view .intro .txt{opacity:1;transform:translateY(0);transition:all 1s 0.5s;}

.m23 .sec1 .step ul li.circle{opacity:0;transform:translateY(100px) rotateY(180deg);}
.m23 .sec1 .step ul li.arr{opacity:0;}

.m23 .sec1 .step ul.in-view li.circle{opacity:1;transform:translateY(0) rotateY(0);}
.m23 .sec1 .step ul.in-view li.arr{opacity:1;}
.m23 .sec1 .step ul.in-view li.circle:nth-child(1){transition:all 1s;}
.m23 .sec1 .step ul.in-view li.arr:nth-child(2){transition:all 1s 0.4s;}
.m23 .sec1 .step ul.in-view li.circle:nth-child(3){transition:all 1s 0.4s;}
.m23 .sec1 .step ul.in-view li.arr:nth-child(4){transition:all 1s 0.6s;}
.m23 .sec1 .step ul.in-view li.circle:nth-child(5){transition:all 1s 0.6s;}