.main {background:url("../images/main/main-bg.jpg") no-repeat 50% 50%;background-size:cover}
.main .header,
.main .header-top .gnb-wrap {background-color:transparent}
.main .box-content-area {width:100%;margin:0 auto;padding:30px 40px 50px;display:flex;flex-wrap:wrap;}
.main .box-item {display:none;width:calc((100% - 48px) / 2);height:45px;position:relative;background-size:contain;background-repeat:no-repeat;background-position:100% 100%}
.main .box-item.n1 {background-image:url("../images/main/main-card-1.png");background-color:#2faeef}
.main .box-item.n2 {background-image:url("../images/main/main-card-2.png");background-color:#fff}
.main .box-item.n3 {background-image:url("../images/main/main-card-3.png");background-color:#1cac42}
.main .box-item.n4 {background-image:url("../images/main/main-card-4.png");background-color:#5a6f7f}
.main .box-item.n5 {background-image:url("../images/main/main-card-5.png");background-color:#3c45f1}
.main .box-item.n6 {background-image:url("../images/main/main-card-6.png");background-color:#fff}
.main .box-item .link-box {position:absolute;top:0;left:0;right:0;bottom:0;padding:32px}
.main .box-item .link-txt {font-size:40px;font-weight:300;line-height:38px;color:#fff}
.main .box-item.n2 .link-txt,
.main .box-item.n6 .link-txt {color:#000}


#main-img {width: 100%;max-width: 1100px;margin: 0 auto 40px auto;aspect-ratio: 275/186;position: relative;box-shadow: 0 10PX 20px 8px rgba(0, 0, 0, 0.5);border-radius: 10px;overflow: hidden;background-color: #000000}
#main-img > img {position:absolute;width:100%;height:100%;border-radius:10px;object-fit:contain;}
img.old-img {opacity: 0;transition: opacity 0.5s ease;}
img.new-img {opacity: 1;transition: opacity 1.5s;}
.prev-btn, .next-btn {width: 50px;height: 100px;position: absolute;z-index: 200;top: calc(50% - 50px);cursor: pointer;}
.prev-btn {background: center / contain no-repeat url("../images/main/prev-btn.png");}
.next-btn {right: 0;background: center / contain no-repeat url("../images/main/next-btn.png");}
.prev-btn:hover {background: center / contain no-repeat url("../images/main/prev-hover.png");}
.next-btn:hover {background: center / contain no-repeat url("../images/main/next-hover.png");}
.img-order-dot {position: absolute;display: flex;justify-content: space-around;width: 100px;bottom: 10px;left: calc(50% - 50px);z-index: 201;}
.img-order-dot > div {width:15px;height:15px;background-color:white;border-radius:15px;border:1px solid #4184ff;}
.img-order-dot > div.active {background-color: #4184ff;}
.no-data {position: relative;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.2);}
.no-data > div {position: absolute; top: 50%;width: 100%; text-align: center;color: white;font-size: 20px}


@media (max-width: 1023px) {
    .main {display:flex;flex-direction:column;height:100%;background-position: 100% 50%}
    .main .box-content-area {padding:40px 20px 60px;justify-content:space-between;}
    .main .box-item {width:calc((100% - 20px) / 2);display:block;border-radius:5px}
    .main .box-item .link-box {padding:16px}
    .main .box-item .link-txt {font-size:16px;line-height:16px;font-weight:600;}
    .main .box-item.n1 {order:1;margin-bottom:20px}
    .main .box-item.n2 {order:2}
    /*.main .box-item.n3 {order:5}*/
    .main .box-item.n4 {order:3}
    .main .box-item.n5 {order:4}
    /*.main .box-item.n6 {order:6}*/

    .prev-btn, .next-btn {width: 30px;}
    .img-order-dot {width: 50px;left: calc(50% - 25px);}
    .img-order-dot > div {width: 8px;height: 8px;}
}