@charset "UTF-8";
br.mo{display: none;}

/* 헤더, 푸터, 섹션, 섹션타이틀은 common.css에 있음 */

.main_bg{background: url(../images/sub_main_bg.png) no-repeat center top;height: 434px;}

.visual .text{color: #fff;text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);margin-top: 80px;}
.visual .text strong{display: block;font-size: 7rem; font-family: 'Aggravo';}
.visual .text em{font-size: 3.8rem;font-style: normal;font-weight: 500;}


.section_box{background: url(../images/sub1_section_bg.png) no-repeat center top;position: relative;}
.section_box::before{content: "";background: linear-gradient(90deg, rgba(249, 249, 249, 0.85), #f9f9f9);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

section .centerbox{z-index: 5;position: relative;}

.part1 .centerbox{display: flex;flex-direction: column;align-items: center;}
.part1 .content{max-width: 100%; width: 740px; display: flex;justify-content: start;position: relative;z-index: 5;}
.part1 .content .wrap{background: #fff;padding: 20px;border-radius: 30px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);transition: .5s;width: 100%; box-sizing: border-box; }
.part1 .content .wrap:hover{box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);}
.part1 .content .wrap a .cont .thumnail{margin-bottom: 20px;border-radius: 17px;overflow: hidden;max-height: 215px;position: relative;display: flex;justify-content: center;align-items: center;}
.part1 .content .wrap a .cont .thumnail::before{content: "";position: absolute;inset: 0;background: rgba(0, 0, 0, 0.5) url("../images/play_icon.svg") no-repeat center center;opacity: 1;transition: .5s;}
.part1 .content .wrap:hover a .cont .thumnail::before{opacity: 0;}
.part1 .content .wrap a .cont .thumnail img{width: 100%;display: block;object-fit: cover;object-position: center;}
.part1 .content .wrap a .cont .vid_tit{font-size: 20px;font-weight: 600;margin-bottom: 15px;overflow: hidden;text-overflow: ellipsis;white-space : nowrap;}

.uploader_info{display: flex;align-items: center;}
.uploader_info .profile_img{border-radius: 50%;overflow: hidden;}
.uploader_info .profile_img img{width: 100%;height: 100%;}
.uploader_info .info{margin-left: 10px;color: #767676;}
.uploader_info .info .name{font-size: 1.6rem;margin-bottom: 5px;}
.uploader_info .info .subscribe_count{font-size: 1.2rem;}

.section_arrow{position: relative;z-index: 5;display: flex;justify-content: center;align-items: center;}

.part2 .content{width: 100%;justify-content: center;display: flex;}
.part2 .content .video {display: grid;justify-content: center;position: relative;z-index: 5;grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));;grid-template-rows: 1fr;gap: 3.5vw;width: 100%;}
.part2 .content .video li{background: #fff;padding: 20px;border-radius: 30px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);transition: .5s; box-sizing: border-box;width: 100%;}
.part2 .content .video li:hover{box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);}
.part2 .content .video li a{}
.part2 .content .video li a .cont{}
.part2 .content .video li a .cont .thumnail{margin-bottom: 20px;border-radius: 17px;overflow: hidden;max-height: 215px;position: relative;display: flex;align-items: center;justify-content: center;}
.part2 .content .video li a .cont .thumnail::before{content: "";position: absolute;inset: 0;background: rgba(0, 0, 0, 0.5) url("../images/play_icon.svg") no-repeat center center;opacity: 1;transition: .5s;}
.part2 .content .video li:hover a .cont .thumnail::before{opacity: 0;}
.part2 .content .video li a .cont .thumnail img{width: 100%;display: block;}
.part2 .content .video li a .cont .vid_tit{width: 100%;font-size: 20px;font-weight: 600;margin-bottom: 15px;overflow: hidden;text-overflow: ellipsis;white-space : nowrap;}

/* 모바일 */
@media screen and (max-width:700px){
    .main_bg{height: clamp(280px, 50vw, 430px);}

    .visual .text strong{display: block;font-size: clamp(4rem, 8vw, 7rem); font-family: 'Aggravo';}
    .visual .text em{font-size: clamp(2rem, 4vw, 3.8rem);font-style: normal;font-weight: 500;}
}

@media screen and (max-width:500px){
    br.mo{display: block;}
}