@charset "utf-8";


/*visual*/
#recentMB1{ max-width:1844px; height:calc(100vh - 173px); margin:auto; }
#recentMB1 .banner{ height:100%; }
#recentMB1 .banner .bx-wrapper{ height:100%; }
#recentMB1 .banner .bx-wrapper .bx-viewport{ height:100% !important; }
#recentMB1 .banner .bx-wrapper .bx-viewport ul{ height:100%; }
#recentMB1 .banner .bx-wrapper .bx-viewport ul li{ height:100%; }
#recentMB1 .banner .bx-wrapper .bx-viewport ul li img{ object-position:bottom; object-fit:cover; }
#recentMB1 .banner .bx-wrapper .bx-viewport ul li .bannerCopy{ display:none; }


/*main01*/
.main01{ max-width:1844px; margin:auto; }
.main01 .content{ background-color:#f1e7ff; display:flex; }
.main01 .content .left{ position:relative; height:330px; background-color:#faf3ff; padding:0 12%; display:flex; align-items:center; }
.main01 .content .left::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(../image/main/main01_bg01.png); background-position:center; background-size:cover; background-repeat:no-repeat; }
.main01 .content .left div{ position:relative; width:max-content; z-index:10; }
.main01 .content .left div h3{ line-height:1.2; font-size:36px; color:#1f0772; font-weight:700; }
.main01 .content .left div h3 span{ display:block; }
.main01 .content .left div p{ line-height:1.2; color:#6e5d9d; opacity:0.7; margin:15px 0 35px 0; }
.main01 .content .left div a{ width:max-content; height:45px; color:#fff; background-color:#6653df; border-radius:50px; padding:0 30px; display:flex; align-items:center; transition:.5s; }
.main01 .content .left div a:hover{ background-color:#200873; }
.main01 .content .left div a span{ margin-top:-4px; }
.main01 .content .left div a i{ font-size:14px; margin-left:10px; }
.main01 .content .right{ width:100%; display:flex; align-items:center; justify-content:center; margin-right:12%; }
.main01 .content .right a{ text-align:center; margin:0 30px; }
.main01 .content .right a img{ max-height:120px; }
.main01 .content .right a h4{ line-height:1; font-size:20px; font-weight:700; margin:20px 0 5px 0; }
.main01 .content .right a p{ line-height:1.2; font-size:15px; word-break:keep-all; color:#777; }


/*main02*/
.main02{ max-width:1844px; background-color:#f6f6f6; margin:auto; padding:100px 0; }
.main02 .content{ max-width:1400px; margin:auto; display:flex; }
.main02 .content>div{ width:calc((100% - 50px) / 2); }
.main02 .content .left{ position:relative; margin-right:50px; }
.main02 .content .left ul{ display:flex; }
.main02 .content .left ul li{ width:calc((100% - 40px) / 3); margin-right:20px; }
.main02 .content .left ul li:last-child{ margin-right:0; }
.main02 .content .left ul li img{ width:100%; height:100%; object-fit:cover; }
.main02 .content .left a{ position:absolute; right:1px; bottom:-30px; height:200px; color:#fff; background-color:#7854e0; border-radius:30px 0 0 0; padding:0 130px 0 65px; display:flex; align-items:center; }
.main02 .content .left a div h3{ font-size:32px; font-weight:700; }
.main02 .content .left a div p{ line-height:1.2; margin-top:10px; opacity:.8; }
.main02 .content .left a div p span{ display:block; }
.main02 .content .left a button{ position:absolute; right:0; bottom:0; width:55px; height:55px; background-color:rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; transition:.5s; }
.main02 .content .left a:hover button{ background-color:rgba(0,0,0,.5); }
.main02 .content .left a button img{ display:block; }
.main02 .content .youtube iframe{ width:100%; height:100%; }


/*main03*/
.main03{ max-width:1400px; margin:auto; padding:100px 0; display:flex; }
.main03>.title{ width:25%; }
.main03>.title h3{ line-height:1; font-size:36px; font-weight:700; }
.main03>.title p{ line-height:1.2; word-break:keep-all; color:#777; margin:15px 0 35px 0; }
.main03>.title p span{ display:block; }
.main03>.title a{ width:75px; height:75px; font-size:15px; color:#fff; background-color:#6855e1; display:flex; align-items:center; justify-content:center; }
.main03 .recent{ width:75%; }
.main03 .recent .recentBody ul{ display:flex; }
.main03 .recent .recentBody ul li{ width:calc((100% - 40px) / 3); border:5px solid #f9f9f9; padding:40px 45px; margin:0 20px 0 0; }
.main03 .recent .recentBody ul li::before{ display:none; }
.main03 .recent .recentBody ul li:last-child{ margin:0; }
.main03 .recent .recentBody ul li a .title{ min-height:77px; font-size:18px; font-weight:600; word-break:keep-all; display:block; }
.main03 .recent .recentBody ul li a .content{ min-height:86px; font-size:15px; word-break:keep-all; color:#888; margin:75px 0 30px 0; }
.main03 .recent .recentBody ul li .date{ font-size:15px; font-weight:700; color:#60584c; }





/*반응형*/
@media only screen and (max-width:1844px){
	/*visual*/
	#recentMB1{ max-width:initial; height:auto; }
	/*main01*/
	.main01{ max-width:initial; }
	.main01 .content .left{ width:35%; padding:0; justify-content:center; }
	.main01 .content .right{ width:65%; margin-right:0; padding:0 50px; }
	.main01 .content .right a{ width:calc((100% - 30px) / 4); margin:0 10px 0 0; }
	.main01 .content .right a:last-child{ margin:0; }
	/*main02*/
	.main02{ max-width:initial; }
	.main02 .content{ max-width:initial; padding:0 50px; }
	.main02 .content>div{ width:calc((100% - 25px) / 2); }
	.main02 .content .left{ margin-right:25px; }
	/*main03*/
	.main03{ max-width:initial; padding:100px 50px; }
}
@media only screen and (max-width:1400px){
	/*main01*/
	.main01 .content .left{ width:30%; height:320px; }
	.main01 .content .left::before{ background-position:39%; }
	.main01 .content .left div h3{ font-size:34px; }
	.main01 .content .left div p{ margin:10px 0 30px 0; }
	.main01 .content .right{ width:70%; }
	/*main02*/
	.main02 .content .left a{ right:0; height:180px; padding:0 120px 0 55px; }
	.main02 .content .left a div h3{ font-size:30px; }
	/*main03*/
	.main03>.title h3{ font-size:34px; }
	.main03>.title p{ margin:10px 0 30px 0; }
	.main03>.title a{ width:70px; height:70px; }
	.main03 .recent .recentBody ul li{ padding:35px 40px; }
	.main03 .recent .recentBody ul li a .content{ word-break:break-all; margin:65px 0 25px 0; }
}
@media only screen and (max-width:1200px){
	/*main01*/
	.main01 .content{ flex-wrap:wrap; }
	.main01 .content .left{ width:100%; height:auto; padding:40px 0; }
	.main01 .content .left::before{ background-position:center; }
	.main01 .content .left div h3 span{ display:inline; }
	.main01 .content .left div p{ text-align:center; }
	.main01 .content .left div a{ margin:auto; }
	.main01 .content .right{ width:100%; padding:40px 50px; }
	.main01 .content .right a img{ max-height:110px; }
	/*main02*/
	.main02 .content .left a{ height:160px; padding:0 110px 0 45px; }
	.main02 .content .left a div h3{ font-size:28px; }
	.main02 .content .left a div p{ font-size:15px; }
	.main02 .content .left a button{ width:50px; height:50px; }
	.main02 .content .left a button img{ height:14px; }
	/*main03*/
	.main03{ flex-wrap:wrap; }
	.main03>.title{ width:100%; text-align:center; margin-bottom:50px; }
	.main03>.title p span{ display:inline; }
	.main03>.title a{ width:max-content; height:45px; border-radius:50px; padding:0 30px 4px 30px; margin:auto; }
	.main03 .recent{ width:100%; }
	.main03 .recent .recentBody ul li{ padding:30px 35px; }
	.main03 .recent .recentBody ul li a .content{ margin:55px 0 20px 0; }
}
@media only screen and (max-width:1000px){
	/*main01*/
	.main01 .content .left{ padding:35px 0; }
	.main01 .content .left div h3{ font-size:32px; }
	.main01 .content .left div a{ padding:0 25px; }
	.main01 .content .right{ padding:35px 25px; }
	.main01 .content .right a{ width:calc((100% - 60px) / 4); margin-right:20px; }
	.main01 .content .right a img{ max-height:100px; }
	.main01 .content .right a h4{ font-size:19px; margin:15px 0 5px 0; }
	.main01 .content .right a p{ font-size:14px; }
	/*main02*/
	.main02 .content{ padding:0 25px; }
	.main02 .content>div{ width:calc((100% - 20px) / 2); }
	.main02 .content .left{ margin-right:20px; }
	.main02 .content .left ul li{ width:calc((100% - 20px) / 3); margin-right:10px; }
	.main02 .content .left a{ height:140px; padding:0 100px 0 35px; }
	.main02 .content .left a div h3{ font-size:26px; }
	.main02 .content .left a div p{ font-size:14px; margin-top:5px; }
	.main02 .content .left a button{ width:45px; height:45px; }
	.main02 .content .left a button img{ height:13px; }
	/*main03*/
	.main03{ padding:100px 25px; }
	.main03>.title h3{ font-size:32px; }
	.main03>.title a{ padding:0 25px 4px 25px; }
	.main03 .recent .recentBody ul li{ width:calc((100% - 20px) / 3); margin:0 10px 0 0; padding:25px 30px; }
	.main03 .recent .recentBody ul li a .content{ margin:45px 0 15px 0; }
}
@media only screen and (max-width:800px){
	/*main02*/
	.main02 .content{ flex-wrap:wrap; }
	.main02 .content>div{ width:100%; }
	.main02 .content .left{ margin:0 0 25px 0; display:flex; }
	.main02 .content .left ul{ width:62%; }
	.main02 .content .left a{ position:initial; width:38%; height:100%; border-radius:70px 0 0 0; padding:0 25px; }
	/*main03*/
	.main03 .recent .recentBody ul{ flex-wrap:wrap; }
	.main03 .recent .recentBody ul li{ width:100%; margin:0 0 10px 0; padding:25px; }
	.main03 .recent .recentBody ul li a .title{ min-height:initial; }
	.main03 .recent .recentBody ul li a .content{ min-height:initial; margin:35px 0 10px 0; }
}
@media only screen and (max-width:600px){
	/*main01*/
	.main01 .content .left div h3{ font-size:30px; }
	.main01 .content .left div p{ font-size:15px; }
	.main01 .content .right{ padding:30px 25px 35px 25px; }
	.main01 .content .right a{ width:calc((100% - 30px) / 4); margin-right:10px; }
	.main01 .content .right a img{ max-height:80px; }
	.main01 .content .right a h4{ font-size:18px; }
	/*main02*/
	.main02 .content .left{ flex-wrap:wrap; }
	.main02 .content .left ul{ width:100%; }
	.main02 .content .left a{ width:50%; height:140px; border-radius:30px 0 0 0; margin:-110px 0 0 auto; }
	.main02 .content .left a div h3{ font-size:24px; }
	/*main03*/
	.main03>.title h3{ font-size:30px; }
	.main03>.title p{ font-size:15px; }
	.main03 .recent .recentBody ul li a .title{ font-size:17px; }
	.main03 .recent .recentBody ul li a .content{ font-size:14px; margin:25px 0 10px 0; }
	.main03 .recent .recentBody ul li .date{ font-size:14px; }
}
@media only screen and (max-width:500px){
	/*main01*/
	.main01 .content .left div h3{ text-align:center; }
	.main01 .content .left div h3 span{ display:block; }
	.main01 .content .left div p{ margin:10px 0 25px 0; }
	.main01 .content .right{ flex-wrap:wrap; }
	.main01 .content .right a{ width:calc((100% - 10px) / 2); }
	.main01 .content .right a:nth-child(2n){ margin-right:0; }
	.main01 .content .right a:nth-child(n+3){ margin-top:20px; }
	/*main02*/
	.main02 .content .left a{ width:calc(100% - 25px); height:120px; margin:-90px 0 0 auto; }
	.main02 .content .left a div h3{ font-size:22px; }
	/*main03*/
	.main03>.title p{ margin:10px 0 25px 0; }
}
@media only screen and (max-width:400px){
	/*main01*/
	.main01 .content .right a p{ min-height:34px; }
}