@charset "UTF-8";
/*******************************************************************************
                                  font
********************************************************************************/
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
/*******************************************************************************
                                  layout
********************************************************************************/
.best-friends-awards * {font-family: 'Noto Sans KR', sans-serif;box-sizing: border-box;}
.max-width {max-width: 1080px;margin: 0 auto;padding: 5.5rem 0;text-align: center;}
.sub-title {display: inline-block;position: relative;font-size: 3rem;margin-bottom: 4rem;}
.sub-title::before,.sub-title::after {content: '';display: inline-block;position: absolute;right: 100%;top: 50%;transform: translateY(-50%);aspect-ratio: 98 / 132;width: 4.5rem;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/sub-title-icon02.png') no-repeat center center;background-size: cover;}
.sub-title::after {right: auto;left: 100%;    transform: translateY(-50%) rotateY(180deg);}
.hidden{overflow: hidden;position: absolute;border: 0;width: 1px;height: 1px;clip: rect(1px, 1px, 1px, 1px);}
.youtube {position: relative;}
.youtube::before {content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);aspect-ratio: 114 / 72;width: 30%;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/youtube-play.png') no-repeat center center;background-size: cover;}
@media screen and (max-width: 1200px) {
    .max-width {padding: 5.5rem 1rem;}
    .sub-title {margin-bottom: 3rem;font-size: calc(1rem + 5.833vw);}
    .sub-title::before,.sub-title::after {display: none;}
}
/*******************************************************************************
                                awards-section1
********************************************************************************/
.awards-section1 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section1-bg01.jpg') no-repeat center center;background-size: cover;overflow: hidden;}
.awards-section1 .max-width {padding-top: 7.6rem ;padding-bottom: 4rem;}
.awards-section1 h1 {position: relative;z-index: 1;    margin-bottom: 6rem;}
.awards-section1 h1 > span {display: inline-block;width: 100%;aspect-ratio: 1028 / 716;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section1-img01.png') no-repeat center center;background-size: cover;font-size: 0;}
.awards-section1 h1::before {content: '';position: absolute;left: 50%;top: 100%;z-index: -1;transform: translate(-50%,-5%);width: 200%;aspect-ratio: 1920 / 382;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section1-img2.png') no-repeat center center;background-size: cover;}   .awards-section1-con {   position: relative;z-index: 3; padding: 2rem;background: #191716;border: 2px solid #DFC2A3;}
.awards-section1-con > strong {display: inline-block;aspect-ratio: 262 / 27;width: 25%;margin-bottom: 1rem;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section1-text.png') no-repeat center center;background-size: cover;}
.awards-section1-con > p {font-family: 'Pretendard-Regular';color: #E4CB9E;font-size: 1.25rem;}
@media screen and (max-width: 767px) {
    .awards-section1 h1 {width: 140%;aspect-ratio: 1028 / 716;margin: 0 20% 6rem -20%;}
    .awards-section1-con > strong {width: 60%;}
    .awards-section1-con > p {font-size: calc(1rem + 0.8334vw);}
}
/*******************************************************************************
                                awards-section2
********************************************************************************/
.awards-section2 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section2-bg01.jpg') no-repeat center top;background-size: cover;}
.awards-section2 .sub-title {font-size: 2.1rem;color: #602508;}
.awards-section2 .sub-title::before,.awards-section2 .sub-title::after {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/sub-title-icon01.png') no-repeat center center;background-size: cover;}
.awards-section5-video,.awards-section2-video {width: 90%;margin: 0 auto 3rem;    aspect-ratio: 16 / 9;cursor: pointer;}
.awards-section5-text,.awards-section2-text {display: flex;justify-content: center;align-items: center;aspect-ratio: 888 / 580;width: 80%;margin: 0 auto;box-shadow: 0 2px 8px #CEC3B3;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section2-img1.jpg') no-repeat center top;background-size: cover;}
.awards-section5-text > div > p,.awards-section2-text > div > p {font-weight: 500;font-size: 1.3rem;color: #602508;}
.awards-section5-text > div > p > strong,.awards-section2-text > div > p > strong {color: #B90908;font-weight: 500;}
.awards-section5-text > div > p:last-child,.awards-section2-text > div > p:last-child {margin-bottom: 0;}
@media screen and (max-width: 767px) {
    .awards-section2 .sub-title {font-size: calc(1rem + 3.6114vw);}
    .awards-section5-text,.awards-section2-text {display: block;aspect-ratio: auto ;width: 100%;box-shadow: none;background: none;}
    .awards-section5-text > div > p,.awards-section2-text > div > p {font-size: calc(1rem + 0.8334vw);}
}
/*******************************************************************************
                                awards-section3
********************************************************************************/
.awards-section3 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section3-bg01.jpg') no-repeat center top;background-size: cover;}
.awards-section3 .max-width {padding-bottom: 7rem;}
.awards-section4 .sub-title,.awards-section3 .sub-title {    display: inline-flex;justify-content: center;align-items: center;color: #FFE065;text-shadow: 0 4px 6px #7A140D;}
.awards-section4 .sub-title > strong,.awards-section3 .sub-title > strong {display: inline-block;width: 4.5rem;aspect-ratio: 90 / 96;margin-right: 0.2rem;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section3-icon.png') no-repeat center center;background-size: cover;}
.awards-section3-list {display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 8.7rem 8.3rem;width: 80%;margin: 0 auto;}
.awards-section3-list > li {position: relative;z-index: 1;    }
.awards-section3-list > li::before {content: '';position: absolute;left: 50%;top: 100%;z-index: -1;transform: translate(-50%, -30%);aspect-ratio: 426 / 132;width: 120%;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section3-img.png') no-repeat center center;background-size: cover;}
.awards-section3-list > li > div {border: 4px solid #FFE065;box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);}
.awards-section3-list > li > div > .img {aspect-ratio: 16 / 9;width: 100%;background: #fff;}
.awards-section3-list > li > div > .img > img {width: 100%;}
.awards-section3-list > li > div > .textBox {background: #fff;padding: 1.2rem .8rem;text-align: center;}
.awards-section3-list > li > div > .textBox > p {display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis; white-space: normal;line-height: 1.4;height: 2.8em;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 0.8rem;font-weight: 700;color: #222;}
@media screen and (max-width: 1200px) {
    .awards-section3-list {grid-gap: 16px 13px;width: 100%;}
    .awards-section3-list > li::before {display: none;}
    .awards-section3-list > li > div > .textBox {padding: 0.9rem 0.8rem;}
}
@media screen and (max-width: 767px) {
    .awards-section3-list > li > div > .textBox > p {font-size: calc(1rem + -0.2778vw);}
}
/*******************************************************************************
                                awards-section4
********************************************************************************/
.awards-section4 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section4-bg01.jpg') no-repeat center top;background-size: cover;}
.awards-section4 .sub-title {text-shadow: 0 4px 6px #354B94;}
.awards-section4 .sub-title > strong {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section4-icon.png') no-repeat center center;background-size: cover;   }
.awards-section4-list {display: grid;grid-gap: 3rem;width: 90%;margin: 0 auto;}
.awards-section4-list li {display: flex;background: #fff;border: 4px solid #6B98FF;box-shadow: 0 4px 12px #1C2A58;}
.awards-section4-list li .img {width: 45%;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section4-img01.jpg') no-repeat center center;background-size: cover;       }
.awards-section4-list li .img.img2 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section4-img02.jpg') no-repeat center center;background-size: cover;   }
.awards-section4-list li .img.img3 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section4-img03.jpg') no-repeat center center;background-size: cover;   }
.awards-section4-list li .img.img4 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section4-img04.jpg') no-repeat center center;background-size: cover;   }
.awards-section4-list li .img.img5 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section4-img05.jpg') no-repeat center center;background-size: cover;   }
.awards-section4-list li .img.img6 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section4-img06.jpg') no-repeat center center;background-size: cover;   }
.awards-section4-list li .text {display: flex;flex-direction: column;align-items: start;justify-content: space-between;width: 55%;padding: 1.5rem 2.1rem;text-align: left;}
.awards-section4-list li .text dl dt {margin-bottom: 0.6rem;font-size: 0.9rem;font-weight: 700;}
.awards-section4-list li .text dl dd {margin-bottom: 0.8rem;font-size: 0.7rem;font-weight: 500;}
.awards-section4-list li .text > a {display: inline-block;padding: .5rem 1.4rem;width: auto;background: #0034CE;font-size: 0.9rem;font-weight: 500;color: #fff;white-space: nowrap;}
.awards-section4-list li .text > a > span {display: inline-block;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/arrow.png') no-repeat center center;background-size: cover;       aspect-ratio: 8 / 14;width: 0.4rem;}
@media screen and (max-width: 767px) {
    .awards-section4-list {grid-template-columns: repeat(2,1fr);grid-gap: 1rem .5rem;width: 100%;}
    .awards-section4-list li {display: block;}
    .awards-section4-list li .img {width: 100%;aspect-ratio: 344 / 336;}
    .awards-section4-list li .text {width: 100%;padding: 0.9rem;}
    .awards-section4-list li .text dl dd,.awards-section4-list li .text dl dt {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.2em;height: 2.4em; font-size: calc(1rem + -0.2778vw);}
    .awards-section4-list li .text dl br {display: none;}
    .awards-section4-list li .text > a {width: 100%;padding: 0.5rem 0; font-size: calc(1rem + 0.2778vw);text-align: center;}
}
/*******************************************************************************
                                awards-section5
********************************************************************************/
.awards-section5 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section5-bg01.jpg') no-repeat center top;background-size: cover;}
.awards-section5 .sub-title {color: #EF1A83;}
.awards-section5 .sub-title::before,.awards-section5 .sub-title::after {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/sub-title-icon03.png') no-repeat center center;background-size: cover;}
.awards-section5-text {margin-bottom: 3rem;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section5-img1.jpg') no-repeat center top;background-size: cover;aspect-ratio: 888 / 286;}
.awards-section5-video {margin-bottom: 5.5rem;    }
.awards-section5-con {width: 50%;margin: 0 auto;aspect-ratio: 538 / 102;background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/best-friends-awards/awards-section5-img2.png') no-repeat center top;background-size: cover;}
@media screen and (max-width: 767px) {
    .awards-section5-text {margin-bottom: 3rem;background: none;aspect-ratio: auto;}    .awards-section5-video {margin-bottom: 3rem;    }
    .awards-section5-con {width: 90%;}
}
/*******************************************************************************
                                팝업
********************************************************************************/
/* 팝업 */
.youtube-popup-wrap {display: none;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%); z-index: 100; background: rgba(0, 0, 0, 0.5);width: 100vw;height: 100vh;}
.youtube-popup-close {position: absolute;right: 0;bottom: 100%;display: inline-block;cursor: pointer;font-size: 2rem;color: #fff;}
.youtube-popup-close .ui-layout-close {background: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/sp-ui-kit-x2.png') no-repeat -4rem -3rem; background-size: 19.5rem;}
.youtube-popup {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 96%; max-width: 1080px;}