/* 공통 */
h3{font-size: 3em; font-weight: 700;}
h3 + p{font-size: 1.5em;}

/* 아이콘 */
.ico-recruit01{}
.ico-recruit02{}
.ico-recruit03{}
.ico-link:after{width: 31px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='16' fill='none'%3E%3Cg stroke='%23000' stroke-linecap='square' stroke-width='1.5'%3E%3Cpath d='M27.5 8h-26M23 1.976 29.05 8 23 14.024'/%3E%3C/g%3E%3C/svg%3E");}

/* 버튼 */
.btn:hover{background: inherit; color: inherit;}
.btn-history-link{display: inline-flex; justify-content: center; align-items: center; width: 395px; height: 96px; border-radius: 100px; border: 2px solid var(--point-color); background: rgba(0, 0, 0, 0.80); color: var(--point-color); font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/* 최상단 비주얼 슬라이드 */
.swiper{width: 100%; height: 100%; position: relative;}
.swiper-slide{display: flex; justify-content: center; align-items: center; position: relative;}

.swiper-slide h1 img,
.swiper-slide h2 img{width: auto;}

/* 세로 슬라이드 */
.swiper-v{}
.swiper-pagination-swiperv{opacity: 0;}

/* 가로 슬라이드 */
.visual-sec{}
.visual-sec .text-box{max-width: 1920px; position: absolute; left: 50%; top: 50%; width: 100%; padding: 0 100px; transform: translate(-50%, -60%); z-index: 10;}
.visual-sec .text-box > h3{transform: translateY(20px); opacity: 0; transition: 1s 0.2s;}
.visual-sec .text-box > p{font-size: 1.6em; transform: translateY(20px); opacity: 0; word-break: keep-all; transition: 1s 0.4s;}
.visual-sec .swiper-slide-active .text-box > h3,
.visual-sec .swiper-slide-active .text-box > p{transform: translateY(0); opacity: 1;}

.visual-sec picture{display: block; width: 100%; height: 100vh; overflow: hidden;}
.visual-sec picture:after{content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4);}
.visual-sec img{transform: scale(1.1); transition: 1.5s 0.1s;}
.visual-sec .swiper-slide img{display: block; width: 100%; height: 100%; object-fit: cover;}
.visual-sec .swiper-slide-active img{transform: scale(1.0);}

.visual-sec .all-box{display: inline-flex; width: 100%; height: 50px; position: absolute; left: 50%; bottom: 10px; padding: 0 100px; transform: translate(-50%, -50%); z-index: 20 }
.visual-sec .progress-box{position: relative; width: 100%; height: 50px; z-index: 11;}
.autoplay-progress{width: calc(100% - 100px); height: 3px; position: absolute; left: 50px; top: 10px; background-color: rgba(0, 0, 0, 0.1); overflow: hidden; z-index: 10;}
.autoplay-progress svg{--progress: 0; position: absolute; left: 0; top: 0; z-index: 10; width: 100%; stroke-width: 4px; stroke: #fff; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100;}

.visual-sec .swiper-pagination{display: flex; justify-content: space-between; position: static; text-align: left;}
.visual-sec .swiper-pagination span{color: #fff;}
.visual-sec .arrow-box{position: relative; width: 80px; height: 50px;}
.visual-sec .swiper-button-next,
.visual-sec .swiper-button-prev{width: 21px; height: 21px; top: 0; margin-top: 0; background: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-left-fff.svg) no-repeat center / 100%;}
.visual-sec .swiper-button-next{background-image: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-right-fff.svg);}
.visual-sec .swiper-button-next::after,
.visual-sec .swiper-button-prev::after{font-size: 0;}
@media screen and (max-width: 480px){
    .visual-sec .text-box{left: 46%;}
    .visual-sec .text-box > h3{font-size: 1.2em;}
    .visual-sec .text-box > p{font-size: 0.8em}
}

/* 서비스 슬라이드 */
.service-sec{background: url(../images/main/main-service-bg.png) no-repeat center center/cover;}
.service-sec .inner{width: 100%; padding: 100px; max-width: 1920px;}
.service-sec ul{margin-top: 85px; justify-content: center;}
.service-sec ul li{}
.service-sec ul li a{display: block;}
.service-sec ul li a img{width: 100%;}

/* 연혁 슬라이드 */
.history-sec{background: url(../images/main/main-history-bg.jpg) no-repeat center center/cover;}
.history-sec:before{content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(36, 36, 36, 0.70);}
.history-sec .inner{width: 100%; padding: 100px; text-align: center; position: relative; z-index: 1;}
.history-sec h3{font-size: 4em;}
.history-sec ul{display: flex; flex-direction: column; gap: 50px 0; margin-top: 20%;}
.history-sec ul li{color: #fff; font-size: 50px; word-break: keep-all; font-weight: bold;}
.history-sec ul li *{color: #fff; font-size: 50px;}
.history-sec ul li:nth-child(n+2){opacity: 0.3;}
.history-sec-en h3{font-size: 3.2em;}
.history-sec-en ul{gap: 20px 0;}
.history-sec-en ul li{font-size: 32px;}
.history-sec-en ul li *{font-size: 32px;}


/* 뉴스&공지 슬라이드 */
.news-sec{background: #eee;}
.news-sec .inner{width: 100%; padding: 100px; max-width: 1920px;}
.news-list{border-top: 1px solid #979797; margin-top: 70px;}
.news-list li{font-size: 24px; gap: 0 80px; padding: 50px 0; border-bottom: 1px solid #DBDBDB;}
.news-list .date{width: 120px;}
.news-list .title{}
.news-list .title *{display: inline-block;}
.news-list .title p{max-width: 80%; vertical-align: top;}
.news-list .title p strong{font-size: 30px;}

/* 채용 슬라이드 */
.recruit-sec{background: url(../images/main/main-recruit-bg.png) no-repeat center center/cover;}
.recruit-sec:before{width: 100%; height: 100%; content: " "; position: absolute; top: 0; left: 0; background: url(../images/main/main-recruit-ly.png) no-repeat center center/cover;}
.recruit-sec .inner{width: 100%; padding: 100px; max-width: 1920px; position: relative; z-index: 1;}
.recruit-sec ul{margin-top: 85px; justify-content: center;}
.recruit-sec ul li{display: inline-flex; height: auto;}
.recruit-sec ul li a{position: relative; background: #fff; padding: 15% 10%; gap: 15px 0; border-radius: 5px;}
.recruit-sec ul li a p strong{font-size: 40px;}
.recruit-sec ul li a p{/*word-break: keep-all;*/ word-break: break-all;}
.recruit-sec ul li:nth-of-type(1) a:after{content: " "; position: absolute; top: 15%; right: 10%; background: url(../images/icon/ico-recruit01.png) no-repeat 0 0; width: 70px; height: 70px;}
.recruit-sec ul li:nth-of-type(2) a:after{content: " "; position: absolute; top: 15%; right: 10%; background: url(../images/icon/ico-recruit02.png) no-repeat 0 0; width: 70px; height: 70px;}
.recruit-sec ul li:nth-of-type(3) a:after{content: " "; position: absolute; top: 15%; right: 10%; background: url(../images/icon/ico-recruit03.png) no-repeat 0 0; width: 87px; height: 87px;}

/* 메인 푸터 슬라이드 */
footer{border-top: 0; margin-top: 0;}
.swiper-slide.footer-swiper-slide {height: auto !important; /*padding-top: 100px;*/}


@media screen and (max-width: 991px) {
    /* 공통 */
    .btn-go-top{display: none;}
    h3{font-size: calc(50px / 2);}
    h3 + p{font-size: calc(30px / 2); margin-top: calc(15px / 2);}

    /* 아이콘 */
    .ico-link:after{width: calc(40px / 2); height: calc(18px / 2);}

    /* 버튼 */
    .btn-history-link{width: 395px; height: 96px; border-radius: 100px; border: 2px solid var(--point-color); background: rgba(0, 0, 0, 0.80); color: var(--point-color); font-size: 24px; position: relative; bottom: initial; left: 0; transform: none;}

    /* 가로 슬라이드 */
    .visual-sec{}
    .visual-sec .text-box{padding: 0 calc(40px / 2); top: 45%; left: 0; transform: none;}
    .visual-sec .text-box > h3{font-size: calc(80px / 2);}
    .visual-sec .text-box > p{font-size: calc(30px / 2);}
    .visual-sec .all-box{padding: 0 calc(40px / 2);}

    /* 서비스 슬라이드 */
    .service-sec .inner{padding: calc(40px / 2);}
    .service-sec ul{margin-top: calc(70px / 2); gap: calc(50px / 2) 0;}
    .service-sec ul li{max-width: 100%;}
    .service-sec ul li a{display: flex; gap: 0 calc(30px / 2); align-items: center; position: relative;}
    .service-sec ul li a span{flex: 0 0 60%;}
    .service-sec ul li a span.thumb{flex: 0 0 40%}
    .service-sec ul li a img{}
    .service-sec ul li a p{display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; padding-right: 30px;}
    .service-sec ul li a .ico{position: absolute; top: 4px; right: 0;}

    /* 연혁 슬라이드 */
    .history-sec .inner{padding: calc(40px / 2); text-align: left;}
    .history-sec h3{font-size: calc(50px / 2);}
    .history-sec a{width: fit-content; height: auto; margin-top: calc(50px / 2); padding: calc(20px / 2) calc(80px / 2); font-size: calc(24px / 2);}
    .history-sec ul{gap: calc(70px / 2) 0; margin-top: calc(100px / 2);}
    .history-sec ul li{font-size: calc(36px / 2);}
    .history-sec ul li *{font-size: calc(36px / 2);}
    .history-sec ul li:nth-child(n+2){opacity: 1;}
    .history-sec ul li span{display: block; opacity: 0.3 !important;}

    /* 뉴스&공지 슬라이드 */
    .news-sec{}
    .news-sec .inner{padding: 0 calc(40px / 2);}
    .news-sec .inner > span{font-size: calc(30px / 2);}
    .news-list{margin-top: calc(100px / 2);}
    .news-list li{padding: calc(40px / 2) 0 calc(50px / 2); flex-direction: column-reverse; position: relative;}
    .news-list .title{display: flex; flex-direction: column;}
    .news-list .title p{max-width: 100%; margin-top: calc(30px / 2);}
    .news-list .title p strong{font-size: calc(30px / 2);}
    .news-list li .view{position: absolute; bottom: calc(50px / 2); right: 0;}
    .news-list .date{font-size: calc(24px / 2); margin-top: calc(30px / 2);}

    /* 채용 슬라이드 */
    .recruit-sec .inner{padding: calc(40px / 2); text-align: left;}
    .recruit-sec ul{gap: calc(30px / 2) 0; margin-top: calc(70px / 2);}
    .recruit-sec ul li a{padding: 20px; border-radius: calc(5px / 2);}
    .recruit-sec ul li a:after{display: none;}
    .recruit-sec ul li a .view{position: absolute; top: 20px; right: 20px;}
    .recruit-sec ul li a p{font-size: calc(24px / 2);}
    .recruit-sec ul li a p strong{font-size: calc(30px / 2);}
    
    /* 메인 푸터 슬라이드 */
    .swiper-slide.footer-swiper-slide{padding-top: 0;}
    .footer-swiper-slide .inner{padding: 20px 10px;}
}