/* ----------------------
180811 NewByOld LimJiSun
---------------------- */
@charset "utf-8";
@import "reset.css";
@import "common.css?v=1220";


/*---------------------- 레이아웃 ----------------------*/
/*body {position: relative;}*/
#wrap {position: relative;}
#header {height: 90px;width: 100%;position: fixed;}
#content {padding-top: 151px;padding-bottom: 46px;min-height: calc(100vh - 151px - 46px);}
#footer {height: 70px;width: 100%;position: absolute;bottom: 0;left: 0;right: 0;}

.inner {margin:0 auto; width:1080px;}

.main #header {background:#9a1119;}
.main #content {padding-top: 0;}

.content1{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: #fff2df;
    height:100vh;
}


.content1 .brd_img img{width:100%;}

@media (max-width: 991px) {

    .content1{
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        background-color: #fff2df;
        height:80vh;
    }


}




br.pc_br{display:none;}

.content1 .brdlogo{display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    position: relative;    width: -webkit-fill-available;}
.content1 .brdlogo h2{
    font-size:2em;
    font-weight:800;
    padding:30px;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
.content1 .brdlogo p{
    font-size:1.5em;
    font-weight:700;
    padding:0px;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}


.content1 .brdimg {width:40%;}
.content1 .brdimg img{width:100%;}
.content1 .brd_logo {margin-top:75px;}
.content1 .brd_title {color:#b48b39;font-weight:700; font-size:2em;padding:30px 0px;}



@media (max-width: 991px) {
    .content1 .brdimg {width:40%;}
    .content1 .brdimg img{width:100%;}
    .content1 .brd_logo {margin-top:110px;}
    .content1 .brd_title {color:#b48b39;font-weight:700; font-size:1.2em;padding:20px 0px;text-align: center;line-height:1.3;}

}



.content2{background-color: #152035;   position:relative; width:100%;flex-direction:column;align-items:ce}

.content2 .article{    display: flex;
    position: relative;
    width: 1280px;
    margin: -3px auto;
    padding: 80px 50px;
    flex-direction: column;
    align-items: center;}
.content2 .article .slide{width:596px;}

.content2 .article .text{color:#fff;padding-left:30px;width: 100%;}
.content2 .article .text h2{padding:20px 0PX;font-size:2.5em;font-weight:800;color:#b48b39;text-align: center;}

.content2 .article .text h3{padding:20px 0PX;font-size:1.3em;font-weight:700;    line-height: 1.3;color:#b48b39;}

@media (max-width: 991px) {
    .content2 .article .text h3{padding:20px 0PX;font-size:1.1em;font-weight:700;    line-height: 1.3;color:#b48b39;}

    }


.content2 .article .text p{font-size:1em;line-height: 1.5;word-break: keep-all;color:#333;    word-break: auto-phrase;font-weight:700;}
.content2 .slide{padding-top:30px;}

.content2 .article .clip iframe{width:1280px;height:600px;}

@media (max-width: 991px) {
.content2 .article .clip iframe{width:100%;height:200px;}
}

.content3{background-color: #fff2df;  position:relative; width:100%;padding-bottom:80px;}
.content3 h2{padding:20px 0PX;font-size:2.5em;font-weight:800;color:#b48b39;text-align: center;}
.content3 .winner_logo{text-align: center;padding-top:80px;}

.content3 .row{display: flex;position: relative;width:1280px;    margin: 0px auto;background-color: #fff;}




.content3 .row .clip{padding:30px;}
.content3 .row .link{display: flex;    flex-direction: row;}
.content3 .row .link img{width:100%;}
.content3 .row .link h2{color:#fff;font-size:2em;font-weight:800;margin-bottom:30px;}
.content3 .row h2::before{width:8px; height:25px; background-color:#ffb510; content:""; display:inline-block; margin-right:10px;}
.content3 .row .link a {padding-bottom:10px;}
.content3 .row .link span{color:#fff;font-weight:800;padding-bottom:10px;}

.content3 .row .article{}
.content3 .row .article .top{background-color:#660000 ;padding:15px 20px;}
.content3 .row .article .textarea{height:500px;overflow:scroll;background-color:#fff ;padding:20px;line-height:1.5; word-break: keep-all;}


@media (max-width: 991px) {
    .content3{background-color: #fff2df;  position:relative; width:100%;padding-bottom:80px;}
    .content3 h2{padding:20px 0PX;font-size:1.5em;font-weight:800;color:#b48b39;text-align: center;line-height: 1.3;}
    .content3 .winner_logo{text-align: center;padding-top:30px;}

    .content3 .row{display: flex;position: relative;width:1280px;    margin: 0px auto;background-color: #fff;}



.content3 .row .clip{padding:30px;}
.content3 .row .link{display: flex;    flex-direction: row;}
.content3 .row .link img{width:100%;}
.content3 .row .link h2{color:#fff;font-size:2em;font-weight:800;margin-bottom:30px;}
.content3 .row h2::before{width:8px; height:25px; background-color:#ffb510; content:""; display:inline-block; margin-right:10px;}
.content3 .row .link a {padding-bottom:10px;}
.content3 .row .link span{color:#fff;font-weight:800;padding-bottom:10px;}

.content3 .row .article{}
.content3 .row .article .top{background-color:#660000 ;padding:15px 20px;}
}


@media (max-width: 991px) {
    .content3 .row .article .textarea{height:600px;overflow:scroll;background-color:#fff ;padding:40px;line-height:1.5; word-break: keep-all;font-size:0.8em;}
}



.content3 .row .article .textarea p{font-size:1.1em;}
.content3 .row .article .textarea h3{font-size:1.6em;line-height: 1.3;font-weight:800;padding-bottom:20px;}

@media (max-width: 991px) {
    .content3 .row .article .textarea p{font-size:1.3em;}


}


.content4{background-color: #fff2df;  position:relative; width:100%;padding-bottom:80px;}
.content4 h2{padding:20px 0PX;font-size:2.5em;font-weight:800;color:#b48b39;text-align: center;}
.content4 .winner_logo{text-align: center;padding-top:80px;}

.content4 .row{display: flex;position: relative;width:1280px;    margin: 0px auto;    justify-content: center;}
@media (max-width: 991px) {

    content4{background-color: #fff2df;  position:relative; width:100%;padding-bottom:30px;}
    .content4 h2{padding:20px 0PX;font-size:1.5em;font-weight:800;color:#b48b39;text-align: center;}
    .content4 .winner_logo{text-align: center;padding-top:80px;}

.content4 .row{display: flex;position: relative;width:100%;    margin: 0px auto;        justify-content: center;}
}





.content4 .row .clip{padding:30px;}
.content4 .row .link{    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    GAP: 0px 10px;}


    @media (max-width: 991px) {
        .content4 .row .link{
            display: flex;
    flex-wrap: wrap;
    justify-content: center;
    GAP: 0px 10px;
    flex-direction: column;
    align-content: center;
    align-items: center;
        }

    }

.content4 .row .link img{width:100%;}
.content4 .row .link h2{color:#fff;font-size:2em;font-weight:800;margin-bottom:30px;}

.content4 .row .link a {padding-bottom:10px;}
.content4 .row .link span{color:#fff;font-weight:800;padding-bottom:10px;}
.content4 .row .article{}
.content4 .row .article .top{background-color:#660000 ;padding:15px 20px;}
.content4 .row .article .textarea{height:407px;overflow:scroll;background-color:#fff ;padding:20px;line-height:1.5; word-break: keep-all;}
.content4 .row .article .textarea p{font-size:1.1em;}




#bx-pager {margin-top: -57px; }
#bx-pager {margin-top: -57px; }
#bx-pager a {    margin: 0 0px;  }
#bx-pager a img {    width: 63px;  }


#bx-pager2 {margin-top: -57px; }
#bx-pager2 {margin-top: -57px; }
#bx-pager2 a {    margin: 0 0px;  }
#bx-pager2 a img {    width: 63px;  }


#bx-pager a.active img {  }

/*---------------------- 헤더 ----------------------*/
#header {background: url(../images/common/header-bg.png) repeat-x;z-index: 10;}
.main #header {    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;}
#logo {color:#fff;font-weight:800;font-size:1.5em;    padding: 0px 20px;}
#brd_logo {color:#fff;font-weight:800;font-size:1.5em;    padding: 0px 20px;}


@media (max-width: 991px) {
    #logo {color:#fff;font-weight:800;font-size:1.2em;    padding: 0px 20px;}
    #brd_logo img{max-width:100px;}

}




#gnb {position: absolute;top: 20px;right: 15px;}
#gnb .depth1 {overflow: hidden;}
#gnb .depth1 > li {height: 65px;line-height: 30px;float: left;margin-left: 27px;margin-right:20px;}
#gnb .depth1 .depth1-tit,
#gnb .depth1 > li.event > a {font-size: 14px;color: #000;display: block;height: 100%;letter-spacing: 0;cursor: pointer;}
#gnb .depth1 .depth1-tit.on,
#gnb .depth1 .depth1-tit:hover {color: #1860c9;}
	/* event */
	#gnb .depth1 > li.event {height: 30px !important;padding-right: 79px;padding-left: 26px;margin-left: 35px;background: #1860c9;position: relative;}
	#gnb .depth1 > li.event:before {display: inline-block;content:'';position: absolute;left: -17px;
	border-color: #1860c9;border-bottom-width: 17px;
	border-bottom: 30px solid #1860c9;/*높이,컬러*/
	border-left: 17px solid transparent;border-right: 0;}
	#gnb .depth1 > li.event > a {color: #fff;position: relative;}
	#gnb .depth1 > li.event > a:after {content: '';display: inline-block;width: 5px;height: 8px;background: url(../images/common/nav-arrow.png) no-repeat;position: absolute;right: -21px;top:12px;}
	#gnb .depth1 > li.event > a.on,
	#gnb .depth1 > li.event > a:hover {color: #fff;}

#gnb .depth2-wrap {background: url(../images/common/nav-bg.png) repeat-y;
	width: 111px;position: absolute;top: 63px;overflow: visible;display: none;}
#gnb .depth2-wrap.on {display: block;}
#gnb .depth2-wrap:after {content: '';display: inline-block;width: 111px;height: 19px;position: absolute;bottom: -19px;left: 1px;
                        background: url(../images/common/nav-bg-bt.png);}



.main #gnb .depth1 > li {height: 49px;}
.main #gnb .depth1 .depth1-tit {color: #fff;height: 25px;}
.main #gnb .depth1 .depth1-tit.op20 {opacity: .2;}
.main #gnb .depth1 .depth1-tit.on,
.main #gnb .depth1 .depth1-tit:hover {border-bottom: 1px solid #fff;}
.main #gnb .depth1 li.event a:hover {border-bottom: none;}

/*--------------------- 푸터 -----------------------*/
#footer {color: #9b9b9b;font-size: 12px;background: #363636;border-bottom: 1px solid #363636;}
#footer p {position:relative;text-align: center;padding:10px;}
#footer p > span {font-size: 9px;letter-spacing: 0.4px;}
#footer p > .logo {padding-right: 20px;vertical-align: middle;}

/*---------------------- 공통 ----------------------*/
.title {text-align: center;}
.title.type2 {text-align: left;}
.title .comment {font-size: 16px;font-weight: 300;margin-bottom: 18px;color: #2b2b2b;opacity: .6;}
.title .tit {font-size: 53px;}
.title .tit .tx-blue {color: #1860c9;font-weight: 900;}
.title.type2 .tit .tx-blue {display: block;margin-top: 10px;}







/*---------------------- 메인 ----------------------*/
.fbavn-main-tit {opacity:0;transition:all ease-in-out 550ms; position: absolute;bottom: 30%;left: 50%;transform: translateX(-50%);}
    .fbavn-main-tit.on {transition:all ease-in-out 550ms;opacity:1;bottom: 50%;transform: translateX(-50%);}
    .fbavn-main-tit.on.brand1 {bottom: calc(50% - 122px);}

    .fbavn-main-tit.on.brand2 {bottom: calc(50% - 122px);}

    .fbavn-main-tit.on.brand3 {bottom: calc(50% - 122px);}

    .fbavn-main-tit.on.brand4 {bottom: calc(50% - 122px);}


    .fbavn-main-tit-wrap.banner .fbavn-main-tit {bottom: 104px;transform: translateX(-50%);opacity: 1;z-index: 20;}
    .fbavn-main-tit-wrap .btn-fbavn-main-link {border: 1px solid #fff;height: 27px;line-height: 27px;width: 98px;display: block;color: #fff;font-size: 12px;text-align: center;
        position: absolute;bottom: 46px;left: 50%;transform: translateX(-50%);z-index: 20;}
    .fbavn-main-tit-wrap .btn-fbavn-main-link:hover {opacity: .3;}


.fbavn-main-tit-wrap.banner .fbavn-main-tit {bottom: 104px;transform: translateX(-50%);opacity: 1;z-index: 20;}
.fbavn-main-tit-wrap .btn-fbavn-main-link {border: 1px solid #fff;height: 27px;line-height: 27px;width: 98px;display: block;color: #fff;font-size: 12px;text-align: center;
	position: absolute;bottom: 46px;left: 50%;transform: translateX(-50%);z-index: 20;}
.fbavn-main-tit-wrap .btn-fbavn-main-link:hover {opacity: .3;}
.fbavn-main-sec-img {min-height: 505px;background: transparent;display: table;width: 100%;position: relative;/*margin-top: -1px;*/}
.fbavn-main-nav {position: absolute;left: 50%;transform: translateX(-50%);display: none;}
.fbavn-main-nav ul {overflow: hidden;margin-left: -47px;}
.fbavn-main-nav ul li {float: left;margin-left: 47px;position: relative;}
.fbavn-main-nav ul li:before {content: '';display: inline-block;width: 1px;height: 18px;position: absolute;left: -24px;top: 2px;background: #fff;}
.fbavn-main-nav ul li:first-of-type:before {display: none;}
.fbavn-main-nav ul li a {font-size: 16px;color: #fff;opacity: 1;}
.fbavn-main-nav ul li a:hover {opacity: .3;}

/* 메인 배너 */
.swiper-container {position: relative;overflow: hidden;}
.swiper-slide {position: relative;}

.fbavn-main-bn-con-wrap {width: 100%;position: relative;}
.fbavn-main-bn-con-wrap > img {width: 100%; position: relative;top:0;left:50%;transform: translateX(-50%);vertical-align: top;}

.swiper-pagination-bullet {background: #fff !important;}
.swiper-pagination-bullet-active {background: #fff !important;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 18px !important;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 3px !important;}

    /* 181019 메인배너 영상 추가, 181102 메인배너 높이 변경 */
    .swiper-container {position: relative;height: 757px;height: 70px;overflow: hidden;background: #9a1119;}
    .swiper-slide {position: relative;height: 100px;}


    #wrap{
        width:100%;
    }
    .fade_container {

        height:auto;

    }
    .fade_container img{position:absolute;}

    .fade_container .active{
        z-index:1;
    }




    @media only screen and (max-width: 991px) {

        .fbavn-main-sec-img img{width:800px;}

        .fbavn-main-tit.on.brand1 {bottom: calc(50% - 80px);}

        .fbavn-main-tit.on.brand2 {bottom: calc(50% - 80px);}

        .fbavn-main-tit.on.brand3 {bottom: calc(50% - 80px);}

        .fbavn-main-tit.on.brand4 {bottom: calc(50% - 80px);}

        .content1 {

            display: flex;
            flex-direction: column;
            align-items: center;

        }
        .content1 .brdimg {
            width: 100%;
        }

        .content1 .brdlogo {
            width: 100%;

        }


        .content1 .brdlogo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            width: -webkit-fill-available;
            padding-top: 80px;
            padding-bottom: 50px;
        }

        .content2 {
            background-color: #152035;
            position: relative;
            width: auto;
            padding: 20px 20px;
        }
        .content2 .article {
            display: flex;
            position: relative;
            width: 100%;
            margin: 0px auto;
            padding: 30px 0px 0px;
            flex-direction: column;
        }

.content2 .article .text h2 {
    padding-bottom: 20px;
    font-size: 1.5em;
    font-weight: 800;
    padding-top: 30px
}
        .content2 .article .slide {
            width: 100%;
        }
        .content2 .article .text {
            color: #fff;
            padding-left: 0px;
        }

        .content2 .article .text p{font-size:1em;line-height: 1.5;word-break: keep-all;margin-bottom:30px;}
        .content3 .row {
            display: flex;
            position: relative;
            width: 100%;
            margin: 0px auto;
            padding: 0px 0px 0px;
            flex-direction: column;
            align-items: center;
            background-color: #fff2df;
        }

        .content3 .row .link {
            width: 100%;
        }

        .content3 .row .link span {
            color: #fff;
            font-weight: 800;

            padding: 5px 0px;
        }

        .content3 .row .link img {
            width: 100%;
        }
        .content3 .row .link h2 {
            color: #fff;
            font-size: 2.5em;
            font-weight: 800;
            margin-bottom: 30px;
            padding-left:60px;
        }

        .content3 .row .article{margin-top:0px;}

        .content3 .row .photo{width:100%;        }
        .content3 .row .photo img{width:100%;        }
        #bx-pager a img {    width: 15%;  }
        .content3 .row .clip {
            padding-left: 0px;
            padding-top: 30px;
        }
    }

/* 헤더 배치 */
/* 헤더: 왼쪽 정렬 + 요소 간 최소 간격 */
#header{
  display:flex;
  align-items:center;

  gap:8px;                                /* 요소 사이 살짝 간격 */
  padding:0 20 0 20px;
}

.year-switcher{
  position:relative;
  margin-right:25px;   /* 제목과 너무 붙으면 0~8px 사이로 조절 */
}

#yearToggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 30px 6px 12px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:transparent;      /* 현재처럼 흰색 알약이 좋다면 유지, 투명으로 하려면 transparent */
  color:#fff;
  font-weight:800;
}
#yearToggle .caret{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid currentColor;
}

/* 메뉴 */
.year-menu{
  display:none; position:absolute; right:0; top:calc(100% + 8px);
  min-width:120px; background:#fff; border:1px solid #ddd; border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.15); overflow:hidden; z-index:1000;
}
.year-menu li a{
  display:block; padding:10px 14px; color:#333; font-weight:700; white-space:nowrap;
}
.year-menu li a:hover, .year-menu li a.active{ background:#f5f5f7; }

@media (max-width:600px){
  #yearToggle{ padding:6px 30px 6px 10px; font-size:14px; }
  #yearToggle .caret{ right:10px; border-left-width:5px; border-right-width:5px; border-top-width:5px; }
}