@charset "UTF-8";

.cont_wrap { position: relative; flex: 1; min-width:0px; height: 25rem; padding-left: 1rem; display: flex; flex-direction: column; gap: 1rem; } 

.MC_wrap1{ margin-bottom: 0;}
.MC_box1 { width:auto; flex: 3; max-width:56.5rem; min-width:0px; }
.MC_box2 { flex: 1; width: 100%; height:auto; padding-left:0; } /* 바로가기01 */

.Mvisual{ height:100%;}
.Mvisual .item{ overflow:hidden;}
.Mvisual .item a, .Mvisual .item p{ justify-content: end;} 
.Mvisual .item img{ height:100%; width:auto; max-width: auto; }

.link.lnk01 > ul{ flex-direction: column; gap: 1rem; }
.link.lnk01 > ul > li{ height:auto; flex: 1;}
.link.lnk01 > ul > li > a{ display: flex; min-height:100%; flex-direction: column; justify-content: center; padding:0.5rem 1.5rem; background:#fff; border:2px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 0.5rem;}
.link.lnk01 > ul > li > a::before{ display: none;}
.link.lnk01 > ul > li > a > .inr{ position:relative; padding-left:5rem; }
.link.lnk01 > ul > li > a > .inr img{ position:absolute; left:0; top:50%; transform: translateY(-50%);}
.link.lnk01 > ul > li > a > .inr span{ font-size: 0.8rem; font-weight: 600;}
.link.lnk01 > ul > li > a > .inr p{ height:auto; color:#111; letter-spacing: -2px; line-height:1.2; font-size: 1.5rem; font-weight: 900;}
/* .link.lnk01 > ul > li > a > .inr p em{ color:#215c00;} */
.link.lnk01 > ul > li > a:hover,
.link.lnk01 > ul > li > a:focus{ border-color:#215c00; background:#fff;}
.link.lnk01 > ul > li > a:hover > .inr span, 
.link.lnk01 > ul > li > a:focus > .inr span, 
.link.lnk01 > ul > li > a:hover > .inr p, 
.link.lnk01 > ul > li > a:focus > .inr p{ color:#215c00;}
/* .link.lnk01 > ul > li > a:hover > .inr p em, 
.link.lnk01 > ul > li > a:focus > .inr p em{ color:#000;} */

.link.lnk02 { display: flex; flex-wrap: wrap; gap: 1rem; padding:0;}
.link.lnk02 h3.lk{ position:relative; padding:1.5rem 1rem; color:#fff; font-size: 0.8rem; border-radius:0.5rem; background:#215c00; overflow:hidden;}
.link.lnk02 h3.lk em{display: block; font-size:1.3rem; font-weight: 600; }
.link.lnk02 .lk{ position:relative; width:calc((100% - 6rem) / 7); height:10.5rem; border-radius:0.5rem; background:#fff; overflow:hidden; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}
.link.lnk02 .lk p{ line-height:1.1rem; height:3.3rem;  text-align: center; font-size:0.8rem; font-weight: 600; margin-top:0.5rem; overflow: hidden; }
.link.lnk02 .lk .inr{ position:relative; display: block; height:100%; color:#111; padding:1.5rem 1rem 1rem; }
.link.lnk02 .lk .inr:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:0.5rem; border:2px solid #215c00; opacity: 0; transition: all 0.2s;}
.link.lnk02 .lk .inr .img{ text-align: center;}
.link.lnk02 .lk .ovInr{ position:absolute; left:0; top:100%; width:100%; height:100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.25rem; padding:0 0.25rem; color:#fff; background:#215c00; transition: all 0.3s;}
.link.lnk02 .lk .ovInr > p{ margin: 0 0 0.25rem; display: flex; align-items: center;}
.link.lnk02 .lk .ovInr > a{ display: inline-block; min-width: 6rem; font-size: 0.75rem;}
.link.lnk02 .lk .ovInr > a i{ display: inline-block; width:1.8rem; height:1.8rem; line-height:1.8rem; font-size: 0.9rem; vertical-align: middle; text-align: center; margin-right:0.25rem; border-radius:50%; background:#1a4a00;}
.link.lnk02 .lk.on .ovInr{ top: 0;}
.link.lnk02 .lk .ovInr > a:hover,
.link.lnk02 .lk .ovInr > a:focus{ text-decoration: underline;}

.center_wrap{ display: flex; flex-direction: column; height:8.5rem; gap: 0.75rem;}
.center_wrap .inner_wrap{ position:relative; padding:0 1.5rem; display: flex; flex-wrap: wrap; align-content: center; gap: 0.75rem 0; background:#215c00; border-radius:0.5rem;}
.center_wrap .inner_wrap.center{ flex: 1;}
.center_wrap .inner_wrap a{ display: flex; align-items: center; justify-content: space-between; padding:1rem 0;}
.center_wrap .inner_wrap a,
.center_wrap h3{ width:100%; font-size:0.9rem; font-weight: 600; color:#fff;}
.center_wrap .inr{ width:100%; display: flex; gap: 0 0.5rem;}
.center_wrap .inr select{ width:calc(100% - 2.5rem); height:2.5rem; line-height:2.5rem; padding:0 0.5rem; color:#fff; border-radius:0.25rem; background:none; border:1px solid #fff; }
.center_wrap .inr select option{ color:#111;}
.center_wrap .inr button{ width:2.5rem; text-align: center; font-size: 1.25rem; line-height:2.5rem; background:#fff; border-radius:0.25rem; }

@media (max-width: 1590px) {

    .link.lnk01 > ul > li > a { padding:0.5rem 1rem;}
}

@media (max-width: 1520px) {

    .link.lnk01 > ul > li > a > .inr { padding-left:3.5rem;}
    .link.lnk01 > ul > li > a > .inr img{ width:3rem; height:auto;}
    .link.lnk01 > ul > li > a > .inr p{ font-size:1.5rem;}
}

@media (max-width: 1480px) {

    .link.lnk02 h3.lk{ padding:1.5rem 1rem;}
    .link.lnk02 .lk{ width:calc((100% - 4rem) / 5); }

    .link.lnk01 > ul > li > a > .inr p{ font-size: 1.2rem;}
}

@media (max-width: 1440px) {

    .MC_box1{ height:25rem; }
}

@media (max-width: 1280px) {

    [class^='MC_wrap'] .container{ flex-direction: column;}
    .cont_wrap{ flex-direction: row; padding-left:0; margin-top:2rem;}

    .MC_box1{ max-width:100%;}
    .MC_box2{ flex: 1; margin-top:0;}
    .MC_box6{ flex: 1; margin-top:0;}

    .Mvisual .item img{ float: none; width:100%; height:auto;}
    .Mvisual .item img{ float: none;}

    .link.lnk01 > ul > li{ width: 100%;}

}

@media (max-width: 1240px) {

    .link.lnk01 > ul > li > a > .inr p{ line-height:1.2; letter-spacing: -1px;}

    .link.lnk02 .lk{ width:calc((100% - 4rem) / 5); }
}

@media (max-width: 1024px) {

    .link.lnk01 > ul > li > a > .inr span{ padding-right:0;}
    .link.lnk01 > ul > li > a > .inr p{ -webkit-line-clamp:none; }

    .link.lnk02 .lk a{ font-size: 0.9rem;}
}

@media (max-width: 900px) {

    .link.lnk01 > ul > li{ width: 100%; min-height: 0px;}

    .link.lnk02 .lk{ width:calc((100% - 3rem) / 4); }
}

@media (max-width: 768px) {

    .cont_wrap{ flex-direction: column; margin-top: 1rem;}

    .MC_box2{ flex: 1;}
    .MC_box6{ flex: 1;}

    .link.lnk01 > ul{ flex-direction: row;}
    .link.lnk01 > ul > li{ width:calc(50% - 0.5rem); }

    .center_wrap{ height: auto; }

    .link.lnk02{ gap: 0.5rem;}
    .link.lnk02 h3.lk{ width:100%; font-size: 1rem; height:auto; padding:1rem;}
    .link.lnk02 h3.lk em{ display: inline-block; font-size: 1.1rem;}
    .link.lnk02 .lk{ width:calc((100% - 1rem) / 3); height: 10rem;}
    .link.lnk02 .lk .inr{ padding: 1rem 0.5rem; display: flex; flex-direction: column; justify-content: center;}
    .link.lnk02 .lk .inr img{ width: 3rem; height:auto;}
    .link.lnk02 .lk p{ height:auto; font-size: 0.9rem;}

    .center_wrap .inner_wrap{ padding:1rem;}
}

@media (max-width: 680px) {

    .link.lnk01 > ul > li > a{ padding:1rem;}
    .link.lnk01 > ul > li > a > .inr p{ font-weight: 700; font-size: 1.4rem; line-height: 1;}
    .link.lnk01 > ul > li > a > .inr span{ font-size: 0.9rem;}

    .center_wrap h3,
    .center_wrap .inner_wrap a{ font-size: 1rem;}
}

@media (max-width: 610px) {

    .link.lnk01 > ul{ flex-direction: column; }
    .link.lnk01 > ul > li{ width: 100%;}

    .link.lnk02 .lk p{ font-size: 0.8rem;}
}

@media (max-width: 480px) {

    .link.lnk02 .lk{ width:calc((100% - 0.5rem) / 2);}
    .link.lnk02 .lk a{ font-size: 0.8rem; line-height:1.2;}
}

@media (max-width: 420px) {

    .link.lnk01 > ul > li > a{ padding: 0.75rem 1rem;}
    .link.lnk01 > ul > li > a > .inr p{ font-size: 1.3rem;}


    .link.lnk01 > ul > li > a .inr { padding-left:0rem; }
    .link.lnk01 > ul > li > a > .inr img{ display: none; }
    .link.lnk01 > ul > li > a > .inr p{ margin-top:0;}

    .link.lnk02 .lk .inr img{ width: 2.75rem;}
    .link.lnk02 .lk p{ font-size: 0.85rem;}
    .link.lnk02 .lk .ovInr > a{ display: flex; flex-direction: column; align-items: center; font-size: 0.75rem; min-width: 0px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; width: 100%; text-align: center;}
    .link.lnk02 .lk .ovInr > p{ font-size: 0.75rem; font-weight: 400; margin-bottom: 0.6rem;}
}

@media (max-width: 360px) {
    .link.lnk02 .lk .ovInr > a i{ width: 1.5rem; height: 1.5rem; line-height: 1.5rem;}
}



