/* sub 공통 */ .container {padding: 0 15%;} .subContent {padding-top: 220px;padding-bottom: 180px;} /* about */ #live {padding-bottom: 330px;} #live h2 {font-family: 'Inter', sans-serif;font-size: 96px;color: #fff;line-height: 116px;text-align: center;margin-bottom: 30px;} #live .sent {font-size: 30px;text-align: center;color: #fff;margin-bottom: 280px;font-weight: 200;} #live .bgWr {height: 300vh;} #live .liveBg {background: url(/img/live_bg.jpg) center no-repeat;text-align: center;color: #fff;/*padding: 330px 0 328px;*/padding: 10% 0 0;background-size: cover;transition: all 1s;width: 70%;margin: 0 auto;position: sticky;top: 0;height: 100vh;} #live .liveBg h3 {font-size: 56px;font-family: 'Pretendard-ExtraBold';line-height: 80px;margin-bottom: 60px;opacity: 0;transform: translate(0,40px);transition: all 1s;} #live .liveBg p {font-size: 24px;line-height: 40px;opacity: 0;transform: translate(0,40px);transition: all 1s;} #live .liveBg h3.active, #live .liveBg p.active {opacity: 1;transform: translate(0,0);} #live .liveStudio {} #live .liveStudio .sbz-inner {height: 1684rem;} #live .liveStudio h3 {font-size: 190px;color: rgba(255,255,255,0.1);font-family: 'Pretendard-Bold';position: sticky;top: 40%;text-align: center;} #live .liveStudio ul {display: flex;flex-wrap: wrap;} #live .liveStudio ul li {width: 32%;margin-right: 2%;position: relative;margin-bottom: 30px;} #live .liveStudio ul li:nth-child(3n) {margin-right: 0;} #live .liveStudio ul li .m_img {display: none;} #live .liveStudio ul li span {font-family: 'Pretendard-Bold';font-size: 24px;color: #fff;position: absolute;bottom: 50px;left: 50px;} #live .sbz-partner-sub {background: none;margin: 130px 0 0;} /* studio */ #studio h2 {font-family: 'Inter', sans-serif;font-size: 96px;color: #fff;line-height: 116px;margin-bottom: 44px;} #studio .tabMenu {display: flex;margin-bottom: 65px;} #studio .tabMenu li {margin-right: 47px;} #studio .tabMenu li a {color: #555555;font-size: 24px;font-weight: 700;} #studio .tabMenu li a.active {color: #0085FF;} #studio .stuSlideWp {position: relative;} #studio .stuSlideWp ul li {} #studio .stuSlideWp .stuTxt {position: absolute;left: 60px;bottom: 64px;font-size: 26px;color: #fff;font-weight: 600;line-height: 38px;z-index: 10;} #studio .stuSlideWp .swiper-button-next, #studio .stuSlideWp .swiper-button-prev {width: 57px;height: 57px;background: url(/img/pop_prev.png) 0 0 no-repeat;} #studio .stuSlideWp .swiper-button-next {transform: rotate(180deg);right: -82px;} #studio .stuSlideWp .swiper-button-prev {left: -82px;} #studio .stuSlideWp .swiper-button-next:after, #studio .stuSlideWp .swiper-button-prev:after {display: none;} #studio .stuSlideWp .swiper-pagination {bottom: 67px;right: 60px;left: auto;color: #fff;font-size: 14px;font-weight: 600;background-color: rgba(255,255,255,0.2);width: 55px;height: 28px;line-height: 28px;border-radius: 15px;} #studio .stuSlideWp .swiper-pagination2 {display: none;} #studio .stuSlideWp .swiper-pagination3-wp {position: absolute;bottom: 74px;right: 130px;color: rgba(255,255,255,0.6);z-index: 10;font-size: 0;font-weight: 600;} #studio .stuSlideWp .swiper-pagination3 {width: auto;display: inline-block;} #studio .stuSlideWp .swiper-pagination3 .swiper-pagination-current {font-size: 16px;} #studio .stuSlideWp .swiper-pagination3-wp .pape-name {font-size: 16px;} #studio .stuSlideWp3 .name {position: absolute; bottom: 74px; right: 130px; color: rgba(255,255,255,0.6); z-index: 10; font-size: 16px; font-weight: 600;} /* studio */ #showhost h2 {font-family: 'Inter', sans-serif;font-size: 96px;color: #fff;line-height: 116px;margin-bottom: 104px;} #showhost .host_group {display: flex;flex-wrap: wrap;margin-bottom: 180px;} #showhost .host_group li {width: 28.2%;margin-right: 7.5%;position: relative;cursor: pointer;margin-bottom: 7%;} #showhost .host_group li:nth-child(3n) {margin-right: 0;} #showhost .host_group li span {font-family: 'Pretendard-Bold';font-size: 24px;position: absolute;bottom: 30px;left: 40px;color: #fff;} #showhost .m_img {display: none;} #showhost .popSlide {display: none;} #showhost .popSlide:after {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 100;} #showhost .swiper {position: fixed; z-index: 1000; top: 14%;width: 1056px;left: 0;right: 0;} #showhost .popSlide .swiper-button {z-index: 200;width: 57px;height: 57px;top: 50%;transform: translate(0,-50%);position: fixed;} #showhost .popSlide .swiper-button:after {display: none;} #showhost .popSlide .swiper-button-next {background: url(/img/pop_next.png) 0 0 no-repeat;right: 50%;transform: translate(612px,0);} #showhost .popSlide .swiper-button-prev {background: url(/img/pop_prev.png) 0 0 no-repeat;left: 50%;transform: translate(-612px,0);} #showhost .swiper-slide {display: flex;} #showhost .swiper-slide .cont {background: #fff;padding: 90px 20px 0 72px;width: 51.5%;border-radius: 0 20px 20px 0} #showhost .swiper-slide .cont span {display: block;} #showhost .swiper-slide .cont .close {width: 22px;position: absolute;top: 20px;right: 20px;cursor: pointer;} #showhost .swiper-slide .cont .pro {color: #888;font-size: 18px;font-weight: 600;margin-bottom: 30px;} #showhost .swiper-slide .cont .name {font-size: 48px;color: #000;font-family: 'Pretendard-ExtraBold';margin-bottom: 18px;} #showhost .swiper-slide .cont .tag {color: #333333;font-size: 18px;margin-bottom: 40px;} #showhost .swiper-slide .cont p {font-size: 18px;line-height: 30px;} #showhost .swiper-slide .cont p strong {color: #0085FF;display: block;} #showhost .swiper-slide .cont .sns {margin-top: 52px;} #showhost .swiper-slide .cont .sns a {display: inline-flex;width: 60px;height: 60px;background: #F5F5F5;border-radius: 50%;justify-content: center;align-items: center;vertical-align: bottom;margin-right: 22px;} #showhost .swiper-slide .cont .sns a img {width: 28px;height: 28px;} #showhost .swiper-slide .cont .sns a:nth-child(2) img {width: 30px;height: 22px;} @media (max-width:1600px) { .container {padding: 0 8%;} #live h2 {font-size: 64px;} #live .sent {font-size: 22px;margin-bottom: 136px;} #live .liveBg h3 {font-size: 40px; line-height: 62px; margin-bottom: 40px;} #live .liveBg p {font-size: 20px; line-height: 32px;} #live .sbz-partner-sub {margin: 0 0 0;} #live .liveStudio h3 {font-size: 140px;} #live .liveStudio ul li span {font-size: 20px; bottom: 30px; left: 23px;} #live .liveStudio .sbz-inner {height: 1592rem;} #studio h2 {font-size: 64px;} #showhost h2 {font-size: 64px;} #showhost .host_group li span {font-size: 20px;left: 25px;} #showhost .swiper {top: 14%;width: 830px;left: 0;right: 0;} #showhost .swiper-slide .cont {padding: 70px 20px 0 47px;} #showhost .swiper-slide .cont .pro {font-size: 16px;} #showhost .swiper-slide .cont .tag {font-size: 16px;} #showhost .swiper-slide .cont .name {font-size: 38px;} #showhost .swiper-slide .cont p {font-size: 16px; line-height: 26px;} #showhost .popSlide .swiper-button-next {transform: translate(492px,0);} #showhost .popSlide .swiper-button-prev {transform: translate(-492px,0);} } @media (max-width:1024px) { .subContent {padding-bottom: 100px;} #live .liveStudio h3 {display: none;} #live .liveStudio .sbz-inner {height: auto;} #live .liveBg h3 {font-size: 26px; line-height: 38px;} #live .liveBg p {font-size: 16px; line-height: 27px;} #studio .tabMenu {margin-bottom: 34px;} #studio .tabMenu li {margin-right: 20px;} #studio .tabMenu li a {font-size: 18px;} #studio .stuSlideWp .stuTxt {font-size: 22px;left: 30px;bottom: 84px;line-height: 28px;word-break: keep-all;height: 56px;} #studio .stuSlideWp .swiper-pagination {bottom: 30px;right: 30px;} #studio .stuSlideWp .swiper-button-next, #studio .stuSlideWp .swiper-button-prev {display: none;} #studio .stuSlideWp .swiper-pagination {display: none;} #studio .stuSlideWp .swiper-pagination2 {display: block;text-align: center;margin-top: 53px;} #studio .stuSlideWp .swiper-pagination-bullet {background: #555555;opacity: 1;} #studio .stuSlideWp .swiper-pagination-bullet-active {background: #0085FF;} #studio .stuSlideWp .swiper-pagination3-wp {bottom: 90px;right: 20px;} #studio .stuSlideWp3 .name {bottom: 26px; right: 20px;} #showhost .host_group li {width: 30.6%;margin-right: 4%;} #showhost .swiper {width: 52%;} #showhost .swiper-slide {display: block;} #showhost .swiper-slide .cont {width: 100%;padding: 33px 20px 0 25px;border-radius: 0 0 10px 10px;height: 400px;} #showhost .swiper-slide .cont .pro {display: none;} #showhost .swiper-slide .cont .name {font-size: 30px;} #showhost .swiper-slide .m_img {display: block;} #showhost .swiper-slide .p_img {display: none;} #showhost .swiper-slide .cont .sns {margin-top: 15px;} #showhost .swiper-slide .cont .sns a {width: 40px;height: 40px;} #showhost .swiper-slide .cont .sns a img {width: 22px;height: 22px;} #showhost .swiper-slide .cont .sns a:nth-child(2) img {width: 21px; height: 16px;} #showhost .popSlide .swiper-button-next {transform: translate(330px,0);} #showhost .popSlide .swiper-button-prev {transform: translate(-330px,0);} } @media (max-width:768px) { .container {padding: 0 20px;} .subContent {padding-top: 132px;} #live {padding-bottom: 0;} #live h2 {font-size: 40px;line-height: 48px;margin-bottom: 22px;} #live .sent {font-size: 16px;} #live .liveStudio ul li {width: 100%;margin-right: 0;margin-bottom: 10px;} #live .liveStudio ul li .m_img {display: block;} #live .liveStudio ul li .p_img {display: none;} #live .liveBg {padding: 153px 0 153px;} #live .liveBg h3 {margin-bottom: 20px;} #live .liveBg h3, #live .liveBg p {word-break: keep-all;padding: 0 30px;} #live .liveBg h3 br, #live .liveBg p br {display: none;} #studio h2 {font-size: 40px;line-height: 48px;margin-bottom: 22px;} #studio .stuSlideWp .stuTxt {font-size: 18px;line-height: 28px;position: static;margin-top: 26px;bottom: 42px;height: 46px;} #studio .stuSlideWp .swiper-pagination3-wp {bottom: 152px;} #showhost h2 {font-size: 40px;line-height: 48px;margin-bottom: 72px;} #showhost .host_group {margin-bottom: 90px;} #showhost .host_group li {width: 100%;margin-right: 0;margin-bottom: 20px;} #showhost .host_group li .m_img {display: block;} #showhost .host_group li .p_img {display: none;} #showhost .swiper {width: 320px;} #showhost .swiper-slide .cont {height: 350px;} #showhost .swiper-slide .cont .tag {font-size: 14px;margin-bottom: 18px;} #showhost .swiper-slide .cont p {font-size: 14px;line-height: 24px;} #showhost .popSlide .swiper-button {top: auto;top: 718px;} #showhost .popSlide .swiper-button-prev {background: url(/img/pop_prev_m.png) 0 0 no-repeat;transform: translate(-60px,0);background-size: 45px;} #showhost .popSlide .swiper-button-next {background: url(/img/pop_next_m.png) 0 0 no-repeat;transform: translate(60px,0);background-size: 45px;} } @media (max-width:500px) { #studio .tabMenu li a {font-size: 15px;} #showhost .swiper {top: 30px;} #showhost .popSlide .swiper-button {top: auto;top: 613px;} }