@charset "utf-8";

/*--------------------------------------------------------------------- header --------------------------*/
.main#hd{background: transparent; border-bottom-color: rgba(255,255,255,0.1);}
.main#hd #logo > a{background-image: url(../img/main-logo.svg);}
.main#hd .gnb_1da{color: #bababa;}
.main#hd .gnb_2dul{background-color: #FAFAFC;}
.main#hd .gnb_2da{color: #292929;}
.main#hd .gnb_2dul_box > li:not(:last-child) > a{border-bottom: 1px solid #E4E4E4;}
.main#hd.fix{background: #FAFAFC;border-bottom-color: rgba(0,0,0,0.1);}
.main#hd.fix .gnb_1da{color: #4A4E67;}
.main#hd.fix .gnb_2dul{background-color: #4A4E67;}
.main#hd.fix .gnb_2da{color: #fff;}
.main#hd.fix .gnb_2dul_box > li:not(:last-child) > a{border-bottom: 1px solid #99A2BC;}
.main#hd.fix #logo > a{background-image: url(../img/logo.svg);}

/*--------------------------------------------------------------------- gnb --------------------------*/
.main#hd #gnb .gnb_menu_btn span{background: #fff;}
.main#hd #gnb .gnb_menu_btn span:before {background: #fff;;} 
.main#hd #gnb .gnb_menu_btn span:after {background: #fff;} 
.main#hd #gnb .gnb_menu_btn.gnb_btn_active span{background: transparent;}
.main#hd #gnb .gnb_menu_btn.gnb_btn_active span:before{background: #fff;}
.main#hd #gnb .gnb_menu_btn.gnb_btn_active span:after{background: #fff;}
.main#hd.fix #gnb .gnb_menu_btn span{background: #4A4E67;}
.main#hd.fix #gnb .gnb_menu_btn span:before {background: #4A4E67;}
.main#hd.fix #gnb .gnb_menu_btn span:after {background: #4A4E67;}
.main#hd.fix #gnb .gnb_menu_btn.gnb_btn_active span{background: transparent;}
.main#hd.fix #gnb .gnb_menu_btn.gnb_btn_active span:before {background: #fff;}
.main#hd.fix #gnb .gnb_menu_btn.gnb_btn_active span:after {background: #fff;}



