@charset "UTF-8";
/* 알람 아라비 코리아 */
.alam_arabi {position: relative;}
.alam_arabi .alam_arabi_header {background: url(/public/assets/muslim/images/alam_arabi_header.png) 50% 50% no-repeat; height: 398px;}
.alam_arabi .alam_arabi_header img {display: none;}
.alam_arabi .alam_arabi_bg {background: url(/public/assets/muslim/images/alam_arabi_bg.png) 50% 50% repeat; height: 796px; letter-spacing: normal;}
.alam_arabi .container {max-width: 1240px; margin: 0 auto; padding: 56px 0 0 0;}

.alam_arabi__tabSwiper__menu {text-align: center;}
.alam_arabi__tabSwiper__menu .swiper { display: inline-flex; justify-content: center;}
.alam_arabi__tabSwiper__menu .swiper-wrapper {display: flex; flex-wrap: wrap; background: #fff; padding: 5px; border-radius: 100px; max-width: 1240px; margin: 0 auto; box-sizing: border-box;}
.alam_arabi__tabSwiper__menu .swiper-slide {width: auto;}
.alam_arabi__tabSwiper__menu .swiper-slide span {cursor: pointer; font-weight: 400; font-size: 18px; line-height: 25px; color: #747474; padding: 7.5px 24px; display: flex; justify-content: center; align-items: center; letter-spacing: 0.068px;}
.alam_arabi__tabSwiper__menu .swiper-slide.is-selected span {background: #303030; color: #fff; font-weight: 700; border-radius: 100px;}
.alam_arabi .card {display: flex; flex-wrap: wrap; gap: 20px; margin: 32px 0 0 0;}
.alam_arabi .card li { width: calc((100% - 40px) / 3); display: flex; flex-direction: column; position: relative; overflow: hidden; background: #fff; border: 1px solid #EDEDED; border-radius: 10px; padding: 16px;}
.alam_arabi .card .logo { position: relative; border-radius: 10px; height: 100px;}
.alam_arabi .card .logo img {width: 100%; height: 100%; object-fit: cover;}
.alam_arabi .card .badge {position: absolute; left: 12px; bottom: -11px; color: #303030; font-weight: 700; font-size: 15px; line-height: 22px; background: #fff; border-radius: 100px; padding: 3px 14px; display: inline-block; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.alam_arabi .card .badge span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.alam_arabi .card .info { padding: 20px 8px 16px 8px;}
.alam_arabi .card .info p {position: relative; font-weight: 400; font-size: 14px; line-height: 20px; color: #000; word-break: keep-all; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0 0 22px;}
.alam_arabi .card .info p::before { content: ""; min-width: 16px; width: 16px; height: 16px; position: absolute; top: 3px; left: 0;}
.alam_arabi .card .info p:first-child::before {background: url(/public/assets/muslim/images/icon_map.png) no-repeat;}
.alam_arabi .card .info p:last-child::before {background: url(/public/assets/muslim/images/icon_tel.png) no-repeat;}
.alam_arabi .btn_wrap {display: flex; gap: 12px;}
.alam_arabi .btn_wrap a {width: calc(100% - 12px); font-weight: 500; font-size: 13px; line-height: 19px; color: #fff; text-align: center; padding: 8.5px 0;}
.alam_arabi .btn_wrap a:first-child {background: #309810;}
.alam_arabi .btn_wrap a:last-child {background: #1D5B0A;}

.alam_arabi .pagination {display: flex; justify-content: center; gap: 6px; align-items: center; padding: 40px 0 80px 0;}
.alam_arabi .pagination li {list-style: none;}
.alam_arabi .pagination li a,
.alam_arabi .pagination li span {font-weight: 700; font-size: 14px; line-height: 20px; color: #303030; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; padding: 0; text-decoration: none;}
.alam_arabi .pagination li.active a {background: #303030; color: #fff; border-radius: 50%;}
.alam_arabi .pagination li.prev a {background: url(/public/assets/muslim/images/icon_left.png) no-repeat center; background-size: 8px 16px; color: transparent;}
.alam_arabi .pagination li.next a {background: url(/public/assets/muslim/images/icon_right.png) no-repeat center; background-size: 8px 16px; color: transparent;}


@media (max-width: 1200px) {
    .alam_arabi_bg .pc {display: block;}
    .alam_arabi_bg .mo {display: none;}
}

@media (max-width: 799px){
    .alam_arabi {background: url(/public/assets/muslim/images/alam_arabi_bg_mo.png) no-repeat; background-size: cover; width: 100%;}
    .alam_arabi .alam_arabi_header,
    .alam_arabi .alam_arabi_bg {background: none; height: auto;}
    .alam_arabi .alam_arabi_header img {width: 100%; display: block;}
    .alam_arabi .container {padding: 0 24px;}
    .alam_arabi .card { flex-direction: column; margin: 24px 0 0 0;}
    .alam_arabi .card li {width: 100%;}
    .alam_arabi .card li.mo {display: none;}
    .alam_arabi .card .logo {height: 27.78vw;}
    .alam_arabi .card .badge {font-size: 14px; line-height: 20px; left: 8px; bottom: -12px; max-width: calc(100% - 16px); padding: 4px 14px;}
    .alam_arabi__tabSwiper__menu {text-align: left;}
    .alam_arabi__tabSwiper__menu .swiper { justify-content: flex-start;}
    .alam_arabi__tabSwiper__menu .swiper-wrapper {background: none; border-radius: 0; padding: 0; gap: 8px;}
    .alam_arabi__tabSwiper__menu .swiper-slide span { font-size: 15px; line-height: 20px; background: #fff; border-radius: 100px; padding: 5px 16px; letter-spacing: 0.01px;}
    .alam_arabi .btn_wrap a {font-size: 12px; line-height: 17px;}
    .alam_arabi .card .info {padding: 18px 0 14px 0;}
    .alam_arabi .card .info p {font-size: 12px; line-height: 17px; padding: 0 0 0 19.5px;}
    .alam_arabi .card .info p::before {top: 1px;}
    .alam_arabi .card .info p:first-child::before {background: url(/public/assets/muslim/images/icon_map_mo.png) no-repeat; background-size: 16px 16px;}
    .alam_arabi .card .info p:last-child::before {background: url(/public/assets/muslim/images/icon_tel_mo.png) no-repeat; background-size: 16px 16px;}

    .alam_arabi .pagination {padding: 24px 0 48px 0;}
    .alam_arabi .pagination li.prev a {background: url(/public/assets/muslim/images/icon_left_mo.png) no-repeat center; background-size: 8px 16px; color: transparent;}
    .alam_arabi .pagination li.next a {background: url(/public/assets/muslim/images/icon_right_mo.png) no-repeat center; background-size: 8px 16px; color: transparent;}
    .alam_arabi .pagination li a,
    .alam_arabi .pagination li span {font-size: 12px; line-height: 17px;}
}