@font-face {
    font-family: '210 M고딕010.ttf';
    src: url('/font/210 M고딕010.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕030.ttf';
    src: url('/font/210 M고딕030.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕040.ttf';
    src: url('/font/210 M고딕040.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕050.ttf';
    src: url('/font/210 M고딕050.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕060.ttf';
    src: url('/font/210 M고딕060.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕070.ttf';
    src: url('/font/210 M고딕070.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕080.ttf';
    src: url('/font/210 M고딕080.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '210 M고딕090.ttf';
    src: url('/font/210 M고딕090.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Dynalight-Regular.ttf';
    src: url('/font/Dynalight-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'LEMONMILK-Regular.otf';
    src: url('/font/LEMONMILK-Regular.otf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'GothicA1-Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/GothicA1-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'SB 어그로 M';
    src: url('/font/SB_Aggro_M.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SB 어그로 B';
    src: url('/font/SB_Aggro_B.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '지마켓 L';
    src: url('/font/GmarketSansTTFLight.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '지마켓 M';
    src: url('/font/GmarketSansTTFMedium.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: '지마켓 B';
    src: url('/font/GmarketSansTTFBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon b';
    src: url('/font/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon sb';
    src: url('/font/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon m';
    src: url('/font/Montserrat-Medium.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon r';
    src: url('/font/Montserrat-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mon l';
    src: url('/font/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'KyoboHandwriting2024SeoWooPark';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-1@1.0/KyoboHandwriting2024psw.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

.bg{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


/* ------------------------- */
.disCount-sec{
    display: flex;
    align-items: center;
    width: 100%;
    height: 480px;
    background-image: url("/img/sub/csat/disCount-sec.jpg");
}

.inner{
    max-width: 1432px;
    width: 100%;
    margin: 0 auto;
}

.disCount-sec .inner{
    display: flex;
    justify-content: flex-end;
    padding-right: 50px;
}

.disCount-sec .inner .t_p{
    font-family: 'KyoboHandwriting2024SeoWooPark' !important;
    font-size: 50px;
    font-weight: 600;
    color: #000;
    margin-bottom: 30px;
}

.disCount-sec .inner .t_p span{
    font-family: 'KyoboHandwriting2024SeoWooPark' !important;
    font-size: 50px;
    font-weight: 600;
    color: #e74888;
}

.disCount-sec .inner .whbox{
    display: flex;
    align-items: center;
    width: max-content;
    height: 62px;
    background-color: #fff;
    border: 2px solid #e74888;
    border-radius: 50px;
    margin-top: 10px;
}


.disCount-sec .inner .whbox > span:nth-child(1){
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98px;
    height: 100%;
    background-color: #e74888;   
    font-size: 26px;
    letter-spacing: 3px !important;
    color: #fff;
    font-weight: 600;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    padding-left: 5px;
}

.disCount-sec .inner .whbox > span:nth-child(2){
    display: inline-block;
    font-size: 30px;
    color: #000;
    font-weight: 500;
    padding-left: 28px;
    padding-right: 36px;
}

.disCount-sec .inner .pbox{
    margin-top: 20px;
    padding-left: 20px;
}

.disCount-sec .inner .p01{
    font-size: 27px;
    font-weight: 600;
    color: #000;
}

.disCount-sec .inner .p02{
    font-size: 25px;
    color: #000;
    font-weight: 500;
    margin-top: 8px;
}

.disCount-sec .inner .p03{
    font-size: 20px;
    color: #96a2ac;
    margin-top: 20px;
}


.gong-sur-sec{
    padding: 84px 0 114px 0;
    width: 100%;
    background-color: #edfdfe;
}


.gong-sur-sec .inner .sur-sec-title{
    display: flex;
    justify-content: center;
    margin-bottom: 34px;
}

.tabdiv{
    display: flex;
    align-items: center;
    width: 678px;
    height: 78px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 1.634px 2.516px 9px 0px rgba(47, 47, 47, 0.5);
    border-radius: 50px;
    padding: 6px;
}

.tabdiv > span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    font-size: 40px;
    color: #424242;
    font-weight: 500;
    border-radius: 50px;
}

.tabdiv > span.active{
    color: #fff;
    font-weight: 600;
}

.sur-internet{
    position: relative;
    margin-top: 60px;
}

.sur-internet img{
    border-radius: 28px;
    box-shadow: 6.792px 5.905px 9px 0px rgba(47, 47, 47, 0.29);
}



.sur-pricediv{
    max-width: 510px;
    width: 100%;
    position: absolute;
    bottom: 212px;
    right: 104px;
}

.sur-pricediv ul li{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 32px;
}

.sur-pricediv ul li:nth-child(1){
    margin-top: 0;
}

.sur-pricediv ul li .left p{
    font-size: 20px;
    color: #363636;
}

.sur-pricediv ul li .left span{
    display: block;
    font-size: 33px;
    font-weight: 600;
    color: #363636;
    margin-top: 8px;
}

.sur-pricediv ul li .right span:nth-child(1){
    font-size: 65px;
    font-weight: 800;
}
.sur-pricediv ul li .right span:nth-child(1).pink{
    color: #f579a2;
}
.sur-pricediv ul li .right span:nth-child(1).blue{
    color: #7f99fb;
}

.sur-pricediv ul li .right span:nth-child(2){
    font-size: 15px;
    color: #363636;
}

.sur-pricediv ul li.pickli{
    position: relative;
}

.sur-pricediv ul li.pickli:after{
    content: "";
    display: block;
    width: 94px;
    height: 94px;
    position: absolute;
    top: -10px;
    left: -104px;
    background-image: url("/img/sub/csat/pick.png");
}



.gong-skin-sec{
    padding: 84px 0 114px 0;
    width: 100%;
    background-color: #feedfc;
}


.skin-internet{
    position: relative;
    margin-top: 74px;
}

.skin-internet img{
    border-radius: 28px;
    box-shadow: 6.792px 5.905px 9px 0px rgba(47, 47, 47, 0.29);
}

.skin-pricediv{
    max-width: 510px;
    width: 100%;
    position: absolute;
    bottom: 140px;
    right: 104px;
}

.skin-pricediv ul li{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 28px;
}

.skin-pricediv ul li:nth-child(1){
    margin-top: 0;
}

.skin-pricediv ul li .left p{
    font-size: 33px;
    line-height: 40px;
    font-weight: 600;
    color: #363636;
}


.skin-pricediv ul li .right span:nth-child(1){
    font-size: 65px;
    font-weight: 800;
}

.skin-pricediv ul li .right span:nth-child(1).purple{
    color: #bf79f5;
}


.youtubeshorts{
    padding: 94px 0;
}

.youtubeTitle{
    display: flex;
    justify-content: center;
}

.shortbox{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-top: 80px;
}

.btndiv{
    display: flex;
    justify-content: center;
    margin-top: 64px;
}

.viewmore{
    background-color: transparent;
    border: none;
}

@media (max-width:768px){
    .at-content{
        padding-bottom: 40px !important;
    }
    .youtubeWrap{
        padding: 40px 0;
        padding-bottom: 0;
    }
    .youtubeTitle img{
        width: 64%;
    }
    .swiper{
        height: fit-content;
        margin-top: 30px;
    }

    .btndiv{
        margin-top: 30px;
    }

    .btndiv img{
        width: 50%;
        margin: 0 auto;
    }
}