@charset "UTF-8";

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: url('font/Pretendard-Black.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: url('font/Pretendard-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: url('font/Pretendard-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: url('font/Pretendard-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: url('font/Pretendard-Light.woff2') format('woff2');
}

button:focus, button:active {background-color: #011B56;}
b, strong, dt, dd {font-weight: unset; color: unset;}
h1, h2, h3, h4, h5, a, a:hover, a:active, a:focus, figure {padding: 0; margin: 0;}

.main-wrap * {font-family: 'Pretendard', sans-serif; color: unset; letter-spacing: -.5px;}
.main-wrap .blind {border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap;}
.main-wrap .mgt {margin-top: 30px;}
.main-wrap .point {color: #F6AB00;}

.visual-con video {width: 100%; height: 100%; margin-bottom: -3px;}

.info-wrap {height: 1080px; background: url("../images2020/sbs_promo/info_bg.jpg") no-repeat center center / 100% 1080px;}
.info-wrap .info-con {display: flex; justify-content: space-between; align-items: center; width: 1280px; height: 1080px; margin: 0 auto;}
.info-wrap .info-con dl {flex: 1; color: #fff;}
.info-wrap .info-con dt::before {display: block; content: ''; width: 260px; height: 110px; margin-bottom: 13px; background: url('../images2020/sbs_promo/sbs_logo.svg') no-repeat center center #fff; border-radius: 20px;}
.info-wrap .info-con dt {font-size: 40px; font-weight: 700; letter-spacing: -1px;}
.info-wrap .info-con dd {padding-top: 16px; font-size: 22px; line-height: 35px; letter-spacing: -1px;}
.info-wrap .info-con video {width: 720px; height: 405px; border-radius: 20px; box-shadow: 40px 30px 50px 20px #0000004D;}

.com-wrap {width: 1280px; margin: 0 auto; padding: 134px 0;}
.tit-box {display: flex; align-items: flex-end;}
.tit-box .tit {flex: 1; position: relative; overflow: hidden; font-size: 75px; font-weight: 900; line-height: 65px; color: #02223C; letter-spacing: -1px;}
.tit-box .tit::before {display: block; content: ''; width: 30px; height: 30px; margin-bottom: 10px; background: url("../images2020/sbs_promo/sbs_ci_sm.svg") no-repeat center center / contain;}
.tit-box .tit::after {display: block; content: ''; position: absolute; left: 400px; bottom: 10px; width: 320px; height: 2px; background: linear-gradient(to left, #F6AB0050 5%, #245A91 100%);}
.tit-box .txt {font-size: 30px; line-height: 35px; color: #000;}
.tit-box .txt > em {font-weight: 700; color: #245A91;}

.chance-box {display: flex; justify-content: space-between; align-items: center; padding-top: 80px;}
.chance-box .ch-list .tit {font-size: 27px; font-weight: 900; color: #011B56;}
.chance-box .ch-list .tit > em {color: #F6AB00;}
.chance-box .ch-list .sub-des {padding-top: 10px; font-size: 22px; font-weight: 700; color: #02223C;}
.chance-box .ch-list .des {padding-top: 10px; font-size: 20px; color: #7E7E7E; line-height: 30px;}
.chance-box .ch-list .des > strong {font-weight: 700;}
.chance-box .ch-list .des > em {font-size: 15px;}

.logo-wrap {height: 120px; background: #F5F5F5;}
.logo-wrap .logo-slide {display: flex; gap: 30px; max-width: 1920px; margin: 0 auto; overflow: hidden;}
.logo-wrap .logo-slide .logo-list {display: flex; align-items: center; gap: 30px; height: 120px;}

.recom-wrap .tit-box .tit::after {left: 500px; width: 200px;}
.recom-wrap .con-box {display: flex; flex-wrap: wrap; gap: 20px; padding-top: 78px;}
.recom-wrap .con-box .con-list {position: relative; overflow: hidden; cursor: pointer;}
.recom-wrap .con-box .con-list > video {border-radius: 20px;}
.recom-wrap .con-box .con-list > span {position: absolute; right: 20px; bottom: 20px; display: block; padding: 10px 15px; color: #fff; font-size: 17px; font-weight: 600; background-color: #011B5699; border-radius: 10px;}
.sbs-btn {display: block; background-color: #011B56; border-radius: 100px;}
.sbs-btn.lg {margin: 30px auto; padding: 20px 39px;}
.sbs-btn > span {font-size: 30px; color: #fff; font-weight: 700;}
.sbs-btn > span::after {display: inline-block; content: ''; width: 30px; height: 20px; padding-left: 20px; background: url("../images2020/sbs_promo/ico_arrow.svg") no-repeat center right / contain;}

.open-event {background-color: #F5F5F5;}
.open-event .open-bg {display: flex; justify-content: space-between; align-items: flex-start; width: 1280px; margin: 0 auto; background: url("../images2020/sbs_promo/open_bg.png") no-repeat center bottom / contain;}
.open-event .open-txt {padding-top: 65px;}
.open-event .open-txt .o-tit {font-size: 27px; color: #02223C; font-weight: 700;}
.open-event .open-txt .o-tit > em {color: #F6AB00;}
.open-event .open-txt .o-des-01 {font-size: 40px; font-weight: 700; color: #02223C;}
.open-event .open-txt .o-des-01 > img {display: inline-block; width: 120px; height: 42px; vertical-align: -7px;}
.open-event .open-txt .o-des-02 {padding: 20px 0; font-size: 22px; color: #02223C; font-weight: 400;}
.open-event .open-txt .o-des-02 > strong {color: #247444; font-weight: 700;}
.open-event .open-txt .o-btn .sbs-btn {padding: 15px 30px;}
.open-event .open-txt .o-btn .sbs-btn > span {font-size: 17px;}
.open-event .open-txt .o-btn .sbs-btn > span::after {width: 15px; height: 10px; padding-left: 10px;}
.open-event .open-bg figure {padding-top: 55px;}

.faq-wrap {width: 1280px; margin: 30px auto 160px;}
.faq-wrap .tit-box {display: flex; justify-content: space-between; align-items: flex-start;}
.faq-wrap .tit-box .tit:after {display: none;}
.faq-wrap .tit-box .f-con {flex-basis: 1000px;}
.faq-wrap .tit-box .f-con .f-list {padding-bottom: 20px; border-bottom: 1px solid #D9D9D9;}
.faq-wrap .tit-box .f-con .f-list .f-tit {display: block; position: relative; overflow: hidden; padding-top: 20px;font-size: 24px; font-weight: 700; color: #02223C; letter-spacing: -1px; cursor: pointer;}
.faq-wrap .tit-box .f-con .f-list .f-tit::after {position: absolute; right: 0; top: 25px; content: ''; width: 15px; height: 20px; background: url("../images2020/sbs_promo/ico_close.svg") no-repeat center center / contain; transition-duration: 0.2s;}
.faq-wrap .tit-box .f-con .f-list.open .f-tit::after {transform: rotateZ(45deg); transition-duration: 0.2s;}
.faq-wrap .tit-box .f-con .f-list .f-ask {display: none;}
.faq-wrap .tit-box .f-con .f-list .f-ask {padding-top: 20px; font-size: 20px; color: #02223C; line-height: 30px;}

.que-sec {background-color: #123278;}
.que-wrap {display: flex; align-items: center; max-width: 1300px; margin: 0 auto;}
.que-wrap .que-con {flex: 1; position: relative; margin-left: 60px; padding: 90px 0 90px 150px; color: #fff; letter-spacing: -1px;}
.que-wrap .que-con.mail {border-right: 1px solid #FFFFFF1A;}
.que-wrap .que-con::before {display: block; content: ''; position: absolute; left: 0; width: 100px; height: 87px; background: url("../images2020/sbs_promo/ico_info_01.svg") no-repeat center center / contain;}
.que-wrap .que-con.call::before {background-image: url("../images2020/sbs_promo/ico_info_02.svg");}
.que-wrap .que-con dt {font-size: 30px; font-weight: 700;}
.que-wrap .que-con dd {padding-top: 20px; font-size: 17px;}
.que-wrap .que-con.mail dd > a {text-decoration: underline;}
.que-wrap .que-con.call dd {font-size: 25px; font-weight: 700;}

.banner-wrap {background-color: #011B56;}
.banner-wrap .banner-con {display: flex; align-items: center; justify-content: center; width: 1280px; height: 540px; margin: 0 auto; cursor: pointer;}
.banner-wrap .banner-con dt {flex: 1; font-size: 50px; font-weight: 700; line-height: 55px; color: #fff;}
.banner-wrap .banner-con dt::after {display: inline-block; content: ''; width: 60px; height: 40px; margin-left: 30px; background: url("../images2020/sbs_promo/ico_arrow.svg") no-repeat center center / contain;}

@keyframes flowRoll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}