@charset "UTF-8";

/* default set */
html, body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, table, th, td, figure, hr {
  margin: 0;
  padding: 0;
  font-weight: normal;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  box-sizing: border-box;
}
ul, ol {list-style:none;}
a{text-decoration:none;color:inherit;}
.blind {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
img {border:0;margin:0;padding:0;line-height:0;}
a{display:inline-block;text-decoration:none;}

br{font-family:initial;} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,svg {display: block;}
table {border-collapse: collapse; border-spacing: 0;}
img,fieldset,iframe{border:0 none}
ul,ol,li{list-style:none}
em,address{font-style:normal}
img,input,select,textarea{vertical-align:middle}
input{-webkit-appearance: none; -webkit-border-radius: 0;}
a{color:inherit;text-decoration:none;cursor:pointer}
a:hover{color:inherit; text-decoration:none}
button,label{cursor:pointer;}
button{background:0;border:0;font-size:inherit;font-weight:inherit;font-family:inherit}
button img{left:-3px;*left:auto}
html:first-child select{height:20px;padding-right:6px}
option{padding-right:6px}
textarea{overflow:auto;*margin:-1px 0;padding-right:1px}
.blind, legend, caption{position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
hr{display:none}
legend{*width:0}
:root legend{margin-top:-1px;font-size:0;line-height:0}
caption{*line-height:0}
sub {font-size:10px;}
.clear:after {clear:both;content:'';display:block;}
#bg{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;z-index:1001;}
div.ie_alert_text {display:none;position: fixed;top: 0;left: 0;width: 100%;height: 50px;background: #ddd;z-index: 10000;text-align: center;padding-top: 10px;font-size: 13px;font-family: 'Noto Sans KR', sans-serif;}
#skip-nav {font-size: 16px;line-height: 40px;position: fixed;z-index: 100000;top: -40px;left: 0;width: 100%;-webkit-transition: .4s;transition: .4s;text-align: center;color: #fff;background: rgba(0,0,0,.6);}
#skip-nav:focus{top:0}
.e_{overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box}
#bg{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:none;z-index:1500;}

/* 공용 */
.center{width:1200px;margin:0 auto;}
.center.slide-big{width:1216px;}
[class*="btn-type1-"]{min-width:248px;padding:0 10px;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;height: 42px;border: 1px solid #fff;font-size: 16px;color: #fff;letter-spacing: -0.06em;}
[class*="btn-type"][class*="-gray"]{color: #7A7B85;border-color: #7A7B85;}
[class*="btn-type"][class*="-white"]{color: #fff;border-color: #fff;}
[class*="btn-type"][class*="-black"]{color: #000;border-color: #000;font-weight: 500;}
.bg-black{background:#000; color: #fff;}

/* 헤더 */
.header{position:fixed;top:0;left:0;width:100%;padding: 30px 0;font-weight:500;color:#fff;box-sizing:border-box;transition: 0.3s;z-index: 1000;}
.header *{box-sizing:border-box;-webkit-box-sizing:border-box;}
.gnb{position:relative;max-width:1200px;min-width:1200px;margin:0 auto;display: flex;justify-content: space-between;align-items: center;box-sizing:border-box;}
.gnb-logo{display: flex;flex-wrap: wrap;align-items: center;}
.gnb-logo .logo-kbs{display: inline-block;width: 104px;height: 32px;}
.gnb-logo .logo-50{width:186px;height: 23px;display: inline-block;margin: 0px 0 0 9px;}
.gnb-logo img{vertical-align: top;max-width:100%;}
.gnb-menu{display: flex;justify-content: flex-end;align-items: center;}
.gnb-menu li+li{margin-left: 20px;}
.gnb-menu li a{font-size: 18px;line-height: 21px;font-weight: 700;}

/* header scroll-evt */
.scroll-evt .header{background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(16px);}
.header.hide{transform: translate3d(0,-100%,0);}
/*body::-webkit-scrollbar{width:0px;}
body::-webkit-scrollbar-thumb {background-color: transparent; border-radius:10px;}
body::-webkit-scrollbar-track {background-color:transparent;}*/
body{background:#000;color: #000;}
#wrap *{box-sizing:border-box;-webkit-box-sizing:border-box;}
#wrap{min-width:1200px;opacity: 0;}
#wrap .contents.inner-wrap{position: relative;width: 1200px;margin: 0 auto;z-index: 10;}
#wrap .t-img{vertical-align: top;display:inline-block;}
#wrap .t-img img{max-width:100%;display: inline-block;vertical-align: top;}

/*common*/
.con-title-g{position:relative;width: 100%;}
.con-title-g .main-tit{font-weight: 700;font-size: 70px;line-height: 68px;letter-spacing: -0.04em;}
.con-title-g .sub-tit{font-weight: 400;font-size: 49px;line-height: 51px;letter-spacing: -0.04em;}
.con-title-g .desc{font-weight: 400;font-size: 22px;line-height: 28px;letter-spacing: -1.86px;word-break: keep-all;}


/*common layout 1*/
.con-layout-type-1 .inner-wrap{display: flex;flex-wrap: wrap;}
.con-layout-type-1 .l-img{width: 489px;overflow: hidden;margin-top: 10px;}
.con-layout-type-1 .l-img img{width: 100%;}
.con-layout-type-1 .l-con{width: calc(100% - 489px);padding-left: 40px;}
.con-layout-type-1 .l-con.l-c{padding:0 40px 0 0;}
.con-layout-type-1 .l-con .main-tit{line-height: 70px;}
.con-layout-type-1 .l-con .sub-tit{margin-top: 10px;}
.con-layout-type-1 .l-con .desc{margin-top: 32px;}
.con-layout-type-1 .l-con .desc p{font-weight: 400;line-height: 28px;}
.con-layout-type-1 .l-con .desc > * + *{margin-top: 12px;}
.con-layout-type-1 .more_btn{margin-top: 25px;}
.con-layout-type-1 .more_btn .btn{width: 248px;}


/* 메인 영상 영역 */
.main-visual-cont{position: relative;}
.scroll-down-i{position: absolute;bottom: 88px;left: 50%;transform: translateX(-50%);}
.scroll-down-i .button{position: relative; display: inline-block;padding-bottom: 20px;}
.scroll-down-i .icon{width: 35px;height: 55px;border: 3px solid #fff;border-radius: 35px;}
.scroll-down-i .icon:before{display:block;content:"";position: absolute;top: 19%;left: 50%;width: 8px;height: 8px;margin-left: -4px;background: #fff;border-radius: 50%;animation: mouse-dot-ani 2.5s linear infinite;}
.scroll-down-i .button:after{display:block;content:"";position: absolute;bottom: 0;left: 50%;width: 7px;height: 7px;border: 2px solid #fff;transform: rotate(45deg) translateX(calc(-50% - 5px));border-top: 0;border-left: 0;transform-origin: left bottom;}
@keyframes mouse-dot-ani{0%{opacity:1;top:19%}
  15%{opacity:1;top:45%}
  50%{opacity:0;top:45%}
  100%{opacity:0;top:19%}
}
.slick-list,.slick-track{position: relative;width: 100%;height: 100%;}
.main-slider{position: relative;width: 100%;height: 100vh;min-height: 900px;}
.main-slider .item{position: relative;width: 100%;height: 100%;overflow:hidden;visibility: hidden;}
.main-slider.slick-initialized .item{ visibility: visible; }
.main-slider .item .bg{position: absolute;top:0;left:0;width: 100%;height: 100%;}
.main-slider .item .video{position:absolute;top:0;left:0;z-index:2;width:100%!important;height:100%!important;}
.main-slider .item .video video{position: absolute;top: 50%;left: 50%;z-index: 1;min-width: 100%;min-height: 100%;width: auto;height: auto;transform: translate(-50%,-50%);}
.main-slider .item .video::before{display:block;content:"";position: absolute;top:0;left:0;width:100%;height: 100%;background: linear-gradient(180deg, black, rgba(0,0,0,0.3),black);z-index: 10;}
.main-slider .item .group{position: absolute;top: 0;left: 0;width: 100%;height: calc(100% - (208px + 3px + 20px));text-align: center;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding-top: 149px;z-index: 51;}
.main-slider .spot-video{position: absolute;bottom: 50px;display: inline-block;color:#fff;letter-spacing: -0.02em;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);text-align: center;font-family: 'Pretendard';font-style: normal;font-weight: 700;font-size: 22px;line-height: 22px;padding: 0 0 6px 0;transition: 0.3s;}
.main-slider .spot-video:after{display:block;content:"";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #fff;box-shadow: 2px 2px 4px rgb(0 0 0 / 50%);transform: scaleX(1);transform-origin:left;transition: transform 0.7s;}
.main-slider .spot-video:hover{opacity:0.6;}
.main-slider .spot-video:hover:after{transform: scaleX(0);transform-origin: right;}
.main-slider .main-title{width: 386px;}
.main-slider .main-title img{max-width:100%;}

/*dot(progress)*/
.main-slider .slick-dots{position: absolute;bottom: 208px;left: 0;width: 100%;display: flex;justify-content: center;z-index: 50;}
.main-slider .slick-dots li{margin: 0 10px;padding: 20px 0;cursor: pointer;}
.main-slider .slick-dots .progress_bar{width: 200px;height: 3px;background: #fff;border: 0;display: block;cursor: pointer;padding: 0;}
.main-slider .slick-dots .slick-active .progress_bar{background:rgba(255,255,255,0.6);}
.main-slider .slick-dots .progress_bar .bar{position: relative;display: block;width:100%;height: 100%;left: 0;}
.main-slider .slick-dots .progress_bar .bar span{display: block;width:0%;height: 100%;background:#fff;}

/*spot video popup*/
#video-popup{position: fixed;top: 0;left: 0;width: 100%;height: 100%;padding: 126px 0;overflow-y: auto;z-index: 2000;display: none;}
#video-popup .close-popup-btn{position: absolute;top: 20px;right: 20px;width: 71px;height: 71px;border: 1px solid #fff;display: block;mix-blend-mode: difference;opacity:0;z-index: 10;}
#video-popup .close-popup-btn:before,
#video-popup .close-popup-btn:after{display:block;content:"";position: absolute;top: 50%;left: 50%;width: 63px;height: 1px;transform: rotate(45deg);background: #fff;transform-origin: center;margin-left: -31px;}
#video-popup .close-popup-btn:after{transform: rotate(-45deg);}
#video-popup .v-p-inner{position: relative;max-width: 1920px;margin: 0 auto;width: 81%;top: 50%;transform: translateY(-50%);clip-path:polygon(0 50%, 100% 50%, 100% 50%, 0 50%);}
#video-popup .v-p-contents{position: relative;}
#video-popup .v-p-contents video{width: 100%;}


.contents_group{background:#fff;font-family: 'Noto Sans',sans-serif;}

/*KBS를 빛낸 50인*/
.people-50-cont{position: relative;width: 100%;padding: 146px 0 132px;overflow: hidden;background: url('../img/50th-bg-i-1.png') top right/947px, url('../img/50th-bg-i-2.png') top 260px left/813px, url('../img/50th-bg-i-3.png') bottom -450px right/777px, url('../img/50th-bg-i-4.png') bottom 960px left;background-repeat: no-repeat;}
.people-50-cont .people-50-logo{width: 100%;margin-bottom: 69px;}
.people-50-cont .people-50-logo img{display:inline-block; max-width: 100%;}
.people-50-cont .people-list-wrap .noti{text-align:right;font-size: 15px;line-height: 30px;letter-spacing: -0.02em;color: #717171;margin-bottom: 14px;}
.people-50-cont .people-list-wrap .noti:before{display:inline-block;content:"*";vertical-align: top;margin: 2px 5px 0 0;}
.people-50-cont .people-list{position: relative;width: 100%;display: flex;flex-wrap: wrap;}
.people-50-cont .people-list li{width: calc(20% - 16px);margin-right: 20px;}
.people-50-cont .people-list li:nth-child(5n){margin-right:0;}
.people-50-cont .people-list li:nth-child(n+6){margin-top:40px;}
.people-50-cont .people-list a{display: block;width: 100%;}
.people-50-cont .people-list .img{display: inline-block;width: 100%;height: 160px;overflow: hidden;display: block;}
.people-50-cont .people-list li:hover .img img{transform:scale(1.1);}
.people-50-cont .people-list .img img{width: 100%;transition: 0.3s;}
.people-50-cont .people-list .info{width: 100%;padding-top: 7px;}
.people-50-cont .people-list .info .name{font-weight: 500;font-size: 24px;line-height: 38px;letter-spacing: -0.02em;color: #3E69B2;}
.people-50-cont .people-list .info .desc-1{font-weight: 500;font-size: 17px;line-height: 22px;letter-spacing: -0.02em;color: #000000;margin-top: 2px;}
.people-50-cont .people-list .info .desc-2{font-size: 15px;line-height: 15px;letter-spacing: -0.02em;color: #717171;margin-top: 6px;}


/*50주년 기념사*/
.main-speech-cont{padding: 104px 0 111px;}
.main-speech-cont .con-title-g .sub-tit{color: #0066FF;}

/*2040 비전*/
.main-vision-cont{padding:104px 0 113px;overflow: hidden;background: url('../img/kbs-2040-bg.png')no-repeat bottom left/1139px;}
.main-vision-cont .con-title-g{margin-bottom:55px;}
.main-vision-cont .con-title-g .sub-tit{margin-top: 10px;color: #582FC1;letter-spacing: -0.056em;line-height: 60px;}
.main-vision-cont .con-title-g .desc{margin-top:28px;width: calc(100% - 248px);padding-right: 50px;}
.main-vision-cont .con-title-g .more_btn{position:absolute;bottom: 0;right:0;z-index: 10;}
.vision-slider{cursor: w-resize;}
.vision-slider .slide{width: 100%;padding: 24px 24px;background: linear-gradient(180deg, #4167B1 0%, #A7228A 100%);box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.25);opacity: 0.5;transition: opacity 0.3s;}
.vision-slider .swiper-slide-active, 
.vision-slider .swiper-slide-active + .swiper-slide, 
.vision-slider .swiper-slide-active + .swiper-slide + .swiper-slide{opacity:1;}
.vision-slider .img{position: relative;display: block;width: 100%;height: 0;padding-top: 79%;overflow: hidden;}
.vision-slider .img img{position: absolute;width: 100%;top: 50%;left: 50%;transform: translate(-50%,-50%);display: block;vertical-align: top;}
.vision-slider .info-txt{text-align: center;padding: 20px 0 calc(33px - 24px);}
.vision-slider .info-txt .desc{font-weight: 700;font-size: 25px;line-height: 30px;color: #fff;letter-spacing: -0.03em;}

/*50주년 소개*/
.main-about-cont{padding: 104px 0 113px;}
.main-about-cont .con-title-g .sub-tit{color: #A90089;line-height: 49px;}
.main-about-cont .con-title-g .desc{margin-top:28px;letter-spacing: -0.036em;}
.main-about-cont .more_btn{margin-top: 77px;}

/*당첨자 발표*/
.main-survey-cont{padding: 120px 0 114px;}
.winner-wrap .img{position: relative;width: 100%;display: block;}
.winner-wrap .img img{max-width:100%;}
.winner-wrap .download-btn{position: absolute;bottom: 51px;left: 50%;width: 253px;height: 40px;transform: translateX(-50%);border-radius: 40px;z-index: 10;}

/*motion*/
.open-video{overflow:hidden;}
.open-video #video-popup .v-p-inner{animation: showVideoMotion 1.2s 0.2s forwards;}
.open-video #video-popup .close-popup-btn{animation: fadeInAni 1s 0.5s forwards;}
.fade-up{opacity: 0;transform: translate3d(0,20px,0);}
.fade-up.is-inview{animation: fadeUpAni 0.7s forwards;}
.fade-in{opacity: 0;}
.fade-in.is-inview{animation: fadeInAni 0.7s forwards;}
.scale-ani{opacity: 0;transform: scale(0.95);}
.scale-ani.is-inview{animation: scaleAni 0.7s forwards;}
.scale2-ani{opacity: 0;transform: scale(1.3);}
.scale2-ani.is-inview{animation: scale2Ani 0.7s forwards;}
.show-img{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.show-img.is-inview{animation: showImg ease 1.2s forwards;}
@keyframes fadeInAni{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadeUpAni{
  0%{opacity:0;transform: translate3d(0,20px,0);}
  100%{opacity:1;transform: translate3d(0,0px,0);}
  }
@keyframes scaleAni{
0%{opacity:0;transform: scale(0.95);}
100%{opacity:1;transform: scale(1);}
}
@keyframes scale2Ani{
  0%{opacity:0;transform: scale(1.3);}
  100%{opacity:1;transform: scale(1);}
  }
@keyframes showVideoMotion{
0%{clip-path:polygon(0 50%, 100% 50%, 100% 50%, 0 50%); }
100%{clip-path:polygon(0 0%, 100% 0%, 100% 100%, 0 100%); }
}
@keyframes showImg{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
50%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
}
.gift-tit .num span{opacity:0;transition: 0.6s ease-in-out;}
.gift-tit .num p:nth-child(3n-2) span{transition-delay:0.6s;}
.gift-tit .num p:nth-child(3n-1) span{transition-delay:0.8s;}
.gift-tit .num p:nth-child(3n) span{transition-delay:1s;}
.gift-tit.is-inview .num p span{transform: translate3d(0,-100%,0); opacity:1;}
.gift-tit.is-inview .num span.blind2{animation: blindTxt 1s forwards 1s;}
@keyframes blindTxt{
  0%{display:block;}
  100%{display: none;visibility: hidden;}
}
.survey-link:before{display:block;content:"";position: absolute;top: -2px;left: -2px;width: calc(100% + 4px);height: calc(100% + 4px);background:linear-gradient(120.28deg, #3E69B2 2.39%, #A7228A 80.4%);opacity: 0;transition: 0.3s;z-index: 0;}
.survey-link.on:before{opacity:1;}
.main-candidates-cont .list-wrap li:hover .thumbnail img{transform:scale(1.1) translate(-50%,-50%);opacity:0.5;}

/* 푸터 */
footer{position: relative;padding: 48px 0 80px 0;width:100%;background-color: #000;z-index: 10;}
footer *, footer ul, footer li, footer strong, footer dt, footer dd{font-family: 'Noto Sans','Apple SD Gothic Neo','애플 SD 산돌고딕 Neo','Helvetica Neue','Roboto','sans-serif';}
footer .footer-top{position: relative;margin:0 auto;width:1200px;border-bottom:1px solid #414141;}
footer .footer-top > ul{margin:0 -10px;}
footer .footer-top > ul li{float:left;}
footer .footer-top > ul li a{padding:16px 10px;font-size:12px;font-weight:600;color:#b6b3ae;}
footer .footer-top > ul li a strong{color:#0384c7;}
footer .footer-top > ul li a:focus{outline:1px dashed;outline:1px auto -webkit-focus-ring-color;transform:scale(0.99);}
footer .footer-top > ul li.footer-select{position:relative;margin:0 20px 0 0;}
footer .footer-top > ul li.footer-select a{padding:16px 35px 16px 10px;}
footer .footer-top > ul li.footer-select a .ico{position:absolute;right:13px;top:50%;border-bottom:6px solid #b6b3ae;;border-right:5px solid transparent;border-left:5px solid transparent;margin:-2px 0 0 0;}
footer .footer-top > ul li.footer-select > ul{display:none;border:1px solid #414141;position:absolute;bottom:-1px;right:0;z-index:3;background:#252628;}
footer .footer-top > ul li.footer-select > ul li a{position:relative;min-width:140px;padding:0 20px;box-sizing:border-box;line-height:40px;font-size:12px;font-weight:600;color:#b6b3ae;}
footer .footer-top > ul li.footer-select > ul li a:focus{outline:1px dashed;outline:1px auto -webkit-focus-ring-color;transform:scale(0.99);}
footer .footer-top > ul li.footer-select > ul li a .ico{position:absolute;right:13px;top:50%;border-top:6px solid #b6b3ae;border-right:5px solid transparent;border-left:5px solid transparent;border-bottom:none;margin:-2px 0 0 0;}
footer .footer-top > ul li.footer-select > ul li:nth-last-of-type(1) > a{padding:5px 20px;}
footer .footer-top > ul li.footer-select > ul.on{display:block;}
footer .footer-top .footer-top-left{float:left;}
footer .footer-top .footer-top-left .footer-select{margin:0;}
footer .footer-top .footer-top-right{float:right;margin: 0;}
footer .footer-top::after{content:"";display:block;clear:both;width:100%;}
footer .footer-bottom{position:relative;width:1200px;margin:30px auto 0;}
footer .footer-bottom dl{overflow:hidden;}
footer .footer-bottom dl dt{float:left;margin:0 20px 0 0;font-size:12px;color:#b6b3ae;}
footer .footer-bottom dl dd{float:left;}
footer .footer-bottom dl dd ul{overflow:hidden;}
footer .footer-bottom dl dd ul li{float:left;margin:0 0 5px 0;font-size:12px;color:#7A7B85;}
footer .footer-bottom dl dd ul li a{vertical-align:top;color:#7A7B85;}
footer .footer-bottom dl dd ul li a:focus{outline:1px dashed;  outline:1px auto -webkit-focus-ring-color;  transform:scale(0.99);}
footer .footer-bottom dl dd ul li + li{margin-left: 20px;}
footer .footer-bottom dl dd.footer-sns{float:right;margin:0 23px 0 0;}
footer .footer-bottom dl dd.footer-sns ul li{position:relative;margin:0 4px;width:30px;height:30px;background:url(../img/ico-sns.png) no-repeat;}
footer .footer-bottom dl dd.footer-sns ul li a{position:absolute;top:0;left:0;width:100%;height:100%;}
footer .footer-bottom dl dd.footer-sns ul li a:focus{outline:1px dashed;outline:1px auto -webkit-focus-ring-color;transform:scale(0.99);}
footer .footer-bottom dl dd.footer-sns ul li.facebook{background-position-y:0;background-position-x:-30px;}
footer .footer-bottom dl dd.footer-sns ul li.youtube{background-position-y:-31px;background-position-x:-30px;}
footer .footer-bottom dl dd.footer-sns ul li.instagram{background-position-y:-64px;background-position-x:-30px;}
footer .footer-bottom dl dd.footer-sns ul li.twitter{background-position-y:-96px;background-position-x:-30px;}

@media(max-width:1920px){
  .people-50-cont{background-size: 650px,590px,580px,520px;}
  .main-vision-cont{background-size:900px;}
}
@media(max-width:1540px){
.main-slider{min-height:750px;}
.main-slider .main-title{width: 310px;}
.main-slider .spot-video{font-size:19px;bottom:40px;}
.scroll-down-i{bottom:55px;}
.main-slider .slick-dots{bottom:170px;}
.main-slider .item .group{height:calc(100% - (173px + 3px));padding-top:4%;}
.people-50-cont{background-size: 550px,500px,480px,460px;}
.main-vision-cont{background-size:860px;}
}