.top{background: url(../img/ceo/top-bg.png) center top / cover no-repeat;}

.type-list{margin-top:70px;display: flex; align-items: center; justify-content: center;}
.type-list .type-item{ width:50%; height: auto; border-bottom: 4px  solid #EAEEF3;display: flex; justify-content: center; align-items: center; }
.type-list .type-item a{ padding: 20px 10px; width: 100%; height: 100%; color: var(--black, #29303A); text-align: center; font-family: Pretendard; font-size: 32px; font-style: normal; font-weight: 500; line-height: normal;}
.type-list .type-item.on{border-bottom: 4px solid #000;}
.type-list .type-item:hover{border-bottom: 4px solid #000; transition:all 0.8s ease-in-out;}

.swiper-wrap{position: relative; margin-top: 48px;}
.swiper { width: 100%; height: 820px; }

.swiper-slide {background-position: center center; background-size: cover;}
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;}
.swiper-slide img.no-img{opacity: 0;}
.mySwiper > .swiper-button-next,
.mySwiper > .swiper-button-prev{color:#fff; padding: 80px 30px; opacity: 0.9; background: #29303A; transform: translateY(-50%); }
.mySwiper > .swiper-button-next{right: 0; border-radius: 40px 0 0 40px;}
.mySwiper > .swiper-button-prev{ left: 0; border-radius: 0 40px 40px 0;}
.mySwiper > .swiper-button-next:after,
.mySwiper > .swiper-button-prev:after{font-weight: bold; font-size: 32px;}

.mySwiper > .swiper-button-next.swiper-button-disabled,
.mySwiper > .swiper-button-prev.swiper-button-disabled{opacity: .7;}

.swiper-text{margin-top: 18px; color: var(--black, #29303A); text-align: center; font-family: 'Pretendard'; font-size: 32px; font-style: normal; font-weight: 600; line-height: 36px;}

.members{display: none;}
.members.on{display: block;}

.message{display: none;}
.message.on{display: block;}

.display-pc{display: block;}
.display-mo{display: none;}

.message .content-wrap{margin-top: 60px; position: relative;}
.message .content-wrap .message-bg{width: 100%; height: 100%; box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.20);}

/* .popup-open{position: absolute;}
.popup-open[data-attr='1']{left: 0;}
.popup-open[data-attr='2']{left: 200px;}
.popup-open[data-attr='3']{left: 400px;}
.popup-open[data-attr='4']{left: 600px;}
.popup-open[data-attr='5']{left: 800px;} */


.popup-wrap{display: flex; align-items: center; justify-content: center; position: fixed; top: 100%; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999;}
.popup-wrap.on{top: 0;}

.popup-wrap .popup{position: absolute; opacity:0; top: 0; max-width: 100%; width: 1300px; transition: 0.5s ease-in; transition-property: opacity,top; height: auto; max-height: 100%;}
.popup-wrap.on .popup{opacity:1; top: 50%; transform: translateY(-50%); transition: 0.5s ease-in; transition-property: opacity,top;}

.popup-wrap .popup .popup-btn-wrap{display: block; width: 100%; line-height: 0; text-align: right;}
.popup-wrap .popup .popup-btn-wrap .close-btn{line-height: 0;}
.popup-wrap .popup .popup-content{transition: all 0.5s ease-in; margin-top: 20px; padding: 22px 50px 40px 50px; background-color: #D6EBFF;}
.popup-top{position: relative;}
.popup-tit{margin-bottom: 32px; padding-top: 20px; text-align: center; color: #466B8D; font-family: 'Pretendard'; font-size: 30px; font-style: normal; font-weight: 400; line-height: 26px;}
.slt-wrap{position: absolute; top: 0; right: 0;}
.popup-slt{position: relative;}
.slt-member{width: 300px; padding: 19px 43px 19px 13px; background: #fff; border: 1px solid var(--gray2, #C0C8D3); color: var(--black, #29303A); font-family: 'Pretendard'; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.slt-arrow{pointer-events: none; position: absolute; top: 25%; right: 11px; background:url(../img/anniversary/message/slt-arrow.png) 100% / 100% no-repeat; width: 35px; height: 35px;}
.slt-member option:checked{padding: 18px 11px;}

.popup-body{display: none; max-height: 600px; overflow: scroll; border-radius: 30px; padding: 50px 54px; background-color: var(--white, #FFF); box-shadow: 15px 15px 30px rgba(175, 204, 233, 0.70);-ms-overflow-style: none; scrollbar-width: none;}
.popup-body.on{display: block;}
.popup-body::-webkit-scrollbar { display: none; }
.popup-body > div + div{margin-top:50px;}
.question{display: flex; align-items: center; justify-content: flex-start;}
.question-box{word-break: keep-all; text-align: left; border-radius: 5px; background: #F9FAFD; padding: 20px 28px; color: var(--gray3, #98A7BC); font-family: 'Pretendard'; font-size: 20px; font-style: normal; font-weight: 400; line-height: 26px;}
.question-arrow{line-height: 0;}
.question-arrow > img{min-width: 16px; height: 20px; transform: rotate(90deg);}

.answer-top{display: flex; align-items: center; gap: 12px;}
.name{color: var(--black, #29303A); font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 400; line-height: 26px;}
.answer-body{margin-top: 15px; display: flex; align-items: center; justify-content: flex-start;}
.answer-box{word-break: keep-all; padding: 20px 28px; border-radius: 5px; border: 1px solid var(--gray2, #C0C8D3); background: var(--white, #FFF); color: #000; font-family: 'Pretendard'; font-size: 20px; font-style: normal;  font-weight: 400; line-height: 26px;}
.answer-arrow{line-height: 0;}
.answer-arrow > img{min-width: 16px; height: 20px;}
.answer-box >img{float: right; margin: 10px 0 0 10px;}


.content-wrap .tit-wrap{text-align: center;}
.content-wrap .tit-mo{padding: 0 10px; display: inline-block; background: linear-gradient(to top, #faea76 40%, transparent 20%); color: var(--black, #29303A); font-family: 'Pretendard'; font-size: 32px; font-style: normal; font-weight: 500; line-height: normal;}
.content-wrap .tit-mo .span-i{color: #084160;}
.content-wrap .tit-mo .span-b{color: #0f7fbc;}
.message-list{margin-top: 20px; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;}
.message-list .list-item{display: flex; flex-direction: column; gap: 4px; width: 200px; height: auto;}
.message-list .list-item > img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.message-list .list-item p{ text-align: center;  font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal;}

@media (max-width:1640px) {

    .tap-list .tap-item a{padding: 25px 10px; font-size: 22px;}
    .swiper{height: 60vw; }
    .mySwiper > .swiper-button-next{border-radius: 40px 0 0 40px;}
    .mySwiper > .swiper-button-prev{border-radius: 0 40px 40px 0;}
    .mySwiper > .swiper-button-next,
    .mySwiper > .swiper-button-prev{padding: 80px 30px;}
    .mySwiper > .swiper-button-next:after,
    .mySwiper > .swiper-button-prev:after{font-size: 26px}
    
    .etc .year{width: 300px;}
    .region-item{gap: 10px;}
    .region-tit{font-size: 26px; line-height: 36px;}
    .region-exp{font-size: 22px; line-height: 32px;}
    .before{font-size: 26px; line-height: 36px;}

    .tnn-footer{margin-top: 20px; font-size: 28px; line-height: 32px;}
    .tnn-footer .left,
    .tnn-footer .right
    {font-size: 28px; line-height: 32px;}
    .tnn-footer i.i-con{height: 20px;}

    .popup-wrap .popup{width: 1000px;}
}

@media (max-width:1024px) {

    .type-list{margin-top:40px;}
    .type-list .type-item a{padding: 20px 10px; font-size: 26px;}

    .swiper{height: 60vw;}

    .mySwiper > .swiper-button-next{border-radius: 30px 0 0 30px;}
    .mySwiper > .swiper-button-prev{border-radius: 0 30px 30px 0;}
    .mySwiper > .swiper-button-next,
    .mySwiper > .swiper-button-prev{padding: 60px 20px;}
    .mySwiper > .swiper-button-next:after,
    .mySwiper > .swiper-button-prev:after{font-size: 16px}
    .swiper-text{margin-top: 14px; font-size: 20px; line-height: 28px;}
        
    .display-pc{display: none;}
    .display-mo{display: block;}

    .popup-wrap .popup{width: 90%; height: auto;}
    .popup-wrap .popup .popup-btn-wrap .close-btn > img{width: 30px; height: 30px;}
    .popup-wrap .popup .popup-content{margin-top: 10px; padding: 20px 20px 20px 20px;}
    
    .popup-tit{margin-bottom: 12px; padding-top: 6px; font-size: 24px; line-height: normal;}
    .slt-wrap{position: absolute; top: 0; right: 0;}
    .popup-slt{position: relative;}
    .slt-member{width: 120px; padding: 10px 43px 10px 10px; font-size: 16px;}
    .slt-arrow{top: 22%; right: 10px; width: 24px; height: 24px;}

    .popup-body{max-height: 75vh; border-radius: 14px; padding: 12px 12px;}
    .popup-body > div + div{margin-top:20px;}
    .question{margin: 0 0 0 auto; width: calc(100% - 12px);}
    .question-box{padding: 12px 12px; font-size: 14px; line-height: 16px;}
    .question-arrow > img{min-width: 12px; width: 10px; height: auto;}

    .answer{margin: 0 auto 0 0; width: calc(100% - 12px);}
    .answer-top{gap: 8px;}
    .answer-top .icon >img {width: 36px; height: 36px;}
    .name{font-size: 14px; line-height: 16px;}
    .answer-body{margin-top: 8px;}
    .answer-box{padding: 12px 12px; font-size: 14px; line-height: 16px;}
    .answer-arrow > img{min-width: 12px; width: 10px; height: auto;}
    .answer-box > img{max-width: 35px; height: auto; margin: 5px 0 0 5px;}
}

@media (max-width:767px) {
    .type-list{margin-top:20px;}
    .type-list .type-item a{padding: 10px 5px; font-size: 20px;}
    
    .swiper-wrap{margin-top: 20px;}
    .swiper{height: 50vw;}
    
    .mySwiper > .swiper-button-next{border-radius: 14px 0 0 14px;}
    .mySwiper > .swiper-button-prev{border-radius: 0 14px 14px 0;}
    .mySwiper > .swiper-button-next,
    .mySwiper > .swiper-button-prev{padding: 30px 14px; transform:translateY(-25%);}
    .mySwiper > .swiper-button-next:after,
    .mySwiper > .swiper-button-prev:after{font-size: 12px}

    .swiper-text{margin-top: 8px; font-size: 16px; line-height: 24px;}

    .popup-tit{text-align: left;}
}