/*--------------------------------------------------------------------- 메인 슬라이드 --------------------------*/
.main-video {width: 100%;height: calc(100vh - 4px);object-fit: cover;position: relative;}
.main-cont{position: absolute;width: 100%;z-index: 11;text-align: center;left: 50%;top: calc(50% - 60px);transform: translate(-50%, -50%);}
.main-cont .main-slide-txt_01{font-size: 22px; color: #bababa;}
.main-cont .main-slide-txt_02{font-size: 46px; margin-top: 15px;}
.main-cont .main-slide-txt_03{font-size: 18px; margin-top: 35px; color: #888; text-decoration: underline;}
.main-slide-view > ul > li:nth-child(4) .main-cont .main-slide-txt_02,
.main-slide-view > ul > li:nth-child(5) .main-cont .main-slide-txt_02,
.main-slide-view > ul > li:nth-child(9) .main-cont .main-slide-txt_02,
.main-slide-view > ul > li:nth-child(10) .main-cont .main-slide-txt_02 {color: #F0C57E;}

.main-slide-view > ul > li:nth-child(1) .main-cont .main-slide-txt_02, 
.main-slide-view > ul > li:nth-child(2) .main-cont .main-slide-txt_02,
.main-slide-view > ul > li:nth-child(3) .main-cont .main-slide-txt_02,
.main-slide-view > ul > li:nth-child(6) .main-cont .main-slide-txt_02, 
.main-slide-view > ul > li:nth-child(7) .main-cont .main-slide-txt_02,
.main-slide-view > ul > li:nth-child(8) .main-cont .main-slide-txt_02,
.main-slide-view > ul > li:nth-child(11) .main-cont .main-slide-txt_02,
.main-slide-view > ul > li:nth-child(12) .main-cont .main-slide-txt_02{color: #97A2BE;}

.main-slide-btn_wrap{position: absolute;top: calc(50% + 50px);left: 50%;transform: translate(-50%, -50%);z-index: 1;}
.main-slide-view .swiper-pagination {color: #fff; font-size: 0; display: flex; position: static;}
.main-slide-view .swiper-pagination-current::after { content: ''; height: 50px; width: 1px; background: #707070; position: absolute; top:0; left: 0; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); }
.main-slide-view .swiper-pagination-current::before {content: '';height: 0;width: 2px;background: #fff;position: absolute;top: 0;left: 0;transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);-moz-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);}
.main-slide-view .swiper-pagination-current.timeBox::before {-webkit-animation: aniPrgressbar 5s ease-in-out .5s; animation: aniPrgressbar 5s ease-in-out .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
.main-slide-view .main-slide-btn_wrap.on .swiper-pagination-current.timeBox::before {-webkit-animation: aniPrgressbar2 30s ease-in-out .5s; animation: aniPrgressbar2 30s ease-in-out .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
.main-slide-view .main-slide-btn_wrap.on .swiper-pagination-current::after{height: 80px;}
@-webkit-keyframes aniPrgressbar { from { height: 0; } to { height: 50px; } }
@keyframes aniPrgressbar { from { height: 0; } to { height: 50px; } }

@-webkit-keyframes aniPrgressbar2 { from { height: 0; } to { height: 80px; } }
@keyframes aniPrgressbar2 { from { height: 0; } to { height: 80px; } }

.main-thum{position: absolute;bottom: 0;left: 0;width: 100%;height: 150px;border-radius: 20px 20px 0 0;z-index: 1;}
.main-thum > .inner{height: 100%; }
.main-thum-txt{max-width: calc(100% - 825px); width: 100%;}
.main-thum-txt > p{color: rgba(51,51,51,0.7); font-size: 20px;}
.main-thum-txt > a{color: rgba(51,51,51,0.7); font-size: 32px; margin-top: 10px; display: inline-flex;}
.main-thum-txt .main-active:after{content: ''; width: 45px; height: 45px; background: no-repeat 50% / cover; background-image: url(../img/ico_slide-archive.svg); margin-left: 20px;}

.main-thum-img{height: 107px; box-sizing: border-box; max-width: 820px; width: 100%;}
.main-thum-img .swiper-slide{width: 25%;height: 100%;opacity: 0.4;border-radius: 3px;}
.main-thum-img .swiper-slide-thumb-active{opacity: 1;}
.main-thum-img img {display: block;width: 100%;height: 100%;object-fit: cover;border-radius: inherit;}


/* section-slide */
.section-slide{height: auto;}
.section-slide > ul > li{background-color: #fff;text-align: center;font-size: 18px;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;padding-top: 165px;} 
.section-tit{text-align: left;}
.section-slide .swiper-pagination:after{content: ''; position: absolute; right: 5px; top: 5px; width: 1px; height: calc(100% - 10px); background-color: #e4e4e4; z-index: -1;}
.section-slide .swiper-pagination-bullet.swiper-pagination-bullet-active{font-size: 14px; color: #4A4E67;}
.section-slide .swiper-pagination-bullet{width: auto;height: auto;padding-right: 20px;background: none;margin-top: 0 !important; margin-bottom: 10px !important;align-items: center; color: #fff;position: relative; font-family: 'ubuntu-medium'; opacity: 1;}
.section-slide .swiper-pagination-bullet:last-child{margin-bottom: 0 !important;}
.section-slide .swiper-pagination-bullet:before{content: '';position: absolute;right: 0;width: 11px;height: 11px;border-radius: 50%;top: 50%;transform: translateY(-50%);border: 1px solid #4A4E67;background-color: #fff;}
.section-slide .swiper-pagination-bullet-active:before{background-color: #4A4E67;}

.section-slide ul > li .inner{display: flex;justify-content: space-between;align-items: center;height: 100%;}
.main-sect-02--slide ul > li .inner{display: flex;justify-content: space-between;align-items: center;height: 100%;}
.main-sect-03--slide ul > li .inner{display: flex;justify-content: space-between;align-items: center;height: 100%;}
.section-tit{display: flex; flex-direction: column;}
.section-tit--txt{padding-left: 100px;color: #4A4E67;}
.sect-sub--tit{font-size: 34px;}
.sect-main--tit{font-size: 45px;}
.section-tit-img{width: 400px; margin-top: 20px;}
.section-tit-img img{width: 100%; height: auto;}
.sect-01-cont > li{display: flex; align-items: center;}
.sect-01-cont > li:not(:last-child){margin-bottom: 50px;}
.sect-01-cont .sect-01--img{width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center;} 
.sect-01-cont .sect-01--img .ico_cir{ background: no-repeat 50% / cover;}
.sect-01-cont > li:nth-child(1) .sect-01--img{background-color: #F0C57E;}
.sect-01-cont > li:nth-child(2) .sect-01--img{background-color: #4A4E67;}
.sect-01-cont > li:nth-child(3) .sect-01--img{background-color: #97A2BE;}
.sect-01-cont > li:nth-child(1) .sect-01--img .ico_cir{background-image: url(../img/ico_sect-img_01.svg); width: 66px; height: 66px;}
.sect-01-cont > li:nth-child(2) .sect-01--img .ico_cir{background-image: url(../img/ico_sect-img_02.svg); width: 53px; height: 67px;}
.sect-01-cont > li:nth-child(3) .sect-01--img .ico_cir{background-image: url(../img/ico_sect-img_03.svg); width: 77px; height: 70px;}
.sect-01--txt{text-align: left; margin-left: 50px;width: calc(100% - 200px);}
.sect-01--txt .sect-01__top{font-family: 'ubuntu-boldItalic'; font-size: 24px; color: #4A4E67; font-style: italic;}
.sect-01--txt .sect-01__info{margin-top: 15px; font-size: 16px; font-weight: 300; color: #404040; line-height: 23px;}
.main-sect-02 .section-tit{display: block;padding-left: 100px;max-width: 550px;width: 100%;}
.main-sect-02 .section-tit--txt{padding-left: 0;}
.main-sect-02--slide .section-cont{width: calc(100% - 550px);position: relative;z-index: 1;margin-top: 80px;}
.main-sect-02--slide li:after{content: '';position: absolute;left: 43%;bottom: 70px;background: no-repeat 50%/ 100%;background-image: url(../img/sect-02-bg.png);width: calc(100% - 600px);height: 100%;}
.main-sect-02--slide .sect-02-img{width: 430px;}
.main-sect-02--slide .sect-02-img img{width: 100%; height: auto;}
.main-sect-02--cont{margin-top: 50px;}
.main-sect-02--cont .sect-02-tit{font-size: 24px; color: #97A2BE; font-family: 'ubuntu-boldItalic';} 
.main-sect-02--slide .section-tit{display: flex;flex-direction: column;position: relative;}
.main-sect-02-slide--control{margin-top: 20px; display: flex; align-items: center;}
.main-sect-02-slide--control .swiper-pagination{position: relative; bottom: auto; left: auto; text-align: left; border: 1px solid #D1D2D9; background-color: #fff; padding: 20px; width: 72px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 25px; color: #4A4E67; font-size: 18px; letter-spacing: 0px;}
.section-slide .main-sect-02-slide--control .swiper-pagination:after{display: none;}
.main-sect-02-slide--control .swiper-pagination-current{font-family: 'ubuntu-light';}
.main-sect-02-slide--control .swiper-pagination-total{font-family: 'ubuntu-medium';}
.main-sect-02-slide--control .swiper-button {display: flex;align-items: center;}
.main-sect-02-slide--control .swiper-button > div{background: no-repeat 50% / cover;width : 50px;height: 50px;margin-left: 15px;cursor: pointer;}
.main-sect-02-slide--control .swiper-button .slide-btn__prev{background-image: url(../img/ico_slide-btn__prev.svg);}
.main-sect-02-slide--control .swiper-button .slide-btn__next{background-image: url(../img/ico_slide-btn__next.svg);}
.sect-02-list{margin-top: 20px;}
.sect-02-list > li {position: relative; line-height: 30px; font-size: 16px; font-weight: 400;}
.sect-02-list > li:before{content: '・'; position: absolute; left: -20px;}

.main-sect_03{padding-bottom: 150px;}
.main-sect_03 .section-tit-img{width: 510px; margin-top: -30px;}
.sect-03-cont {display: flex;flex-wrap: wrap;align-items: center;justify-content: left;max-width: 680px;width: 100%;}
.sect-03-cont > li{width: calc(100% / 3 - 20px);border: 1px solid #e4e4e4;height: 67px;display: flex;align-items: center;justify-content: center;margin-bottom: 30px;border-radius: 3px; background-color: #fff;}
.sect-03-cont > li:not(:nth-child(3n)){margin-right: 29px;}
.sect-03-cont > li > a {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.sect-03-img{width: 184px;margin: 0 auto;}
.sect-03-img img{width: 100%; height: auto;}

/* top_btn */
#top_btn.active{display: none;}


/*--------------------------------------------------------------------- 반응형 --------------------------*/
@media screen and (max-width:768px){

    .main-slide-view{height: calc(var(--vh, 1vh) * 100);}
    .main-video{height: calc(100vh - 63px);}
    .main-cont .main-slide-txt_01{font-size: 12px; line-height:22px;}
    .main-cont .main-slide-txt_02{font-size: 26px;}
    .main-cont .main-slide-txt_03{font-size: 12px; margin-top: 15px;}
    .main-slide-view .swiper-pagination-current::after{height: 15px;}
    .main-slide-btn_wrap{top: calc(50% + 30px);}
    .main-thum{height: 168px;padding: 20px 0;}
    .main-thum > .inner{flex-direction: column; align-items: flex-start; padding: 0;}
    .main-thum-txt{max-width: 100%; padding: 0 20px; padding-bottom: 15px;}
    .main-thum-txt > p{font-size: 14px;}
    .main-thum-txt > a{font-size: 20px; margin-top: 0;}
    .main-thum-txt .main-active:after{width: 23px; height: 23px;}
    .main-thum-img{overflow: auto !important;padding-left: 15px !important;}
    .main-slide-view .swiper-pagination-current.timeBox::before {-webkit-animation: aniPrgressbar 2s ease-in-out .1s; animation: aniPrgressbar 2s ease-in-out .1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
    .main-thum-img .swiper-slide{width: 122px !important;}

    .section-slide{height: auto; width: 100%;}
    .section-slide > ul > li{height: auto;padding-top: 0; position: relative; overflow: hidden;}
    .section-slide > ul{display: block;}
    .section-slide > ul > li .inner{display: block;height: auto;padding-top: 40px;}
    .section-tit{justify-content: space-between;flex-direction: inherit;}
    .section-tit--txt{padding-left: 0;}
    .sect-sub--tit{font-size: 22px;}
    .sect-main--tit{font-size: 22px;}
    .main-sect_01{position: relative; overflow: hidden;}
    .section-tit-img{width: 194px;margin-top: 0;position: absolute;top: -30px;right: -25px;}
    .sect-01-cont .sect-01--img{width: 60px; height: 60px;}
    .sect-01-cont > li{justify-content: space-between; align-items: flex-start;}
    .sect-01-cont > li:not(:last-child){margin-bottom: 35px;}
    .sect-01-cont > li:nth-child(1) .sect-01--img .ico_cir{width: 26px; height: 26px;}
    .sect-01-cont > li:nth-child(2) .sect-01--img .ico_cir{width: 20px; height: 25px;}
    .sect-01-cont > li:nth-child(3) .sect-01--img .ico_cir{width: 31px; height: 27px;}
    .main-sect_01 .section-cont{margin-top: 40px;}
    .sect-01--txt{width: calc(100% - 70px); margin-left: 0;}
    .sect-01--txt .sect-01__top{font-size: 18px;}
    .sect-01--txt .sect-01__info{font-size: 12px; margin-top: 10px; line-height: 18px;}
    .sect-01--txt .sect-01__info br{display: none;}
    
    .main-sect-02{padding-top: 100px; margin-top: 60px;}
    .main-sect-02 .section-tit{padding-left: 0;}
    .main-sect-02--slide .section-cont{width: 100%;margin-top: -20px;}
    .main-sect-02--slide li:nth-child(1) .section-cont{margin-left: 15px;}
    .section-slide .main-sect-02--slide .swiper-wrapper{display: flex;}
    .section-slide .main-sect-02--slide .swiper-slide .inner{display: flex; flex-direction: column-reverse;}
    .main-sect-02--slide li:after{display: none;}
    .section-slide .main-sect-02--slide .swiper-slide{height: 100%;}
    .section-tit-wrap{display: flex; justify-content: space-between; align-items: flex-start;}
    .main-sect-02-slide--control{margin-top: 0;}
    .main-sect-02-slide--control .swiper-pagination{width: 60px;height: 40px;font-size: 14px;padding: 0;}
    .main-sect-02-slide--control .swiper-button > div{width: 40px; height: 40px;}
    .main-sect-02-slide--control .swiper-button > div{margin-left: 13px;}
    .main-sect-02--slide .sect-02-img{max-width: 250px;width: 100%;margin: 0 auto;}
    .main-sect-02--cont{margin-top: 30px;}
    .main-sect-02--cont .sect-02-tit{font-size: 18px; padding-left: 10px;}
    .sect-02-list {margin-top: 13px;}
    .sect-02-list > li{padding-left: 13px; font-size: 12px; line-height: 20px;}
    .sect-02-list > li:before{left: 0;}
    .sect-02-list > li br{display: none;}
    
    .main-sect_03 {padding-bottom: 50px; margin-top: 40px;}
    .main-sect_03 .section-tit{align-items: flex-start;}
    .main-sect_03 .section-tit-img{width: 231px;margin-top: 0;z-index: 1;}
    .sect-03-cont{margin-top: 40px; position: relative; z-index: 1;}
    .sect-03-cont > li{width: calc(100% / 2 - 15px ); height: 48px; margin-bottom: 20px;}
    .sect-03-cont > li:not(:nth-child(3n)){margin-right: 0;}
    .sect-03-cont > li:not(:nth-child(2n)){margin-right: 20px;}
    .sect-03-img{max-width: 121px;}



    @-webkit-keyframes aniPrgressbar { from { height: 0; } to { height: 15px; } }
    @keyframes aniPrgressbar { from { height: 0; } to { height: 15px; } }
}