/* t상단 배너 */
.banner{
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: #FCFAEA;
    border-radius: 10px;
    padding: 3% 5%;
    margin-bottom: 50px;
}
.banner h2{
    font-size: 34px;
    font-weight: 800;
    color: #414141;
    margin-top: 11px;
}
.banner p:nth-of-type(1){
    font-size: 18px;
    font-weight: 600;
    color: #6A5E5E;
    margin: 22px 0 4px 0;
}
.banner p:nth-of-type(2){
    font-size: 16px;
    font-weight: 500;
    color: #998A8A;
}
.banner button{
    width: 250px;
    height: 70px;
    border-radius: 35px;
    background: #fff;
    color: #7D6F6F;

    font-size: 18px;
    font-weight: 600;
    margin-top: 27px;
    box-shadow: var(--shadow-weak);
}
.banner button:hover{
    background: #000;
    color: #fff;
}


/* 요금제 */
/* .data 데이터 박스*/
.custom_data h2{
    font-size: 30px;
    font-weight: 800;
    color: #111;
    margin: 0 0 35px 1%;
}
.custom_data h3{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
    margin-left: 1%;
}
.data_group{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.data{
    width: 49%;
    margin: 10px auto 0 auto;
}
.data_group>div:nth-child(1), .data_group>div:nth-child(2){
    margin-top: 20px;
}
.data_wrap{
    border: var(--border-de);
    border-radius: 20px;
    padding: 4% 3%;
    width: 100%;
    cursor: pointer;
    height: 315px;
}
.data_title{
    display: flex;
    justify-content: space-between;
    height: 29px;
    line-height: 29px;
}
.data_tag{
    display: flex;
    font-size: 13px;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 7px;
}
.data_tag>li{
    padding: 0  10px;
    margin-right: 5px;
    border-radius: 5px;
    white-space: nowrap;
    height: 24px;
    line-height: 24px;
}
.tag_lg{
    background: #F251AB;
}
.tag_sp{
    background: #1e1e1e;
}

.data_name{
    font-size: 19px;
    font-weight: 800;
    margin-left: 5px;
}
.data_sub{
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    margin-top: 4px;
    margin-left: 2px;
}
.data_info {
    display: flex;
    justify-content: space-around;
    width: 100%;
    background: #f9f9f9;
    margin: 22px 0 15px 0;
    padding: 18px;
    border-radius: 10px;
}
.data_info li{
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}
.data_info p:first-child{
    font-size: 16px;
    font-weight: 800;
    margin-top: 2px;
}
.data_info p:last-child {
    color: #6B6B6B;
}
.data_m{
    display: flex;
    text-align: right;
    justify-content: flex-end;
}
.data_m>p:first-child{
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    text-decoration: line-through;
    margin-top: 18px;
    margin-right: 11px;
    display: flex; 
}
.data_m>p:last-child{
    font-size: 36px;
    font-weight: 800;
    color: #ff4b4c;
}
.data_m span{
    font-size: 16px;
    font-weight: 600;
    margin: 0 2px;
}
.data_info img{
   margin-right: 3px;
    margin-bottom: 5px;
}

.phone_plan .result {
    margin-bottom: 0;
}



/* 요금제 */
.tag{
    display: flex;
    margin-left: 1%;
}
.label_tag{
    width: calc(24% - 5px);
    height: 50px;
    line-height: 46px;
    margin-right: 8px;

    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #6A5E5E;
    background: #F5F5F7;
    border-radius: 14px;
    cursor: pointer;
}
.label_tag input[type="radio"] + span {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    margin: auto;
}
.label_tag input[type="radio"]:checked + span {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 14px;
    font-family: 'SUIT', sans-serif;
    background: var(--normal-red);
    color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
}

.data_filter{
    display: flex;
    justify-content: space-between;
    width: 98%;
    margin: 52px 1% 0 1%;
}
.data:last-child {
    margin-left: 0.5%;
}

/* 조회결과 */
.result{
    width: auto;
    height: 30px;
    line-height: 30px;
    display: flex;
    font-weight: 700;
    font-size: 16px;
}
.result p:last-child{
    display: flex;
    margin-left: 2px;
}
.result span{
    color: var(--strong-red);
    margin: 0 2px 0 6px;
}

/* 조회결과: 총 **개, 전체 통신망 및 높은 가격순 선택창 */
.data_select{
    display: flex;
    justify-content: space-between;
}
.data_select select{
    border: 0;
}
.network, .filter{
    margin: 0 2%;
    height: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #8b8b8b;
}
.network{
    width: 110px;
    margin-right: 20px;
}
.filter{
    width: 125px;
}




/* 하단 배너 banner2 */
.banner2{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 140px;
    background: #fff0f2;
    border-radius: 10px;
    margin-top: 80px;
}
.banner2 p{
    display: flex;
    line-height: 140px;
    font-size: 26px;
    font-weight: 700;
    color: #414141;
    margin-left: 60px;
}
.banner2 span{
    color: var(--strong-red);
    font-weight: 800;
}
.banner2 img{
    position: relative;
    right: 7%;
    top:6%;
}
@media (max-width:1200px) {
    .data_wrap {
        height: 310px;
    }

}
/* 반응형 */
@media (max-width:1081px) {


    /* 요금제 */
        .data_wrap {
        height: 290px;
    }
    .data_tag {
        font-size: 12px;
    }
    .data_name {
        font-size: 18px;
    }
    .data_info{
        padding: 16px 11px;
    }
    .data_info p:first-child {
        font-size: 14px;
    }
    .data_info li {
        font-size: 13px;
    }
    .data_m > p:first-child {
        margin-top: 15px;
    }
    .data_m > p:last-child {
        font-size: 32px;
    }
}



@media (max-width:984px) {

    .banner h2 {
        font-size: 32px;
    }
    .banner p:nth-of-type(1) {
        font-size: 17px;
    }
    .banner button {
        width: 230px;
        height: 66px;
    }

    /* 요금제 */

    .data_wrap{
        height: 265px;
    }
    .data_tag{
        font-size: 12px;
    }
    .data_name {
        font-size: 17px;
    }
    .data_sub {
        font-size: 14px;
    }
    .data_info{
        padding: 18px 5px;
        margin: 14px 0 9px 0;
    }
    .data_m > p:first-child {
        font-size: 16px;
    }
    .data_m > p:last-child {
        font-size: 30px;
    }
    .data_m>p:first-child {
        margin-top: 13px;
    }
    .data_info img {
      width: 16px;
      height: 16px;
    }
    .data_tag>li {
        height: 22px;
        line-height: 22px;
    }

    /* 하단 배너 */
    .banner2 {
        height: 110px;
    }
    .banner2 p {
        line-height: 110px;
        font-size: 22px;
    }
    .banner2 img{
        width: 105px;
        height: 125.99px;
    }
}




@media (max-width:768px) {

    .banner h2 {
        font-size: 26px;
    }

    .banner p:nth-of-type(1) {
        font-size: 16px;
        margin: 10px 0 3px 0;
    }

    .banner p:nth-of-type(2) {
        font-size: 14px;
        letter-spacing: -0.85px;
    }

    .banner button {
        width: 195px;
        height: 56px;
        font-size: 14px;
        margin-top: 25px;
    }

    .banner img {
        width: 162px;
        height: 186.74px;
    }

    /* 요금제 */
    .result {
        font-size: 14px;
    }

    .filter {
        font-size: 14px;
        width: 110px;
    }

    .label_tag input[type="radio"]:checked + span {
        height: 44px;
        line-height: 44px;
    }

    .data {
        width: 100%;
    }

    .data_wrap {
        padding: 2.4% 3%;
    }

    .data_filter {
        margin-top: 25px;
    }

    .data_group > div:nth-child(1), .data_group > div:nth-child(2) {
        margin-top: 10px;
    }

    .data_info {
        margin: 20px 0 10px 0;
    }

    .label_tag {
        height: 43px;
        line-height: 40px;
        font-size: 14px;
        font-weight: 700;
        margin-right: 6px;
    }
    /* 하단 배너 */
    .banner2 {
        height: 97px;
    }

    .banner2 p {
        line-height: 97px;
        font-size: 20px;
    }

    .banner2 img {
        width: 94px;
        height: 112.79px;
    }
}



@media (max-width:580px) {

    .banner{
        position: relative;
        display: block;
        text-align: center;
    }
    .banner h2{
        font-size: 25px;
        margin-top: 30px;
    }
    .banner img{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%; 
    }
    .banner p:nth-of-type(1) {
        margin: 5px 0 3px 0;
    }
    .banner p:nth-of-type(2) {
        display: none;    
    }
    .banner button{
        margin: 215px 0 20px;
    }


    .custom_data h2 {
        font-size: 22px;
        margin: 0 0 15px 1%;
    }
    .custom_data h3 {
        font-size: 17px;
    }
    .label_tag {
        height: 44px;
        line-height: 41px;
        margin-right: 4px;
        margin-top: 1%;
        text-align: center;
        font-size: 13px; 
        width: calc(24% - 2px);
    }
    .tag {
    display: flex;
    margin-left: 1%;
    flex-wrap: wrap;
    }

    .tag li{
        width: 23%;
    }


    /* 요금제 */
    .data_wrap{
        min-height: 248px;
    }
    .data_tag {
        font-size: 11px;
    }
    .data_tag>li {
        height: 20px;
        line-height: 20px;
    }
    /* 하단 배너 */
    .banner2 {
        height: 100px;
    }
    .banner2 p {
        line-height: 100px;
        font-size: 16px;
        margin-left: 35px;
    }
    .banner2 img{
        width: 94px;
        height: 112.79px;
    }

}


@media (max-width:480px) {

    /* 요금제 */
    .label_tag {
        margin-top: 2%;
    }
    .result {
        font-size: 12px;
    }
    .filter {
        font-size: 12px;
        width: 95px;
    }
    .data_info p:first-child {
        font-size: 13px;
    }
    .data_info li {
        font-size: 11px;
    }

    /* 하단 배너 */
    .banner2 {
        height: 95px;
    }
    .banner2 p {
        line-height: 95px;
        font-size: 13.5px;
        margin-left: 25px;
    }
    .banner2 img{
        width: 80px;
        height: 95.99px;
        right: 4%;
    }

}

@media (max-width:360px) {


    .label_tag {
        height: 38px;
        line-height: 38px;
        font-size: 12px;
    }
    .label_tag input[type="radio"]:checked + span {
        height: 38px;
        line-height: 38px;
    }

    /* 데이터 박스 */
    .data_wrap {
        min-height: 227px;
    }
    .data_name {
        font-size: 16px;
    }
    .data_sub {
        font-size: 12px;
    }
    .data_tag {
        font-size: 10px;
    }
    .data_tag > li {
        padding: 0 3.2%;
    }
    .data_info {
        padding: 18px 5px;
        margin: 17px 0 23px 0;
    }
    .data_info li {
        font-size: 13px;
    }

    /* 하단 배너 */
    .banner2 {
        height: 90px;
    }
    .banner2 img {
        right: 3%;
    }
    .banner2 p {
        line-height: 90px;
        font-size: 13px;
        margin-left: 20px;
    }
}