@charset "UTF-8";

.MC_wrap1{ margin-bottom:0;}
.MC_wrap1 .container{ gap: 2.5rem;}
.MC_wrap1 .container:after{ display: none;}
.MC_box1 { width:auto; flex: 3; max-width:58rem; min-width:0px; }
.MC_box2 { flex: 1; width: 100%; padding-left:0; } /* 바로가기01 */
.MC_box3 { padding: 0 0 4rem;}

.Mvisual{ height:100%;}
.Mvisual .item{ overflow:hidden;}
.Mvisual .item p{ line-height:0;} 
.Mvisual .item img{ float: right; width:auto; height:100%;}

/* .link.lnk01 > ul > li{ position: relative; border-radius: 0.5rem; box-shadow: 0px 0px 30px rgba(0,0,0,0.1); background: #fff; padding: 1.75rem 2rem 2rem 2rem; display: flex; width: 100%; height:auto; flex-direction: column; overflow: hidden; }
.link.lnk01 > ul > li > span{ color:#111; font-size: 1rem; font-weight: 700;}
.link.lnk01 .num{ position:relative; padding-left:3rem; margin-top:0.5rem;}
.link.lnk01 .num img{ position:absolute; left:0; top:50%; transform: translateY(-50%);}
.link.lnk01 .num p{ color:#111; font-size:1.5rem; font-weight: 700; line-height:1.3;}
.link.lnk01 .num p em{ color:#1b4a01;}
.link.lnk01 .inr > p{ display: block; margin-top: 0.5rem; padding:0.25rem 0.5rem; font-size: 0.85rem; border-radius:2rem; text-align: center; background:#eee; font-weight: 700;}
.link.lnk01 dt{ font-size: 0.9rem; margin-top: 1rem; font-weight: 700;}
.link.lnk01 dd{ font-size: 0.85rem;} 

.link.lnk01 li.call01{ flex: 1;}
.link.lnk01 li.call02::before { position: absolute; content: ""; background: url('/images/bohun/template/H5/main/linkBg.png')no-repeat center bottom/contain; right: 0; bottom: 0; opacity: 0.4; width: 9rem; height: 5.25rem; }*/

