:root {
    --facebook-head : #3d5a98;
    --facebook-sub : #3966DB;
    --youtube-head : #ff3131;
    --youtube-sub : #F32C33;
    --insta-head : #a93592;
    --insta-sub :#BB008F;
    --twit-head : #03a9f4;
    --twit-sub : #44BAFF;
    --pin-head : #d33c43;
    --pin-sub : #F54C55;
    --thum-head : #3f3f3f;
    --thum-sub : #35465C;
    --tiktok-head : #fe2c55;
    --tiktok-sub : #F43449;
    --sound-head : #fe7800;
    --sound-sub : #F79866;
    --vine-head : #00b386;
    --vine-sub : #32A478;
    --twitch-head : #8200ff;
    --twitch-sub : #9046F8;
    --link-head : #0066c5;
    --link-sub : #4875B4;
    --google-head : #f95300;
    --google-sub: #555555;
    --vimeo-head : #1ab7ea;
    --vimeo-sub : #ABCA6F;
    --daily-sub : #0064DC;
    --daily-head : black;
    --reverb-head : #8e2a25;
    --reverb-sub : black;
    --flikr-head : #e50073;
    --flikr-sub : #8560A8;
    --discord-head : #3E3EF9;
    --android-head : #A5CA39;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html{
    font-family: sans-serif;
}

body{
    margin :0;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.66em;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.1;
    color: inherit;
}

a{
    color: black;
    text-decoration: none;
}

a:hover{
    color: black;
    text-decoration: none;
}

ul{
    list-style: none;
}

.asp_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    background: #3a3a3a;
}

.asp_logo{
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffba00;
}

.asp_login_menu{
    width: 65%;
    height: 3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0 20px 0;
}

