@charset "utf-8";
.main .part01 {display:flex; gap:20px;}
.main .part01 .main-banner {width:50%; border-radius:1.5rem; overflow:hidden; border:1px solid var(--border1); aspect-ratio:1/0.74;}
.main .part01 .main-banner .swiper-button-prev {background:url(../images/main/main_banner_prev.png) no-repeat center/contain; width:60px; height:60px; left:20px; margin-top:0; transform:translateY(-50%);}
.main .part01 .main-banner .swiper-button-next {background:url(../images/main/main_banner_next.png) no-repeat center/contain; width:60px; height:60px; right:20px; margin-top:0; transform:translateY(-50%);}
.main .part01 .main-banner .swiper-slide img {height:100%; width:100%; /*object-fit:cover;*/}

.main .part01 .right {width:50%;}
.main .part01 .right > div {border:1px solid var(--border1); border-radius:1.5rem; padding:34px 40px 20px 40px;}
.main .part01 .right > div+div {margin-top:20px;}
.main .part01 .right > div .top {display:flex; justify-content:space-between; align-items:center;}
.main .part01 .right > div .top h3 {line-height:1; transform:var(--textRotate); font-size:20px;}
.main .part01 .right > div .top a.detail {position:relative; width:30px; height:30px; border-radius:5px; border:1px solid var(--border2);} 
.main .part01 .right > div .top a.detail:before {content:""; display:block; width:9px; height:1px; background:#000; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.main .part01 .right > div .top a.detail:after {content:""; display:block; width:1px; height:9px; background:#000; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.main .part01 .right > div .list {margin-top:6px;}
.main .part01 .right > div .list li {display:flex; position:relative; justify-content:space-between; font-size:16px; padding:6px 0 6px 20px; color: #666;}
.main .part01 .right > div .list li:before {display:block; content:""; position:absolute; width:5px; height:5px; background:var(--blue3); left:7px; top:15px; border-radius:50%; }
.main .part01 .right > div .list li+li {border-top:1px solid var(--border3);}
.main .part01 .right > div .list li a {display:block; width:calc(100% - 100px); overflow: hidden; white-space:normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all; }

.main .part02 {display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:20px 0 40px;}
.main .part02 article {padding:45px 50px; width:100%; border-radius:1.5rem; color:#fff;}
.main .part02 article a {color:#fff;}
.main .part02 article:nth-of-type(1) {background:#573f32 url(../images/main/part2_aritcle-bg01.png) center center / cover no-repeat;}
.main .part02 article:nth-of-type(1) ul {padding-top:75px; display:inline-block;}
.main .part02 article:nth-of-type(1) ul li {position:relative; font-weight:600; font-size:16px; padding:5px 0; transform:var(--textRotate); padding-left:10px;}
.main .part02 article:nth-of-type(1) ul li:before {content:""; display:block; position:absolute; width:3px; height:3px; background:#fff; left:0; top:15px;}
.main .part02 article:nth-of-type(1) ul li+li {border-top:1px solid rgba(255,255,255,0.5);}
.main .part02 article:nth-of-type(1) ul li:hover a {color:var(--yellow);}
.main .part02 article:nth-of-type(1) ul li:hover:before {background:var(--yellow);}

.main .part02 article:nth-of-type(2) {background:var(--green) url(../images/main/part2_aritcle-bg02.png) 92% 75% / 45% no-repeat; cursor: pointer;}
.main .part02 article:nth-of-type(2) p, .main .part02 article:nth-of-type(4) p {padding-top:35px; font-size:14px; opacity:0.7;}
.main .part02 article:nth-of-type(2) a.link, .main .part02 article:nth-of-type(4) a.link {display:block; position:relative; margin-top:70px; width: 100px; height: 30px; }
.main .part02 article:nth-of-type(4) a.link {margin-top:35px;}
.main .part02 article:nth-of-type(2) a.link:before, .main .part02 article:nth-of-type(4) a.link:before {content: ""; position: absolute; left:30px; bottom:-1px; width:15px;
border-top:2px solid #fff; transform:rotate(45deg) translateY(-9px); transition:all .3s ease!important; -webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important;}
.main .part02 article:nth-of-type(2) a.link:after, .main .part02 article:nth-of-type(4) a.link:after {content: ""; position:absolute; left:0; bottom:0px; width:50px;border-top:2px solid #fff; transition: all .3s ease !important; -webkit-transition: all .3s ease !important; -moz-transition: all .3s ease !important;}
.main .part02 article:nth-of-type(2):hover a.link:before, .main .part02 article:nth-of-type(4):hover a.link:before {content:""; position:absolute;left:50px;
width:15px;border-top:2px solid #fff;transform:rotate(45deg) translateY(-9px); transition:.3s;}
.main .part02 article:nth-of-type(2):hover a.link:after, .main .part02 article:nth-of-type(4):hover a.link:after {content: ""; position: absolute; left:0; bottom:0px;
width:70px; border-top: 2px solid #fff; transition:.3s;}


.main .part02 article:nth-of-type(3) {background:url(../images/main/part2_article-bg03.jpg) no-repeat center / cover;}
.main .part02 article:nth-of-type(4) {background:#151f37 url(../images/main/part2_aritcle-bg04.png) no-repeat center / cover; cursor: pointer;}
.main .part02 article h3 {font-size:24px; transform:var(--textRotate); font-weight:400; }
.main .part02 article:nth-child(3) h3 {display:flex; flex-wrap:wrap; gap:10px 5px; align-items:flex-end;}
.main .part02 article:nth-child(4) h3 small {display:block; padding-top:10px;}
.main .part02 article h3 span {display:block; font-weight:800; padding-top:10px; line-height: 1.2;}
.main .part02 .guideline {padding:45px 0; background:var(--blue);}
.main .part02 .guideline .top {padding:0 50px; display:flex; justify-content:space-between; align-items: center;}
.main .part02 .guideline .top a.detail {position:relative; width:30px; height:30px; border-radius:5px; border:1px solid #fff; transition:all 0.3s;}
.main .part02 .guideline .top a.detail:before {content:""; display:block; width:9px; height:1px; background:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.main .part02 .guideline .top a.detail:after {content:""; display:block; width:1px; height:9px; background:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} 
.main .part02 .guideline .top a.detail:hover {background:#fff;}
.main .part02 .guideline .top a.detail:hover:before, .main .part02 .guideline .top a.detail:hover:after {background:#000;}
.main .part02 .guideline .list {width:100%; margin-top:25px; }
.main .part02 .guideline .list li div {padding:0 50px;}
.main .part02 .guideline .list li a {display:block; overflow: hidden; white-space:normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all;}
.main .part02 .guideline .list li a:hover {text-decoration:underline!important; text-underline-offset:5px}
.main .part02 .guideline .list li span {display:block; padding-top:20px;}
.main .part02 .guideline .swiper-pagination {text-align:left; padding: 0 50px; bottom:50px;}
.main .part02 .guideline .swiper-pagination-bullet {background:#fff; width:12px; height:12px; opacity:0.3; margin:0;}
.main .part02 .guideline .swiper-pagination-bullet+.swiper-pagination-bullet {margin-left:8px;}
.main .part02 .guideline .swiper-pagination-bullet-active {opacity:1;}

.main .part03 {background:#f3f4f8; padding:40px 0;}
.main .part03 .inner {display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.main .part03 .inner.flex {display:flex;}
.main .part03 .inner.grid_3 {grid-template-columns:repeat(3,1fr);}
.main .part03 .inner.grid_5 {grid-template-columns:repeat(5,1fr);}
.main .part03 .inner a {display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid var(--border1); border-radius:1.5rem; overflow:hidden; max-height:260px; transition:all 0.3s;}
.main .part03 .inner a img {object-fit:contain; max-width:100%; transition:all 0.3s;}
.main .part03 .inner a:hover img {transform:scale(1.1);}
.main .part03 .inner a:hover {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.main .part03 .inner .big a {width:100%; height:100%; }
.main .part03 .inner > div {display:flex; flex-direction:column; row-gap:10px; max-height:260px;}
.main .part03 .inner .grid-column_1-3 {grid-column:1/3;}
.main .part03 .inner { }
.main .part03 .inner .grid-column_3-5 {grid-column:3/5;}
.main .part03 .inner .middle a {height:calc(50% - 5px);}
.main .part03 .inner.flex .big {width:35%;}
.main .part03 .inner.flex .middle {width:50%;}
.main .part03 .inner.flex .small {width:15%;}
.main .part03 .inner.flex .middle a {height:auto;}

.main .part03 .inner .middle a+a {margin-top:10px}
.main .part03 .inner.flex .middle a+a {margin-top:0;}
.main .part03 .inner .small a+a {margin-top:10px}
.main .part03 .inner .small a {height:calc(100% / 3 - 7px);}
.main .part03 .inner .small.item2 a {height:calc(100% / 2 - 5px);}
.main .part03 .inner .middle .m_banner {flex-direction:column;}
.main .part03 .inner.flex .middle .m_banner {flex-direction:row;}
.main .part03 .inner .small .s_banner {flex-direction:column;}
.main .part03 .inner .middle .m_banner a { }
/* ************************ (~1199) ************************ */
@media (max-width: 1199px) {
.main {margin-top:10px;}
.main .w1400 {padding:0 30px;}
.main .part01 .main-banner .swiper-wrapper .swiper-slide a {display:flex; align-items:center; height:100%;}
.main .part01 .main-banner .swiper-wrapper .swiper-slide img {aspect-ratio:1/0.74; width:100%; height:100%; max-height:35vh;}
.main .part02 {padding:20px 30px 40px;}
.main .part03 {padding:40px 30px;}
.main .part03 .inner {grid-template-columns:repeat(2,1fr); padding:0;}
}


/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 991px) {
.main .part01 .right > div {padding: 34px 20px 20px 20px;}
.main .part02 {grid-template-columns:repeat(2,1fr);}
.main .part02 article:nth-of-type(2) { background: var(--green) url(../images/main/part2_aritcle-bg02.png) 92% 75% / 151px no-repeat;}
.main .part03 .inner.flex {display:block;}
.main .part03 .inner.flex .big {width:100%;}
.main .part03 .inner.flex .middle {width:100%; margin:20px 0;}
.main .part03 .inner.flex .small {width:100%;}

}


/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
.main .w1400 {padding:0 20px;}
.main .part01 {flex-direction:column;}	
.main .part01 .main-banner {width:100%;}
.main .part01 .right {width:100%;}
.main .part01 .right > div {padding:30px 20px 20px 20px;}
.main .part01 .main-banner .swiper-button-prev {width:40px; height:40px;}
.main .part01 .main-banner .swiper-button-next {width:40px; height:40px;}
.main .part02 {padding:20px 20px 40px;}
.main .part02 article {padding: 35px 30px 45px;}
.main .part02 article h3 {font-size:22px;}
.main .part02 .guideline .top {padding:0 30px;}
.main .part02 .guideline .list li div {padding:0 30px;}
.main .part02 .guideline .swiper-pagination {padding:0 30px;}
.main .part02 article:nth-of-type(2) { background: var(--green) url(../images/main/part2_aritcle-bg02.png) 92% 75% / 40% no-repeat;}
.main .part03 {padding:40px 20px;} 
.main .part03 .inner {grid-template-columns:1fr;}
.main .part03 .inner.grid_5 {grid-template-columns:1fr;}
.main .part03 .inner .grid-column_1-3 {grid-column:auto;}
.main .part03 .inner .grid-column_3-5 {grid-column:auto;}
.main .part03 .inner a {border-radius:1rem;}
.main .part03 .inner a img {max-width:100%; }

}


/* ************************ 모바일 ************************ */
@media (max-width: 500px) {
.main .part01 .main-banner .swiper-button-prev {width:30px; height:30px;}
.main .part01 .main-banner .swiper-button-next {width:30px; height:30px;}
.main .part02 {grid-template-columns:repeat(1, 1fr); padding:20px 20px 30px;}
.main .part02 article {aspect-ratio:1/1; max-height:300px;}
.main .part02 .guideline .swiper-pagination {bottom:30px;}
.main .part03 {padding:30px 20px;}

}