.link.lnk01 > ul{position: relative; flex-wrap: nowrap; gap: 0 !important; border-radius: 0.5rem; box-shadow: 0px 0px 30px rgba(0,0,0,0.1); background: #fff; display: flex; width: 100%; flex-direction: column; overflow: hidden;}
.link.lnk01 li{ flex: 1; display: flex; flex-direction: column; justify-content: center; font-size: 0.95rem; padding:0 1rem 0 2rem; }
.link.lnk01 li + li{ border-top:1px dashed #ccc;}
.link.lnk01 h4{ color:#111; font-size: 1rem; font-weight: 700;}
.link.lnk01 .inr{ position:relative; display: flex; justify-content: center; flex-direction: column; min-height:3rem; padding-left:4rem; margin-top:0.25rem; font-size: 0.75rem;}
.link.lnk01 .inr img{ position:absolute; left:0; top:50%; transform: translateY(-50%);}
.link.lnk01 .inr strong{ display: block; color:#111; font-size:1.2rem; font-weight: 700; line-height:1.3;}
.link.lnk01 .inr strong em{ color:#1b4a01;}

.link.lnk02{ padding:0;}
.link.lnk02 ul{ gap: 1rem 2.5rem;}
.link.lnk02 ul > li{ flex: 1;}
.link.lnk02 ul > li > a{ position:relative; display: flex; align-items: start; justify-content: center; width:auto; height:100%; min-height:9rem; padding:1rem 2rem; border-radius:0.5rem; background:#fff; color:#111; box-shadow: 0 0 10px rgba(0,0,0,0.1); word-break: keep-all; transition: all 0.2s; z-index: 0;}
.link.lnk02 ul > li > a:before{ content:""; position:absolute; right:0; bottom:0; width:9rem; height:5.25rem; opacity: 0.4; background: url('/images/bohun/template/H5/main/linkBg.png')no-repeat right bottom/cover; z-index: -1;}
.link.lnk02 ul > li > a > p{ min-height:3.6rem; line-height: 1.2rem; font-size:0.9rem; margin:0 0 0.5rem; text-align: left; font-weight: 700; word-break: keep-all; word-break: break-word; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 3; white-space: wrap; text-overflow: ellipsis; }
.link.lnk02 ul > li > a > p span{ font-size:1rem; font-weight: 400;}
.link.lnk02 ul > li > a > span{ display: inline-block; line-height:2rem; padding:0 1rem; border-radius:1rem; background:#eee; transition: all 0.2s;}
.link.lnk02 ul > li > a > span:after{ content:"\EA6E"; display: inline-block; font-family: 'remixicon';}
.link.lnk02 ul > li > a:hover,
.link.lnk02 ul > li > a:focus{ background:#215b00; color:#fff; }
.link.lnk02 ul > li > a:hover p,
.link.lnk02 ul > li > a:focus p{ color:#fff; }
.link.lnk02 ul > li > a:hover > span,
.link.lnk02 ul > li > a:focus > span{ background:#1b4b01; }

@media (max-width: 1480px) {
    
    .MC_wrap1 .container{ gap: 2.5rem 1rem;}

    .link.lnk01 > ul{ gap: 1rem;}
    .link.lnk01 > ul > li{ padding: 0 1rem;}
    .link.lnk01 .inr{ padding-left: 3rem;}
    .link.lnk01 .inr strong{ font-size: 1rem;}
    
    .link.lnk02 ul{ gap: 1rem;}
}

@media (max-width: 1280px) {
    
    .MC_wrap1 .container{ gap: 2rem 0;}
    .MC_box1{ width:100%; flex: auto; max-width:100%;}
    .MC_box2{ margin-top:0;}
    
    .Mvisual .item img{ float: none; width:100%; height:auto;}

    .link.lnk01 > ul{ flex-direction: row;}
    .link.lnk01 > ul > li{ height:auto; padding:1.5rem;}
    .link.lnk01 > ul > li + li{ border-top:0; border-left:1px dashed #ccc;}
    .link.lnk01 .inr img{ width: 2.25rem; height: auto;}
    
    .link.lnk02 ul > li{ width: calc((100% - 1rem) /2); flex:none;}
    .link.lnk02 ul > li > a{ padding:1.5rem 1rem; min-height:auto;}
    .link.lnk02 ul > li > a br{ display: none;}
    .link.lnk02 ul > li > a > p{ display: block; min-height: 2.4rem; max-height: 100%;}
}

@media (max-width: 1024px) {

    .link.lnk01 .inr{ padding-left:3rem;}
    .link.lnk01 .inr img{ width:2.5rem; height:auto;}
}

@media (max-width: 900px) {
    
    /* .link.lnk01 > ul{ flex-direction: column;}
    .link.lnk01 > ul > li.call02{ width:100%; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: space-between;}
    .link.lnk01 > ul > li.call02 > span{ width:auto; }
    .link.lnk01 > ul > li.call02 .num{ flex: none;}
    .link.lnk01 .num{ padding-left:2.5rem;}
    .link.lnk01 .num img{ width:2rem; height:auto;} */
    
    .link.lnk01 > ul{ flex-direction: column;}
    .link.lnk01 > ul > li{ width:100%; padding: 1rem 1.5rem;}
    .link.lnk01 > ul > li + li{ border-left:0; border-top:1px dashed #ccc;}

    .link.lnk02 ul > li{ flex:auto; width:calc(50% - 0.5rem);}
    .link.lnk02 ul > li > a{ min-height: 0px;}
    .link.lnk02 ul > li > a:before{ width:7rem; height:4rem;}
}

@media (max-width: 680px) {

    /* .link.lnk01 > ul > li.call02::before{width: 7rem; height:4.25rem; } */
}

@media (max-width: 580px) {

    .link.lnk01 .num p{ font-size:1.4rem;}
    .link.lnk01 > ul > li.call01{ flex-direction: column;}
    .link.lnk01 > ul > li.call01 .num,
    .link.lnk01 > ul > li.call01 .inr{ width: 100%;}
    .link.lnk01 > ul > li.call01 dl{ display: flex; align-items: center; flex-wrap: wrap; line-height:1.1rem; gap: 0.5rem 1rem; margin-top:1rem;}
    .link.lnk01 > ul > li.call01 dt{ margin-top:0;}
}

@media (max-width: 420px) {

    .link.lnk02 ul > li{ width:100%;} 
    .link.lnk02 ul > li > a{ display: flex; flex-direction: row; align-items: center; padding:1rem;}
    .link.lnk02 ul > li > a > p{ flex: 1; display: block; min-height: 0px; font-size: 0.8rem; margin-bottom:0; max-height: 100%;}
    .link.lnk02 ul > li > a > span{ width:2rem; font-size:0; padding:0; line-height:0; text-align: center;}
    .link.lnk02 ul > li > a > span:after{ font-size:1rem; line-height:2rem;}
}

@media (max-width: 320px) {

    .link.lnk01 > ul > li{ padding:1rem;}
}