@media (min-width: 1240px) {

}
@media (max-width: 1239px) and (min-width: 768px){

}
@media (max-width: 767px){

}

/* 컨텐츠 레이아웃 */
.content{ position: relative; }
@media (min-width: 1240px) {
    .content{ padding-bottom: 250px; }
}
@media (max-width: 1239px) and (min-width: 768px){
    .content{ padding-bottom: 72px; }
}
@media (max-width: 767px){
    .content{ padding-bottom: 68px; }
}



/* 임시 배경 */
.bg_head{position: absolute;top: 0;left:50%;transform: translate(-50%,0);width: 100%;z-index: -1;}
@media (min-width: 1240px) {
    .bg_head{height: 670px;background: url("/res/home/publish/img/home/bg_header.svg")no-repeat center bottom;background-size: cover;}
}
@media (max-width: 1239px) and (min-width: 768px){
    .bg_head{height: 326px;background: url("/res/home/publish/img/home/bg_header.svg")no-repeat right bottom;background-size: cover;}
}
@media (max-width: 767px){
    .bg_head{height: 541px;background: url("/res/home/publish/img/home/bg_header_m.svg")no-repeat center bottom;background-size: cover;}
}


/* 컨텐츠 : 상단 */
.section_top{width: 100%;display: flex;justify-content: space-between;align-items: center;}
.section_top .section_box{box-sizing: border-box;background: #fff;border-radius: 20px;box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.08);display: flex;flex-direction: column;}
.section_top .section_box .section_box_title{font-family: 'spoqa-bold';margin-bottom: 16px;text-align: center;}
.section_top .section_box .section_box_ment{letter-spacing: 0;color: #424242;text-align: center;}
.section_top .section_box .section_btn_list{text-align: center;margin-top: 28px;}
.section_top .section_box .section_btn_list .section_btn_item{width: 100%;display: flex;align-items: center;justify-content: center;border-radius: 6px;font-family: 'spoqa-medium';color: #fff;cursor: pointer;}

.section_top .section_box .section_btn_list .section_btn_item:first-child{margin-top: 0;}
.section_top .section_box .section_btn_list .section_btn_item.type_01{background-color: #58dd9d;}
.section_top .section_box .section_btn_list .section_btn_item.type_01:hover{background-color: #85E2B5; transition-duration: 0.4s;}
.section_top .section_box .section_btn_list .section_btn_item.type_02{background-color: #4570d0;}
.section_top .section_box .section_btn_list .section_btn_item.type_02:hover{background-color: #5F92F3; transition-duration: 0.4s;}
@media (min-width: 1240px) {
    .section_top{margin-top: 44px; align-items: stretch;}
    .section_top .section_box{width: 368px;height: 368px;padding: 70px 28px 28px;}

    .section_top .section_box .section_box_title{font-size: 28px;line-height: 37px;}
    .section_top .section_box .section_box_ment{font-size: 18px;line-height: 25px;}
    .section_top .section_box .section_btn_list.one_btn{margin-top: auto;}
    .section_top .section_box .section_btn_list .section_btn_item{height: 56px;font-size: 18px;line-height: 25px;margin-top: 16px;}
    .section_top .section_box.first .section_btn_list { margin-top: 28px;}

    .section_top .section_box.login{display: block;background: transparent;padding: 41px 28px;box-shadow: none;}
    .section_top .section_box.login .section_login_title{margin-bottom: 24px;}
    .section_top .section_box.login .section_login_title span{font-size: 28px;font-family: 'spoqa-bold';letter-spacing: 0;line-height: 37px;color: #fff;position: relative;}
    .section_top .section_box.login .section_login_title span::before{content: "";width: 19px;height: 20px;background: url("/res/home/publish/img/home/icon_key.png")no-repeat;background-size: cover;position: absolute;top: 50%;right: -27px;transform: translate(0,-50%);}

    .section_top .section_box.login .input_wrapper{width: 100%;}
    .section_top .section_box.login .input_wrapper .input_item{width: 100%;margin-top: 16px;position: relative;}
    .section_top .section_box.login .input_wrapper .input_item:first-child{margin-top: 0;}
    .section_top .section_box.login .input_wrapper .input_item input{width: 100%;height: 48px; background-color: #fff!important;border-radius: 6px;border: none;box-sizing: border-box;padding: 0 16px 0 42px;color: #424242;font-size: 14px;letter-spacing: 0;outline: none;}
    .section_top .section_box.login .input_wrapper .input_item input::placeholder{color: #9e9e9e;}
    .section_top .section_box.login .input_wrapper .input_item input:focus{ background-color: #fff; }
    .section_top .section_box.login .input_wrapper .input_item .icon_login{content: "";width: 18px;height: 18px;background: url("/res/home/publish/img/home/icon_id.svg")no-repeat;position: absolute;top: 50%;left: 16px;transform: translate(0,-50%);}
    .section_top .section_box.login .input_wrapper .input_item .icon_pw{content: "";width: 18px;height: 18px;background: url("/res/home/publish/img/home/icon_pw.svg")no-repeat;position: absolute;top: 50%;left: 16px;transform: translate(0,-50%);}

    .section_top .section_box.login .input_wrapper .input_item .login_btn{width: 100%;height: 48px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-size: 16px;font-family: 'spoqa-medium';letter-spacing: 0;color: #fff;background-color: #5a3dc9;border-radius: 6px;}
    .section_top .section_box.login .input_wrapper .input_item .login_btn:hover{background-color: #7754ea; transition-duration: 0.4s;}

    .section_top .section_box.login .section_login{margin-top: 22px;display: flex;align-items: center;justify-content: center;}
    .section_top .section_box.login .section_login a{font-size: 16px;line-height: 27px;letter-spacing: 0;color: #fff;cursor: pointer;}
    .section_top .section_box.login .section_login .section_login_dots{width: 4px;height: 4px;background-color: #fff;border-radius: 100%;margin: 0 8px;}
}
@media (max-width: 1239px) and (min-width: 768px){
    .section_top{margin-top: 32px; align-items: stretch;}
    .section_top .section_box{width: calc(50% - 12px);padding: 32px 20px;}

    .section_top .section_box .section_box_title{font-size: 22px;line-height: 29px;}
    .section_top .section_box .section_box_ment{font-size: 14px;line-height: 25px;}
    .section_top .section_box .section_btn_list.one_btn{margin-top: auto;}
    .section_top .section_box .section_btn_list .section_btn_item{height: 48px;font-size: 16px;line-height: 23px;margin-top: 12px;}
}
@media (max-width: 767px){
    .section_top{margin-top: 32px; flex-direction: column;}
    .section_top .section_box{width: 100%;height: auto;padding: 32px 20px; margin-top: 20px;}
    .section_top .section_box:first-child{ margin-top: 0; }

    .section_top .section_box .section_box_title{font-size: 22px;line-height: 29px;}
    .section_top .section_box .section_box_ment{font-size: 14px;line-height: 25px;}
    .section_top .section_box .section_btn_list .section_btn_item{height: 48px;font-size: 16px;line-height: 23px;margin-top: 12px;}
}


/* 로그인 상태 */
.login_status .login_before{ display: none; }
.login_status .login_after{ display: block; }
@media (min-width: 1240px) {
    .login_after .section_login_info{margin-bottom: 24px;}
    .login_after .section_login_info .user_name{font-size: 28px;font-family: 'spoqa-bold';color: #fff;line-height: 37px;letter-spacing: 0;}
    .login_after .section_login_info .user_ment{font-size: 18px;font-family: 'spoqa-medium';line-height: 25px;letter-spacing: 0;color: #fff;margin-left: 8px;}

    .login_after .user_status{display: flex;align-items: center;justify-content: space-between;width: 100%;border-radius: 6px;overflow: hidden;}
    .login_after .user_status .user_status_item{width: calc(33.34% - 1px);height: 112px;background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;}
    .login_after .user_status .user_status_item .user_status_num{width: 36px;height: 36px;border-radius: 100%;margin-bottom: 8px;display: flex;align-items: center;justify-content: center;background-color: #7754ea;color: #fff;}
    .login_after .user_status .user_status_item .user_status_num.num_zero{background-color: #f5f5f5;color: #9e9e9e;}
    .login_after .user_status .user_status_item .user_status_title{font-size: 16px;line-height: 23px;letter-spacing: 0;color: #424242;}

    .login_after .user_btn{width: 100%;margin-top: 16px;display: flex;align-items: center;justify-content: center;flex-direction: column;}
    .login_after .user_btn .section_logout{width: 100%;height: 48px;border-radius: 6px;background-color: #424242;color: #fff;cursor: pointer;font-size: 18px;font-family: 'spoqa-bold';display: flex;align-items: center;justify-content: center;}
    .login_after .user_btn .section_user_info{font-size: 16px;line-height: 27px;color: #fff;position: relative;cursor: pointer;padding-left: 20px;margin-top: 22px;}
    .login_after .user_btn .section_user_info::before{content: "";width: 16px;height: 16px;background: url("/res/home/publish/img/home/icon_setting.svg")no-repeat;background-size: cover;position: absolute;top: 50%;left: 0;transform: translate(0,-50%);}

}
@media (max-width: 1239px) and (min-width: 768px){

}
@media (max-width: 767px){

}



/* 컨텐츠 : 퀵메뉴 */
.quick_menu{ width: 100%; }

.quick_menu .quick_info .quick_info_title span{font-family: 'spoqa-bold';line-height: 32px;letter-spacing: 0;position: relative;}
.quick_menu .quick_info .quick_info_title span::before{content: "";background: url("/res/home/publish/img/home/icon_flash.png")no-repeat;background-size: cover;position: absolute;top: 50%;transform: translate(0,-50%);}

.quick_menu .quick_menu_list{display: flex;align-items: start;}
.quick_menu .quick_menu_list .quick_menu_item_wrap{ display: flex; align-items: start; }
.quick_menu .quick_menu_list .quick_menu_item{display: flex;flex-direction: column;justify-content: center;align-items: center;cursor: pointer;}
.quick_menu .quick_menu_list .quick_menu_item .quick_menu_icon{border-radius: 100%;border: 1px solid #e0e0e0;display: flex;align-items: center;justify-content: center;margin-bottom: 16px;}
.quick_menu .quick_menu_list .quick_menu_item .quick_menu_title{line-height: 25px;letter-spacing: 0;color: #424242;}
.quick_menu .quick_menu_list .quick_menu_item .quick_menu_ment{line-height: 24px;letter-spacing: 0;color: #757575;}
.quick_menu .quick_menu_list .quick_menu_item:hover .quick_menu_icon{border: 1px solid #7754ea;box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.08); transition-duration: 0.4s;}
.quick_menu .quick_menu_list .quick_menu_item:hover span{color: #7754ea; transition-duration: 0.4s;}
@media (min-width: 1240px) {
    .quick_menu{ margin-top: 214px; display: flex; justify-content: space-between; }
    .quick_menu .quick_info{margin-top: 40px;}
    .quick_menu .quick_info .quick_info_title{margin-bottom: 8px;}
    .quick_menu .quick_info .quick_info_title span{font-size: 24px;}
    .quick_menu .quick_info .quick_info_title span::before{width: 14px;height: 24px;right: -22px;}
    .quick_menu .quick_info .quick_info_ment{font-size: 14px;line-height: 24px;letter-spacing: 0;color: #9e9e9e;}

    .quick_menu .quick_menu_list{}
    .quick_menu .quick_menu_list .quick_menu_item{margin-left: 60px;}
    .quick_menu .quick_menu_list .quick_menu_item_wrap:first-child .quick_menu_item:first-child{margin-left: 0;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_icon{width: 100px;height: 100px;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_icon img{width: 56px;height: 56px;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_info{ display: flex; flex-direction: column; align-items: center;justify-content: center;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_title{font-size: 18px;line-height: 25px;margin-bottom: 4px;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_ment{font-size: 14px;}
}
@media (max-width: 1239px) and (min-width: 768px){
    .quick_menu{ margin-top: 68px; }
    .quick_menu .quick_info{text-align: center;}
    .quick_menu .quick_info .quick_info_title{margin-bottom: 28px;}
    .quick_menu .quick_info .quick_info_title span{font-size: 20px;}
    .quick_menu .quick_info .quick_info_title span::before{width: 12px;height: 20px;right: -20px;}

    .quick_menu .quick_menu_list{ align-items: start; box-sizing: border-box; }
    .quick_menu .quick_menu_list .quick_menu_item_wrap{ width: 50%; justify-content: space-around;}
    .quick_menu .quick_menu_list .quick_menu_item{ }
    .quick_menu .quick_menu_list .quick_menu_item:nth-child(-n+3){ margin-top: 0;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_icon{width: 68px;height: 68px;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_icon img{width: 36px;height: 36px;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_info{ width: 70px; display: flex; flex-direction: column; align-items: center;justify-content: center;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_title{font-size: 14px;line-height: 25px; white-space: nowrap;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_ment{font-size: 12px; white-space: nowrap;}
}
@media (max-width: 767px){
    .quick_menu{ margin-top: 68px; }
    .quick_menu .quick_info{text-align: center;}
    .quick_menu .quick_info .quick_info_title{margin-bottom: 28px;}
    .quick_menu .quick_info .quick_info_title span{font-size: 20px;}
    .quick_menu .quick_info .quick_info_title span::before{width: 12px;height: 20px;right: -20px;}

    .quick_menu .quick_menu_list{ flex-direction: column;}
    .quick_menu .quick_menu_list .quick_menu_item_wrap{ width: 100%; justify-content: space-around; margin-top: 20px;}
    .quick_menu .quick_menu_list .quick_menu_item_wrap:first-child{ margin-top: 0;}
    .quick_menu .quick_menu_list .quick_menu_item{ }
    .quick_menu .quick_menu_list .quick_menu_item:nth-child(-n+3){ margin-top: 0;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_icon{width: 68px;height: 68px;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_icon img{width: 36px;height: 36px;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_info{ width: 70px; display: flex; flex-direction: column;align-items: center; justify-content: center;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_title{font-size: 14px;line-height: 25px; white-space: nowrap;}
    .quick_menu .quick_menu_list .quick_menu_item .quick_menu_ment{font-size: 12px; white-space: nowrap;}
}


/* 공지사항 */
.notice{ width: 100%; }
.notice .notice_header{ position: relative; }
.notice .notice_header .notice_title{text-align: center;}
.notice .notice_header .notice_title span{font-family: 'spoqa-bold';letter-spacing: 0;position: relative;}
.notice .notice_header .notice_title span::before{content: "";background: url("/res/home/publish/img/home/icon_notice.png")no-repeat;background-size: cover;position: absolute;top: 50%;transform: translate(0,-50%);}
.notice .notice_header .notice_more{display: flex;background: url("/res/home/publish/img/common/icon_more_24.svg")no-repeat;background-size: cover;cursor: pointer;position: absolute;right: 0;}

.notice .notice_list{display: flex;}
.notice .notice_list .notice_item{display: flex;flex-direction: column;box-sizing: border-box;border-radius: 20px;box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.08);cursor: pointer;position: relative;}
.notice .notice_list .notice_item:before{content:""; width: 100%; height: 100%;border-radius: 20px; box-sizing: border-box;position: absolute; top:0;left:0; border: 1px solid #e0e0e0;}
.notice .notice_list .notice_item:hover::before{ border: 2px solid #7754ea; }
.notice .notice_list .notice_item .notice_type{font-size: 0;}
.notice .notice_list .notice_item .notice_type p{font-size: 12px;line-height: 24px;padding: 0 8px;border-radius: 12px;vertical-align: top;display: none;}
.notice .notice_list .notice_item .notice_type p span{font-size: 12px;}
.notice .notice_list .notice_item .notice_type .notice_type_01{color: #fff;background: #7754ea;}
.notice .notice_list .notice_item .notice_type .notice_type_02{color: #9e9e9e;background: #f5f5f5;}
.notice .notice_list .notice_item .notice_type.type_01 .notice_type_01{display: inline-block;}
.notice .notice_list .notice_item .notice_type.type_02 .notice_type_02{display: inline-block;}
.notice .notice_list .notice_item .notice_item_title{font-family: 'spoqa-bold';letter-spacing: 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap:break-word;}
.notice .notice_list .notice_item .notice_item_title .new_icon{display: inline-block;text-align: center;background: rgba(133, 226, 181, 0.16);color: #85e2b5;font-family: 'spoqa-bold';border-radius: 100%;transform: translate(4px,-4px);}
.notice .notice_list .notice_item .notice_date{font-size: 14px;line-height: 24px;letter-spacing: 0;color: #9e9e9e;}
@media (min-width: 1240px) {
    .notice{ margin-top: 122px; }
    .notice .notice_header .notice_title{margin-bottom: 40px;}
    .notice .notice_header .notice_more{width: 24px;height: 24px;top: 7px;}
    .notice .notice_header .notice_title span{font-size: 28px;line-height: 37px;}
    .notice .notice_header .notice_title span::before{width: 24px;height: 22px;right: -32px;}

    .notice .notice_list{width: 100%;align-items: start;}
    .notice .notice_list .notice_item{width: 386px;padding: 28px; margin-right: 21px;}
    .notice .notice_list .notice_item:last-child{margin-right: 0;}
    .notice .notice_list .notice_item .notice_type{margin-bottom: 14px;}
    .notice .notice_list .notice_item .notice_item_title{font-size: 24px;line-height: 32px;height: 64px;margin-bottom: 20px;}
    .notice .notice_list .notice_item .notice_item_title .new_icon{width: 24px;height: 24px;line-height: 24px;font-size: 12px;transform: translate(4px,-4px);}
}
@media (max-width: 1239px) and (min-width: 768px){
    .notice{ margin-top: 68px; }
    .notice .notice_header .notice_title{margin-bottom: 28px;}
    .notice .notice_header .notice_more{width: 20px;height: 20px;top: 6px;}
    .notice .notice_header .notice_title span{font-size: 20px;line-height: 32px;}
    .notice .notice_header .notice_title span::before{width: 20px;height: 18px;right: -28px;}

    .notice .notice_list{width: 100%;align-items: start;}
    .notice .notice_list .notice_item{width: calc(33.33% - 10px);padding: 20px; margin-right: 15px;}
    .notice .notice_list .notice_item:last-child{margin-right: 0;}
    .notice .notice_list .notice_item .notice_type{margin-bottom: 16px;}
    .notice .notice_list .notice_item .notice_item_title{font-size: 20px;line-height: 26px;height: 52px;margin-bottom: 24px;}
    .notice .notice_list .notice_item .notice_item_title .new_icon{width: 20px;height: 20px;line-height: 20px;font-size: 10px;transform: translate(4px,-2px);}
}
@media (max-width: 767px){
    .notice{ margin-top: 68px; }
    .notice .notice_header .notice_title{margin-bottom: 28px;}
    .notice .notice_header .notice_more{width: 20px;height: 20px;top: 6px;}
    .notice .notice_header .notice_title span{font-size: 20px;line-height: 32px;}
    .notice .notice_header .notice_title span::before{width: 20px;height: 18px;right: -28px;}

    .notice .notice_list{margin-left: -20px;width: 100vw; display: block; font-size: 0; white-space: nowrap; overflow-x: auto; -ms-overflow-style: none;}
    .notice .notice_list::-webkit-scrollbar{ display:none; }
    .notice .notice_list .notice_item{display: inline-block; vertical-align: top; margin-right: 16px; width: 280px;padding: 20px;}
    .notice .notice_list .notice_item:first-child{ margin-left: 20px; }
    .notice .notice_list .notice_item:last-child{ margin-right: 20px; }
    .notice .notice_list .notice_item .notice_type{margin-bottom: 16px;}
    .notice .notice_list .notice_item .notice_item_title{font-size: 20px;line-height: 26px;height: 52px;margin-bottom: 24px; white-space: normal;}
    .notice .notice_list .notice_item .notice_item_title .new_icon{width: 20px;height: 20px;line-height: 20px;font-size: 10px;transform: translate(4px,-2px);}
}


/* 배너 */
.banner{ display: flex; }
.banner .banner_box{border-radius: 20px;cursor: pointer;}
.banner .banner_box.banner_img{box-sizing: border-box;position: relative;background-color: #4bb3e8;}
.banner .banner_box.banner_img::before{content: "";background: url("/res/home/publish/img/home/img_cook.svg")no-repeat;background-size: cover;position: absolute;}
.banner .banner_box.banner_img .banner_title{font-family: 'spoqa-medium';color: #fff;}
.banner .banner_box.banner_img .banner_play{background: url("/res/home/publish/img/home/icon_play.png")no-repeat;background-size: cover;}

.banner .banner_box.banner_slide{font-size: 0;margin: 0;}
.banner .banner_box.banner_slide .banner_item{display: inline-block;width: 100%;height: 100%;
    /*background: url("/res/home/publish/img/home/img_banner_01.png")no-repeat;*/background-size: cover;}
.banner .banner_box.banner_slide .swiper-horizontal>.swiper-pagination-bullets,
.banner .banner_box.banner_slide .swiper-pagination-bullets.swiper-pagination-horizontal,
.banner .banner_box.banner_slide .swiper-pagination-custom,
.banner .banner_box.banner_slide .swiper-pagination-fraction{font-size: 0; bottom: auto;left: auto;width: auto;}
.banner .banner_box.banner_slide .swiper-pagination-bullet{margin: 0 0 0 4px;background-color: rgba(255, 255, 255, 0.48);opacity: 1;}
.banner .banner_box.banner_slide .swiper-pagination-bullet-active{background-color: #fff;}
@media (min-width: 1240px) {
    .banner{ margin-top: 80px; justify-content: space-between; align-items: center; }
    .banner .banner_box{width: 590px;height: 200px;}
    .banner .banner_box.banner_img{padding: 32px 280px 32px 32px;}
    .banner .banner_box.banner_img::before{width: 243px;height: 160px;right: 28px;bottom: -7px;}
    .banner .banner_box.banner_img .banner_title{font-size: 28px;line-height: 37px;margin-bottom:12px;}
    .banner .banner_box.banner_img .banner_play{width: 24px;height: 24px;}


    .banner .banner_box.banner_slide .swiper-horizontal>.swiper-pagination-bullets,
    .banner .banner_box.banner_slide .swiper-pagination-bullets.swiper-pagination-horizontal,
    .banner .banner_box.banner_slide .swiper-pagination-custom,
    .banner .banner_box.banner_slide .swiper-pagination-fraction{top: 16px;right: 16px;}
    .banner .banner_box.banner_slide .swiper-pagination-bullet{width: 8px;height: 8px;border-radius: 4px;}
    .banner .banner_box.banner_slide .swiper-pagination-bullet-active{width: 20px;}
}
@media (max-width: 1239px) and (min-width: 768px){
    .banner{ margin-top: 68px; justify-content: space-between; align-items: center; }
    .banner .banner_box{width: calc(50% - 7px);height: calc(17.04vw - 10px);}
    .banner .banner_box.banner_img{padding: 20px 162px 20px 20px;}
    .banner .banner_box.banner_img::before{width: 148px;height: 97px;right: 20px;bottom: -4px;}
    .banner .banner_box.banner_img .banner_title{font-size: 20px;line-height: 28px;margin-bottom:8px;}
    .banner .banner_box.banner_img .banner_play{width: 20px;height: 20px;}

    .banner .banner_box.banner_slide .swiper-horizontal>.swiper-pagination-bullets,
    .banner .banner_box.banner_slide .swiper-pagination-bullets.swiper-pagination-horizontal,
    .banner .banner_box.banner_slide .swiper-pagination-custom,
    .banner .banner_box.banner_slide .swiper-pagination-fraction{top: 12px;right: 12px;}
    .banner .banner_box.banner_slide .swiper-pagination-bullet{width: 6px;height: 6px;border-radius: 3px;}
    .banner .banner_box.banner_slide .swiper-pagination-bullet-active{width: 16px;}
}
@media (max-width: 767px){
    .banner{ margin-top: 68px; flex-direction: column; align-items: start; }
    .banner .banner_box{width: 100vw; height: 33.33vw; margin-left: -20px!important; margin-top: 4px; border-radius: 0;}
    .banner .banner_box:first-child{margin-top: 0;}
    .banner .banner_box.banner_img{padding: 20px 168px 20px 20px; margin-bottom: 4px;}
    .banner .banner_box.banner_img::before{width: 148px;height: 97px;right: 20px; bottom: -4px;}
    .banner .banner_box.banner_img .banner_title{font-size: 20px;line-height: 28px;margin-bottom:8px;}
    .banner .banner_box.banner_img .banner_play{width: 20px;height: 20px;}

    .banner .banner_box.banner_slide .swiper-horizontal>.swiper-pagination-bullets,
    .banner .banner_box.banner_slide .swiper-pagination-bullets.swiper-pagination-horizontal,
    .banner .banner_box.banner_slide .swiper-pagination-custom,
    .banner .banner_box.banner_slide .swiper-pagination-fraction{top: 12px;right: 12px;}
    .banner .banner_box.banner_slide .swiper-pagination-bullet{width: 6px;height: 6px;border-radius: 3px;}
    .banner .banner_box.banner_slide .swiper-pagination-bullet-active{width: 16px;}
}