@charset "utf-8";
/* @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); */
/*
 * date : 2023.09.12
 * 사용영역 : 다이렉트샵 메인
 *
 */

/* body{word-break: keep-all; font-family:'Pretendard', 'roboto','notosanskr', sans-serif,'malgun gothic','맑은 고딕','돋움','Roboto',dotum,sans-serif !important} */

.n_inner{max-width: 1100px; margin: 0 auto; width: calc(100% - 30px); padding:20px 0 70px 0;}
.color_red{color:#dc2b51;}
.color_white{color:#fff !important; border-color:#fff !important;}

@media (min-width: 768px) {
    .n_inner{padding-top:40px;}
}



/* 메인 이벤트 슬라이드 */
.event_banner{margin: 10px 0;}
.event_banner .swiper-slide{border-radius: 20px; overflow: hidden;}
.event_banner .banner_box a{position: relative; display:flex; padding:25px; align-items: center; justify-content: center; min-height: 200px;}
.event_banner .banner_box a .box_txt{max-width: 50%; display: flex; align-content: space-between; flex-wrap: wrap; height: 100%;}
.event_banner .banner_box a .box_txt .text{width: 100%;}
.event_banner .banner_box a .box_txt strong{font-size: 20px; font-weight: 600; display: block;}
.event_banner .banner_box a .box_txt p{font-size: 14px; color:#515151; margin-top: 10px; line-height: 1.4;}
.event_banner .banner_box a .box_txt span{font-size: 12px; border:1px solid #858585; border-radius: 50px; padding: 5px 10px; color:#515151; margin-top: 20px; display: inline-block;}
.event_banner .banner_box a .box_txt.color_white *{color:#fff !important; border-color:#fff !important;}
.event_banner .banner_box a .box_img{max-width: 50%; text-align: center; padding-left: 10px;}
.event_banner .banner_box a .box_img img{width: 140px; max-width: 100%;}
.main_pagi.swiper-pagination{position: absolute; bottom: 0px !important; right: 0; padding: 0 10px; text-align: center;}
.main_pagi.swiper-pagination .swiper-pagination-bullet{border-radius: 50px; transition: all 0.3s; width: 7px; height: 7px;}
.main_pagi.swiper-pagination .swiper-pagination-bullet-active{background: #ed5d6f !important; width: 25px;}
.event_pagi.main_pagi.swiper-pagination{position: absolute; bottom: 10px; right: 0; padding: 0 23px; text-align: right;}
.event_banner .banner_btn_box{width: 120px; text-align: center !important; background: rgba(0,0,0,0.2); color: #fff; padding:7px 15px !important; border-radius: 50px; position: absolute; right: 15px !important; bottom: 15px; left: initial; z-index: 10; display: flex; align-items: center; justify-content: space-between}
.event_banner .banner_btn_box .swiper-button{position: relative; background:none; left: initial; top: initial; right: initial; bottom:initial; margin: 0; height: auto; width: auto}
.event_banner .banner_btn_box .swiper-button img{width: 7px; display: block;}
.event_banner .banner_btn_box .play_btn{cursor: pointer;}
.event_banner .banner_btn_box .play_btn img{width: 9px; display: block;}
.event_banner .banner_btn_box .play_btn .play_img{display: none;}
.event_banner .banner_btn_box .play_btn.active .play_img{display: block;}
.event_banner .banner_btn_box .play_btn.active .stop_img{display: none;}
.event_banner .banner_btn_box .event_pagi.main_pagi.swiper-pagination{position: relative; padding:0; width: auto; left: initial; top: initial; right: initial; bottom:initial; font-size:12px; font-weight: 300}

/* 카운트다운 UI */
.count_con.banner_ver{position:absolute; right:50px; top:50%; transform:translateY(-50%); background-color:#efefef; border-radius:25px; padding:25px 35px; max-width:400px; width:100%;}
.count_con.banner_ver h3{background-color:#848484; font-size:23px; text-align:center; padding:10px; width:100%; color:#fff; border-radius:13px; font-weight:600}
.count_con.banner_ver .count_box{display:grid; align-items: center; justify-content: center; grid-template-columns:1fr 20px 1fr; margin-top:10px;}
.count_con.banner_ver .count_box > li{color:#848484; font-size:40px; margin-bottom:7px; text-align: center;}
.count_con.banner_ver .count_box > li.box{position:relative; background: linear-gradient(#d7d7d7 10%, #fff 90%); padding:10px 0; border-radius:20px; width:100%; position:relative; margin-bottom:0; color:#000;box-shadow: inset 5px 5px 7px rgba(0,0,0,0.04);}
.count_con.banner_ver .count_box > li.box:after{position:absolute; left:0; bottom:0; width:100%; height:50%; background: linear-gradient(#e0e0e0, #efefef); display:block; content:""; z-index: 1; box-shadow: inset 0px 0px 5px rgba(0,0,0,0.01); border-radius:0 0 20px 20px; background-color: #fff;}
.count_con.banner_ver .count_box > li.hide{display:none;}
.count_con.banner_ver .count_box > li.box p{text-align:center; font-size:50px; font-weight:800; position:relative; z-index:10}
.count_con.banner_ver .count_box .count_txt{margin:5px 0 0 0; font-size:18px;}

@media (max-width: 900px) {
    .count_con.banner_ver{width:35%; right:40px; padding:20px;}
    .count_con.banner_ver h3{font-size:18px;}
    .count_con.banner_ver .count_box .count_txt{font-size:15px;}
    .count_con.banner_ver .count_box > li.box p{font-size:35px;}
}
@media (max-width: 600px) {
    .count_con.banner_ver{width:30%; right:20px; padding:10px; border-radius:10px;}
    .count_con.banner_ver h3{border-radius:10px; font-size:13px; padding:5px; font-weight: 400}
    .count_con.banner_ver .count_box{grid-template-columns:1fr 10px 1fr; margin-top:5px;}
    .count_con.banner_ver .count_box > li{font-size:25px; margin-bottom:5px;}
    .count_con.banner_ver .count_box > li.box{border-radius:10px; padding:5px 0}
    .count_con.banner_ver .count_box > li.box p{font-size:18px;}
    .count_con.banner_ver .count_box .count_txt{font-size:12px;}
    
}

.img-main-banner{width:100%; border-radius: 25px; overflow:hidden;}
.img-pc{display: none;}
.img-mb{display: block;}

@media (min-width: 500px) {
    .event_banner .banner_box a{min-height: 220px;}
    .event_banner .banner_box a .box_txt strong{font-size: 25px;}
    .event_banner .banner_box a .box_txt p{font-size: 17px;}
    .event_banner .banner_box a .box_img{padding-left: 50px;}
    .event_banner .banner_box a .box_img img{width: 220px;}
}
@media (min-width: 768px) {
    .event_banner{margin: 50px 0 15px 0;}
    .event_banner .banner_box a{justify-content: flex-start; padding: 20px 60px; min-height: 360px;}
    .event_banner .banner_box a .box_txt{width: 50%;}
    .event_banner .banner_box a .box_txt strong{font-size: 40px;}
    .event_banner .banner_box a .box_txt p{font-size: 25px; margin-top: 20px;}
    .event_banner .banner_box a .box_txt span{font-size: 14px; padding: 10px 30px; margin-top: 30px;}
    .event_banner .banner_box a .box_img{width: 50%; text-align: left; padding: 0}
    .event_banner .banner_box a .box_img img{width: auto ; max-width: 90%;}
    .main_pagi.swiper-pagination{padding: 0 20px;}
    .main_pagi.swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px;}
    .main_pagi.swiper-pagination .swiper-pagination-bullet-active{background: #ed5d6f !important; width: 40px;}
    .event_pagi.main_pagi.swiper-pagination{bottom: 20px;}
    .event_banner .banner_btn_box{width: 170px; padding:15px 20px !important; right: 20px !important; bottom: 20px;}
    .event_banner .banner_btn_box .swiper-button img{width: auto;}
    .event_banner .banner_btn_box .play_btn img{width: auto;}
    .event_banner .banner_btn_box .event_pagi.main_pagi.swiper-pagination{font-size:17px;}

    .img-pc{display: block;}
    .img-mb{display: none;}
}
@media (min-width: 900px) {
    .event_banner .banner_box a{border-radius: 25px; padding:20px 110px;}
    .event_banner .banner_box a .box_txt strong{font-size: 40px;}
    .event_banner .banner_box a .box_txt p{font-size: 25px; margin-top: 20px;}
    .event_banner .banner_box a .box_img{padding-left: 0;}
}



/* 메인 배너 */
.plan_banner{display: flex; flex-wrap: wrap; margin-top: 10px;}
.event_plan{background: #f1516c; border-radius: 20px; width: 100%; margin-bottom: 10px;}
.event_plan a{padding:30px; display: flex; align-items: center; justify-content: center; height: 100%; flex-wrap: wrap; position: relative;}
.event_plan .ep_l{width: 100%;}
.event_plan .ep_l p{font-size: 20px; line-height: 1.4; color:#fff; font-weight: 200}
.event_plan .ep_l p strong{font-weight: 600; display: block;}
.event_plan .ep_l p strong img{display: none; vertical-align: middle; margin-left: 5px;}
.event_plan .ep_l span{color:#fff; border:1px solid #fff; border-radius: 50px; font-size: 12px; padding: 5px 10px; display: inline-block; margin-top: 40px;}
.event_plan .ep_r{max-width: 40%; text-align: center; padding-left: 0; margin-left: 20px; position: absolute; margin-left: 20px; bottom: 20px; right: 20px;}
.event_plan .ep_r img{max-width: 100%; width: 100%;}
.select_plan{width: calc(100% - 110px); margin-right: 10px; background:#ffe5ed; border-radius: 20px;}
.select_plan a{display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 20px 30px; height: 100%; position:relative; flex-wrap: wrap;}
.select_plan .sp_l{width: 100%;}
.select_plan .sp_l p{font-size: 12px; line-height: 1.4;}
.select_plan .sp_l p strong{font-size: 14px; font-weight: 600; display: block;}
.select_plan .sp_r{max-width: 50%; position: absolute; bottom: 15px; right:15px;}
.select_plan .sp_r img{width: 70px; display: inline-block; max-width: 100%;}
.my_order{width: 100px; border-radius: 20px; background:#ffeef4; text-align: center; display: flex; justify-content: center;}
.my_order a{ padding: 10px 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.my_order p{margin-top: 10px; width: 100%; font-size: 15px;}
.banner_slide .banner_img img{width: 100%;}
.banner_slide .banner_img .pc{display: none;}
.banner_slide .banner_img .mb{display: block;}
@media (min-width:400px) {
    .select_plan a{flex-wrap: nowrap;}
    .select_plan .sp_l{width: auto; padding: 0}
    .select_plan .sp_l p strong{font-size: 16px;}
    .select_plan .sp_r{position: relative; bottom: inherit; right: inherit;}
    .select_plan .sp_r img{width: 75px;}
}
@media (min-width: 500px) {
    .event_plan a{padding:40px 25px; flex-wrap: nowrap;}
    .event_plan .ep_l{width: auto;}
    .event_plan .ep_l p{font-size: 25px;}
    .event_plan .ep_l p strong img{display: inline-block;}
    .event_plan .ep_l span{font-size: 14px; padding: 7px 15px; margin-top: 20px;}
    .event_plan .ep_r{padding-left: 0px; max-width:45%; margin-left: 40px; position: relative; bottom: inherit; right: inherit;}
    .event_plan .ep_r img{width: 170px;}
    .select_plan a{padding:20px 40px;}
    .select_plan .sp_l p{font-size: 15px;}
    .select_plan .sp_l p strong{font-size:19px;}
    .select_plan .sp_r{max-width: 40%;}
    .select_plan .sp_r img{width: 100%; max-width: 135px}
}
@media (min-width: 550px) {
    .select_plan a{justify-content: center;}
    .select_plan .sp_r{margin-left: 20px;}
    .select_plan .sp_l p strong{font-size: 22px;}
}
@media (min-width: 768px) {
    .event_plan{width: 65%; margin: 0;}
    .event_plan a{padding: 40px 50px;}
    .event_plan .ep_l p{font-size: 25px;}
    .event_plan .ep_l span{padding: 10px 20px; margin-top: 30px;}
    .event_plan .ep_r img{width: auto;}
    .select_plan{width: calc(35% - 15px); margin:0 0 0 15px;}
    .select_plan a{ flex-wrap: wrap; padding:40px; align-content: space-between;}
    .select_plan .sp_l{width: 100%;}
    .select_plan .sp_l p{font-size: 20px;}
    .select_plan .sp_l p strong{font-size: 25px;}
    .select_plan .sp_r{max-width: 100%; text-align: right; margin-top:10px; width: 100%;}
    .select_plan .sp_r img{width: 100%; max-width: 135px;}
    .my_order{display: none;}

    .plan_banner{margin-top: 15px;}

    .my_order p{font-size: 16px;}
}
@media (min-width: 900px) {
    .event_plan{width: 70%; border-radius: 25px;}
    .event_plan .ep_l p{font-size: 30px;}
    .event_plan .ep_r{margin-left: 80px; padding: 0;}
    .select_plan{width: calc(30% - 15px); border-radius: 25px;}
    .select_plan .sp_l p strong{font-size: 25px; margin-top: 10px;}
    .banner_slide .banner_img .pc{display: block;}
    .banner_slide .banner_img .mb{display: none;}
}

@media (min-width: 1200px) {
    .event_plan .ep_r{margin-left: 120px;}
}


/* 메인 서브 배너 */
.tabEvent{display: flex; margin-bottom: 15px;}
.tabEvent li{margin-right: 15px; font-size: 16px; font-weight: 600; color:#97afcc; cursor:pointer;}
.tabEvent li:last-child{margin-right: 0;}
.tabEvent li.active{color:#4b555e;}
.tabView > .box{display: none;}
.tabView > .box.active{display: block;}
.sub_banner{position: relative;}
.sub_banner a{padding: 0; border-radius: 20px; overflow: hidden; display: block;}
.sub_banner a img{width: 100%;}
.sub_banner .swiper-button{background-image: none;}

.sub_banner .banner_btn_box{width: 60px; text-align: center !important; background: rgba(0,0,0,0.5); color: #fff; padding:7px 15px !important; border-radius: 50px; position: absolute; right: 15px !important; bottom: 15px; left: initial; z-index: 10; display: flex; align-items: center; justify-content: space-between}
.sub_banner .banner_btn_box .swiper-button{position: relative; background:none; left: initial; top: initial; right: initial; bottom:initial; margin: 0; height: auto; width: auto}
.sub_banner .banner_btn_box .swiper-button img{width: 7px; display: block;}

@media (min-width: 500px) {
    .tabEvent li{font-size: 18px;}
}
@media (min-width: 768px) {
    .sub_banner .banner_btn_box{width: 70px; padding:10px 15px !important; right: 20px !important; bottom: 20px;}
    .sub_banner .banner_btn_box .swiper-button img{width: auto;}
}


/* 메인 해시태그 */
.filter-list {position:relative; font-size:0; display: flex; flex-wrap: wrap; margin-top: 10px;}
.filter-list .item {width:auto; margin:0 6px 6px 0;}
.filter-list .item a {display:block; margin: 0 auto; text-align: center;}
.filter-list .item a > span {display:inline-block; padding:8px 15px; font-size:15px; font-weight:600; color:#bcbcbc; border:1px solid #bcbcbc; border-radius:25px; box-sizing:border-box; height: 36px;}
.filter-list .item.active a > span {color:#ed5d6f; background-color:#ffe2e5; border:1px solid #ed5d6f;}
@media (min-width: 768px) {
    .filter-list{margin: 15px 0;}
}
@media (min-width: 940px) {
    .filter-list .item a > span {padding: 12px 20px; font-size: 18px; height: auto}
}



/* 메인 요금제 슬라이드 */
.w_mask{position: absolute; right: 0; top: 0; height: 100%; width: 10%; background:linear-gradient(to left, #fff, transparent); z-index: 10; display: none;}
.plan_list{position: relative; overflow: hidden; padding-bottom: 25px;}
.plan_list .swiper-wrapper{align-items:stretch;}
.plan_list .list_article{height:auto; font-size:18px; background: #fff; border-radius: 12px; background:#fbfbfb; border: 1px solid #d2d2d2;}
.plan_list .list_article a{ padding:20px 30px; display: block;}
.plan_list .list_article .name{display: flex; align-items: center; flex-wrap: wrap;}
.plan_list .list_article .name .telecom{font-size:12px; color:#fff; border-radius: 5px; padding: 3px 7px; font-weight: 500; margin-right: 5px;}
.plan_list .list_article .name .lg_txt{background:#f1516c;}
.plan_list .list_article .name .skt_txt{background:#0075e9;}
.plan_list .list_article .name .kt_txt{background:#30a84e;}
.plan_list .list_article .name p{font-size: 14px; color:#909090;}
.plan_list .list_article .spec{display: flex; margin-top: 20px; flex-wrap: wrap;}
.plan_list .list_article .spec_info{width: 100%;}
.plan_list .list_article .spec_info ul{display: flex; flex-wrap: wrap; align-items: baseline;}
.plan_list .list_article .spec_info > ul > li{display: flex; align-items: center;}
.plan_list .list_article li img{ display: inline-block; margin-right: 5px;}
.plan_list .list_article li > span{font-size: 14px; color:#515151}
.plan_list .list_article li.data{margin-bottom: 10px; width: 100%; align-items: flex-start !important;}
.plan_list .list_article li.data img{width: 20px; display: inline-block;}
.plan_list .list_article li.data ul li{font-size: 13px; color:#7f7f7f; position: relative; line-height: 1.3; width: 100%;}
.plan_list .list_article li.data ul li::before{display: inline-block; content: "+"; margin-right: 5px;}
.plan_list .list_article li.data ul li:first-child{font-size: 20px; font-weight: 500; margin-bottom:10px; color:#515151;}
.plan_list .list_article li.data ul li:first-child::before{display: none;}
.plan_list .list_article li.call{margin-right: 20px; margin-bottom:8px;}
.plan_list .list_article li.call img{width: 13px;}
.plan_list .list_article li.call span span{font-size:13px; color:##7f7f7f;}
.plan_list .list_article li.mms img{width: 14px;}
.plan_list .list_article .spec_price{position:relative; text-align: right; width: 100%; margin-top: 10px;}
.plan_list .list_article .spec_price span{color:#acacac; font-size: 14px; text-decoration: line-through; display: block; margin-bottom: 5px;}
.plan_list .list_article .spec_price p{font-size: 14px; color:#818181;}
.plan_list .list_article .spec_price p strong{font-size: 25px; color:#515151; font-weight: 600}
.plan_list .list_article .spec_price p strong em{font-size:19px;}
@media (min-width: 500px) {
    .plan_list .list_article .spec{align-items: flex-end;}
    .plan_list .list_article .spec_info{width: 100%;}
    .plan_list .list_article .spec_price{width: 100%;}
}
@media (min-width: 768px) {
    .plan_list{padding-bottom:35px;}
    .plan_list .list_article a{padding: 30px 50px;}
    .plan_list .list_article .name p{font-size: 18px;}
    .plan_list .list_article li.data ul li{font-size: 14px;}
    .plan_list .list_article li.data ul li:first-child{font-size: 27px; margin-bottom: 5px;}
    .plan_list .list_article li > span{font-size:16px;}
    .plan_list .list_article .spec_price span{font-size: 19px; margin-bottom: 7px;}
    .plan_list .list_article .spec_price p{font-size: 19px;}
    .plan_list .list_article .spec_price p strong{font-size: 33px; font-weight: 500}
    .plan_list .list_article .spec_price p strong em{font-size: 25px;}
}
@media (min-width: 900px) {
    .plan_list .list_article a{padding: 30px 40px;}
    .plan_list .list_article li.data img{transform: translateY(8px);}
    .plan_list .list_article li.data ul li:first-child{font-size: 30px;}
    
    .w_mask{display: block;}
}



/* 메인 해시태그 */
.main_title{margin: 60px auto 30px auto; display: flex; align-items:flex-end; width: 100%; font-size: 28px; font-weight: 600; color:#5c5e60;}
.main_title span{margin-right: 15px;}
.plan_con .plan_btn{background:#fff; border-radius: 50px; font-size: 18px; color:#757575; padding: 15px 30px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); font-weight: 600}

@media (max-width: 1200px) {
    .main_title{font-size: 27px;}
}

@media (max-width: 700px) {
    .main_title{ margin: 50px auto 15px auto;}
}

@media (max-width: 500px) {
    .main_title{font-size: 22px;}
    .main_title span{margin-right: 5px; width: 25px;}
    .main_title span img{width: 100%;}
}


/* 메인 리뷰 슬라이드 */
.main_review .swiper-wrapper{padding-bottom: 25px; align-items: stretch;}
.main_review .swiper-wrapper .review_box{height: auto;}
.main_review .swiper-wrapper .review_box .plan_link{display: none;}
.review_st{border-radius: 12px; background:#fbfbfb; padding:25px 30px; cursor: pointer; border:1px solid #e9e9e9;}
.point_txt2{color:#dc2b51; border:1px solid #dc2b51; background: #ffbdce; padding: 2px 10px; border-radius:6px; font-size: 12px;}
.review_st .review_txt{margin-top: 20px; font-size: 16px; color:#7a7a7a; line-height: 1.5;}
#review_swiper .review_st .review_txt {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.4; height: 4.2em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all;}
.review_st .info{display: flex; justify-content: space-between; align-items:flex-end; margin-top: 20px;}
.review_st .info li{font-size: 13px; display: flex; align-items: center; color:#7a7a7a; flex-wrap: wrap;}
.review_st .info li:first-child{width: calc(100% - 70px);}
.review_st .info li:last-child{width: 70px; text-align: right;}
.review_st .info li .telecom{color:#fff; font-size: 10px; padding: 2px 7px; border-radius: 50px; margin-right: 5px;}
.review_st .info li .t_lg{background:#ff558a;}
.review_st .info li .t_kt{background: #30a84e;}
.review_st .info li .t_skt{background: #0075e9;}
.review_st .info li p{font-size: 1em;}
.review_st .info li .user_name{width: 100%; text-align: right;}
.review_st .info li .date{color:#ccc; width: 100%; margin-top: 3px; text-align: right;}
.review_st .info li .plan_name{width: 100%; margin-top: 3px;}
.review_layer{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100000000}
.review_layer .mask{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.4);}
.review_layer .inner{max-width: 600px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 30px; padding: 30px; width: calc(100% - 40px);}
.review_layer .review_btn{width: 50%; padding: 10px; background:#333; color: #fff; margin: 30px 10px 0 0; text-align: center; font-size:15px;}
.review_layer .review_btn:last-child{margin-right: 0;}
.review_layer .review_plan_btn{background:#f1516c;}
@media (min-width: 768px) {
    .main_review .swiper-wrapper{padding-bottom: 35px;}
    .review_st{padding: 30px 40px;}
    .review_st .review_txt{font-size: 18px;}
    .point_txt2{font-size: 14px;}
    .review_st .info li{flex-wrap:nowrap;}
    .review_st .info li .telecom{font-size: 12px; padding: 4px 0; width: 50px; text-align: center;}
    .review_st .info li .plan_name{font-size: 16px; margin-top: 0; width: calc(100% - 50px); display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}