@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;
}

/* html, body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, table, th, td, figure {
  font-family: "Helvetica Neue","Apple SD Gothic Neo",Arial,sans-serif;
} */

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;}



/* 공용 */
.content-wrap{width:100%;overflow:hidden;}
.center{padding:0 16px;}
.white{color:#fff;}
[class*="btn-type1-"]{max-width: 228px;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;height: 42px;border: 1px solid #fff;font-size: 16px;color: #fff;margin: 0 auto;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-"][class*="-black"]{color: #000;border-color: #000;font-weight: 500;}
.bg-black{background:#000; color: #fff;}

/*common*/
.con-title-g{position:relative;width: 100%;}
.con-title-g .main-tit{font-weight: 700;font-size: 30px;line-height: 30px;letter-spacing: -0.04em;}
.con-title-g .sub-tit{font-weight: 400;font-size: 25px;line-height: 28px;letter-spacing: -0.02em;}
.con-title-g .desc{font-weight: 400;font-size: 18px;line-height: 23px;letter-spacing: -0.07em;word-break: keep-all;}


/*common layout 1*/
.con-layout-type-1 .l-img{width: 100%;overflow: hidden;}
.con-layout-type-1 .l-img img{width: 100%;}
.con-layout-type-1 .l-con{padding-top: 17px;}
.con-layout-type-1 .l-con .sub-tit{margin-top: 8px;}
.con-layout-type-1 .l-con .desc{margin-top: 16px;}
.con-layout-type-1 .l-con .desc p{font-weight: 400;line-height: 23px;}
.con-layout-type-1 .l-con .desc > * + *{margin-top: 8px;}
.con-layout-type-1 .more_btn{margin-top: 42px;}


/* 헤더 */
.header{position:fixed;top:0;left:0;width:100%;padding: 20px 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;padding: 0 27px;box-sizing:border-box;}
.gnb-logo{display: flex;flex-wrap: wrap;align-items: center;}
.gnb-logo .logo-kbs{display: inline-block;width: 60px;height: 18px;}
.gnb-logo .logo-50{display: inline-block;margin: 0px 0 0 5px;width: 105px;height: 13px;}
.gnb-logo img{display: inline-block;max-width: 100%;vertical-align: top;}
.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;}


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


/* header scroll-evt */
.scroll-evt .header{background: rgba(0, 0, 0, 0.7);backdrop-filter: blur(16px);}
.header.hide{transform: translate3d(0,-100%,0);}
body{background:#000;}
#wrap *{box-sizing:border-box;-webkit-box-sizing:border-box;}
#content .inner-wrap{padding: 0 22px;}
.contents_group{word-break: keep-all;}
#wrap .t-img{vertical-align: top;display: block;margin: 0 auto;}
#wrap .t-img img{max-width:100%;display: block;vertical-align: top;margin: 0 auto;}
/* 메인 영상 영역 */
.main-visual-cont{position: relative;overflow: hidden;}
.scroll-down-i{position: absolute;bottom: 17px;left: 50%;transform: translateX(-50%);}
.scroll-down-i .button{position: relative;display: inline-block;padding-bottom: 12px;}
.scroll-down-i .icon{width: 20px;height: 29px;border: 2px solid #fff;border-radius: 35px;}
.scroll-down-i .icon:before{display:block;content:"";position: absolute;top: 18%;left: 50%;width: 4px;height: 4px;margin-left: -2px;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: 4px;height: 4px;border: 2px solid #fff;transform: rotate(45deg) translateX(calc(-50% - 3.5px));border-top: 0;border-left: 0;transform-origin: left bottom;}
@keyframes mouse-dot-ani{
  0%{opacity:1;top:18%}
  15%{opacity:1;top:41%}
  50%{opacity:0;top:41%}
  100%{opacity:0;top:18%}
}
.slick-list,.slick-track{position: relative;width: 100%;height: 100%;}
.main-slider{position: relative;width: 100vw !important;overflow: hidden;}
.main-slider .item{position: relative;width: 100%;display:flex; justify-content:center;top:0 !important;overflow:hidden;visibility: hidden; padding: 60px 0 220px;overflow: 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: relative;top: 0;left: 0;z-index: 1;width: 100%;}
.main-slider .item video{width: 100%;display: block;vertical-align: top; opacity: 0;}
.main-slider.slick-initialized .item video{animation: fadeInAni 0.7s 0.3s forwards;}
.main-slider .item .video::before{display:block;content:"";position: absolute;top:0;left:0;width:100%;height: 100%;background: linear-gradient(180deg, rgba(0,0,0,0.7),rgba(0,0,0,0.3),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% - (90px + 4px + 10px));text-align: center;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding-bottom: 60px;z-index: 51;}
.main-slider .spot-video{position: absolute;bottom: 35px;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: 33vw;max-width: 300px;margin: 0 auto;}
.main-slider .main-title img{width: 100%;}
/*dot(progress)*/
.main-slider .slick-dots{position: absolute;bottom: 90px;left: 0;width: 100%;display: flex;justify-content: center;padding: 0 calc(60px - 4px);z-index: 50;}
.main-slider .slick-dots li{margin: 0 4px;width: calc(33.333333% - 2.666666666666667px);max-width: 150px;padding: 10px 0;cursor: pointer;}
.main-slider .slick-dots .progress_bar{width: 100%;height: 4px;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: -41px;right: 1px;width: 33px;height: 33px;border: 1px solid #fff;display: block;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: 29px;height: 1px;transform: rotate(45deg);background: #fff;transform-origin: center;margin-left: -15px;}
#video-popup .close-popup-btn:after{transform: rotate(-45deg);}
#video-popup .v-p-inner{position: relative;max-width: 1920px;margin: 0 auto;width: 90%;top: 50%;transform: translateY(-50%);}
#video-popup .v-p-contents{position: relative;clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);}
#video-popup .v-p-contents video{width: 100%;}

/*KBS를 빛낸 50인*/
.people-50-cont{position: relative;width: 100%;padding: 38px 0 33px;overflow: hidden;background-color: #fff;}
.people-50-cont .people-50-logo{width: 100%;margin-bottom: 11px;padding: 0 18px;text-align: center;}
.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: 12px;line-height: 30px;letter-spacing: -0.02em;color: #717171;margin-bottom: 2px;}
.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(50% - 8px);margin-right: 16px;}
.people-50-cont .people-list li:nth-child(2n){margin-right:0;}
.people-50-cont .people-list li:nth-child(n+3){margin-top: 22px;}
.people-50-cont .people-list a{display: block;width: 100%;}
.people-50-cont .people-list .img{position: relative;display: block;width: 100%;height: 0;overflow: hidden;padding-top: 71%;}
.people-50-cont .people-list li:hover .img img{transform:scale(1.1);}
.people-50-cont .people-list .img img{position: absolute;top: 0;left: 0;width: 100%;transition: 0.3s;}
.people-50-cont .people-list .info{width: 100%;padding-top: 9px;}
.people-50-cont .people-list .info .name{font-weight: 500;font-size: 15px;line-height: 16px;letter-spacing: -0.02em;color: #3E69B2;}
.people-50-cont .people-list .info .desc-1{font-weight: 500;font-size: 13px;line-height: 17px;letter-spacing: -0.02em;color: #000000;margin-top: 4px;}
.people-50-cont .people-list .info .desc-2{font-size: 11px;line-height: 12px;letter-spacing: -0.02em;color: #717171;margin-top: 3px;}


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

/*2040 비전*/
.main-vision-cont{padding: 33px 0 48px;overflow: hidden;background: url('../img/kbs-2040-bg1.png')no-repeat top left/249px, url('../img/kbs-2040-bg2.png')no-repeat bottom right/173px;}
.main-vision-cont .con-title-g{margin-bottom: 19px;}
.main-vision-cont .con-title-g .sub-tit{margin-top: 10px;color: #582FC1;}
.main-vision-cont .con-title-g .desc{margin-top: 16px;width: 100%;}
.main-vision-cont .more_btn{margin-top: 32px;}
.vision-slider{cursor: w-resize;}
.vision-slider .slide{width: 155px;padding: 12px 12px;background: linear-gradient(180deg, #4167B1 0%, #A7228A 100%);box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.25);}
.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: 8px 0 0 0;}
.vision-slider .info-txt .desc{height: 38px;font-weight: 700;font-size: 16px;line-height: 19px;color: #fff;letter-spacing: -0.03em;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}


/*50주년 소개*/
.main-about-cont{padding: 33px 0 48px;}
.main-about-cont .con-title-g .sub-tit{color: #A90089;}

/*당첨자 발표*/
.main-survey-cont{background: #fff;padding: 33px 0 38px;}
.winner-wrap .img{position: relative;width: 100%;display: block;text-align: center;}
.winner-wrap .img img{max-width:100%;}
.winner-wrap .download-btn{position: absolute;bottom: 40px;left: 50%;width: calc(192*2px);height: calc(37*2px);transform: translateX(-50%);border-radius: calc(37*2px);z-index: 10;}


/*motion*/
.open-video{overflow:hidden;}
.open-video #video-popup .v-p-contents{animation: showVideoMotion 1.2s 0.2s forwards;}
.open-video #video-popup .close-popup-btn{animation: fadeInAni 1s 0.9s forwards;}
.fade-up{opacity: 0;transform: translate3d(0,20px,0);}
.fade-up.is-inview{animation: fadeUpAni 0.7s forwards 0.2s;}
.scale-ani{opacity: 0;transform: scale(0.95);}
.scale-ani.is-inview{animation: scaleAni 0.7s forwards 0.2s;}
.show-img{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.show-img.is-inview{animation: showImg ease 1.2s forwards;}
@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%); }
  }
@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 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%); }
}
.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;}
}

/* 푸터 */
footer {padding:0 0 30px 0;background: #000;font-size:13px;color:#7a7b85;border-top: 7px solid #000;}
footer *, footer ul, footer li, footer strong, footer dt, footer dd, footer span{font-family: 'Noto Sans','Apple SD Gothic Neo','애플 SD 산돌고딕 Neo','Helvetica Neue','Roboto','sans-serif';}
footer .footer-app{color:#d1d2d4;}
footer .footer-app dt{position:relative;padding:17px 25px;letter-spacing:-1px;border-bottom:1px solid #444;}
footer .footer-app dt .ico{display:block;position:absolute;right:18px;top:15px;width:24px;height:24px;background:url("../img/ico-group50.png") no-repeat 2px -741px;background-size:40px;}
footer .footer-app dt.on .ico{background-position:-18px -741px;}
footer .footer-app dd{display: none;color:#7a7b85;background:#252525;border-bottom:1px solid #444;}
footer .footer-app dd ul{margin:0 auto;padding:25px 0;overflow:hidden;}
footer .footer-app dd ul li{position: relative;float: left;width: 25%;text-align: center;}
footer .footer-app dd ul li a{display: block;width: 100%;height: 100%;}
footer .footer-app dd ul li a .ico{display: block;margin: 0 auto;padding: 50% 0 0 0;width: 50%;background: url("../img/ico-app.png") no-repeat;background-size: 100% auto;}
footer .footer-app dd ul li a .txt{display: block;font-size: 10px;margin: 3px 0 0;color: #d1d2d4;}
footer .footer-app dd ul li.myk .ico{background-position: 0 16.66%;}
footer .footer-app dd ul li.news .ico{background-position: 0 0;}
footer .footer-app dd ul li.kong .ico{background-position: 0 33.33%;}
footer .footer-app dd ul li.world .ico{background-position: 0 50%;}

footer .footer-sns{padding: 37px 0;width: 100%;text-align: center;}
footer .footer-sns li{display: inline-block;margin: 0 7px;width: 24px;height: 24px;background: url("../img/ico-sns.png") no-repeat;background-size: 48px;}
footer .footer-sns li a{display: inline-block;width: 100%;height: 100%;}
footer .footer-sns li.facebook{background-position: -24px -48px;}
footer .footer-sns li.youtube{background-position: -24px -24px;}
footer .footer-sns li.instagram{background-position: -24px 0;}
footer .footer-sns li.twitter{background-position: -24px -72px;}

footer .footer-list{padding: 0 5%;margin: 0 auto;text-align: center;}
footer .footer-list li{display: inline-block;margin: 0 5px 10px;}
footer .footer-list li a{display: inline-block;width: 100%;height: 100%;font-size: 13px;line-height: 15px;}
footer .footer-list li a .en{display: none;}

footer > div{margin: 15px 0 0 0;font-size: 11px;line-height: 13px;text-align: center;}
footer .btn-top{display: none;position: fixed;right: 5px;bottom: 5px;width: 32px;height: 32px;z-index: 100000;background: url("../img/ico/ico-top.png") no-repeat 0 0;}


/* 미디어쿼리 */
@media screen and (max-width:700px){
  .winner-wrap .download-btn{width: 54vw;height: 11vw;bottom: 6%;}
}
@media screen and (max-width:545px){
  .main-survey-cont .con-title-g .sub-txt > *:not(.fix) br{display: none;}
}
@media screen and (max-width:360px){
  .main-survey-cont{}
  .main-survey-cont .con-title-g .main-tit{font-size: 10vw;}
}
@media screen and (max-width:330px){
  .sample-cont .tit{font-size:15px;}
  .slide-txt p{font-size:12px;}
}