@charset "utf-8";

.share_wrap {width: 100%; font-family: 'Pretendard'; position: fixed; top: 0; left: 0; height: 100vh; z-index: 9999; background-color: rgba(0, 0, 0, 0.5);}

.share_box {width: 30%; background-color: #fcfcfc; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 60px 20px;}

/* --- 모달 제목 --- */
.share_box .title_wrap {margin-bottom: 20px;}
.share_box .title_wrap p {font-weight: 500; font-size: 24px; color: #666; text-align: center;}

/* --- 모달 본문 --- */
/* .share_content {background-color: #fff; padding: 50px 0;} */
.share_content ul {display: flex; justify-content: center; gap: 30px;}
/* .share_content ul li a {padding: 10px 20px; border: 1px solid #666; border-radius: 25px; color: #666; display: flex; align-items: center; background-color: #fff;} */
.share_content ul li a {color: #666; display: flex; align-items: center; display: flex; flex-direction: column; gap: 10px;}
.share_content ul li a span {font-weight: 500;}
.share_content ul li a .img_box {background-size: cover; background-repeat: no-repeat; background-position: center; width: 40px; height: 40px;}
.share_content ul li .kakao_img {background: url(https://s3.ap-northeast-2.amazonaws.com/lbplatform/images/DXCAR/165705563293277.png);}
.share_content ul li .link_img {background: url(https://s3.ap-northeast-2.amazonaws.com/lbplatform/images/DXCAR/165705594928387.png); scale: .8;}


.share_content li a i {font-size: 22px; padding-right: 5px;}
/* .share_content li a i.xi-kakaotalk {color: #ffcc00;} */

/* --- 모달 닫기 버튼 --- */
.share_box .modal_wrap .btn_close {position: absolute; right: 0; top: 0; cursor: pointer; }
.share_box .btn_close i {font-size: 30px; color: #666; padding-top: 15px;}

/* --------- 1200px --------- */
@media screen and (max-width: 1200px) {
    .share_box {width: 40%;}
    .share_box .title_wrap p {font-size: 22px;}
}

/* --------- 960px --------- */
@media screen and (max-width: 960px) {
    .share_box {padding: 40px 20px;}
    .share_box .title_wrap p {font-size: 20px;}
    .share_content ul li a span {font-size: 14px;}
    .share_content ul li a .img_box {width: 35px; height: 35px;}
    .share_box .btn_close i {font-size: 24px;}
}

/* --------- 768px --------- */
@media screen and (max-width: 768px) {
    .share_box {width: 65%;}
    .share_box .title_wrap p {font-size: 18px;}
}

/* --------- 460px --------- */
@media screen and (max-width: 460px) {
    .share_box {width: 70%;}
    .share_box .btn_close i {font-size: 20px;}
    .share_content ul {gap: 20px;}
}

/* --------- 375px --------- */
@media screen and (max-width: 375px) {
    .share_content ul li a .img_box {width: 25px; height: 25px;}
    .share_box .btn_close i {font-size: 16px;} 
}