.asp_menu{
    width: 70%;
    height: 4.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.asp_menu_no_login{
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asp_menu_first{
    width: 50%;
    display: flex;
    justify-content: space-around;
    border-right: 1px solid whitesmoke;
}

.asp_menu_first > a{
    padding: 0px 10px;
    color: whitesmoke !important;
}

.asp_menu_second{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.asp_menu_second > div {
    padding: 0px 10px;
}

.asp_menu_second > a {
    padding: 0px 10px;
    color: whitesmoke !important;
}

.first-header {
    display: none;
    justify-content: center;
    width: 100%;
    height: 4.5rem;
    background-color: #3a3a3a;
}

.first-header-box{
    width : 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_title {
    color: whitesmoke;
    padding-top: 1rem;
}

.header_second {
    display: flex;
    align-items: center;
    font-size: 0.9375rem;
    font-family: Sans-serif;
}

.header_second a {
    padding-left: 1rem;
    color: whitesmoke;
}

.header_link :hover {
    font-weight: bold;
}

.main_user_name{
    margin-left: 5px;
}

.dropdown-text{
    color: black !important;
}

.dropdown-icon{
    color:black;
}

.order_nav{
    display: flex;
    width: 100%;
    height: 20rem;
    flex-direction: column;
    justify-content: center;
    background: url("https://snswinner.com/themes/pergo/assets/images/main_banner.webp") no-repeat center;
    background-blend-mode: multiply;
    opacity: 1;
}

.order_best{
    position:absolute;
    color: #FADE03;
    font-size: 2rem;
    margin-left: -1rem;
    margin-top: -1.2rem;
}

.order_best_text{
    position: absolute;
    color: black;
    font-size: 0.7rem;
    font-weight: bold;
    margin-left: -0.625rem;
    margin-top: -0.2rem;
}

.order_nav_title {
    font-size: 2.5rem;
    font-weight: bold;
    color: black;
}

.order_nav_contents {
    font-size: 1.5rem;
    color: black;
}
.site-information{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FAFDFC;
}
.site-info {
    display: flex;
    width: 50%;
    margin: 1rem;
    margin-right: 3.5rem;
    justify-content: space-around;
}

.info_order {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info_total_order{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info_text {
    font-size: 1.2em;
    font-weight: bold;
}

.info_num {
    background-color: #00dab4;
    color: whitesmoke;
    margin-top: 5px;
    padding : 5px 1.5rem 5px 1.5rem;
    font-weight: bold;
    font-size: 2rem;
    border-radius: 30px;
    box-shadow:  0 3px 3px 0 gray;
}

.info_num i{
    color: #FADE03;
}

.info_member {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info_star {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site_services{
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #FAFDFC;
}

.service_first {
    display: flex;
    justify-content: center;
    padding: 1rem;
    width: 100%;
    border-top: solid 1px #d3d2d6;
    border-bottom: solid 1px #d3d2d6;
    background-color: #FAFDFC;
}

.service_title {
    font-size: 2rem;
    font-weight: bold;
}

.service_second {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-top: 2rem;
    width: 100%;
}

.service_items {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.service_item{
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 10rem;
    margin: 1rem;
}

.service_item:hover{
    opacity: 0.7;
}

.item_first {
    background-color: var(--youtube-head);
    padding: 10px;
    padding-left: 1rem;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
}

.item_second {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border-radius: 0 0 10px 10px;
    font-size: 1rem;
    background-color: white;
    font-weight: bold;
    color: black;
    box-shadow: 0 3px 3px 0 gray;
}

.item_second img{
    width: 4rem;
    height: 4rem;
}

.item_subtitle{
    margin-top: 5px;
}

.item_second i {
    font-size: 3em;
}

.service_item:nth-child(2) .item_first{
    background-color: var(--insta-head);
}



.service_item:nth-child(3) .item_first{
    background-color: var(--facebook-head);
}



.service_item:nth-child(4) .item_first{
    background-color: var(--tiktok-head);
}



.service_item:nth-child(5) .item_first{
    background-color: var(--twit-head);
}

.service_items:nth-child(2) .service_item:nth-child(1) .item_first{
    background-color: var(--twit-head);
}



.service_items:nth-child(2) .service_item:nth-child(2) .item_first{
    background-color: var(--twitch-head);
}



.service_items:nth-child(2) .service_item:nth-child(3) .item_first{
    background-color: var(--thum-head);
}



.service_items:nth-child(2) .service_item:nth-child(4) .item_first{
    background-color: var(--vimeo-head);
}



.service_items:nth-child(3) .service_item:nth-child(1) .item_first{
    background-color: var(--link-head);
}



.service_items:nth-child(3) .service_item:nth-child(2) .item_first{
    background-color: var(--sound-head);
}



.service_items:nth-child(3) .service_item:nth-child(3) .item_first{
    background-color: var(--discord-head);
}



.service_items:nth-child(3) .service_item:nth-child(4) .item_first{
    background-color: var(--google-head);
}



.service_items:nth-child(4) .service_item:nth-child(1) .item_first{
    background-color: var(--vimeo-head);
}



.service_items:nth-child(4) .service_item:nth-child(2) .item_first{
    background-color: var(--pin-head);
}



.service_items:nth-child(4) .service_item:nth-child(3) .item_first{
    background-color: var(--android-head);
}



.service_items:nth-child(4) .service_item:nth-child(4) .item_first{
    background-color: black;
}



.kakao_talk{
    width : 100%;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #dbe8ff;
}

.kakao_title{
    font-size: 2rem;
    margin-top: 1rem;
    font-weight: bold;
    color:black;
}

.kakao_btn{
    padding : 1rem;
}

.kakao_btn span{
    font-size: 2rem;
    font-weight: bold;
    margin-left: -2.2rem;
    padding : 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #DBCE3B;
    border-radius: 30px 30px 30px 30px;
}

.kakao_btn:hover{
    opacity: 0.7;
}

.kakao_info {
    font-size: 1rem;
    color: black;
}

.footer_title{
    font-size: 2rem;
    font-weight: bold;
}

.modal-content {
    border: initial;
    border-radius: 0.1rem;
    background: white;
    z-index: 1000;
}

/*modal*/
.modal-title {
    display: inline-block;
}

.modal-right .modal-dialog {
    margin: 0 auto;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0 !important;
    height: 100%;
    max-width: 600px;
}

.news_announcement .modal-right .modal-dialog {
    max-width: 420px;
}

.news_announcement .modal-header{
    color: white;
    background: #05d0a0;
    background: -webkit-linear-gradient(45deg, #05d0a0, #9fd6ef) !important;
    background: -moz- oldlinear-gradient(45deg, #05d0a0, #9fd6ef) !important;
    background: -o-linear-gradient(45deg, #05d0a0, #9fd6ef) !important;
    background: linear-gradient(45deg, #05d0a0, #9fd6ef) !important;
}

.news_announcement .modal-content{
    height: 100vh;
}

.news_announcement .modal-content .modal-body{
    background: #f7f7f7;
    padding: 0.5rem;
}

.news_announcement .news-item .card{
    margin-bottom: 0.5rem;
}

.news_announcement  .news-item .card .card-header{
    min-height: 0.5rem;
    padding: 0.5rem 0.5rem;
}

.news_announcement  .news-item .card .desc>ul{
    padding-left: 5px;
}

.backlink{
    display: none;
}

.user_header {
    display: none;
}

.user_header_nav {
    display: none
}

.user_header_link {
    margin: 20px;
}

.signup_btn.on {
    border-color: #70b870 !important;
    background: #70b870 !important
}

.main_margin_left{
    margin-left: 250px;
}

/* 사이드바 시작 */

.header_left{
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;

    background: #fff;
    box-shadow: 10px 2px 10px rgb(0 0 0 / 15%);
    z-index: 100;
}

.header_left_logo {
    width: 100%;
    height: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    background: #ffba00;
}

.herder_left_profile{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.header_left_profile_icon{
    padding-right: 0.5rem;
}

.header_left_profile_text{
    font-size: 0.9rem;
    font-weight: 600;
}

.header_left_category{
    margin-bottom: 100px;
}

.li_header{
    font-size: 1rem;
    color: #666;
    font-weight: 600;
    line-height: 30px;
    padding-left: 5px;
}

.line{
    width: 2rem;
    height: 2px;
    background: #555;
    margin: 15px 5px;
}

.li_service{
    font-size: 1rem;
    color: #666;
    font-weight: 600;
    line-height: 30px;
    padding-left: 5px;
    margin-bottom: 10px;
}

.li_service > a:hover{
    color: #ffba00;
}

/* 사이드바 끝 */

/* 메인배너 시작 */
.header_main_banner{
    background: #fafdfc;
}
.main_banner{
    display: flex;
    width: 100%;
    height: 30rem;
    flex-direction: column;
    justify-content: center;
    background: url(https://snswon.com/themes/pergo/assets/images/main_banner_1.webp) no-repeat center;
    background-blend-mode: multiply;
    opacity: 1;
}
/* 메인배너 끝 */

/* 리뷰 시작 */
.swiper {
    position: static;
    overflow: hidden;
    height: 400px;
    padding-left: 100px !important;
    padding-right: 30px !important;
    background: #FAFDFC;
}

.review_swiper{
    width:50%;
    background: #FAFDFC !important;
}

.banner_swiper{
    position: static;
    overflow: hidden;
    height: 30rem !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.swiper-banner {
    width: 100%;
    height: 30rem !important;
    background: no-repeat center !important;
}

.swiper-banner > a {
    width: 100%;
    height: 30rem !important;
    background: no-repeat center !important;
}


.swiper-banner-img_mobile{
    display: none !important;
}

.prev-btn, .next-btn{
    position: absolute;
}


.swiper-slide {
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide-active {

}

.swiper-box {
    flex : 0 0 300px;
    height: 300px !important;
    display: flex;
    flex-direction: column;
    margin-right: 50px;
    padding: 40px;
    box-shadow: 0 3px 6px #00000029;
    border-radius: 25px;
    transition: background-color .3s,flex .3s,height .3s,margin .3s,padding .3s;
    margin-top: 3rem;
    cursor : pointer;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide-active .review_icon_start, .swiper-slide-active .review_icon_end{

}

.swiper-slide-active .review_contents {

}

.swiper-slide-active .review_name {

}

.swiper-slide-active.swiper-box{
    transform: scale(1.2) !important;
}

.review_section{
    width: 100%;
    display: flex;
    background: #FAFDFC;
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.review_section_icon{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.review_section_title{
    display: flex;
    width: 40%;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0rem 2rem 20rem;
}

.review_desc_title{
    font-size: 3rem;
    font-weight: bold;
    color:#00dab4 !important;
}

.review_desc_content{
    width: 100%;
    font-size: 1.9rem;
    color:gray;
}

.review_desc_all{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00dab4;
    color: whitesmoke;
    font-weight: bold;
    padding: 0.5rem 0rem 0.5rem 0;
    margin-top: 2rem;
}

.review_profile{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.review_name{
    margin-bottom: 2rem;
}

.swiper-slide-active .review_icon_start, .swiper-slide-active .review_icon_end{

}

.review_contents p {
    font-weight: bold;
}

.review_avatar img {
    width: 75px;
    height: 75px;
}
/*리뷰 끝*/
/* 서비스 시작 */
.our_service{
    width: 100%;
    background : whitesmoke;
    padding-top : 1rem;
}
.our_service_title{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    font-size: 3rem;
    font-weight: bold;
}

.service_swiper{
    width: 70%;
    position: static;
    overflow: hidden;
    height: 420px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    background: whitesmoke;
}


.swiper-service {
    flex : 0 0 300px;
    display: flex;
    flex-direction: column;
    margin-right: 30px;
    transition: background-color .3s,flex .3s,height .3s,margin .3s,padding .3s;
}

.swiper-service > a > img:hover{
    transform: translate(0, -10%);
}

.service_swiper > .swiper-wrapper > .swiper-slide-active {
    background: whitesmoke !important;
}

.service_swiper > .swiper-wrapper > .swiper-slide {
    background: whitesmoke !important;
}

.swiper-service > a > img{
    background: whitesmoke;
}

.swiper-pagination{
    bottom: 0 !important;
    top: unset !important;
}

.toggle_btn_area{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: whitesmoke;
    padding-bottom: 2rem;
}

.toggle_btn_box > a{
    display:flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    width:100%;
    margin-bottom : 3rem !important;
}

.toggle_btn_box > a > span{
    font-size: 2rem;
    font-weight: bold;
}

.service_plus_title{
    text_align : center;
}

/* 서비스 끝 */

/* 서비스 목록 시작 */
.service_plus{
    display: none;
}

.service_plus.active{
    background: whitesmoke;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;
}

.service_plus_title{
    margin-top: 6rem;
    margin-bottom : 3rem;
    font-size: 2rem;
    font-weight: bold;
    padding : 0.5rem 1.5rem;
    border-radius : 50px;
    color: #00dab4 !important;
}

.service_plus_title:hover{
    transform:scale(1.2);
}

.service_plus_area{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service_plus_floor{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.service_plus_box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.service_plus_box > a {
    display:flex;
    justify-content : center;
    align-items : center;
}

.service_plus_box > a > img{
    width: 80%;
    height: 80%;
}

.service_plus_box:hover{
    transform:scale(1.2);
}
/* 서비스 목록 끝 */

/*페이지 소개 시작*/
.main_contents{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fafdfc;
}

.main_contents_title{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
}

.main_contents_title_first{
    color: #00dab4;
    font-size: 2rem;
    font-weight: 600;
}

.main_contents_title_second{
    text-align: center;
    color: black;
    font-size: 3rem;
    font-weight: bold;
}

.main_contents_desc{
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.main_contents_desc_box{
    width: 350px;
    background: #fafdfc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border-radius: 25px;
    cursor:pointer;
}

.main_contents_desc_line{
    height: 250px;
    border: 1px solid darkgrey;
}

.main_contents_desc_title{
    font-size: 2rem;
    font-weight: bold;
}

.main_contents_desc_img img{
    margin-bottom: 10px;
}

.main_contents_desc_content{
    height: 100px;
    font-size: 1.2rem;
    text-align: center;
}
/* 페이지 소개 끝 */

/* 비디오 소개 시작 */
.section_video_contents{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #fafdfc;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.section_video img{
    width: 692px;
    height: 378px;
}
.section_video{
    width: 50%;
    display: flex;
    justify-content: flex-end;
    padding-right: 1rem;
}

.section_video_youtube{
    position: absolute;
    width: 555px;
    height: 320px;
    margin-right: 4.3rem;
    margin-top: 1.3rem;
}

.section_contents{
    width: 50%;
    padding-left: 1rem;
}

.section_contents h1{
    font-weight: bold;
    line-height: 1.33;
    display: block;
    margin: 0;
}

.section_contents p {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.36;
    margin : 25px 0;
    word-break: keep-all;
}

.hashtag_wrap{
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    padding-inline-start : 0;
}

.hashtag{
    font-weight: 500;
    white-space: nowrap;
    word-break: keep-all;
    padding : 7px 20px;
    background: #eeeeee;
    border-radius: 30px;
    margin: 5px;
}

/* 비디오 소개 끝 */

.section_kakao {
    background: #fafdfc;
}

.section_kakao img{
    width: 100px;
    height: 100px;
    top : 80%;
    right: 0%;
    float: right;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 100;
}

@media only screen and (min-width:0) and (max-width:768px) {
    .asp_header{
        display: none;
    }

    .first-header{
        display: flex;
        height : 60px;
    }
    .first-header-box{
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: space-between;
        height : 60px;
    }

    .order_nav{
        background: url("https://snswon.com/themes/pergo/assets/images/main_banner.webp") no-repeat center/cover;
        height: 10rem;
    }

    .order_nav_title {
        font-size: 1.5rem;
        font-weight: bold;

    }

    .order_nav_contents {
        font-size: 1rem;

    }

    .site-info{
        width: 100%;
        margin-right: 1rem;
    }



    .info_text {
        font-size: 0.75rem;
        font-weight: bold;
    }

    .info_num {
        color: whitesmoke;
        margin-top: 5px;
        padding : 5px 1rem 5px 1rem;
        font-weight: bold;
        font-size: 1rem;
        box-shadow:  0px 3px 3px 0px gray;
    }


    .service_items{
        margin-bottom: 0;
    }

    .service_item {
        display: flex;
        flex-direction: column;
        width: 9rem;
        height: 5rem;
        margin: 1rem;
    }

    .item_second{
        padding: 1rem;
    }

    .item_second img{
        width: 3rem;
        height: 3rem;
    }

    .item_subtitle {
        margin-top: 0;
    }
    .service_items{
        flex-wrap:wrap;
        width: 100%;
        height: 300px;
    }

    .kakao_btn span{
        font-size: 1rem;
    }
    .head-title{
        font-size: 2.5rem !important;
        font-weight: bold !important;
    }

    .header_menu {
        display: none;
    }

    .header_login {
        font-size: 16px;
    }

    .kakao_info {
        display: none;
    }

    .backlink {
        display: block;
        margin-left: -50px;
        margin-top: -65px;
        margin-bottom: 30px;
        padding : 1rem;
    }

    .mobile_login {
        display: none;
    }

    .kakao_title{
        font-size: 1.5rem;
    }

    .user_header_nav {
        display: none;
    }

    .user_header_nav.active {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #F5F5F5;
    }

    .user_header{
        display: block;
    }

    .user_icon{
        display: none;
    }

    .add_funds_won_td{
        font-size: 10px !important;
    }

    .kakao_talk{
        height: 15rem;
    }

    .kakao_btn span{
        font-size: 1rem;
        margin-left: -1.7rem;
    }

    .kakao_btn img{
        width: 7rem !important;
        height: 7rem !important;
    }

    .site_services{
        padding-top: 1rem;
    }

    .service_first{
        border: none;
        padding : 0;
        margin-top: -0.75rem;
        margin-bottom: -0.75rem;
    }

    .service_title{
        font-size: 1rem;
    }

    .service_second{
        padding-top: 1rem;
    }

    .main_margin_left{
        margin-left: 0;
    }

    .header_left{
        display: none;
    }

    .main_contents_desc{
        flex-direction: column;
        padding-bottom: 0;
    }

    .main_contents_desc_box{
        width: 250px;
        height: 200px;
    }

    .main_contents_desc_img img{
        width: 100px !important;
        height: 100px !important;
    }

    .main_contents_desc_title{
        font-size: 1.2rem;
    }

    .main_contents_desc_content{
        font-size: 0.75rem;
    }

    .our_service{
        padding-bottom: 0;
    }

    .our_service_title{
        font-size: 1.5rem;
    }

    .swiper-box {
        flex : 0 0 200px;
        height: 200px !important;
        display: flex;
        flex-direction: column;
        margin-right: 15px;
        margin-left: 30px;
        padding: 40px;
        box-shadow: 0 3px 6px #00000029;
        border-radius: 25px;
        transition: background-color .3s,flex .3s,height .3s,margin .3s,padding .3s;
    }

    .swiper {
        position: static;
        overflow: hidden;
        height: 280px;
        padding-left: 5px !important;
        padding-right: 35px !important;
        background: #FAFDFC;
    }


    .review_swiper{
        width: 100%;
    }

    .service_swiper{
        width: 100%;
        position: static;
        overflow: hidden;
        height: 200px;
        padding-left: 0px !important;
        padding-right: 0px !important;
        background: whitesmoke;
    }

    .swiper-service{
        flex : 0 0 150px;
        margin-right: 0;
        padding-left: 15px;
    }

    .banner_swiper{
        position: static;
        overflow: hidden;
        height: 15rem !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .swiper-banner{
        height: 15rem !important;
    }

    .swiper-banner-img{
        display: none !important;
    }

    .swiper-banner-img_mobile{
        display: block !important;
    }

    .swiper-banner > a {
        width: 100%;
        height: 15rem !important;
        background: no-repeat center !important;
    }

    .review_section{
        flex-direction: column;
    }

    .review_section_title{
        width: 100%;
        justify-content: center;
        align-items: center;
        padding : 1rem;
        padding-bottom: 0;
    }

    .review_section_title span {
        font-size: 1.5rem;
        padding-top : 0;
        height: 3rem;
        border-top : none;
    }

    .review_contents p {
        font-size: 0.5rem;
    }

    .review_avatar img {
        width: 50px;
        height: 50px;
    }

    .review_name span{
        font-size: 0.75rem;
    }

    .review_icon_start i, .review_icon_end i{
        width: 1.5rem;
        height: 1.5rem;
    }

    .section_video_contents{
        flex-direction: column;
    }

    .section_video{
        width: 100%;
        padding-bottom: 2rem;
        padding-right: 0;
    }

    .section_contents{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-right: 1rem;
    }

    .section_contents h1 {
        font-size: 1.5rem !important;
        text-align: center;
    }

    .section_contents p {
        font-size: 0.75rem;
        text-align: center;
        margin : 10px 0;
    }

    .section_video_youtube{
        width: 275px;
        height: 160px;
        margin-top: 0.75rem;
        margin-right: 0;
    }

    .section_video img{
        width: 346px;
        height: 189px;
    }

    .section_video {
        justify-content: center;
    }

    .hashtag_wrap{
        width: 100%;
        display: flex;
        justify-content: center;
        padding-inline-start : 0;
    }

    .hashtag {
        font-size: 0.75rem;
    }

    .service_plus_title{
        font-size: 1rem;
    }

    .service_plus_area{
        width: 100%;
    }

    .service_plus_floor{
        flex-wrap: wrap;
    }

    .service_plus_box > a > img{
        width: 180px;
    }

    .header_main_banner{
        padding-bottom : 0;
    }

    .section_kakao img{
        top:78%
    }

    .main_contents_desc{
     padding-top: 0;
    }

    .main_contents_desc_line{
        display: none;
    }

    .main_contents_title_first{
        font-size: 1rem;
    }

    .main_contents_title_second{
        font-size: 1.5rem;
    }

    .review_section_icon > img {
        width: 50px !important;
        height: 50px !important;
    }

    .toggle_btn_area{
        padding-bottom: 0;
    }
}

@media only screen and (min-width:768px) and (max-width:1300px) {
    .site-info{
        width: 70%;
        justify-content: space-between;
    }
    .info_text {
        font-size: 1rem;
        font-weight: bold;
    }

    .info_num {

        color: whitesmoke;
        margin-top: 5px;
        padding : 5px 2rem 5px 2rem;
        font-weight: bold;
        font-size: 1.5rem;
        box-shadow:  0px 3px 3px 0px gray;
    }

    .service_item {
        display: flex;
        flex-direction: column;
        width: 14rem;
        height: 8rem;
        margin: 1rem;
    }
    .service_items{
        flex-wrap:wrap;
        width: 100%;
        height: 200px;
    }

    .header_menu {
        display: none;
    }

    .main_contents_desc{
        width: 90%;
    }

    .main_contents_desc_box{
        width: 300px;
    }

    .section_video_youtube{
        width:400px;
        margin-right: 3.5rem;
    }

    .hashtag_wrap{
        width: 80%;
    }

}

@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}