@charset "UTF-8";
.wrap{opacity: 0; animation: .3s ease-in-out 0s 1 normal forwards running opacity;}
@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

section{position: relative; max-height: 750px; height: 100dvh; z-index: 1;}
/* .banner.active-section{margin-top: 70px;} */
section > div{margin: 0 auto; width: 100%; max-width: 1440px; padding: 0 208px;}

/* 배너 */
.banner > div{max-width: none; padding: 0; max-height: 750px;}
.banner .banner-wrap{position: relative; margin: 68px auto 0; height: 100%; width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden;}
.banner .banner-wrap .slide-wrap{max-width: 1440px; width: 100%; height: 100%; position: relative; padding: 0 208px; display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 30px;}
.left-contents{z-index: 2; display: -webkit-flex; display: flex; flex-direction: column; gap: 32px; color: var(--primary);}
.left-contents .title01{animation: 1s ease-in-out .3s 1 normal forwards running upper_transform;}
.left-contents .text01-500{animation: 1s ease-in-out 0.8s 1 normal forwards running upper_transform;}
.left-contents .text01-500 > span{display: -webkit-flex; display: flex;}
.left-contents .title01.mo{display: none;}
.store-btns{display: -webkit-flex; display: flex; gap: 10px;}
.store-btns .store-btn{display: -webkit-flex; display: flex; width: 180px; height: 56px; align-items: center; justify-content: center; gap: 8px; background: var(--primary, #202020); border-radius: 6px;}
.store-btns .store-btn > span{font-size: 18px; font-weight: 600; line-height: normal; color: #fff;}
.right-contents .img-wrap{position: absolute; top: 50%; transform: translateY(-50%); right: 130px; max-width: 590px; height: 407.5px; flex-shrink: 0;}
.right-contents .img-wrap > img{width: 100%; height: 100%;}
/* 배너 */

#section-top .banner-wrap{margin-top: 100px;}


/* 서비스 지표 */
.service{background-color: #fff; max-height: 600px; padding-top: 70px;}
.service > div{height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 60px;}
.service .text-wrap{text-align: center; animation: 1s ease-in-out .3s 1 normal forwards running upper_transform;}
.service .text-wrap .title02, .service .text-wrap .text01{color: #000;}
.service .flex-container{height: 180px; display: -webkit-flex; display: flex;  gap: 24px; width: 100%;}
/* .service .flex-box{flex: 1 0 0; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 20px; background-color: #555; border-radius: 12px; box-shadow: 0 1px 4px 0 rgb(12, 12, 13, 0.5);} */
.service .flex-box{flex: 1 0 0; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 20px; 
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 47.04%, rgba(0, 0, 0, 0.00) 78.36%), lightgray 50% / cover no-repeat;}
.service .flex-box .title02{color: #fff;}
.service .flex-box .text{color: #e4e4e4;}
.service .text2{color: #fff; font-size: 14px; line-height: 30px;}
/* 서비스 지표 */


/* 광고 특장점 */
.character{background-color: #ccc; max-height: 594px;}
.character > div{padding: 100px 208px; height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 60px;}
.character .text-wrap{text-align: center; animation: 1s ease-in-out .3s 1 normal forwards running upper_transform;}
.character .text-wrap .title02{color: #fff; font-size: 36px; line-height: 144.4%;}
.character .flex-container{display: -webkit-flex; display: flex;  gap: 24px; width: 100%;}
.character .flex-box{flex: 1 0 0; display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 32px; background-color: #fff; border-radius: 12px;}
.character .flex-box .text-wrap{animation: none; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: left;}
.character .flex-box .text01{color: var(--primary); font-weight: 700; line-height: normal;}
.character .flex-box .text{color: #484848; line-height: 1.5;}
/* 광고 특장점 */


/* nav-bar */
/* .nav-bar{height: auto;}
.nav-bar > div{padding: 120px 0 60px; display: flex; flex-direction: column; gap: 40px; align-items: center;}
.nav-bar .title{font-size: 36px; line-height: 144.444%; color: #000; font-weight: 700; text-align: center;}
.nav-bar .title > span{display: block;}
.nav-bar .btn-wrap{display: -webkit-flex; display: flex; gap: 12px; justify-content: center;}
.nav-bar .btn-wrap .link-btn{color: #000; font-weight: 500; font-size: 16px; line-height: normal; padding: 16px 20px; width: 160px; text-align: center; background-color: #fff; border: 1px solid #cbd2dc; border-radius: 12px; transition: all .3s;}
.nav-bar .btn-wrap .link-btn:hover, .nav-bar .btn-wrap .link-btn.active{border-color: #2F83F7; background-color: #2F83F7; color: #fff;}
.nav-bar .btn-wrap .link-btn:first-child{min-width: auto;} */

.nav-bar {
    height: auto;
    position: sticky; /* 스크롤 시 고정 */
    top: 0; /* 페이지 상단에 고정 */
    background-color: transparent; /* 배경색을 설정하여 다른 콘텐츠와 구분 */
    z-index: 1000; /* 다른 요소 위에 표시되도록 z-index 설정 */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  */
}

.nav-bar > div {
    padding: 90px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.nav-bar .title {
    font-size: 35px;
    line-height: 144.444%;
    color: #000;
    font-weight: 700;
    text-align: center;
}

.nav-bar .title > span {
    display: block;
}

.nav-bar .btn-wrap {
    display: -webkit-flex;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.nav-bar .btn-wrap .link-btn {
    color: #000;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    padding: 16px 15px;
    flex: 1; /* 동일한 비율로 공간 차지 */
    min-width: 150px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #cbd2dc;
    border-radius: 10px;
    transition: all .3s;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.nav-bar .btn-wrap .link-btn:hover,
.nav-bar .btn-wrap .link-btn.active {
    border-color: #651f4a;
    background-color: #651f4a;
    color: #fff;
}

.nav-bar .btn-wrap .link-btn:first-child {
    min-width: auto;
}


/* 모바일 대응 */
@media screen and (max-width: 768px) {
    .nav-bar .btn-wrap {
        flex-wrap: wrap; /* 모바일에서는 버튼 줄바꿈 허용 */
    }
    
    .nav-bar .btn-wrap .link-btn {
        flex: 1 1 40%; /* 모바일에서 2개씩 배치 */
    }
}
/* nav-bar */


/* 전체 화면 광고 */
.flex-flow > div{display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 224px;}
.flex-container{justify-content: space-between;}
.text-wrap{z-index: 2; display: -webkit-flex; display: flex; flex-direction: column; gap: 10px;}
.active-section .text-wrap.ani-upper{animation: 1s ease-in-out 0s 1 normal forwards running upper_transform;}
.flex-flow .text-wrap.ani-upper{animation: 1s ease-in-out 0s 1 normal forwards running upper_transform;}
.text-wrap .text01{color: #484848;}
.contents-wrap{display: -webkit-flex; display: flex; align-items: center; position: relative; height: 100%; max-width: 334px; flex-shrink: 0; max-height: 740px;}
.contents-wrap img{height: 485px;}
.contents-wrap .add{background: #fff; border-radius: 12px; position: absolute; width: 283px; height: auto; left: -26px; padding: 8px; display: flex; gap: 8px; align-items: center; box-shadow: 0 1px 4px 0 rgb(12, 12, 13, 0.5);}
.contents-wrap .add > img{width: 79px; height: 74px; flex-shrink: 0;}
.contents-wrap .add .ad{position: absolute; top: 13px; right: 12px; font-size: 6px; color: #707070; border-radius: 2px; border: .5px solid #aeaeae; display: inline-block; padding: 2px 3px;}
.contents-wrap .add .title{font-size: 11px; color: #000; line-height: 16px; font-weight: 600; letter-spacing: -.5px;}
.contents-wrap .add .title > span{display: block;}
.contents-wrap .add .title > span .percent{font-weight: 700;}
.contents-wrap .add .text{font-size: 8px; color: #707070; line-height: normal;}
/* 전체 화면 광고 */

.ending > div,.addon > div{flex-flow: row-reverse;}


/* 광고 집행 절차 */
/* .procedure{background-color: #8d8996; max-height: 523px;} */
.procedure{background: url(/img/banner_background3.png) center / cover no-repeat; max-height: 523px;}
.procedure > div{padding: 100px 208px; height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 60px;}
.procedure .text-wrap{text-align: center; animation: 1s ease-in-out .3s 1 normal forwards running upper_transform;}
.procedure .text-wrap .title02{color: #fff; font-size: 36px; line-height: 144.4%;}
.procedure .flex-container{display: -webkit-flex; display: flex;  gap: 24px; width: 100%;}
.procedure .flex-box{max-height: 300px; height: 100%; flex: 1 0 0; display: -webkit-flex; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 15px; background-color: #fff; border-radius: 12px;}
.procedure .flex-box .icon{height: 60px; display: -webkit-flex; display: flex; align-items: center; margin-top: 5%;}
.procedure .flex-box .text-wrap{animation: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left;}
.procedure .flex-box .text01{color: #000; font-weight: 700; line-height: normal; font-size: 20px;}
.procedure .flex-box .text{color: #202020; line-height: 1.5; letter-spacing: -.5px; font-size: 16px;}
/* 광고 집행 절차 */


/* 광고 문의하기 */
.connect{height: auto; padding: 60px 0;}
.connect > div{height: auto;}
/* .connect-container{background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 47.04%, rgba(0, 0, 0, 0.00) 78.36%), url(/img/banner_background3.png) lightgray 50% / cover no-repeat; color: #fff; display: flex; flex-direction: column; gap: 12px; padding: 40px; border-radius: 20px;} */
.connect-container{background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 47.04%, rgba(0, 0, 0, 0.00) 78.36%), lightgray 50% / cover no-repeat; color: #fff; display: flex; flex-direction: column; gap: 12px; padding: 40px; border-radius: 20px;}
.connect-container .title{font-size: 24px; line-height: normal; font-weight: 500;}
.connect-container .tel{font-size: 36px; font-weight: 700; line-height: 52px;}
.connect-container .mail, .connect-container address{line-height: normal;}
/* 광고 문의하기 */


/* 공유하기 */
.sharing{height: auto;}
.sharing > div{max-height: 325px; padding: 70px;}
.sharing.fp-section.fp-table, .sharing .fp-tableCell {height:auto !important; width: 100%;} 
.sharing .share-box{display: -webkit-flex; display: flex; flex-direction: column; gap: 24px; align-items: center;}
.sharing .share-sns{display: -webkit-flex; display: flex; gap: 16px;}
.sharing .share-sns > a{display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; flex-shrink: 0; padding: 18px 19px; border-radius: 16px;}
.kakao-link{background-color: #FEE500;}
.fb-link{background-color: #044ABA;}
.share-link{background-color: #707070;}
/* 공유하기 */


/* 태블릿 */
@media screen and (max-width: 1024px) {
    section{max-height: none; height: auto;}
    section > div{padding: 100px 20px; flex-direction: column;}
    .title02,.text01 {align-items: flex-start; text-align: left;}
    .banner > div{max-height: none;}
    .service{padding: 0;}
    .service .flex-container{flex-direction: column;}
    .flex-flow > div{flex-direction: row; gap: 60px;}
    .addon > div, .ending > div{flex-flow: row-reverse;}
    .banner .banner-wrap .slide-wrap{padding: 100px 20px; gap: 60px; align-items: center;}
    .right-contents .img-wrap{position: static; transform: none;}
    .service .flex-container{flex-direction: row;}
    .service .text-wrap .title02, .service .text-wrap .text01{align-items: center; text-align: center;}
    .character{padding: 100px 20px; max-height: none;}
    .character > div{padding: 0;}
    .character .flex-container{flex-direction: column;}
    .character .flex-box{width: 100%;}
    .procedure{max-height: none;}
    .procedure > div{padding: 100px 20px;}
    .procedure .flex-container{display: grid; grid-template-columns: 205px 24px 205px; justify-content: center;}
    .procedure .flex-container .tablet{display: none;}
    .connect{padding: 0;}
    .connect > div{padding: 60px 20px 0;}
}
@media screen and (max-width: 768px) {
    .banner .banner-wrap .slide-wrap{gap: 32px;}
}
/* 태블릿 */


@media screen and (max-width: 650px) {
    .title04, .title01, .title02, .text01{align-items: center; text-align: center;}

    .service{max-height: none;}
    .service .flex-container{height: auto; flex-direction: column;}
    .service .flex-container .flex-box{width: 100%;}
    .nav-bar .btn-wrap{flex-wrap: wrap;}
    .flex-flow > div{flex-direction: column; align-items: center;}
}


/* 모바일 */
@media screen and (max-width: 480px) {
    .banner .banner-wrap .slide-wrap{padding: 48px 11px;}
    .right-contents .img-wrap{height: 206px;}
    .right-contents .img-wrap > img{transform: scale(1.2);}
    .left-contents{text-align: center;}
    .procedure .flex-container{display: flex; flex-direction: column; gap: 12px;}
    .procedure .flex-container .arrow-right{transform: rotate(90deg);}
    .procedure .flex-container .tablet{display: inline-block;}
    .procedure .flex-box{flex-direction: row; width: 100%; align-items: flex-start;}

    .flex-flow > div{padding: 60px 20px;}
    .connect-container{padding: 40px 20px;}
    /* 공유하기 */
    .sharing .share-box{padding: 50px 0;}
    .sharing .share-sns > a{width: 56px; height: 56px; padding: 15px 11px;}
    .kakao-link > svg{width: 24px;}
    .fb-link > svg{width: 15px;}
    .share-link > svg{width: 29px;}
    /* 공유하기 */
}
@media screen and (max-width: 320px) {
    .icons .icon1{top: -49px; left:-26px;}
    .icons .icon2{right: -21px;}
    .icons .icon3{bottom: -37px; right: -14px;}
    .buy .contents-wrap .market-list{width: 270px; top: 100px; left: -10px;}
    .message-wrap.blue-message{right: -14px;}
    .message-wrap.gray-message{left: -10px;}
}
/* 모바일 */